diff options
Diffstat (limited to 'src/components/molecules')
8 files changed, 34 insertions, 29 deletions
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<HTMLDivElement> & { @@ -38,8 +38,8 @@ export const BackToTop: FC<BackToTopProps> = ({ shape="square" to={anchor} > - {/* eslint-disable-next-line react/jsx-no-literals -- Direction allowed */} - <Arrow aria-hidden direction="top" /> + {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */} + <Icon aria-hidden={true} orientation="top" shape="arrow" /> </ButtonLink> </div> ); 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<HeadingProps, 'level'> & { @@ -61,7 +61,7 @@ export const HeadingButton: FC<HeadingButtonProps> = ({ <span className="screen-reader-text">{titlePrefix} </span> {title} </Heading> - <PlusMinus state={iconState} className={styles.icon} /> + <Icon className={styles.icon} shape={iconState} /> </button> ); }; 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<typeof FlippingLabel> = ({ ...args }) => { const [active, setActive] = useState<boolean>(isActive); + const updateState = useCallback(() => setActive((prev) => !prev), []); return ( - <div onClick={() => setActive(!active)}> - <FlippingLabel isActive={active} {...args} /> - </div> + <button onClick={updateState} type="button"> + <FlippingLabel {...args} isActive={active} /> + </button> ); }; export const Active = Template.bind({}); Active.args = { - children: <MagnifyingGlass />, + children: <Icon shape="magnifying-glass" />, isActive: true, }; export const Inactive = Template.bind({}); Inactive.args = { - children: <MagnifyingGlass />, + children: <Icon shape="magnifying-glass" />, 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<FlippingLabelProps> = ({ <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}> <span className={styles.front}>{children}</span> <span className={styles.back}> - <Close aria-hidden={true} /> + <Icon aria-hidden={true} shape="cross" /> </span> </span> </Label> 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', () => { |