From be61ffb6fe500cdbfa83b9cd131b8e72779f23c2 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 4 Oct 2023 18:17:35 +0200 Subject: refactor(components): rewrite BackToTop component * replace `link` prop with `anchor` prop * add a `label` prop to let consumer handle the accessible name --- .../molecules/buttons/back-to-top.module.scss | 50 ------------------- .../molecules/buttons/back-to-top.stories.tsx | 47 ------------------ .../molecules/buttons/back-to-top.test.tsx | 14 ------ src/components/molecules/buttons/back-to-top.tsx | 46 ----------------- .../buttons/back-to-top/back-to-top.module.scss | 54 ++++++++++++++++++++ .../buttons/back-to-top/back-to-top.stories.tsx | 58 ++++++++++++++++++++++ .../buttons/back-to-top/back-to-top.test.tsx | 17 +++++++ .../molecules/buttons/back-to-top/back-to-top.tsx | 45 +++++++++++++++++ .../molecules/buttons/back-to-top/index.ts | 1 + 9 files changed, 175 insertions(+), 157 deletions(-) delete mode 100644 src/components/molecules/buttons/back-to-top.module.scss delete mode 100644 src/components/molecules/buttons/back-to-top.stories.tsx delete mode 100644 src/components/molecules/buttons/back-to-top.test.tsx delete mode 100644 src/components/molecules/buttons/back-to-top.tsx create mode 100644 src/components/molecules/buttons/back-to-top/back-to-top.module.scss create mode 100644 src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx create mode 100644 src/components/molecules/buttons/back-to-top/back-to-top.test.tsx create mode 100644 src/components/molecules/buttons/back-to-top/back-to-top.tsx create mode 100644 src/components/molecules/buttons/back-to-top/index.ts (limited to 'src/components/molecules/buttons') diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss deleted file mode 100644 index ba746df..0000000 --- a/src/components/molecules/buttons/back-to-top.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.wrapper { - .link { - width: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); - height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); - padding: 0; - - :global { - .arrow-head { - transform: translateX(-9%) translateY(30%) scale(1.2); - transition: all 0.45s ease-in-out 0s; - } - - .arrow-bar { - opacity: 0; - transform: translateY(30%) scaleY(0); - transition: - transform 0.45s ease-in-out 0s, - opacity 0.1s linear 0.2s; - } - } - - &:hover, - &:focus { - :global { - .arrow-head { - transform: translateY(0) scale(1); - } - - .arrow-bar { - opacity: 1; - transform: translateY(0) scaleY(1); - } - } - - svg { - :global { - animation: pulse 1.2s ease-in-out 0.6s infinite; - } - } - } - - &:active { - svg { - animation-play-state: paused; - } - } - } -} diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx deleted file mode 100644 index 40acd33..0000000 --- a/src/components/molecules/buttons/back-to-top.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { BackToTop as BackToTopComponent } from './back-to-top'; - -/** - * BackToTop - Storybook Meta - */ -export default { - title: 'Molecules/Buttons', - component: BackToTopComponent, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the button wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - to: { - control: { - type: 'text', - }, - description: 'An element id (without hashtag) to use as anchor.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Buttons Stories - Back to top - */ -export const BackToTop = Template.bind({}); -BackToTop.args = { - to: 'top', -}; diff --git a/src/components/molecules/buttons/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top.test.tsx deleted file mode 100644 index a775841..0000000 --- a/src/components/molecules/buttons/back-to-top.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { BackToTop } from './back-to-top'; - -describe('BackToTop', () => { - it('renders a BackToTop link', () => { - const id = 'top'; - - render(); - - expect(rtlScreen.getByRole('link')).toHaveAccessibleName('Back to top'); - expect(rtlScreen.getByRole('link')).toHaveAttribute('href', `#${id}`); - }); -}); diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx deleted file mode 100644 index f2e2073..0000000 --- a/src/components/molecules/buttons/back-to-top.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type { FC, HTMLAttributes } from 'react'; -import { useIntl } from 'react-intl'; -import { ButtonLink, Icon } from '../../atoms'; -import styles from './back-to-top.module.scss'; - -export type BackToTopProps = HTMLAttributes & { - /** - * Define the element id to us as anchor. - */ - to: string; -}; - -/** - * BackToTop component - * - * Render a back to top link. - */ -export const BackToTop: FC = ({ - className = '', - to, - ...props -}) => { - const intl = useIntl(); - const linkName = intl.formatMessage({ - defaultMessage: 'Back to top', - description: 'BackToTop: link text', - id: 'm+SUSR', - }); - const btnClass = `${styles.wrapper} ${className}`; - const anchor = `#${to}`; - - return ( -
- - {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */} - - -
- ); -}; diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top/back-to-top.module.scss new file mode 100644 index 0000000..10171d2 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/back-to-top.module.scss @@ -0,0 +1,54 @@ +@use "../../../../styles/abstracts/functions" as fun; + +.link { + --button-height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); + + height: var(--button-height); + padding: 0; + + svg { + max-width: 100%; + max-height: 100%; + } + + :global { + .arrow-head { + transform: translateX(-10%) translateY(30%) scale(1.2); + transition: all 0.45s ease-in-out 0s; + } + + .arrow-bar { + opacity: 0; + transform: translateY(30%) scaleY(0); + transition: + transform 0.45s ease-in-out 0s, + opacity 0.1s linear 0.2s; + } + } + + &:hover, + &:focus { + :global { + .arrow-head { + transform: translateY(0) scale(1); + } + + .arrow-bar { + opacity: 1; + transform: translateY(0) scaleY(1); + } + } + + svg { + :global { + animation: pulse 1.2s ease-in-out 0.6s infinite; + } + } + } + + &:active { + svg { + animation-play-state: paused; + } + } +} diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx new file mode 100644 index 0000000..3abb59d --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx @@ -0,0 +1,58 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { BackToTop as BackToTopComponent } from './back-to-top'; + +/** + * BackToTop - Storybook Meta + */ +export default { + title: 'Molecules/Buttons', + component: BackToTopComponent, + argTypes: { + anchor: { + control: { + type: 'text', + }, + description: 'An element id with leading hashtag to use as anchor.', + type: { + name: 'string', + required: true, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the button wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + label: { + control: { + type: 'text', + }, + description: 'An accessible name for the button.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +/** + * Buttons Stories - Back to top + */ +export const BackToTop = Template.bind({}); +BackToTop.args = { + anchor: '#top', + label: 'Back to top', +}; diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top/back-to-top.test.tsx new file mode 100644 index 0000000..00eb020 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/back-to-top.test.tsx @@ -0,0 +1,17 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { BackToTop } from './back-to-top'; + +describe('BackToTop', () => { + it('renders a BackToTop link', () => { + const anchor = '#top'; + const label = 'eveniet'; + + render(); + + const link = rtlScreen.getByRole('link'); + + expect(link).toHaveAccessibleName(label); + expect(link).toHaveAttribute('href', anchor); + }); +}); diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.tsx b/src/components/molecules/buttons/back-to-top/back-to-top.tsx new file mode 100644 index 0000000..83e2161 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/back-to-top.tsx @@ -0,0 +1,45 @@ +import type { FC } from 'react'; +import { + ButtonLink, + type ButtonLinkProps, + Icon, + VisuallyHidden, +} from '../../../atoms'; +import styles from './back-to-top.module.scss'; + +export type BackToTopProps = Omit< + ButtonLinkProps, + 'children' | 'isExternal' | 'kind' | 'to' +> & { + /** + * Define the anchor. + */ + anchor: string; + /** + * Define an accessible label for the button. + */ + label: string; +}; + +/** + * BackToTop component + * + * Render a back to top link. + */ +export const BackToTop: FC = ({ + anchor, + className = '', + label, + shape = 'square', + ...props +}) => { + const btnClass = `${styles.link} ${className}`; + + return ( + + {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */} + + {label} + + ); +}; diff --git a/src/components/molecules/buttons/back-to-top/index.ts b/src/components/molecules/buttons/back-to-top/index.ts new file mode 100644 index 0000000..fa6b1c0 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/index.ts @@ -0,0 +1 @@ +export * from './back-to-top'; -- cgit v1.2.3