kobotoolbox / kpi / 25169075772 / 3

82%

master: 76%

push

github

feature(frontend): introduce tabler icons DEV-1430 (#6952)

### 📣 Summary

Introduces `KoboIcon` component for displaying new icons. Adds a future
friendly way of using old icons as SVGs in new component.

### 💭 Notes

Changes here:
- Added `@tabler/icons-react` package for the icons
- Added `@svgr/webpack` package to make it possible to use our old SVGs
- Configure webpack to allow importing old SVGs
- Added `MixedIcon` component that renders both old and new icons
seamlessly - to be used in component that will be using both
- `ActionIcon` component changes
   - Deprecated `iconName` prop (old `k-icon`)
   - Added `icon` prop that allows using Tabler icon
   - Uses `MixedIcon` under the hood
   - Story has now Tabler icon example
- `ButtonNew` component changes
- `leftIcon` and `rightIcon` now accepts all three: old icon (`k-icon`),
old icon as SVG, and new Tabler icon
   - Uses `MixedIcon` under the hood
   - Story has now Tabler icon example
- Deprecated `Icon` component
- Added `KoboIcon` component (our new icon component)
- Has three props: `icon` (Tabler icon), `size` (Mantine sizing), and
`color` (same colors as old `Icon` and allows any string)
- Story has a big table for migration from old icons to new icons (WIP
to be reviewed by @tesster7 )
   - Story has examples of all different (old and new) icon usages
- `KoboIconMappings.ts` file has a map of old (`k-icon`) icons and their
matching pairs from Tabler icons (or `undefined` if there is no pair),
and also some helper functions
- `LegacySvgIconMappings.tsx` file has a list of all old SVGs as
importable components and a map of old (`k-icon`) icons and their
respective importable SVG component
- Example usage of new icons in the UI:
- Project → Form (`FormLanding` component) uses new icon for button that
opens language management modal
- Language management modal (`TranslationSettings` component) uses new
icon for icon buttons that handle management of form languages
- Fixed a bug in `Tooltip... (continued)

4803 of 12022 branches covered (39.95%)

19478 of 36259 relevant lines covered (53.72%)

0.54 hits per line