From 837e0e904c40f7b87561c34ca3f49edd5d8d1c52 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 28 Sep 2023 18:03:43 +0200 Subject: 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. --- .../molecules/buttons/back-to-top.module.scss | 6 +----- src/components/molecules/buttons/back-to-top.tsx | 6 +++--- src/components/molecules/buttons/heading-button.tsx | 4 ++-- .../forms/flipping-label/flipping-label.module.scss | 2 -- .../forms/flipping-label/flipping-label.stories.tsx | 17 +++++++++-------- .../molecules/forms/flipping-label/flipping-label.tsx | 6 +++--- src/components/molecules/nav/nav-list.stories.tsx | 11 ++++++++--- src/components/molecules/nav/nav-list.test.tsx | 11 ++++++++--- 8 files changed, 34 insertions(+), 29 deletions(-) (limited to 'src/components/molecules') diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss index 7eae03b..ba746df 100644 --- a/src/components/molecules/buttons/back-to-top.module.scss +++ b/src/components/molecules/buttons/back-to-top.module.scss @@ -6,13 +6,9 @@ height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); padding: 0; - svg { - width: 100%; - } - :global { .arrow-head { - transform: translateY(30%) scale(1.2); + transform: translateX(-9%) translateY(30%) scale(1.2); transition: all 0.45s ease-in-out 0s; } diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx index 6ca6f10..f2e2073 100644 --- a/src/components/molecules/buttons/back-to-top.tsx +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -1,6 +1,6 @@ import type { FC, HTMLAttributes } from 'react'; import { useIntl } from 'react-intl'; -import { Arrow, ButtonLink } from '../../atoms'; +import { ButtonLink, Icon } from '../../atoms'; import styles from './back-to-top.module.scss'; export type BackToTopProps = HTMLAttributes & { @@ -38,8 +38,8 @@ export const BackToTop: FC = ({ shape="square" to={anchor} > - {/* eslint-disable-next-line react/jsx-no-literals -- Direction allowed */} - + {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */} + ); diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx index 97e2c84..3c3eef5 100644 --- a/src/components/molecules/buttons/heading-button.tsx +++ b/src/components/molecules/buttons/heading-button.tsx @@ -1,6 +1,6 @@ import { useCallback, type FC, type SetStateAction } from 'react'; import { useIntl } from 'react-intl'; -import { Heading, type HeadingProps, PlusMinus } from '../../atoms'; +import { Heading, type HeadingProps, Icon } from '../../atoms'; import styles from './heading-button.module.scss'; export type HeadingButtonProps = Pick & { @@ -61,7 +61,7 @@ export const HeadingButton: FC = ({ {titlePrefix} {title} - + ); }; diff --git a/src/components/molecules/forms/flipping-label/flipping-label.module.scss b/src/components/molecules/forms/flipping-label/flipping-label.module.scss index 88ef3ec..4e7947f 100644 --- a/src/components/molecules/forms/flipping-label/flipping-label.module.scss +++ b/src/components/molecules/forms/flipping-label/flipping-label.module.scss @@ -28,8 +28,6 @@ } .wrapper { - --icon-size: 60%; - display: flex; place-content: center; place-items: center; diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx index 3ad3529..bf5724e 100644 --- a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx +++ b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx @@ -1,6 +1,6 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; -import { MagnifyingGlass } from '../../../atoms'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useCallback, useState } from 'react'; +import { Icon } from '../../../atoms'; import { FlippingLabel } from './flipping-label'; export default { @@ -75,22 +75,23 @@ const Template: ComponentStory = ({ ...args }) => { const [active, setActive] = useState(isActive); + const updateState = useCallback(() => setActive((prev) => !prev), []); return ( -
setActive(!active)}> - -
+ ); }; export const Active = Template.bind({}); Active.args = { - children: , + children: , isActive: true, }; export const Inactive = Template.bind({}); Inactive.args = { - children: , + children: , isActive: false, }; diff --git a/src/components/molecules/forms/flipping-label/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx index 3e23915..e9d6a10 100644 --- a/src/components/molecules/forms/flipping-label/flipping-label.tsx +++ b/src/components/molecules/forms/flipping-label/flipping-label.tsx @@ -1,5 +1,5 @@ -import { FC } from 'react'; -import { Close, Label, type LabelProps } from '../../../atoms'; +import type { FC } from 'react'; +import { Icon, Label, type LabelProps } from '../../../atoms'; import styles from './flipping-label.module.scss'; export type FlippingLabelProps = Pick< @@ -29,7 +29,7 @@ export const FlippingLabel: FC = ({ {children} - + 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 = (args) => ( ); const MainNavItems: NavItem[] = [ - { id: 'homeLink', href: '/', label: 'Home', logo: }, - { id: 'contactLink', href: '/contact', label: 'Contact', logo: }, + { id: 'homeLink', href: '/', label: 'Home', logo: }, + { + id: 'contactLink', + href: '/contact', + label: 'Contact', + logo: , + }, ]; 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: }, - { id: 'contactLink', href: '/contact', label: 'Contact', logo: }, + { id: 'homeLink', href: '/', label: 'Home', logo: }, + { + id: 'contactLink', + href: '/contact', + label: 'Contact', + logo: , + }, ]; describe('Nav', () => { -- cgit v1.2.3