diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-28 18:03:43 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:25:00 +0200 |
| commit | 837e0e904c40f7b87561c34ca3f49edd5d8d1c52 (patch) | |
| tree | 37835dd2c84ed770b5719152aab0b74d93c0878c /src/components/molecules/nav | |
| parent | d17d894f398650209c0ddd29502308de8c07bd93 (diff) | |
feat(components): replace icons with a generic Icon component
Sizes are also predefined and can be set using the `size` prop,
so the consumers should no longer adjust the size in CSS.
Diffstat (limited to 'src/components/molecules/nav')
| -rw-r--r-- | src/components/molecules/nav/nav-list.stories.tsx | 11 | ||||
| -rw-r--r-- | src/components/molecules/nav/nav-list.test.tsx | 11 |
2 files changed, 16 insertions, 6 deletions
diff --git a/src/components/molecules/nav/nav-list.stories.tsx b/src/components/molecules/nav/nav-list.stories.tsx index 110a6ca..baaa8df 100644 --- a/src/components/molecules/nav/nav-list.stories.tsx +++ b/src/components/molecules/nav/nav-list.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Envelop, Home } from '../../atoms'; +import { Icon } from '../../atoms'; import { NavList, type NavItem } from './nav-list'; /** @@ -78,8 +78,13 @@ const Template: ComponentStory<typeof NavList> = (args) => ( ); const MainNavItems: NavItem[] = [ - { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> }, - { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> }, + { id: 'homeLink', href: '/', label: 'Home', logo: <Icon shape="home" /> }, + { + id: 'contactLink', + href: '/contact', + label: 'Contact', + logo: <Icon shape="envelop" />, + }, ]; const FooterNavItems: NavItem[] = [ diff --git a/src/components/molecules/nav/nav-list.test.tsx b/src/components/molecules/nav/nav-list.test.tsx index 58437cb..8524e22 100644 --- a/src/components/molecules/nav/nav-list.test.tsx +++ b/src/components/molecules/nav/nav-list.test.tsx @@ -1,11 +1,16 @@ import { describe, expect, it } from '@jest/globals'; import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { Envelop, Home } from '../../atoms'; +import { Icon } from '../../atoms'; import { NavList, type NavItem } from './nav-list'; const navItems: NavItem[] = [ - { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> }, - { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> }, + { id: 'homeLink', href: '/', label: 'Home', logo: <Icon shape="home" /> }, + { + id: 'contactLink', + href: '/contact', + label: 'Contact', + logo: <Icon shape="envelop" />, + }, ]; describe('Nav', () => { |