From 1fe43a98098eeef254a26b21d77e2d0ce8e55c30 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 4 Apr 2022 15:22:35 +0200 Subject: chore: add a FlippingLogo component --- .../molecules/layout/flipping-logo.module.scss | 59 ++++++++++++++++++++++ .../molecules/layout/flipping-logo.stories.tsx | 53 +++++++++++++++++++ .../molecules/layout/flipping-logo.test.tsx | 25 +++++++++ src/components/molecules/layout/flipping-logo.tsx | 48 ++++++++++++++++++ 4 files changed, 185 insertions(+) create mode 100644 src/components/molecules/layout/flipping-logo.module.scss create mode 100644 src/components/molecules/layout/flipping-logo.stories.tsx create mode 100644 src/components/molecules/layout/flipping-logo.test.tsx create mode 100644 src/components/molecules/layout/flipping-logo.tsx (limited to 'src/components/molecules/layout') diff --git a/src/components/molecules/layout/flipping-logo.module.scss b/src/components/molecules/layout/flipping-logo.module.scss new file mode 100644 index 0000000..89b9499 --- /dev/null +++ b/src/components/molecules/layout/flipping-logo.module.scss @@ -0,0 +1,59 @@ +@use "@styles/abstracts/functions" as fun; + +.logo { + width: var(--logo-size, fun.convert-px(100)); + height: var(--logo-size, fun.convert-px(100)); + position: relative; + border-radius: 50%; + transform-style: preserve-3d; + transition: all 0.6s linear 0s; + + &__front, + &__back { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + backface-visibility: hidden; + background: var(--color-bg); + border: fun.convert-px(2) solid var(--color-primary-dark); + border-radius: 50%; + transition: all 0.6s linear 0s; + + svg, + img { + // !important is required to override next/image styles... + padding: fun.convert-px(2) !important; + border-radius: 50%; + } + } + + &__front { + box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 + var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 + var(--color-shadow-light); + } + + &__back { + transform: rotateY(180deg); + } + + &:hover { + transform: rotateY(180deg); + } + + &:hover & { + &__front { + box-shadow: none; + } + + &__back { + box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 + var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 + var(--color-shadow-light); + } + } +} diff --git a/src/components/molecules/layout/flipping-logo.stories.tsx b/src/components/molecules/layout/flipping-logo.stories.tsx new file mode 100644 index 0000000..1508269 --- /dev/null +++ b/src/components/molecules/layout/flipping-logo.stories.tsx @@ -0,0 +1,53 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import FlippingLogoComponent from './flipping-logo'; + +export default { + title: 'Molecules/Layout', + component: FlippingLogoComponent, + argTypes: { + additionalClasses: { + control: { + type: 'text', + }, + description: 'Adds additional classes to the logo wrapper.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + altText: { + control: { + type: 'text', + }, + description: 'Photo alternative text.', + type: { + name: 'string', + required: true, + }, + }, + photo: { + control: { + type: 'text', + }, + description: 'Photo url.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const FlippingLogo = Template.bind({}); +FlippingLogo.args = { + altText: 'Website picture', + logoTitle: 'Website logo', + photo: 'http://placeimg.com/640/480', +}; diff --git a/src/components/molecules/layout/flipping-logo.test.tsx b/src/components/molecules/layout/flipping-logo.test.tsx new file mode 100644 index 0000000..806fdbe --- /dev/null +++ b/src/components/molecules/layout/flipping-logo.test.tsx @@ -0,0 +1,25 @@ +import { render, screen } from '@test-utils'; +import FlippingLogo from './flipping-logo'; + +describe('FlippingLogo', () => { + it('renders a photo', () => { + render( + + ); + expect(screen.getByAltText('Alternative text')).toBeInTheDocument(); + }); + + it('renders a logo', () => { + render( + + ); + expect(screen.getByTitle('A logo title')).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/layout/flipping-logo.tsx b/src/components/molecules/layout/flipping-logo.tsx new file mode 100644 index 0000000..7bb7afc --- /dev/null +++ b/src/components/molecules/layout/flipping-logo.tsx @@ -0,0 +1,48 @@ +import Logo from '@components/atoms/images/logo'; +import Image from 'next/image'; +import { FC } from 'react'; +import styles from './flipping-logo.module.scss'; + +type FlippingLogoProps = { + /** + * Adds additional classes to the logo wrapper. + */ + additionalClasses?: string; + /** + * Photo alternative text. + */ + altText: string; + /** + * Logo image title. + */ + logoTitle?: string; + /** + * Photo url. + */ + photo: string; +}; + +/** + * FlippingLogo component + * + * Render a logo and a photo with a flipping effect. + */ +const FlippingLogo: FC = ({ + additionalClasses, + altText, + logoTitle, + photo, +}) => { + return ( +
+
+ {altText} +
+
+ +
+
+ ); +}; + +export default FlippingLogo; -- cgit v1.2.3 From 8a4fbf91b0ffdcb0ec38105f918ce6f90e6ec161 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 4 Apr 2022 15:45:08 +0200 Subject: chore: add a Branding component --- src/components/atoms/headings/heading.module.scss | 57 +++++++++++++ src/components/atoms/headings/heading.stories.tsx | 32 +++++++ src/components/atoms/headings/heading.test.tsx | 10 +++ src/components/atoms/headings/heading.tsx | 35 +++++++- .../molecules/layout/branding.module.scss | 48 +++++++++++ .../molecules/layout/branding.stories.tsx | 83 ++++++++++++++++++ src/components/molecules/layout/branding.test.tsx | 61 ++++++++++++++ src/components/molecules/layout/branding.tsx | 97 ++++++++++++++++++++++ 8 files changed, 419 insertions(+), 4 deletions(-) create mode 100644 src/components/atoms/headings/heading.module.scss create mode 100644 src/components/molecules/layout/branding.module.scss create mode 100644 src/components/molecules/layout/branding.stories.tsx create mode 100644 src/components/molecules/layout/branding.test.tsx create mode 100644 src/components/molecules/layout/branding.tsx (limited to 'src/components/molecules/layout') diff --git a/src/components/atoms/headings/heading.module.scss b/src/components/atoms/headings/heading.module.scss new file mode 100644 index 0000000..8620f6f --- /dev/null +++ b/src/components/atoms/headings/heading.module.scss @@ -0,0 +1,57 @@ +@use "@styles/abstracts/functions" as fun; + +.heading { + color: var(--color-primary-dark); + font-family: var(--font-family-secondary); + letter-spacing: 0.01ex; + + &--regular { + margin: 0; + } + + &--margin { + margin: 0 0 var(--spacing-sm); + + & + & { + margin-top: var(--spacing-md); + } + } + + &--1 { + font-size: var(--font-size-3xl); + font-weight: 500; + } + + &--2 { + padding-bottom: fun.convert-px(3); + background: linear-gradient( + to top, + var(--color-primary-dark) 0.3rem, + transparent 0.3rem + ) + 0 0 / 3rem 100% no-repeat; + font-size: var(--font-size-2xl); + font-weight: 500; + text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light); + } + + &--3 { + font-size: var(--font-size-xl); + font-weight: 500; + } + + &--4 { + font-size: var(--font-size-lg); + font-weight: 500; + } + + &--5 { + font-size: var(--font-size-md); + font-weight: 600; + } + + &--6 { + font-size: var(--font-size-md); + font-weight: 500; + } +} diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx index 9958af9..0b286fe 100644 --- a/src/components/atoms/headings/heading.stories.tsx +++ b/src/components/atoms/headings/heading.stories.tsx @@ -4,6 +4,10 @@ import HeadingComponent from './heading'; export default { title: 'Atoms/Headings', component: HeadingComponent, + args: { + isFake: false, + withMargin: true, + }, argTypes: { children: { description: 'Heading body.', @@ -12,6 +16,20 @@ export default { required: true, }, }, + isFake: { + control: { + type: 'boolean', + }, + description: 'Use an heading element or only its styles.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, level: { control: { type: 'select', @@ -23,6 +41,20 @@ export default { required: true, }, }, + withMargin: { + control: { + type: 'boolean', + }, + description: 'Adds margin.', + table: { + category: 'Options', + defaultValue: { summary: true }, + }, + type: { + name: 'boolean', + required: false, + }, + }, }, } as ComponentMeta; diff --git a/src/components/atoms/headings/heading.test.tsx b/src/components/atoms/headings/heading.test.tsx index b83f7cd..6b6789a 100644 --- a/src/components/atoms/headings/heading.test.tsx +++ b/src/components/atoms/headings/heading.test.tsx @@ -43,4 +43,14 @@ describe('Heading', () => { 'Level 6' ); }); + + it('renders a text with heading styles', () => { + render( + + Fake heading + + ); + expect(screen.queryByRole('heading', { level: 2 })).not.toBeInTheDocument(); + expect(screen.getByText('Fake heading')).toHaveClass('heading'); + }); }); diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx index 1535140..77580cc 100644 --- a/src/components/atoms/headings/heading.tsx +++ b/src/components/atoms/headings/heading.tsx @@ -1,21 +1,48 @@ import { FC } from 'react'; +import styles from './heading.module.scss'; type HeadingProps = { + /** + * Adds additional classes. + */ + additionalClasses?: string; + /** + * Use an heading element or only its styles. Default: false. + */ + isFake?: boolean; /** * HTML heading level: 'h1', 'h2', 'h3', 'h4', 'h5' or 'h6'. */ level: 1 | 2 | 3 | 4 | 5 | 6; + /** + * Adds margin. Default: true. + */ + withMargin?: boolean; }; /** * Heading component. * - * Render an HTML heading element. + * Render an HTML heading element or a paragraph with heading styles. */ -const Heading: FC = ({ children, level }) => { - const TitleTag = `h${level}` as keyof JSX.IntrinsicElements; +const Heading: FC = ({ + children, + additionalClasses, + isFake = false, + level, + withMargin = true, +}) => { + const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements); + const variantClass = withMargin ? 'heading--margin' : 'heading--regular'; + const levelClass = `heading--${level}`; - return {children}; + return ( + + {children} + + ); }; export default Heading; diff --git a/src/components/molecules/layout/branding.module.scss b/src/components/molecules/layout/branding.module.scss new file mode 100644 index 0000000..aa18002 --- /dev/null +++ b/src/components/molecules/layout/branding.module.scss @@ -0,0 +1,48 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + display: grid; + grid-template-columns: + var(--logo-size, fun.convert-px(100)) + minmax(0, 1fr); + grid-template-rows: 1fr min-content; + align-items: center; + column-gap: var(--spacing-sm); +} + +.logo { + grid-row: span 2; +} + +.title { + font-size: var(--font-size-2xl); +} + +.baseline { + color: var(--color-fg-light); +} + +.link { + background: linear-gradient( + to top, + var(--color-primary-light) fun.convert-px(5), + transparent fun.convert-px(5) + ) + left / 0 100% no-repeat; + text-decoration: none; + transition: all 0.6s ease-out 0s; + + &:hover, + &:focus { + background-size: 100% 100%; + } + + &:focus { + color: var(--color-primary-light); + } + + &:active { + background-size: 0 100%; + color: var(--color-primary-dark); + } +} diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx new file mode 100644 index 0000000..726ba26 --- /dev/null +++ b/src/components/molecules/layout/branding.stories.tsx @@ -0,0 +1,83 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import BrandingComponent from './branding'; + +export default { + title: 'Molecules/Layout', + component: BrandingComponent, + args: { + isHome: false, + }, + argTypes: { + baseline: { + control: { + type: 'text', + }, + description: 'The Branding baseline.', + type: { + name: 'string', + required: false, + }, + }, + isHome: { + control: { + type: 'boolean', + }, + description: 'Use H1 if the current page is homepage.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + photo: { + control: { + type: 'text', + }, + description: 'The Branding photo.', + type: { + name: 'string', + required: true, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The Branding title.', + type: { + name: 'string', + required: true, + }, + }, + withLink: { + control: { + type: 'boolean', + }, + description: 'Wraps the title with a link to homepage.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + +); + +export const Branding = Template.bind({}); +Branding.args = { + title: 'Website title', + photo: 'http://placeimg.com/640/480', +}; diff --git a/src/components/molecules/layout/branding.test.tsx b/src/components/molecules/layout/branding.test.tsx new file mode 100644 index 0000000..4fe1e9a --- /dev/null +++ b/src/components/molecules/layout/branding.test.tsx @@ -0,0 +1,61 @@ +import { render, screen } from '@test-utils'; +import Branding from './branding'; + +describe('Branding', () => { + it('renders a photo', () => { + render( + + ); + expect( + screen.getByRole('img', { name: 'Website title picture' }) + ).toBeInTheDocument(); + }); + + it('renders a logo', () => { + render( + + ); + expect(screen.getByTitle('Website name logo')).toBeInTheDocument(); + }); + + it('renders a baseline', () => { + render( + + ); + expect(screen.getByText('Website baseline')).toBeInTheDocument(); + }); + + it('renders a title wrapped with h1 element', () => { + render( + + ); + expect( + screen.getByRole('heading', { level: 1, name: 'Website title' }) + ).toBeInTheDocument(); + }); + + it('renders a title with h1 styles', () => { + render( + + ); + expect( + screen.queryByRole('heading', { level: 1, name: 'Website title' }) + ).not.toBeInTheDocument(); + expect(screen.getByText('Website title')).toHaveClass('heading--1'); + }); +}); diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx new file mode 100644 index 0000000..efb2e34 --- /dev/null +++ b/src/components/molecules/layout/branding.tsx @@ -0,0 +1,97 @@ +import Heading from '@components/atoms/headings/heading'; +import Link from 'next/link'; +import { FC } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './branding.module.scss'; +import FlippingLogo from './flipping-logo'; + +type BrandingProps = { + /** + * The Branding baseline. + */ + baseline?: string; + /** + * Use H1 if the current page is homepage. Default: false. + */ + isHome?: boolean; + /** + * A photography URL. + */ + photo: string; + /** + * The Branding title; + */ + title: string; + /** + * Wraps the title with a link to homepage. Default: false. + */ + withLink?: boolean; +}; + +/** + * Branding component + * + * Render the branding logo, title and optional baseline. + */ +const Branding: FC = ({ + baseline, + isHome = false, + photo, + title, + withLink = false, +}) => { + const intl = useIntl(); + const altText = intl.formatMessage( + { + defaultMessage: '{website} picture', + description: 'Branding: photo alternative text', + id: 'dDK5oc', + }, + { website: title } + ); + const logoTitle = intl.formatMessage( + { + defaultMessage: '{website} logo', + description: 'Branding: logo title', + id: 'x55qsD', + }, + { website: title } + ); + + return ( +
+ + + {withLink ? ( + + {title} + + ) : ( + title + )} + + {baseline && ( + + {baseline} + + )} +
+ ); +}; + +export default Branding; -- cgit v1.2.3 From 47e12259d512e476326e83929efebf036b57f7c1 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 6 Apr 2022 18:40:17 +0200 Subject: chore: add a Modal component --- src/components/atoms/headings/heading.stories.tsx | 13 +++++ src/components/atoms/headings/heading.tsx | 6 +-- src/components/atoms/icons/cog.module.scss | 1 - .../atoms/icons/magnifying-glass.module.scss | 1 - src/components/molecules/layout/modal.module.scss | 21 ++++++++ src/components/molecules/layout/modal.stories.tsx | 57 ++++++++++++++++++++++ src/components/molecules/layout/modal.test.tsx | 9 ++++ src/components/molecules/layout/modal.tsx | 48 ++++++++++++++++++ 8 files changed, 151 insertions(+), 5 deletions(-) create mode 100644 src/components/molecules/layout/modal.module.scss create mode 100644 src/components/molecules/layout/modal.stories.tsx create mode 100644 src/components/molecules/layout/modal.test.tsx create mode 100644 src/components/molecules/layout/modal.tsx (limited to 'src/components/molecules/layout') diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx index 0b286fe..cea3532 100644 --- a/src/components/atoms/headings/heading.stories.tsx +++ b/src/components/atoms/headings/heading.stories.tsx @@ -9,6 +9,19 @@ export default { withMargin: true, }, argTypes: { + additionalClasses: { + control: { + type: 'text', + }, + description: 'Set additional classes.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, children: { description: 'Heading body.', type: { diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx index 77580cc..136571d 100644 --- a/src/components/atoms/headings/heading.tsx +++ b/src/components/atoms/headings/heading.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import styles from './heading.module.scss'; -type HeadingProps = { +export type HeadingProps = { /** * Adds additional classes. */ @@ -33,12 +33,12 @@ const Heading: FC = ({ withMargin = true, }) => { const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements); - const variantClass = withMargin ? 'heading--margin' : 'heading--regular'; const levelClass = `heading--${level}`; + const marginClass = withMargin ? 'heading--margin' : 'heading--regular'; return ( {children} diff --git a/src/components/atoms/icons/cog.module.scss b/src/components/atoms/icons/cog.module.scss index 8c48fcc..5201598 100644 --- a/src/components/atoms/icons/cog.module.scss +++ b/src/components/atoms/icons/cog.module.scss @@ -1,7 +1,6 @@ @use "@styles/abstracts/functions" as fun; .icon { - display: block; width: var(--icon-size, #{fun.convert-px(40)}); fill: var(--color-primary-lighter); stroke: var(--color-primary-darker); diff --git a/src/components/atoms/icons/magnifying-glass.module.scss b/src/components/atoms/icons/magnifying-glass.module.scss index dca76fb..d14bec5 100644 --- a/src/components/atoms/icons/magnifying-glass.module.scss +++ b/src/components/atoms/icons/magnifying-glass.module.scss @@ -1,7 +1,6 @@ @use "@styles/abstracts/functions" as fun; .icon { - display: block; width: var(--icon-size, #{fun.convert-px(40)}); } diff --git a/src/components/molecules/layout/modal.module.scss b/src/components/molecules/layout/modal.module.scss new file mode 100644 index 0000000..2fff562 --- /dev/null +++ b/src/components/molecules/layout/modal.module.scss @@ -0,0 +1,21 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + padding: var(--spacing-md); + background: var(--color-bg-secondary); + border: fun.convert-px(4) solid; + border-image: radial-gradient( + ellipse at top, + var(--color-primary-lighter) 20%, + var(--color-primary) 100% + ) + 1; + box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3) + fun.convert-px(-1) var(--color-shadow-dark); +} + +.icon { + --icon-size: #{fun.convert-px(30)}; + + margin-right: var(--spacing-2xs); +} diff --git a/src/components/molecules/layout/modal.stories.tsx b/src/components/molecules/layout/modal.stories.tsx new file mode 100644 index 0000000..396e89e --- /dev/null +++ b/src/components/molecules/layout/modal.stories.tsx @@ -0,0 +1,57 @@ +import Cog from '@components/atoms/icons/cog'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import ModalComponent from './modal'; + +export default { + title: 'Molecules/Layout', + component: ModalComponent, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The modal body.', + type: { + name: 'string', + required: true, + }, + }, + icon: { + control: { + type: 'select', + }, + description: 'The title icon.', + options: ['', 'cogs', 'search'], + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The modal title.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Modal = Template.bind({}); +Modal.args = { + children: + 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', +}; diff --git a/src/components/molecules/layout/modal.test.tsx b/src/components/molecules/layout/modal.test.tsx new file mode 100644 index 0000000..14fb224 --- /dev/null +++ b/src/components/molecules/layout/modal.test.tsx @@ -0,0 +1,9 @@ +import { render, screen } from '@test-utils'; +import Modal from './modal'; + +describe('Modal', () => { + it('renders a title', () => { + render(); + expect(screen.getByText('A custom title')).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/layout/modal.tsx b/src/components/molecules/layout/modal.tsx new file mode 100644 index 0000000..4dc3b0a --- /dev/null +++ b/src/components/molecules/layout/modal.tsx @@ -0,0 +1,48 @@ +import Heading from '@components/atoms/headings/heading'; +import dynamic from 'next/dynamic'; +import { FC, ReactNode } from 'react'; +import styles from './modal.module.scss'; + +export type Icons = 'cogs' | 'search'; + +export type ModalProps = { + icon?: Icons; + title?: string; +}; + +const CogIcon = dynamic(() => import('@components/atoms/icons/cog')); +const SearchIcon = dynamic( + () => import('@components/atoms/icons/magnifying-glass') +); + +/** + * Modal component + * + * Render a modal component with an optional title and icon. + */ +const Modal: FC = ({ children, icon, title }) => { + const getIcon = (id: Icons) => { + switch (id) { + case 'cogs': + return ; + case 'search': + return ; + default: + return <>; + } + }; + + return ( +
+ {title && ( + + {icon && {getIcon(icon)}} + {title} + + )} + {children} +
+ ); +}; + +export default Modal; -- cgit v1.2.3 From ff2b6c55cc691f0b62396d9ba481c75fc870cd6a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 7 Apr 2022 14:18:18 +0200 Subject: chore: add a Tooltip component --- src/components/molecules/layout/modal.module.scss | 21 -------- src/components/molecules/layout/modal.stories.tsx | 57 ---------------------- src/components/molecules/layout/modal.test.tsx | 9 ---- src/components/molecules/layout/modal.tsx | 48 ------------------ src/components/molecules/modals/modal.module.scss | 21 ++++++++ src/components/molecules/modals/modal.stories.tsx | 56 +++++++++++++++++++++ src/components/molecules/modals/modal.test.tsx | 9 ++++ src/components/molecules/modals/modal.tsx | 48 ++++++++++++++++++ .../molecules/modals/tooltip.module.scss | 46 +++++++++++++++++ .../molecules/modals/tooltip.stories.tsx | 41 ++++++++++++++++ src/components/molecules/modals/tooltip.test.tsx | 24 +++++++++ src/components/molecules/modals/tooltip.tsx | 57 ++++++++++++++++++++++ 12 files changed, 302 insertions(+), 135 deletions(-) delete mode 100644 src/components/molecules/layout/modal.module.scss delete mode 100644 src/components/molecules/layout/modal.stories.tsx delete mode 100644 src/components/molecules/layout/modal.test.tsx delete mode 100644 src/components/molecules/layout/modal.tsx create mode 100644 src/components/molecules/modals/modal.module.scss create mode 100644 src/components/molecules/modals/modal.stories.tsx create mode 100644 src/components/molecules/modals/modal.test.tsx create mode 100644 src/components/molecules/modals/modal.tsx create mode 100644 src/components/molecules/modals/tooltip.module.scss create mode 100644 src/components/molecules/modals/tooltip.stories.tsx create mode 100644 src/components/molecules/modals/tooltip.test.tsx create mode 100644 src/components/molecules/modals/tooltip.tsx (limited to 'src/components/molecules/layout') diff --git a/src/components/molecules/layout/modal.module.scss b/src/components/molecules/layout/modal.module.scss deleted file mode 100644 index 2fff562..0000000 --- a/src/components/molecules/layout/modal.module.scss +++ /dev/null @@ -1,21 +0,0 @@ -@use "@styles/abstracts/functions" as fun; - -.wrapper { - padding: var(--spacing-md); - background: var(--color-bg-secondary); - border: fun.convert-px(4) solid; - border-image: radial-gradient( - ellipse at top, - var(--color-primary-lighter) 20%, - var(--color-primary) 100% - ) - 1; - box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3) - fun.convert-px(-1) var(--color-shadow-dark); -} - -.icon { - --icon-size: #{fun.convert-px(30)}; - - margin-right: var(--spacing-2xs); -} diff --git a/src/components/molecules/layout/modal.stories.tsx b/src/components/molecules/layout/modal.stories.tsx deleted file mode 100644 index 396e89e..0000000 --- a/src/components/molecules/layout/modal.stories.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import Cog from '@components/atoms/icons/cog'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ModalComponent from './modal'; - -export default { - title: 'Molecules/Layout', - component: ModalComponent, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The modal body.', - type: { - name: 'string', - required: true, - }, - }, - icon: { - control: { - type: 'select', - }, - description: 'The title icon.', - options: ['', 'cogs', 'search'], - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - title: { - control: { - type: 'text', - }, - description: 'The modal title.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Modal = Template.bind({}); -Modal.args = { - children: - 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', -}; diff --git a/src/components/molecules/layout/modal.test.tsx b/src/components/molecules/layout/modal.test.tsx deleted file mode 100644 index 14fb224..0000000 --- a/src/components/molecules/layout/modal.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { render, screen } from '@test-utils'; -import Modal from './modal'; - -describe('Modal', () => { - it('renders a title', () => { - render(); - expect(screen.getByText('A custom title')).toBeInTheDocument(); - }); -}); diff --git a/src/components/molecules/layout/modal.tsx b/src/components/molecules/layout/modal.tsx deleted file mode 100644 index 4dc3b0a..0000000 --- a/src/components/molecules/layout/modal.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Heading from '@components/atoms/headings/heading'; -import dynamic from 'next/dynamic'; -import { FC, ReactNode } from 'react'; -import styles from './modal.module.scss'; - -export type Icons = 'cogs' | 'search'; - -export type ModalProps = { - icon?: Icons; - title?: string; -}; - -const CogIcon = dynamic(() => import('@components/atoms/icons/cog')); -const SearchIcon = dynamic( - () => import('@components/atoms/icons/magnifying-glass') -); - -/** - * Modal component - * - * Render a modal component with an optional title and icon. - */ -const Modal: FC = ({ children, icon, title }) => { - const getIcon = (id: Icons) => { - switch (id) { - case 'cogs': - return ; - case 'search': - return ; - default: - return <>; - } - }; - - return ( -
- {title && ( - - {icon && {getIcon(icon)}} - {title} - - )} - {children} -
- ); -}; - -export default Modal; diff --git a/src/components/molecules/modals/modal.module.scss b/src/components/molecules/modals/modal.module.scss new file mode 100644 index 0000000..2fff562 --- /dev/null +++ b/src/components/molecules/modals/modal.module.scss @@ -0,0 +1,21 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + padding: var(--spacing-md); + background: var(--color-bg-secondary); + border: fun.convert-px(4) solid; + border-image: radial-gradient( + ellipse at top, + var(--color-primary-lighter) 20%, + var(--color-primary) 100% + ) + 1; + box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3) + fun.convert-px(-1) var(--color-shadow-dark); +} + +.icon { + --icon-size: #{fun.convert-px(30)}; + + margin-right: var(--spacing-2xs); +} diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx new file mode 100644 index 0000000..b68a24b --- /dev/null +++ b/src/components/molecules/modals/modal.stories.tsx @@ -0,0 +1,56 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import ModalComponent from './modal'; + +export default { + title: 'Molecules/Modals', + component: ModalComponent, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The modal body.', + type: { + name: 'string', + required: true, + }, + }, + icon: { + control: { + type: 'select', + }, + description: 'The title icon.', + options: ['', 'cogs', 'search'], + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The modal title.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Modal = Template.bind({}); +Modal.args = { + children: + 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', +}; diff --git a/src/components/molecules/modals/modal.test.tsx b/src/components/molecules/modals/modal.test.tsx new file mode 100644 index 0000000..14fb224 --- /dev/null +++ b/src/components/molecules/modals/modal.test.tsx @@ -0,0 +1,9 @@ +import { render, screen } from '@test-utils'; +import Modal from './modal'; + +describe('Modal', () => { + it('renders a title', () => { + render(); + expect(screen.getByText('A custom title')).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx new file mode 100644 index 0000000..4dc3b0a --- /dev/null +++ b/src/components/molecules/modals/modal.tsx @@ -0,0 +1,48 @@ +import Heading from '@components/atoms/headings/heading'; +import dynamic from 'next/dynamic'; +import { FC, ReactNode } from 'react'; +import styles from './modal.module.scss'; + +export type Icons = 'cogs' | 'search'; + +export type ModalProps = { + icon?: Icons; + title?: string; +}; + +const CogIcon = dynamic(() => import('@components/atoms/icons/cog')); +const SearchIcon = dynamic( + () => import('@components/atoms/icons/magnifying-glass') +); + +/** + * Modal component + * + * Render a modal component with an optional title and icon. + */ +const Modal: FC = ({ children, icon, title }) => { + const getIcon = (id: Icons) => { + switch (id) { + case 'cogs': + return ; + case 'search': + return ; + default: + return <>; + } + }; + + return ( +
+ {title && ( + + {icon && {getIcon(icon)}} + {title} + + )} + {children} +
+ ); +}; + +export default Modal; diff --git a/src/components/molecules/modals/tooltip.module.scss b/src/components/molecules/modals/tooltip.module.scss new file mode 100644 index 0000000..94aa3dd --- /dev/null +++ b/src/components/molecules/modals/tooltip.module.scss @@ -0,0 +1,46 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + --title-height: #{fun.convert-px(40)}; + + margin-top: calc(var(--title-height) / 2); + padding: calc((var(--title-height) / 2) + var(--spacing-sm)) var(--spacing-sm) + var(--spacing-sm); + position: relative; + background: var(--color-bg); + border: fun.convert-px(2) solid var(--color-primary-dark); + border-radius: fun.convert-px(3); + box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light); +} + +.title { + display: flex; + align-items: center; + height: var(--title-height); + padding-right: var(--spacing-xs); + position: absolute; + top: calc(var(--title-height) / -2); + left: var(--spacing-xs); + background: var(--color-bg); + border: fun.convert-px(1) solid var(--color-primary-dark); + box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow); + color: var(--color-primary-darker); + font-size: var(--font-size-sm); + font-variant: small-caps; + font-weight: 500; +} + +.icon { + display: flex; + align-items: center; + height: var(--title-height); + margin-right: var(--spacing-xs); + padding: 0 var(--spacing-2xs); + background: var(--color-primary-dark); + border: fun.convert-px(1) solid var(--color-primary-dark); + box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow); + color: var(--color-fg-inverted); + font-weight: 600; +} diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx new file mode 100644 index 0000000..a57cf34 --- /dev/null +++ b/src/components/molecules/modals/tooltip.stories.tsx @@ -0,0 +1,41 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import TooltipComponent from './tooltip'; + +export default { + title: 'Molecules/Modals', + component: TooltipComponent, + argTypes: { + content: { + control: { + type: 'text', + }, + description: 'The tooltip body.', + type: { + name: 'string', + required: true, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The tooltip title', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Tooltip = Template.bind({}); +Tooltip.args = { + content: + 'Minima tempora fuga omnis ratione doloribus ut. Totam ea vitae consequatur. Fuga hic ipsum. In non debitis ex assumenda ut dicta. Sit ut maxime eligendi est.', + icon: '?', + title: 'Laborum enim vero', +}; diff --git a/src/components/molecules/modals/tooltip.test.tsx b/src/components/molecules/modals/tooltip.test.tsx new file mode 100644 index 0000000..24f20d8 --- /dev/null +++ b/src/components/molecules/modals/tooltip.test.tsx @@ -0,0 +1,24 @@ +import { render, screen } from '@test-utils'; +import Tooltip from './tooltip'; + +const title = 'Illum eum at'; +const content = + 'Non accusantium ad. Est et impedit iste animi voluptas cum accusamus accusantium. Repellat ut sint pariatur cumque cupiditate. Animi occaecati odio ut debitis ipsam similique. Repudiandae aut earum occaecati consequatur laborum ut nobis iusto. Adipisci laboriosam id.'; +const icon = '?'; + +describe('Tooltip', () => { + it('renders a title', () => { + render(); + expect(screen.getByText(title)).toBeInTheDocument(); + }); + + it('renders an explanation', () => { + render(); + expect(screen.getByText(content)).toBeInTheDocument(); + }); + + it('renders an icon', () => { + render(); + expect(screen.getByText(icon)).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx new file mode 100644 index 0000000..ceb0b14 --- /dev/null +++ b/src/components/molecules/modals/tooltip.tsx @@ -0,0 +1,57 @@ +import List, { type ListItem } from '@components/atoms/lists/list'; +import { FC, ReactNode } from 'react'; +import styles from './tooltip.module.scss'; + +export type TooltipProps = { + /** + * Set additional classes to the tooltip wrapper. + */ + classes?: string; + /** + * The tooltip body. + */ + content: string | string[]; + /** + * An icon to illustrate tooltip content. + */ + icon: ReactNode; + /** + * The tooltip title. + */ + title: string; +}; + +/** + * Tooltip component + * + * Render a tooltip modal. + */ +const Tooltip: FC = ({ classes = '', content, icon, title }) => { + /** + * Format an array of strings to an array of object with id and value. + * + * @param {string[]} array - An array of strings. + * @returns {ListItem[]} The array formatted to be used as list items. + */ + const getListItems = (array: string[]): ListItem[] => { + return array.map((string, index) => { + return { id: `item-${index}`, value: string }; + }); + }; + + return ( +
+
+ {icon} + {title} +
+ {Array.isArray(content) ? ( + + ) : ( + content + )} +
+ ); +}; + +export default Tooltip; -- cgit v1.2.3 From a5df28fad0dae266a857ae110c43b3cb8b23c996 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 8 Apr 2022 19:41:40 +0200 Subject: refactor: use a consistent classname prop and avoid children prop I was using the FunctionComponent type for some component that do not use children. So I change the type to VoidFunctionComponent to avoid mistakes. I also rename all the "classes" or "additionalClasses" props to "className" to keep consistency between each components. --- src/components/atoms/buttons/button-link.tsx | 2 +- src/components/atoms/buttons/button.stories.tsx | 13 +++++++++++ src/components/atoms/buttons/button.tsx | 10 ++++----- src/components/atoms/buttons/buttons.module.scss | 4 ++++ src/components/atoms/forms/toggle.module.scss | 3 ++- src/components/atoms/forms/toggle.stories.tsx | 14 ++++++++++++ src/components/atoms/forms/toggle.tsx | 26 ++++++++++++++++------ src/components/atoms/headings/heading.stories.tsx | 14 ++++++------ src/components/atoms/headings/heading.tsx | 14 +++++++----- src/components/atoms/images/logo.stories.tsx | 15 +++++++++++++ src/components/atoms/images/logo.tsx | 4 ++-- src/components/atoms/links/link.stories.tsx | 13 +++++++++++ src/components/atoms/links/link.tsx | 14 +++++------- src/components/atoms/links/nav-link.tsx | 4 ++-- src/components/atoms/links/sharing-link.tsx | 4 ++-- src/components/atoms/links/social-link.tsx | 10 +++++---- .../atoms/lists/description-list.stories.tsx | 6 ++--- src/components/atoms/lists/description-list.tsx | 13 ++++++----- src/components/atoms/lists/list.stories.tsx | 6 ++--- src/components/atoms/lists/list.tsx | 15 +++++-------- .../atoms/loaders/progress-bar.stories.tsx | 8 ++++++- src/components/atoms/loaders/progress-bar.tsx | 10 ++++----- src/components/atoms/loaders/spinner.stories.tsx | 3 +++ src/components/atoms/loaders/spinner.tsx | 6 ++--- .../molecules/buttons/back-to-top.stories.tsx | 7 ++++-- src/components/molecules/buttons/back-to-top.tsx | 12 +++++----- .../molecules/buttons/help-button.stories.tsx | 4 ++-- src/components/molecules/buttons/help-button.tsx | 10 ++++----- .../molecules/images/responsive-image.tsx | 6 ++--- src/components/molecules/layout/branding.tsx | 10 ++++----- .../molecules/layout/flipping-logo.stories.tsx | 23 ++++++++++++++----- src/components/molecules/layout/flipping-logo.tsx | 12 +++++----- src/components/molecules/modals/modal.stories.tsx | 13 +++++++++++ src/components/molecules/modals/modal.tsx | 22 +++++++++++++----- .../molecules/modals/tooltip.stories.tsx | 23 +++++++++++++++++++ src/components/molecules/modals/tooltip.tsx | 15 ++++++++----- 36 files changed, 270 insertions(+), 118 deletions(-) (limited to 'src/components/molecules/layout') diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx index 47fe4b0..81229c8 100644 --- a/src/components/atoms/buttons/button-link.tsx +++ b/src/components/atoms/buttons/button-link.tsx @@ -2,7 +2,7 @@ import Link from 'next/link'; import { FC } from 'react'; import styles from './buttons.module.scss'; -type ButtonLinkProps = { +export type ButtonLinkProps = { /** * ButtonLink accessible label. */ diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx index 9f4061b..1061d83 100644 --- a/src/components/atoms/buttons/button.stories.tsx +++ b/src/components/atoms/buttons/button.stories.tsx @@ -33,6 +33,19 @@ export default { required: true, }, }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the button wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, disabled: { control: { type: 'boolean', diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx index ae4c894..b223046 100644 --- a/src/components/atoms/buttons/button.tsx +++ b/src/components/atoms/buttons/button.tsx @@ -3,9 +3,9 @@ import styles from './buttons.module.scss'; export type ButtonProps = { /** - * Add additional classes to the button wrapper. + * Set additional classnames to the button wrapper. */ - additionalClasses?: string; + className?: string; /** * Button accessible label. */ @@ -17,7 +17,7 @@ export type ButtonProps = { /** * Button kind. Default: secondary. */ - kind?: 'primary' | 'secondary' | 'tertiary'; + kind?: 'primary' | 'secondary' | 'tertiary' | 'neutral'; /** * A callback function to handle click. */ @@ -38,7 +38,7 @@ export type ButtonProps = { * Use a button as call to action. */ const Button: FC = ({ - additionalClasses, + className = '', ariaLabel, children, disabled = false, @@ -54,7 +54,7 @@ const Button: FC = ({ ); }; diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss new file mode 100644 index 0000000..727ffb7 --- /dev/null +++ b/src/components/molecules/layout/widget.module.scss @@ -0,0 +1,40 @@ +@use "@styles/abstracts/functions" as fun; + +.widget { + display: flex; + flex-flow: column; + + &__header { + background: var(--color-bg); + } + + &--has-borders & { + &__body { + border: fun.convert-px(2) solid var(--color-primary-dark); + } + } + + &--collapsed & { + &__body { + max-height: 0; + margin: 0; + visibility: hidden; + opacity: 0; + overflow: hidden; + border: 0 solid transparent; + transition: all 0.1s linear 0.3s, + max-height 0.5s cubic-bezier(0, 1, 0, 1) 0s, margin 0.3s ease-in-out 0s; + } + } + + &--expanded & { + &__body { + max-height: 10000px; // needs a fixed value for transition. + margin: var(--spacing-sm) 0; + opacity: 1; + visibility: visible; + transition: all 0.5s ease-in-out 0s, border 0s linear 0s, + max-height 0.6s ease-in-out 0s; + } + } +} diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx new file mode 100644 index 0000000..d79f66e --- /dev/null +++ b/src/components/molecules/layout/widget.stories.tsx @@ -0,0 +1,85 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import WidgetComponent from './widget'; + +export default { + title: 'Molecules/Layout', + component: WidgetComponent, + args: { + expanded: true, + withBorders: false, + }, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The widget body', + type: { + name: 'string', + required: true, + }, + }, + expanded: { + control: { + type: 'boolean', + }, + description: 'The widget state (expanded or collapsed)', + table: { + category: 'Options', + defaultValue: { summary: true }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + level: { + control: { + type: 'number', + }, + description: 'The heading level.', + type: { + name: 'number', + required: true, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The widget title.', + type: { + name: 'string', + required: true, + }, + }, + withBorders: { + control: { + type: 'boolean', + }, + description: 'Define if the content should have borders.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + +); + +export const Widget = Template.bind({}); +Widget.args = { + children: 'Widget body', + level: 2, + title: 'Widget title', +}; diff --git a/src/components/molecules/layout/widget.test.tsx b/src/components/molecules/layout/widget.test.tsx new file mode 100644 index 0000000..af561ea --- /dev/null +++ b/src/components/molecules/layout/widget.test.tsx @@ -0,0 +1,19 @@ +import { render, screen } from '@test-utils'; +import Widget from './widget'; + +const children = 'Widget body'; +const title = 'Widget title'; +const titleLevel = 2; + +describe('Widget', () => { + it('renders the widget title', () => { + render( + + {children} + + ); + expect( + screen.getByRole('heading', { level: titleLevel }) + ).toHaveTextContent(title); + }); +}); diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx new file mode 100644 index 0000000..c04362a --- /dev/null +++ b/src/components/molecules/layout/widget.tsx @@ -0,0 +1,54 @@ +import { FC, useState } from 'react'; +import HeadingButton, { HeadingButtonProps } from '../buttons/heading-button'; +import styles from './widget.module.scss'; + +export type WidgetProps = Pick< + HeadingButtonProps, + 'expanded' | 'level' | 'title' +> & { + /** + * Set additional classnames to the widget wrapper. + */ + className?: string; + /** + * Determine if the widget body should have borders. Default: false. + */ + withBorders?: boolean; +}; + +/** + * Widget component + * + * Render an expandable widget. + */ +const Widget: FC = ({ + children, + className = '', + expanded = true, + level, + title, + withBorders = false, +}) => { + const [isExpanded, setIsExpanded] = useState(expanded); + const stateClass = isExpanded ? 'widget--expanded' : 'widget--collapsed'; + const bordersClass = withBorders + ? 'widget--has-borders' + : 'widget--no-borders'; + + return ( +
+ +
{children}
+
+ ); +}; + +export default Widget; -- cgit v1.2.3 From edea15c845b33848b7b4f63616841e675b74d572 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 15 Apr 2022 22:20:09 +0200 Subject: chore: add an Overview component --- src/components/molecules/layout/meta.tsx | 4 ++ .../organisms/layout/overview.module.scss | 12 ++++++ .../organisms/layout/overview.stories.tsx | 50 ++++++++++++++++++++++ src/components/organisms/layout/overview.test.tsx | 29 +++++++++++++ src/components/organisms/layout/overview.tsx | 33 ++++++++++++++ 5 files changed, 128 insertions(+) create mode 100644 src/components/organisms/layout/overview.module.scss create mode 100644 src/components/organisms/layout/overview.stories.tsx create mode 100644 src/components/organisms/layout/overview.test.tsx create mode 100644 src/components/organisms/layout/overview.tsx (limited to 'src/components/molecules/layout') diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx index ace6f89..218ebd9 100644 --- a/src/components/molecules/layout/meta.tsx +++ b/src/components/molecules/layout/meta.tsx @@ -32,6 +32,10 @@ export type MetaProps = { * The meta layout. */ layout?: DescriptionListProps['layout']; + /** + * Determine if the layout should be responsive. + */ + responsiveLayout?: DescriptionListProps['responsiveLayout']; }; /** diff --git a/src/components/organisms/layout/overview.module.scss b/src/components/organisms/layout/overview.module.scss new file mode 100644 index 0000000..4d50ad1 --- /dev/null +++ b/src/components/organisms/layout/overview.module.scss @@ -0,0 +1,12 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + padding: var(--spacing-sm) var(--spacing-md); + border: fun.convert-px(1) solid var(--color-border); +} + +.cover { + max-height: fun.convert-px(150); + margin: 0 auto var(--spacing-md); + border: fun.convert-px(1) solid var(--color-border); +} diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx new file mode 100644 index 0000000..61d8b35 --- /dev/null +++ b/src/components/organisms/layout/overview.stories.tsx @@ -0,0 +1,50 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import OverviewComponent from './overview'; + +export default { + title: 'Organisms/Layout', + component: OverviewComponent, + argTypes: { + cover: { + description: 'The overview cover.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + meta: { + description: 'The overview metadata.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const cover = { + alt: 'picture', + height: 480, + src: 'http://placeimg.com/640/480/cats', + width: 640, +}; + +const meta = { + publication: { name: 'Illo ut odio:', value: 'Sequi et excepturi' }, + update: { + name: 'Perspiciatis vel laudantium:', + value: 'Dignissimos ratione veritatis', + }, +}; + +export const Overview = Template.bind({}); +Overview.args = { + cover, + meta, +}; diff --git a/src/components/organisms/layout/overview.test.tsx b/src/components/organisms/layout/overview.test.tsx new file mode 100644 index 0000000..0738d3f --- /dev/null +++ b/src/components/organisms/layout/overview.test.tsx @@ -0,0 +1,29 @@ +import { render, screen } from '@test-utils'; +import Overview from './overview'; + +const cover = { + alt: 'Incidunt unde quam', + height: 480, + src: 'http://placeimg.com/640/480/cats', + width: 640, +}; + +const meta = { + publication: { name: 'Illo ut odio:', value: 'Sequi et excepturi' }, + update: { + name: 'Perspiciatis vel laudantium:', + value: 'Dignissimos ratione veritatis', + }, +}; + +describe('Overview', () => { + it('renders some meta', () => { + render(); + expect(screen.getByText(meta['publication'].name)).toBeInTheDocument(); + }); + + it('renders a cover', () => { + render(); + expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument(); + }); +}); diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx new file mode 100644 index 0000000..3f83342 --- /dev/null +++ b/src/components/organisms/layout/overview.tsx @@ -0,0 +1,33 @@ +import ResponsiveImage, { + type ResponsiveImageProps, +} from '@components/molecules/images/responsive-image'; +import Meta, { type MetaMap } from '@components/molecules/layout/meta'; +import { VFC } from 'react'; +import styles from './overview.module.scss'; + +export type OverviewProps = { + cover?: Pick; + meta: MetaMap; +}; + +/** + * Overview component + * + * Render an overview. + */ +const Overview: VFC = ({ cover, meta }) => { + return ( +
+ {cover && ( + + )} + +
+ ); +}; + +export default Overview; -- cgit v1.2.3 From 5a6e4eea16047083e2de0e91a1b3ed9be8d6eb68 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 16 Apr 2022 16:08:49 +0200 Subject: refactor: support React 18 I replaced the deprecated VFC type with FC type and made all children explicits. Formatjs is still not compatible with React 18 so I need to skip type checking when comitting. There are some type errors because of IntlProvider in Storybook stories. --- jest.setup.js | 1 + src/components/atoms/buttons/button-link.tsx | 6 +- src/components/atoms/buttons/button.tsx | 6 +- src/components/atoms/forms/checkbox.tsx | 4 +- src/components/atoms/forms/field.tsx | 4 +- src/components/atoms/forms/form.test.tsx | 6 +- src/components/atoms/forms/form.tsx | 6 +- src/components/atoms/forms/label.tsx | 6 +- src/components/atoms/forms/select.tsx | 4 +- src/components/atoms/headings/heading.tsx | 6 +- src/components/atoms/icons/arrow.tsx | 4 +- src/components/atoms/icons/career.tsx | 4 +- src/components/atoms/icons/cc-by-sa.tsx | 4 +- src/components/atoms/icons/close.tsx | 4 +- src/components/atoms/icons/cog.tsx | 4 +- src/components/atoms/icons/computer-screen.tsx | 4 +- src/components/atoms/icons/envelop.tsx | 4 +- src/components/atoms/icons/hamburger.tsx | 2 +- src/components/atoms/icons/home.tsx | 4 +- src/components/atoms/icons/magnifying-glass.tsx | 4 +- src/components/atoms/icons/moon.tsx | 6 +- src/components/atoms/icons/plus-minus.tsx | 2 +- src/components/atoms/icons/posts-stack.tsx | 4 +- src/components/atoms/icons/sun.tsx | 6 +- src/components/atoms/images/logo.tsx | 6 +- src/components/atoms/layout/copyright.tsx | 4 +- src/components/atoms/layout/main.tsx | 6 +- src/components/atoms/layout/no-script.tsx | 4 +- src/components/atoms/layout/notice.tsx | 4 +- src/components/atoms/layout/section.tsx | 4 +- src/components/atoms/links/link.module.scss | 20 ++++-- src/components/atoms/links/link.tsx | 6 +- src/components/atoms/links/nav-link.tsx | 4 +- src/components/atoms/links/sharing-link.tsx | 4 +- src/components/atoms/links/social-link.tsx | 4 +- src/components/atoms/lists/description-list.tsx | 4 +- src/components/atoms/lists/list.tsx | 4 +- src/components/atoms/loaders/progress-bar.tsx | 4 +- src/components/atoms/loaders/spinner.tsx | 4 +- src/components/molecules/buttons/back-to-top.tsx | 14 ++-- .../molecules/buttons/heading-button.tsx | 4 +- src/components/molecules/buttons/help-button.tsx | 6 +- .../molecules/forms/ackee-select.test.tsx | 16 +++-- src/components/molecules/forms/ackee-select.tsx | 6 +- src/components/molecules/forms/labelled-field.tsx | 4 +- src/components/molecules/forms/labelled-select.tsx | 15 +++-- src/components/molecules/forms/motion-toggle.tsx | 8 +-- .../molecules/forms/prism-theme-toggle.tsx | 8 +-- .../molecules/forms/select-with-tooltip.tsx | 10 +-- src/components/molecules/forms/theme-toggle.tsx | 8 +-- src/components/molecules/forms/toggle.tsx | 18 ++--- .../molecules/images/responsive-image.tsx | 10 +-- src/components/molecules/layout/branding.tsx | 12 ++-- src/components/molecules/layout/card.tsx | 8 +-- src/components/molecules/layout/flipping-logo.tsx | 10 +-- src/components/molecules/layout/meta.tsx | 4 +- src/components/molecules/layout/widget.tsx | 10 ++- src/components/molecules/modals/modal.test.tsx | 13 +++- src/components/molecules/modals/modal.tsx | 14 ++-- src/components/molecules/modals/tooltip.tsx | 4 +- src/components/molecules/nav/breadcrumb.tsx | 4 +- src/components/molecules/nav/nav.tsx | 4 +- .../organisms/forms/comment-form.stories.tsx | 1 - src/components/organisms/forms/comment-form.tsx | 4 +- src/components/organisms/forms/contact-form.tsx | 4 +- src/components/organisms/forms/search-form.tsx | 11 +++- src/components/organisms/layout/cards-list.tsx | 4 +- src/components/organisms/layout/footer.tsx | 13 ++-- src/components/organisms/layout/overview.tsx | 4 +- .../organisms/layout/summary.stories.tsx | 2 +- src/components/organisms/layout/summary.test.tsx | 2 +- src/components/organisms/layout/summary.tsx | 77 +++++++++++++--------- src/components/organisms/modals/search-modal.tsx | 8 +-- src/components/organisms/modals/settings-modal.tsx | 14 ++-- src/components/organisms/toolbar/main-nav.tsx | 18 +++-- src/components/organisms/toolbar/search.tsx | 16 ++--- src/components/organisms/toolbar/settings.tsx | 14 ++-- src/components/organisms/toolbar/toolbar.tsx | 4 +- src/components/organisms/widgets/image-widget.tsx | 34 ++++------ .../organisms/widgets/links-list-widget.tsx | 9 ++- src/components/organisms/widgets/sharing.tsx | 6 +- 81 files changed, 353 insertions(+), 289 deletions(-) (limited to 'src/components/molecules/layout') diff --git a/jest.setup.js b/jest.setup.js index 5c5ecbc..d50c988 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -2,3 +2,4 @@ import '@testing-library/jest-dom/extend-expect'; import './__tests__/jest/__mocks__/matchMedia.mock'; jest.mock('next/dist/client/router', () => require('next-router-mock')); +jest.mock('next/dynamic', () => () => 'dynamic-import'); diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx index 77a7f7b..906fa76 100644 --- a/src/components/atoms/buttons/button-link.tsx +++ b/src/components/atoms/buttons/button-link.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './buttons.module.scss'; export type ButtonLinkProps = { @@ -7,6 +7,10 @@ export type ButtonLinkProps = { * ButtonLink accessible label. */ 'aria-label'?: string; + /** + * The button link body. + */ + children: ReactNode; /** * Set additional classnames to the button link. */ diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx index 545c5c5..a6eef8b 100644 --- a/src/components/atoms/buttons/button.tsx +++ b/src/components/atoms/buttons/button.tsx @@ -1,7 +1,11 @@ -import { FC, MouseEventHandler } from 'react'; +import { FC, MouseEventHandler, ReactNode } from 'react'; import styles from './buttons.module.scss'; export type ButtonProps = { + /** + * The button body. + */ + children: ReactNode; /** * Set additional classnames to the button wrapper. */ diff --git a/src/components/atoms/forms/checkbox.tsx b/src/components/atoms/forms/checkbox.tsx index 8babcc8..aec97f0 100644 --- a/src/components/atoms/forms/checkbox.tsx +++ b/src/components/atoms/forms/checkbox.tsx @@ -1,4 +1,4 @@ -import { SetStateAction, VFC } from 'react'; +import { FC, SetStateAction } from 'react'; export type CheckboxProps = { /** @@ -32,7 +32,7 @@ export type CheckboxProps = { * * Render a checkbox type input. */ -const Checkbox: VFC = ({ value, setValue, ...props }) => { +const Checkbox: FC = ({ value, setValue, ...props }) => { return ( = ({ +const Field: FC = ({ className = '', setValue, type, diff --git a/src/components/atoms/forms/form.test.tsx b/src/components/atoms/forms/form.test.tsx index 9cd3c58..8b534f1 100644 --- a/src/components/atoms/forms/form.test.tsx +++ b/src/components/atoms/forms/form.test.tsx @@ -3,7 +3,11 @@ import Form from './form'; describe('Form', () => { it('renders a form', () => { - render(
null}>
); + render( +
null}> + Fields +
+ ); expect(screen.getByRole('form', { name: 'Jest form' })).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx index 8e80930..ef8dce4 100644 --- a/src/components/atoms/forms/form.tsx +++ b/src/components/atoms/forms/form.tsx @@ -1,4 +1,4 @@ -import { Children, FC, FormEvent, Fragment } from 'react'; +import { Children, FC, FormEvent, Fragment, ReactNode } from 'react'; import styles from './forms.module.scss'; export type FormProps = { @@ -10,6 +10,10 @@ export type FormProps = { * One or more ids that refers to the form name. */ 'aria-labelledby'?: string; + /** + * The form body. + */ + children: ReactNode; /** * Set additional classnames to the form wrapper. */ diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx index 8d57ee2..ce4c70f 100644 --- a/src/components/atoms/forms/label.tsx +++ b/src/components/atoms/forms/label.tsx @@ -1,7 +1,11 @@ -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './label.module.scss'; export type LabelProps = { + /** + * The label body. + */ + children: ReactNode; /** * Add classnames to the label. */ diff --git a/src/components/atoms/forms/select.tsx b/src/components/atoms/forms/select.tsx index 25e86e0..dbe9b37 100644 --- a/src/components/atoms/forms/select.tsx +++ b/src/components/atoms/forms/select.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, SetStateAction, VFC } from 'react'; +import { ChangeEvent, FC, SetStateAction } from 'react'; import styles from './forms.module.scss'; export type SelectOptions = { @@ -60,7 +60,7 @@ export type SelectProps = { * * Render a HTML select element. */ -const Select: VFC = ({ +const Select: FC = ({ className = '', options, setValue, diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx index 4703b5d..c5bf4ca 100644 --- a/src/components/atoms/headings/heading.tsx +++ b/src/components/atoms/headings/heading.tsx @@ -1,9 +1,13 @@ -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './heading.module.scss'; export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; export type HeadingProps = { + /** + * The heading body. + */ + children: ReactNode; /** * Set additional classnames. */ diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx index 5f3c460..2962530 100644 --- a/src/components/atoms/icons/arrow.tsx +++ b/src/components/atoms/icons/arrow.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './arrow.module.scss'; export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left'; @@ -19,7 +19,7 @@ export type ArrowProps = { * * Render a svg arrow icon. */ -const Arrow: VFC = ({ className = '', direction }) => { +const Arrow: FC = ({ className = '', direction }) => { const directionClass = styles[`icon--${direction}`]; const classes = `${styles.icon} ${directionClass} ${className}`; diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx index 28edcc7..f28d399 100644 --- a/src/components/atoms/icons/career.tsx +++ b/src/components/atoms/icons/career.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './career.module.scss'; export type CareerProps = { @@ -13,7 +13,7 @@ export type CareerProps = { * * Render a career svg icon. */ -const Career: VFC = ({ className = '' }) => { +const Career: FC = ({ className = '' }) => { return ( = ({ className = '' }) => { +const CCBySA: FC = ({ className = '' }) => { const intl = useIntl(); return ( diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx index eb9ce7c..3e0adb5 100644 --- a/src/components/atoms/icons/close.tsx +++ b/src/components/atoms/icons/close.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './close.module.scss'; export type CloseProps = { @@ -13,7 +13,7 @@ export type CloseProps = { * * Render a close svg icon. */ -const Close: VFC = ({ className = '' }) => { +const Close: FC = ({ className = '' }) => { return ( = ({ className = '' }) => { +const Cog: FC = ({ className = '' }) => { return ( = ({ className = '' }) => { +const ComputerScreen: FC = ({ className = '' }) => { return ( = ({ className = '' }) => { +const Envelop: FC = ({ className = '' }) => { return ( = ({ className = '' }) => { +const Home: FC = ({ className = '' }) => { return ( = ({ className = '' }) => { +const MagnifyingGlass: FC = ({ className = '' }) => { return ( = ({ className = '', title }) => { +const Moon: FC = ({ className = '', title }) => { return ( = ({ className = '' }) => { +const PostsStack: FC = ({ className = '' }) => { return ( = ({ className = '', title }) => { +const Sun: FC = ({ className = '', title }) => { return ( = ({ title }) => { +const Logo: FC = ({ title }) => { return ( = ({ owner, dates, icon }) => { +const Copyright: FC = ({ owner, dates, icon }) => { const getFormattedDate = (date: string) => { const datetime = new Date(date).toISOString(); diff --git a/src/components/atoms/layout/main.tsx b/src/components/atoms/layout/main.tsx index 4549328..d92a5c7 100644 --- a/src/components/atoms/layout/main.tsx +++ b/src/components/atoms/layout/main.tsx @@ -1,6 +1,10 @@ -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; export type MainProps = { + /** + * The main body. + */ + children: ReactNode; /** * Set additional classnames to the main element. */ diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx index 6358cf8..a503e0c 100644 --- a/src/components/atoms/layout/no-script.tsx +++ b/src/components/atoms/layout/no-script.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './no-script.module.scss'; export type NoScriptProps = { @@ -12,7 +12,7 @@ export type NoScriptProps = { position?: 'initial' | 'top'; }; -const NoScript: VFC = ({ message, position = 'initial' }) => { +const NoScript: FC = ({ message, position = 'initial' }) => { const positionClass = styles[`noscript--${position}`]; return
{message}
; diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx index b6e09c5..115bd9c 100644 --- a/src/components/atoms/layout/notice.tsx +++ b/src/components/atoms/layout/notice.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './notice.module.scss'; export type NoticeKind = 'error' | 'info' | 'success' | 'warning'; @@ -19,7 +19,7 @@ export type NoticeProps = { * * Render a colored message depending on notice kind. */ -const Notice: VFC = ({ kind, message }) => { +const Notice: FC = ({ kind, message }) => { const kindClass = `wrapper--${kind}`; return ( diff --git a/src/components/atoms/layout/section.tsx b/src/components/atoms/layout/section.tsx index f1bbb34..cb727ff 100644 --- a/src/components/atoms/layout/section.tsx +++ b/src/components/atoms/layout/section.tsx @@ -1,4 +1,4 @@ -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import Heading from '../headings/heading'; import styles from './section.module.scss'; @@ -32,7 +32,7 @@ export type SectionProps = { * * Render a section element. */ -const Section: VFC = ({ +const Section: FC = ({ className = '', content, title, diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss index e7ead86..d23667a 100644 --- a/src/components/atoms/links/link.module.scss +++ b/src/components/atoms/links/link.module.scss @@ -5,7 +5,9 @@ &[hreflang] { &::after { display: inline-block; - content: "\0000a0["attr(hreflang) "]"; + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]"; font-size: var(--font-size-sm); } } @@ -13,22 +15,30 @@ &--external { &::after { display: inline-block; - content: "\0000a0"url(fun.encode-svg('')); + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')); } &:focus:not(:active)::after { - content: "\0000a0"url(fun.encode-svg('')); + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')); } &[hreflang] { &::after { - content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg( '' )); } &:focus:not(:active)::after { - content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg( '' )); } diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx index 87f11fc..674c07b 100644 --- a/src/components/atoms/links/link.tsx +++ b/src/components/atoms/links/link.tsx @@ -1,8 +1,12 @@ import NextLink from 'next/link'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './link.module.scss'; export type LinkProps = { + /** + * The link body. + */ + children: ReactNode; /** * Set additional classnames to the link. */ diff --git a/src/components/atoms/links/nav-link.tsx b/src/components/atoms/links/nav-link.tsx index 25c0e7d..7c6fede 100644 --- a/src/components/atoms/links/nav-link.tsx +++ b/src/components/atoms/links/nav-link.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { VFC, ReactNode } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './nav-link.module.scss'; export type NavLinkProps = { @@ -22,7 +22,7 @@ export type NavLinkProps = { * * Render a navigation link. */ -const NavLink: VFC = ({ href, label, logo }) => { +const NavLink: FC = ({ href, label, logo }) => { return ( diff --git a/src/components/atoms/links/sharing-link.tsx b/src/components/atoms/links/sharing-link.tsx index 3cd2dd1..ca53ef9 100644 --- a/src/components/atoms/links/sharing-link.tsx +++ b/src/components/atoms/links/sharing-link.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './sharing-link.module.scss'; @@ -26,7 +26,7 @@ export type SharingLinkProps = { * * Render a sharing link. */ -const SharingLink: VFC = ({ medium, url }) => { +const SharingLink: FC = ({ medium, url }) => { const intl = useIntl(); const text = intl.formatMessage( { diff --git a/src/components/atoms/links/social-link.tsx b/src/components/atoms/links/social-link.tsx index 8c7c790..464bc60 100644 --- a/src/components/atoms/links/social-link.tsx +++ b/src/components/atoms/links/social-link.tsx @@ -2,7 +2,7 @@ import GithubIcon from '@assets/images/social-media/github.svg'; import GitlabIcon from '@assets/images/social-media/gitlab.svg'; import LinkedInIcon from '@assets/images/social-media/linkedin.svg'; import TwitterIcon from '@assets/images/social-media/twitter.svg'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './social-link.module.scss'; export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter'; @@ -23,7 +23,7 @@ export type SocialLinkProps = { * * Render a social icon link. */ -const SocialLink: VFC = ({ name, url }) => { +const SocialLink: FC = ({ name, url }) => { /** * Retrieve a social link icon by id. * @param {string} id - The social website id. diff --git a/src/components/atoms/lists/description-list.tsx b/src/components/atoms/lists/description-list.tsx index 0a92465..a60a6a1 100644 --- a/src/components/atoms/lists/description-list.tsx +++ b/src/components/atoms/lists/description-list.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './description-list.module.scss'; export type DescriptionListItem = { @@ -52,7 +52,7 @@ export type DescriptionListProps = { * * Render a description list. */ -const DescriptionList: VFC = ({ +const DescriptionList: FC = ({ className = '', descriptionClassName = '', groupClassName = '', diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx index d100a31..6726802 100644 --- a/src/components/atoms/lists/list.tsx +++ b/src/components/atoms/lists/list.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './list.module.scss'; export type ListItem = { @@ -44,7 +44,7 @@ export type ListProps = { * * Render either an ordered or an unordered list. */ -const List: VFC = ({ +const List: FC = ({ className = '', items, itemsClassName = '', diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx index 1b1ff06..9bac847 100644 --- a/src/components/atoms/loaders/progress-bar.tsx +++ b/src/components/atoms/loaders/progress-bar.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './progress-bar.module.scss'; export type ProgressBarProps = { @@ -29,7 +29,7 @@ export type ProgressBarProps = { * * Render a progress bar. */ -const ProgressBar: VFC = ({ +const ProgressBar: FC = ({ current, info, min, diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx index bff0f25..6655141 100644 --- a/src/components/atoms/loaders/spinner.tsx +++ b/src/components/atoms/loaders/spinner.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './spinner.module.scss'; @@ -14,7 +14,7 @@ export type SpinnerProps = { * * Render a loading message with animation. */ -const Spinner: VFC = ({ message }) => { +const Spinner: FC = ({ message }) => { const intl = useIntl(); return ( diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx index 8a52231..bd1925a 100644 --- a/src/components/molecules/buttons/back-to-top.tsx +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -1,18 +1,16 @@ -import ButtonLink from '@components/atoms/buttons/button-link'; +import ButtonLink, { + type ButtonLinkProps, +} from '@components/atoms/buttons/button-link'; import Arrow from '@components/atoms/icons/arrow'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './back-to-top.module.scss'; -export type BackToTopProps = { +export type BackToTopProps = Pick & { /** * Set additional classnames to the button wrapper. */ className?: string; - /** - * An element id (without hashtag) to use as anchor. - */ - target: string; }; /** @@ -20,7 +18,7 @@ export type BackToTopProps = { * * Render a back to top link. */ -const BackToTop: VFC = ({ className = '', target }) => { +const BackToTop: FC = ({ className = '', target }) => { const intl = useIntl(); const linkName = intl.formatMessage({ defaultMessage: 'Back to top', diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx index fc79749..0ed9a76 100644 --- a/src/components/molecules/buttons/heading-button.tsx +++ b/src/components/molecules/buttons/heading-button.tsx @@ -1,6 +1,6 @@ import Heading, { type HeadingProps } from '@components/atoms/headings/heading'; import PlusMinus from '@components/atoms/icons/plus-minus'; -import { SetStateAction, VFC } from 'react'; +import { FC, SetStateAction } from 'react'; import { useIntl } from 'react-intl'; import styles from './heading-button.module.scss'; @@ -28,7 +28,7 @@ export type HeadingButtonProps = Pick & { * * Render a button as accordion title to toggle body. */ -const HeadingButton: VFC = ({ +const HeadingButton: FC = ({ className = '', expanded, level, diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx index aeb84ec..f19322f 100644 --- a/src/components/molecules/buttons/help-button.tsx +++ b/src/components/molecules/buttons/help-button.tsx @@ -1,5 +1,5 @@ -import Button, { ButtonProps } from '@components/atoms/buttons/button'; -import { VFC } from 'react'; +import Button, { type ButtonProps } from '@components/atoms/buttons/button'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './help-button.module.scss'; @@ -15,7 +15,7 @@ export type HelpButtonProps = Pick & { * * Render a button with an interrogation mark icon. */ -const HelpButton: VFC = ({ className = '', onClick }) => { +const HelpButton: FC = ({ className = '', onClick }) => { const intl = useIntl(); const text = intl.formatMessage({ defaultMessage: 'Help', diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx index e1e6b2d..ec27922 100644 --- a/src/components/molecules/forms/ackee-select.test.tsx +++ b/src/components/molecules/forms/ackee-select.test.tsx @@ -1,5 +1,5 @@ -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@test-utils'; +import user from '@testing-library/user-event'; +import { act, render, screen } from '@test-utils'; import AckeeSelect from './ackee-select'; describe('Select', () => { @@ -9,13 +9,15 @@ describe('Select', () => { expect(screen.queryByRole('combobox')).not.toHaveValue('partial'); }); - it('should correctly change value when user choose another option', () => { + it('should correctly change value when user choose another option', async () => { render(); - userEvent.selectOptions( - screen.getByRole('combobox'), - screen.getByRole('option', { name: 'Partial' }) - ); + await act(async () => { + await user.selectOptions( + screen.getByRole('combobox'), + screen.getByRole('option', { name: 'Partial' }) + ); + }); expect(screen.getByRole('combobox')).toHaveValue('partial'); expect(screen.queryByRole('combobox')).not.toHaveValue('full'); diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx index 4a8410c..101e5b5 100644 --- a/src/components/molecules/forms/ackee-select.tsx +++ b/src/components/molecules/forms/ackee-select.tsx @@ -1,8 +1,8 @@ import { SelectOptions } from '@components/atoms/forms/select'; -import { Dispatch, SetStateAction, useState, VFC } from 'react'; +import { Dispatch, FC, SetStateAction, useState } from 'react'; import { useIntl } from 'react-intl'; import SelectWithTooltip, { - SelectWithTooltipProps, + type SelectWithTooltipProps, } from './select-with-tooltip'; export type AckeeOptions = 'full' | 'partial'; @@ -22,7 +22,7 @@ export type AckeeSelectProps = Pick< * * Render a select to set Ackee settings. */ -const AckeeSelect: VFC = ({ initialValue, ...props }) => { +const AckeeSelect: FC = ({ initialValue, ...props }) => { const intl = useIntl(); const [value, setValue] = useState(initialValue); diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx index 08d0126..ecc9255 100644 --- a/src/components/molecules/forms/labelled-field.tsx +++ b/src/components/molecules/forms/labelled-field.tsx @@ -1,6 +1,6 @@ import Field, { type FieldProps } from '@components/atoms/forms/field'; import Label from '@components/atoms/forms/label'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './labelled-field.module.scss'; export type LabelledFieldProps = FieldProps & { @@ -23,7 +23,7 @@ export type LabelledFieldProps = FieldProps & { * * Render a field tied to a label. */ -const LabelledField: VFC = ({ +const LabelledField: FC = ({ hideLabel = false, id, label, diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx index 7d4237a..23057d0 100644 --- a/src/components/molecules/forms/labelled-select.tsx +++ b/src/components/molecules/forms/labelled-select.tsx @@ -1,6 +1,6 @@ -import Label, { LabelProps } from '@components/atoms/forms/label'; +import Label, { type LabelProps } from '@components/atoms/forms/label'; import Select, { type SelectProps } from '@components/atoms/forms/select'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './labelled-select.module.scss'; export type LabelledSelectProps = Omit< @@ -14,7 +14,7 @@ export type LabelledSelectProps = Omit< /** * Set additional classnames to the label. */ - labelClassName?: string; + labelClassName?: LabelProps['className']; /** * The label position. Default: top. */ @@ -26,10 +26,15 @@ export type LabelledSelectProps = Omit< /** * Set additional classnames to the select field. */ - selectClassName?: string; + selectClassName?: SelectProps['className']; }; -const LabelledSelect: VFC = ({ +/** + * LabelledSelect component + * + * Render a select with a label. + */ +const LabelledSelect: FC = ({ id, label, labelClassName = '', diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx index 9f30b42..24b54ae 100644 --- a/src/components/molecules/forms/motion-toggle.tsx +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -1,8 +1,8 @@ import Toggle, { - ToggleChoices, - ToggleProps, + type ToggleChoices, + type ToggleProps, } from '@components/molecules/forms/toggle'; -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; export type MotionToggleProps = Pick; @@ -12,7 +12,7 @@ export type MotionToggleProps = Pick; * * Render a Toggle component to set reduce motion. */ -const MotionToggle: VFC = ({ value, ...props }) => { +const MotionToggle: FC = ({ value, ...props }) => { const intl = useIntl(); const [isDeactivated, setIsDeactivated] = useState(value); const reduceMotionLabel = intl.formatMessage({ diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx index daee6bd..0b9c447 100644 --- a/src/components/molecules/forms/prism-theme-toggle.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.tsx @@ -1,10 +1,10 @@ import Moon from '@components/atoms/icons/moon'; import Sun from '@components/atoms/icons/sun'; import Toggle, { - ToggleChoices, - ToggleProps, + type ToggleChoices, + type ToggleProps, } from '@components/molecules/forms/toggle'; -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; export type PrismThemeToggleProps = Pick< @@ -17,7 +17,7 @@ export type PrismThemeToggleProps = Pick< * * Render a Toggle component to set code blocks theme. */ -const PrismThemeToggle: VFC = ({ value, ...props }) => { +const PrismThemeToggle: FC = ({ value, ...props }) => { const intl = useIntl(); const [isDarkTheme, setIsDarkTheme] = useState(value); const themeLabel = intl.formatMessage({ diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx index f537e1e..cf7b041 100644 --- a/src/components/molecules/forms/select-with-tooltip.tsx +++ b/src/components/molecules/forms/select-with-tooltip.tsx @@ -1,4 +1,4 @@ -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import HelpButton from '../buttons/help-button'; import Tooltip, { type TooltipProps } from '../modals/tooltip'; import LabelledSelect, { type LabelledSelectProps } from './labelled-select'; @@ -9,14 +9,10 @@ export type SelectWithTooltipProps = Omit< 'labelPosition' > & Pick & { - /** - * The select label. - */ - label: string; /** * Set additional classnames to the tooltip wrapper. */ - tooltipClassName?: string; + tooltipClassName?: TooltipProps['className']; }; /** @@ -24,7 +20,7 @@ export type SelectWithTooltipProps = Omit< * * Render a select with a button to display a tooltip about options. */ -const SelectWithTooltip: VFC = ({ +const SelectWithTooltip: FC = ({ title, content, id, diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx index eb56ce9..10c6c47 100644 --- a/src/components/molecules/forms/theme-toggle.tsx +++ b/src/components/molecules/forms/theme-toggle.tsx @@ -1,10 +1,10 @@ import Moon from '@components/atoms/icons/moon'; import Sun from '@components/atoms/icons/sun'; import Toggle, { - ToggleChoices, - ToggleProps, + type ToggleChoices, + type ToggleProps, } from '@components/molecules/forms/toggle'; -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; export type ThemeToggleProps = Pick; @@ -14,7 +14,7 @@ export type ThemeToggleProps = Pick; * * Render a Toggle component to set theme. */ -const ThemeToggle: VFC = ({ value, ...props }) => { +const ThemeToggle: FC = ({ value, ...props }) => { const intl = useIntl(); const [isDarkTheme, setIsDarkTheme] = useState(value); const themeLabel = intl.formatMessage({ diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx index dff2d2d..288062d 100644 --- a/src/components/molecules/forms/toggle.tsx +++ b/src/components/molecules/forms/toggle.tsx @@ -1,6 +1,6 @@ -import Checkbox from '@components/atoms/forms/checkbox'; +import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; import Label, { type LabelProps } from '@components/atoms/forms/label'; -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './toggle.module.scss'; export type ToggleChoices = { @@ -14,15 +14,11 @@ export type ToggleChoices = { right: ReactNode; }; -export type ToggleProps = { +export type ToggleProps = Pick & { /** * The toggle choices. */ choices: ToggleChoices; - /** - * The input id. - */ - id: string; /** * The toggle label. */ @@ -30,15 +26,11 @@ export type ToggleProps = { /** * Set additional classnames to the label. */ - labelClassName?: string; + labelClassName?: LabelProps['className']; /** * The label size. */ labelSize?: LabelProps['size']; - /** - * The input name. - */ - name: string; /** * The toggle value. True if checked. */ @@ -54,7 +46,7 @@ export type ToggleProps = { * * Render a toggle with a label and two choices. */ -const Toggle: VFC = ({ +const Toggle: FC = ({ choices, id, label, diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index 1d8787e..31cbcd1 100644 --- a/src/components/molecules/images/responsive-image.tsx +++ b/src/components/molecules/images/responsive-image.tsx @@ -1,6 +1,6 @@ -import Link from '@components/atoms/links/link'; -import Image, { ImageProps } from 'next/image'; -import { VFC } from 'react'; +import Link, { type LinkProps } from '@components/atoms/links/link'; +import Image, { type ImageProps } from 'next/image'; +import { FC } from 'react'; import styles from './responsive-image.module.scss'; export type ResponsiveImageProps = Omit< @@ -26,7 +26,7 @@ export type ResponsiveImageProps = Omit< /** * A link target. */ - target?: string; + target?: LinkProps['href']; /** * The image width. */ @@ -38,7 +38,7 @@ export type ResponsiveImageProps = Omit< * * Render a responsive image wrapped in a figure element. */ -const ResponsiveImage: VFC = ({ +const ResponsiveImage: FC = ({ alt, caption, className = '', diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx index 9f564bf..9fe89e7 100644 --- a/src/components/molecules/layout/branding.tsx +++ b/src/components/molecules/layout/branding.tsx @@ -1,11 +1,11 @@ import Heading from '@components/atoms/headings/heading'; import Link from 'next/link'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './branding.module.scss'; -import FlippingLogo from './flipping-logo'; +import FlippingLogo, { type FlippingLogoProps } from './flipping-logo'; -type BrandingProps = { +export type BrandingProps = Pick & { /** * The Branding baseline. */ @@ -14,10 +14,6 @@ type BrandingProps = { * Use H1 if the current page is homepage. Default: false. */ isHome?: boolean; - /** - * A photography URL. - */ - photo: string; /** * The Branding title; */ @@ -33,7 +29,7 @@ type BrandingProps = { * * Render the branding logo, title and optional baseline. */ -const Branding: VFC = ({ +const Branding: FC = ({ baseline, isHome = false, photo, diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx index 23a0e54..89f100e 100644 --- a/src/components/molecules/layout/card.tsx +++ b/src/components/molecules/layout/card.tsx @@ -1,11 +1,11 @@ import ButtonLink from '@components/atoms/buttons/button-link'; import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; import DescriptionList, { - DescriptionListItem, + type DescriptionListItem, } from '@components/atoms/lists/description-list'; -import { VFC } from 'react'; +import { FC } from 'react'; import ResponsiveImage, { - ResponsiveImageProps, + type ResponsiveImageProps, } from '../images/responsive-image'; import styles from './card.module.scss'; @@ -68,7 +68,7 @@ export type CardProps = { * * Render a link with minimal information about its content. */ -const Card: VFC = ({ +const Card: FC = ({ className = '', cover, coverFit = 'cover', diff --git a/src/components/molecules/layout/flipping-logo.tsx b/src/components/molecules/layout/flipping-logo.tsx index 6f7645f..4a216ef 100644 --- a/src/components/molecules/layout/flipping-logo.tsx +++ b/src/components/molecules/layout/flipping-logo.tsx @@ -1,9 +1,9 @@ -import Logo from '@components/atoms/images/logo'; +import Logo, { type LogoProps } from '@components/atoms/images/logo'; import Image from 'next/image'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './flipping-logo.module.scss'; -type FlippingLogoProps = { +export type FlippingLogoProps = { /** * Set additional classnames to the logo wrapper. */ @@ -15,7 +15,7 @@ type FlippingLogoProps = { /** * Logo image title. */ - logoTitle?: string; + logoTitle?: LogoProps['title']; /** * Photo url. */ @@ -27,7 +27,7 @@ type FlippingLogoProps = { * * Render a logo and a photo with a flipping effect. */ -const FlippingLogo: VFC = ({ +const FlippingLogo: FC = ({ className = '', altText, logoTitle, diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx index 218ebd9..fcce473 100644 --- a/src/components/molecules/layout/meta.tsx +++ b/src/components/molecules/layout/meta.tsx @@ -2,7 +2,7 @@ import DescriptionList, { type DescriptionListProps, type DescriptionListItem, } from '@components/atoms/lists/description-list'; -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; export type MetaItem = { /** @@ -43,7 +43,7 @@ export type MetaProps = { * * Renders the page metadata. */ -const Meta: VFC = ({ data, ...props }) => { +const Meta: FC = ({ data, ...props }) => { /** * Transform the metadata to description list item format. * diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx index c04362a..feb2add 100644 --- a/src/components/molecules/layout/widget.tsx +++ b/src/components/molecules/layout/widget.tsx @@ -1,11 +1,17 @@ -import { FC, useState } from 'react'; -import HeadingButton, { HeadingButtonProps } from '../buttons/heading-button'; +import { FC, ReactNode, useState } from 'react'; +import HeadingButton, { + type HeadingButtonProps, +} from '../buttons/heading-button'; import styles from './widget.module.scss'; export type WidgetProps = Pick< HeadingButtonProps, 'expanded' | 'level' | 'title' > & { + /** + * The widget body. + */ + children: ReactNode; /** * Set additional classnames to the widget wrapper. */ diff --git a/src/components/molecules/modals/modal.test.tsx b/src/components/molecules/modals/modal.test.tsx index 14fb224..9a0e237 100644 --- a/src/components/molecules/modals/modal.test.tsx +++ b/src/components/molecules/modals/modal.test.tsx @@ -1,9 +1,18 @@ import { render, screen } from '@test-utils'; import Modal from './modal'; +const title = 'A custom title'; +const children = + 'Labore ullam delectus sit modi quam dolores. Ratione id sint aliquid facilis ipsum. Unde necessitatibus provident minus.'; + describe('Modal', () => { it('renders a title', () => { - render(); - expect(screen.getByText('A custom title')).toBeInTheDocument(); + render({children}); + expect(screen.getByText(title)).toBeInTheDocument(); + }); + + it('renders the modal body', () => { + render({children}); + expect(screen.getByText(children)).toBeInTheDocument(); }); }); diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx index 52ada57..58f5fa0 100644 --- a/src/components/molecules/modals/modal.tsx +++ b/src/components/molecules/modals/modal.tsx @@ -1,13 +1,17 @@ -import Heading from '@components/atoms/headings/heading'; -import { CogProps } from '@components/atoms/icons/cog'; -import { MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass'; +import Heading, { type HeadingProps } from '@components/atoms/headings/heading'; +import { type CogProps } from '@components/atoms/icons/cog'; +import { type MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass'; import dynamic from 'next/dynamic'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './modal.module.scss'; export type Icons = 'cogs' | 'search'; export type ModalProps = { + /** + * The modal body. + */ + children: ReactNode; /** * Set additional classnames. */ @@ -15,7 +19,7 @@ export type ModalProps = { /** * Set additional classnames to the heading. */ - headingClassName?: string; + headingClassName?: HeadingProps['className']; /** * A icon to illustrate the modal. */ diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx index 73f36e7..80721f3 100644 --- a/src/components/molecules/modals/tooltip.tsx +++ b/src/components/molecules/modals/tooltip.tsx @@ -1,5 +1,5 @@ import List, { type ListItem } from '@components/atoms/lists/list'; -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './tooltip.module.scss'; export type TooltipProps = { @@ -26,7 +26,7 @@ export type TooltipProps = { * * Render a tooltip modal. */ -const Tooltip: VFC = ({ +const Tooltip: FC = ({ className = '', content, icon, diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx index 33af735..6dc86a0 100644 --- a/src/components/molecules/nav/breadcrumb.tsx +++ b/src/components/molecules/nav/breadcrumb.tsx @@ -1,7 +1,7 @@ import Link from '@components/atoms/links/link'; import { settings } from '@utils/config'; import Script from 'next/script'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import { BreadcrumbList, ListItem, WithContext } from 'schema-dts'; import styles from './breadcrumb.module.scss'; @@ -37,7 +37,7 @@ export type BreadcrumbProps = { * * Render a breadcrumb navigation. */ -const Breadcrumb: VFC = ({ items, ...props }) => { +const Breadcrumb: FC = ({ items, ...props }) => { const intl = useIntl(); /** diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx index 6ef9158..2666ea2 100644 --- a/src/components/molecules/nav/nav.tsx +++ b/src/components/molecules/nav/nav.tsx @@ -1,6 +1,6 @@ import Link from '@components/atoms/links/link'; import NavLink from '@components/atoms/links/nav-link'; -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './nav.module.scss'; export type NavItem = { @@ -46,7 +46,7 @@ export type NavProps = { * * Render the nav links. */ -const Nav: VFC = ({ +const Nav: FC = ({ className = '', items, kind, diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx index 1ab7cf2..670176c 100644 --- a/src/components/organisms/forms/comment-form.stories.tsx +++ b/src/components/organisms/forms/comment-form.stories.tsx @@ -1,4 +1,3 @@ -import Notice from '@components/atoms/layout/notice'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import CommentFormComponent from './comment-form'; diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx index 6acbf94..d7cb0f5 100644 --- a/src/components/organisms/forms/comment-form.tsx +++ b/src/components/organisms/forms/comment-form.tsx @@ -3,7 +3,7 @@ import Form from '@components/atoms/forms/form'; import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; import Spinner from '@components/atoms/loaders/spinner'; import LabelledField from '@components/molecules/forms/labelled-field'; -import { ReactNode, useState, VFC } from 'react'; +import { FC, ReactNode, useState } from 'react'; import { useIntl } from 'react-intl'; import styles from './comment-form.module.scss'; @@ -31,7 +31,7 @@ export type CommentFormProps = { titleLevel?: HeadingLevel; }; -const CommentForm: VFC = ({ +const CommentForm: FC = ({ className = '', Notice, saveComment, diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx index 994244a..4a6902b 100644 --- a/src/components/organisms/forms/contact-form.tsx +++ b/src/components/organisms/forms/contact-form.tsx @@ -2,7 +2,7 @@ import Button from '@components/atoms/buttons/button'; import Form from '@components/atoms/forms/form'; import Spinner from '@components/atoms/loaders/spinner'; import LabelledField from '@components/molecules/forms/labelled-field'; -import { ReactNode, useState, VFC } from 'react'; +import { FC, ReactNode, useState } from 'react'; import { useIntl } from 'react-intl'; import styles from './contact-form.module.scss'; @@ -27,7 +27,7 @@ export type ContactFormProps = { * * Render a contact form. */ -const ContactForm: VFC = ({ +const ContactForm: FC = ({ className = '', Notice, sendMail, diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx index 351d93c..18b7c08 100644 --- a/src/components/organisms/forms/search-form.tsx +++ b/src/components/organisms/forms/search-form.tsx @@ -2,15 +2,20 @@ import Button from '@components/atoms/buttons/button'; import Form from '@components/atoms/forms/form'; import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; import LabelledField, { - LabelledFieldProps, + type LabelledFieldProps, } from '@components/molecules/forms/labelled-field'; -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; import styles from './search-form.module.scss'; export type SearchFormProps = Pick; -const SearchForm: VFC = ({ hideLabel }) => { +/** + * SearchForm component + * + * Render a search form. + */ +const SearchForm: FC = ({ hideLabel }) => { const intl = useIntl(); const fieldLabel = intl.formatMessage({ defaultMessage: 'Search for:', diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx index a53df0d..33ffe23 100644 --- a/src/components/organisms/layout/cards-list.tsx +++ b/src/components/organisms/layout/cards-list.tsx @@ -3,7 +3,7 @@ import List, { type ListProps, } from '@components/atoms/lists/list'; import Card, { type CardProps } from '@components/molecules/layout/card'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './cards-list.module.scss'; export type CardsListItem = Omit< @@ -37,7 +37,7 @@ export type CardsListProps = { * * Return a list of Card components. */ -const CardsList: VFC = ({ +const CardsList: FC = ({ coverFit, items, kind = 'unordered', diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx index c9cb067..15bfa24 100644 --- a/src/components/organisms/layout/footer.tsx +++ b/src/components/organisms/layout/footer.tsx @@ -1,7 +1,9 @@ -import Copyright, { CopyrightProps } from '@components/atoms/layout/copyright'; +import Copyright, { + type CopyrightProps, +} from '@components/atoms/layout/copyright'; import BackToTop from '@components/molecules/buttons/back-to-top'; import Nav, { type NavItem } from '@components/molecules/nav/nav'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './footer.module.scss'; export type FooterProps = { @@ -28,12 +30,7 @@ export type FooterProps = { * * Renders a footer with copyright and nav; */ -const Footer: VFC = ({ - className, - copyright, - navItems, - topId, -}) => { +const Footer: FC = ({ className, copyright, navItems, topId }) => { return (