diff options
36 files changed, 270 insertions, 118 deletions
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<ButtonProps> = ({ - additionalClasses, + className = '', ariaLabel, children, disabled = false, @@ -54,7 +54,7 @@ const Button: FC<ButtonProps> = ({ <button type={type} disabled={disabled} - className={`${styles.btn} ${kindClass} ${shapeClass} ${additionalClasses}`} + className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`} aria-label={ariaLabel} {...props} > diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss index a1c3dba..87c92db 100644 --- a/src/components/atoms/buttons/buttons.module.scss +++ b/src/components/atoms/buttons/buttons.module.scss @@ -28,6 +28,10 @@ cursor: wait; } + &--neutral { + background: inherit; + } + &--primary { background: var(--color-primary); border: fun.convert-px(2) solid var(--color-bg); diff --git a/src/components/atoms/forms/toggle.module.scss b/src/components/atoms/forms/toggle.module.scss index 00e87a2..24b867e 100644 --- a/src/components/atoms/forms/toggle.module.scss +++ b/src/components/atoms/forms/toggle.module.scss @@ -6,10 +6,11 @@ display: inline-flex; align-items: center; + width: 100%; } .title { - margin-right: var(--spacing-xs); + margin-right: auto; } .toggle { diff --git a/src/components/atoms/forms/toggle.stories.tsx b/src/components/atoms/forms/toggle.stories.tsx index 6e7323b..ea08694 100644 --- a/src/components/atoms/forms/toggle.stories.tsx +++ b/src/components/atoms/forms/toggle.stories.tsx @@ -34,6 +34,20 @@ export default { required: true, }, }, + labelSize: { + control: { + type: 'select', + }, + description: 'The label size.', + options: ['medium', 'small'], + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, name: { control: { type: 'text', diff --git a/src/components/atoms/forms/toggle.tsx b/src/components/atoms/forms/toggle.tsx index e8e8c0f..7ef40ed 100644 --- a/src/components/atoms/forms/toggle.tsx +++ b/src/components/atoms/forms/toggle.tsx @@ -1,9 +1,16 @@ -import { FC, ReactElement } from 'react'; +import { ReactNode, VFC } from 'react'; +import Label, { LabelProps } from './label'; import styles from './toggle.module.scss'; export type ToggleChoices = { - left: ReactElement | string; - right: ReactElement | string; + /** + * The left part of the toggle field (unchecked). + */ + left: ReactNode; + /** + * The right part of the toggle field (checked). + */ + right: ReactNode; }; export type ToggleProps = { @@ -20,6 +27,10 @@ export type ToggleProps = { */ label: string; /** + * The label size. + */ + labelSize?: LabelProps['size']; + /** * The input name. */ name: string; @@ -38,13 +49,14 @@ export type ToggleProps = { * * Render a toggle with a label and two choices. */ -const Toggle: FC<ToggleProps> = ({ +const Toggle: VFC<ToggleProps> = ({ choices, id, label, + labelSize, name, - value, setValue, + value, }) => { return ( <> @@ -56,12 +68,12 @@ const Toggle: FC<ToggleProps> = ({ onChange={() => setValue(!value)} className={styles.checkbox} /> - <label htmlFor={id} className={styles.label}> + <Label size={labelSize} htmlFor={id} className={styles.label}> <span className={styles.title}>{label}</span> {choices.left} <span className={styles.toggle}></span> {choices.right} - </label> + </Label> </> ); }; diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx index cea3532..66a84dc 100644 --- a/src/components/atoms/headings/heading.stories.tsx +++ b/src/components/atoms/headings/heading.stories.tsx @@ -9,13 +9,13 @@ export default { withMargin: true, }, argTypes: { - additionalClasses: { + className: { control: { type: 'text', }, - description: 'Set additional classes.', + description: 'Set additional classnames.', table: { - category: 'Options', + category: 'Styles', }, type: { name: 'string', @@ -71,12 +71,12 @@ export default { }, } as ComponentMeta<typeof HeadingComponent>; -const Template: ComponentStory<typeof HeadingComponent> = (args) => { - const { level, ...props } = args; - return <HeadingComponent level={level || 1} {...props} />; -}; +const Template: ComponentStory<typeof HeadingComponent> = (args) => ( + <HeadingComponent {...args} /> +); export const Heading = Template.bind({}); Heading.args = { children: 'Your title', + level: 1, }; diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx index 136571d..3048534 100644 --- a/src/components/atoms/headings/heading.tsx +++ b/src/components/atoms/headings/heading.tsx @@ -1,19 +1,21 @@ import { FC } from 'react'; import styles from './heading.module.scss'; +export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; + export type HeadingProps = { /** - * Adds additional classes. + * Set additional classnames. */ - additionalClasses?: string; + className?: string; /** * Use an heading element or only its styles. Default: false. */ isFake?: boolean; /** - * HTML heading level: 'h1', 'h2', 'h3', 'h4', 'h5' or 'h6'. + * HTML heading level. */ - level: 1 | 2 | 3 | 4 | 5 | 6; + level: HeadingLevel; /** * Adds margin. Default: true. */ @@ -27,7 +29,7 @@ export type HeadingProps = { */ const Heading: FC<HeadingProps> = ({ children, - additionalClasses, + className, isFake = false, level, withMargin = true, @@ -38,7 +40,7 @@ const Heading: FC<HeadingProps> = ({ return ( <TitleTag - className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${additionalClasses}`} + className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${className}`} > {children} </TitleTag> diff --git a/src/components/atoms/images/logo.stories.tsx b/src/components/atoms/images/logo.stories.tsx index afb5317..fbc7501 100644 --- a/src/components/atoms/images/logo.stories.tsx +++ b/src/components/atoms/images/logo.stories.tsx @@ -4,6 +4,21 @@ import LogoComponent from './logo'; export default { title: 'Atoms/Images', component: LogoComponent, + argTypes: { + title: { + control: { + type: 'text', + }, + description: 'The SVG title.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof LogoComponent>; const Template: ComponentStory<typeof LogoComponent> = (args) => ( diff --git a/src/components/atoms/images/logo.tsx b/src/components/atoms/images/logo.tsx index 9ce2518..2e52110 100644 --- a/src/components/atoms/images/logo.tsx +++ b/src/components/atoms/images/logo.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './logo.module.scss'; type LogoProps = { @@ -13,7 +13,7 @@ type LogoProps = { * * Render a SVG logo. */ -const Logo: FC<LogoProps> = ({ title }) => { +const Logo: VFC<LogoProps> = ({ title }) => { return ( <svg viewBox="0 0 512 512" diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx index e5a8b0a..569c874 100644 --- a/src/components/atoms/links/link.stories.tsx +++ b/src/components/atoms/links/link.stories.tsx @@ -15,6 +15,19 @@ export default { required: true, }, }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, external: { control: { type: 'boolean', diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx index a61158f..87f11fc 100644 --- a/src/components/atoms/links/link.tsx +++ b/src/components/atoms/links/link.tsx @@ -2,11 +2,11 @@ import NextLink from 'next/link'; import { FC } from 'react'; import styles from './link.module.scss'; -type LinkProps = { +export type LinkProps = { /** - * Set additional classes to the link. + * Set additional classnames to the link. */ - classes?: string; + className?: string; /** * True if it is an external link. Default: false. */ @@ -28,24 +28,22 @@ type LinkProps = { */ const Link: FC<LinkProps> = ({ children, - classes, + className = '', href, lang, external = false, }) => { - const additionalClasses = classes || ''; - return external ? ( <a href={href} hrefLang={lang} - className={`${styles.link} ${styles['link--external']} ${additionalClasses}`} + className={`${styles.link} ${styles['link--external']} ${className}`} > {children} </a> ) : ( <NextLink href={href}> - <a className={`${styles.link} ${additionalClasses}`}>{children}</a> + <a className={`${styles.link} ${className}`}>{children}</a> </NextLink> ); }; diff --git a/src/components/atoms/links/nav-link.tsx b/src/components/atoms/links/nav-link.tsx index 7c6fede..25c0e7d 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 { FC, ReactNode } from 'react'; +import { VFC, 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: FC<NavLinkProps> = ({ href, label, logo }) => { +const NavLink: VFC<NavLinkProps> = ({ href, label, logo }) => { return ( <Link href={href}> <a className={styles.link}> diff --git a/src/components/atoms/links/sharing-link.tsx b/src/components/atoms/links/sharing-link.tsx index ca53ef9..3cd2dd1 100644 --- a/src/components/atoms/links/sharing-link.tsx +++ b/src/components/atoms/links/sharing-link.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { VFC } 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: FC<SharingLinkProps> = ({ medium, url }) => { +const SharingLink: VFC<SharingLinkProps> = ({ 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 489c8b4..8c7c790 100644 --- a/src/components/atoms/links/social-link.tsx +++ b/src/components/atoms/links/social-link.tsx @@ -2,14 +2,16 @@ 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 { FC } from 'react'; +import { VFC } from 'react'; import styles from './social-link.module.scss'; -type SocialLinkProps = { +export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter'; + +export type SocialLinkProps = { /** * The social website name. */ - name: 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter'; + name: SocialWebsite; /** * The social profile url. */ @@ -21,7 +23,7 @@ type SocialLinkProps = { * * Render a social icon link. */ -const SocialLink: FC<SocialLinkProps> = ({ name, url }) => { +const SocialLink: VFC<SocialLinkProps> = ({ 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.stories.tsx b/src/components/atoms/lists/description-list.stories.tsx index e9a60cf..c65241d 100644 --- a/src/components/atoms/lists/description-list.stories.tsx +++ b/src/components/atoms/lists/description-list.stories.tsx @@ -7,13 +7,13 @@ export default { title: 'Atoms/Lists', component: DescriptionListComponent, argTypes: { - classes: { + className: { control: { type: 'text', }, - description: 'Set additional classes to the list wrapper.', + description: 'Set additional classnames to the list wrapper', table: { - category: 'Options', + category: 'Styles', }, type: { name: 'string', diff --git a/src/components/atoms/lists/description-list.tsx b/src/components/atoms/lists/description-list.tsx index df2880f..a5ab1d5 100644 --- a/src/components/atoms/lists/description-list.tsx +++ b/src/components/atoms/lists/description-list.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './description-list.module.scss'; export type DescriptionListItem = { @@ -18,9 +18,9 @@ export type DescriptionListItem = { export type DescriptionListProps = { /** - * Set additional classes to the list wrapper. + * Set additional classnames to the list wrapper. */ - classes?: string; + className?: string; /** * The list items. */ @@ -32,7 +32,10 @@ export type DescriptionListProps = { * * Render a description list. */ -const DescriptionList: FC<DescriptionListProps> = ({ classes = '', items }) => { +const DescriptionList: VFC<DescriptionListProps> = ({ + className = '', + items, +}) => { /** * Retrieve the description list items wrapped in a div element. * @@ -54,7 +57,7 @@ const DescriptionList: FC<DescriptionListProps> = ({ classes = '', items }) => { }); }; - return <dl className={`${styles.list} ${classes}`}>{getItems(items)}</dl>; + return <dl className={`${styles.list} ${className}`}>{getItems(items)}</dl>; }; export default DescriptionList; diff --git a/src/components/atoms/lists/list.stories.tsx b/src/components/atoms/lists/list.stories.tsx index 6256e81..30079cb 100644 --- a/src/components/atoms/lists/list.stories.tsx +++ b/src/components/atoms/lists/list.stories.tsx @@ -8,13 +8,13 @@ export default { kind: 'unordered', }, argTypes: { - classes: { + className: { control: { type: 'text', }, - description: 'Add additional classes to the list element.', + description: 'Set additional classnames to the list wrapper', table: { - category: 'Options', + category: 'Styles', }, type: { name: 'string', diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx index 8ce8437..7197c34 100644 --- a/src/components/atoms/lists/list.tsx +++ b/src/components/atoms/lists/list.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './list.module.scss'; export type ListItem = { @@ -18,9 +18,9 @@ export type ListItem = { export type ListProps = { /** - * Add additional classes to the list element. + * Set additional classnames to the list wrapper */ - classes?: string; + className?: string; /** * An array of list items. */ @@ -36,9 +36,8 @@ export type ListProps = { * * Render either an ordered or an unordered list. */ -const List: FC<ListProps> = ({ classes, items, kind = 'unordered' }) => { +const List: VFC<ListProps> = ({ className, items, kind = 'unordered' }) => { const ListTag = kind === 'ordered' ? 'ol' : 'ul'; - const additionalClasses = classes || ''; const kindClass = `list--${kind}`; /** @@ -52,7 +51,7 @@ const List: FC<ListProps> = ({ classes, items, kind = 'unordered' }) => { {value} {child && ( <ListTag - className={`${styles.list} ${styles[kindClass]} ${additionalClasses}`} + className={`${styles.list} ${styles[kindClass]} ${className}`} > {getItems(child)} </ListTag> @@ -62,9 +61,7 @@ const List: FC<ListProps> = ({ classes, items, kind = 'unordered' }) => { }; return ( - <ListTag - className={`${styles.list} ${styles[kindClass]} ${additionalClasses}`} - > + <ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}> {getItems(items)} </ListTag> ); diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx index 837a696..4fde5a7 100644 --- a/src/components/atoms/loaders/progress-bar.stories.tsx +++ b/src/components/atoms/loaders/progress-bar.stories.tsx @@ -5,11 +5,14 @@ export default { title: 'Atoms/Loaders', component: ProgressBarComponent, argTypes: { - ariaLabel: { + 'aria-label': { control: { type: 'string', }, description: 'An accessible name.', + table: { + category: 'Accessibility', + }, type: { name: 'string', required: false, @@ -30,6 +33,9 @@ export default { type: 'text', }, description: 'An additional information to display.', + table: { + category: 'Options', + }, type: { name: 'string', required: false, diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx index fa4e09d..1b1ff06 100644 --- a/src/components/atoms/loaders/progress-bar.tsx +++ b/src/components/atoms/loaders/progress-bar.tsx @@ -1,11 +1,11 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './progress-bar.module.scss'; export type ProgressBarProps = { /** * Accessible progress bar name. */ - ariaLabel?: string; + 'aria-label'?: string; /** * Current value. */ @@ -29,12 +29,12 @@ export type ProgressBarProps = { * * Render a progress bar. */ -const ProgressBar: FC<ProgressBarProps> = ({ - ariaLabel, +const ProgressBar: VFC<ProgressBarProps> = ({ current, info, min, max, + ...props }) => { return ( <div className={styles.progress}> @@ -46,7 +46,7 @@ const ProgressBar: FC<ProgressBarProps> = ({ aria-valuemin={min} aria-valuemax={max} aria-valuenow={current} - aria-label={ariaLabel} + {...props} ></progress> </div> ); diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx index 86c316e..5006ce4 100644 --- a/src/components/atoms/loaders/spinner.stories.tsx +++ b/src/components/atoms/loaders/spinner.stories.tsx @@ -11,6 +11,9 @@ export default { type: 'text', }, description: 'Loading message.', + table: { + category: 'Options', + }, type: { name: 'string', required: false, diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx index 57b0a43..bff0f25 100644 --- a/src/components/atoms/loaders/spinner.tsx +++ b/src/components/atoms/loaders/spinner.tsx @@ -1,8 +1,8 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import { useIntl } from 'react-intl'; import styles from './spinner.module.scss'; -type SpinnerProps = { +export type SpinnerProps = { /** * The loading message. Default: "Loading...". */ @@ -14,7 +14,7 @@ type SpinnerProps = { * * Render a loading message with animation. */ -const Spinner: FC<SpinnerProps> = ({ message }) => { +const Spinner: VFC<SpinnerProps> = ({ message }) => { const intl = useIntl(); return ( diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx index f1a36e5..fe58293 100644 --- a/src/components/molecules/buttons/back-to-top.stories.tsx +++ b/src/components/molecules/buttons/back-to-top.stories.tsx @@ -6,11 +6,14 @@ export default { title: 'Molecules/Buttons', component: BackToTopComponent, argTypes: { - additionalClasses: { + className: { control: { type: 'text', }, - description: 'Add additional classes to the button wrapper.', + description: 'Set additional classnames to the button wrapper.', + table: { + category: 'Styles', + }, type: { name: 'string', required: false, diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx index f25d3e9..56c5247 100644 --- a/src/components/molecules/buttons/back-to-top.tsx +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -1,14 +1,14 @@ import ButtonLink from '@components/atoms/buttons/button-link'; import Arrow from '@components/atoms/icons/arrow'; -import { FC } from 'react'; +import { VFC } from 'react'; import { useIntl } from 'react-intl'; import styles from './back-to-top.module.scss'; -type BackToTopProps = { +export type BackToTopProps = { /** - * Add additional classes to the button wrapper. + * Set additional classnames to the button wrapper. */ - additionalClasses?: string; + className?: string; /** * An element id (without hashtag) to use as anchor. */ @@ -20,7 +20,7 @@ type BackToTopProps = { * * Render a back to top link. */ -const BackToTop: FC<BackToTopProps> = ({ additionalClasses, target }) => { +const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => { const intl = useIntl(); const linkName = intl.formatMessage({ defaultMessage: 'Back to top', @@ -29,7 +29,7 @@ const BackToTop: FC<BackToTopProps> = ({ additionalClasses, target }) => { }); return ( - <div className={`${styles.wrapper} ${additionalClasses}`}> + <div className={`${styles.wrapper} ${className}`}> <ButtonLink shape="square" target={`#${target}`} aria-label={linkName}> <Arrow direction="top" /> </ButtonLink> diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx index 7ed953e..cfc1b0b 100644 --- a/src/components/molecules/buttons/help-button.stories.tsx +++ b/src/components/molecules/buttons/help-button.stories.tsx @@ -6,11 +6,11 @@ export default { title: 'Molecules/Buttons', component: HelpButtonComponent, argTypes: { - classes: { + className: { control: { type: 'text', }, - description: 'Set additional classes to the button.', + description: 'Set additional classnames to the button wrapper.', table: { category: 'Options', }, diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx index d933829..aeb84ec 100644 --- a/src/components/molecules/buttons/help-button.tsx +++ b/src/components/molecules/buttons/help-button.tsx @@ -1,13 +1,13 @@ import Button, { ButtonProps } from '@components/atoms/buttons/button'; -import { FC } from 'react'; +import { VFC } from 'react'; import { useIntl } from 'react-intl'; import styles from './help-button.module.scss'; export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & { /** - * Set additional classes to the button. + * Set additional classnames to the button wrapper. */ - classes?: string; + className?: string; }; /** @@ -15,7 +15,7 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & { * * Render a button with an interrogation mark icon. */ -const HelpButton: FC<HelpButtonProps> = ({ classes = '', onClick }) => { +const HelpButton: VFC<HelpButtonProps> = ({ className = '', onClick }) => { const intl = useIntl(); const text = intl.formatMessage({ defaultMessage: 'Help', @@ -26,7 +26,7 @@ const HelpButton: FC<HelpButtonProps> = ({ classes = '', onClick }) => { return ( <Button shape="circle" - additionalClasses={`${styles.btn} ${classes}`} + className={`${styles.btn} ${className}`} onClick={onClick} > <span className="screen-reader-text">{text}</span> diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index db2f5ab..9f96f18 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 { FC } from 'react'; +import { VFC } from 'react'; import styles from './responsive-image.module.scss'; type ResponsiveImageProps = Omit<ImageProps, 'alt' | 'width' | 'height'> & { @@ -31,7 +31,7 @@ type ResponsiveImageProps = Omit<ImageProps, 'alt' | 'width' | 'height'> & { * * Render a responsive image wrapped in a figure element. */ -const ResponsiveImage: FC<ResponsiveImageProps> = ({ +const ResponsiveImage: VFC<ResponsiveImageProps> = ({ alt, caption, layout, @@ -42,7 +42,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({ return ( <figure className={styles.wrapper}> {target ? ( - <Link href={target} classes={styles.link}> + <Link href={target} className={styles.link}> <Image alt={alt} layout={layout || 'intrinsic'} {...props} /> {caption && ( <figcaption className={styles.caption}>{caption}</figcaption> diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx index efb2e34..9f564bf 100644 --- a/src/components/molecules/layout/branding.tsx +++ b/src/components/molecules/layout/branding.tsx @@ -1,6 +1,6 @@ import Heading from '@components/atoms/headings/heading'; import Link from 'next/link'; -import { FC } from 'react'; +import { VFC } from 'react'; import { useIntl } from 'react-intl'; import styles from './branding.module.scss'; import FlippingLogo from './flipping-logo'; @@ -33,7 +33,7 @@ type BrandingProps = { * * Render the branding logo, title and optional baseline. */ -const Branding: FC<BrandingProps> = ({ +const Branding: VFC<BrandingProps> = ({ baseline, isHome = false, photo, @@ -61,7 +61,7 @@ const Branding: FC<BrandingProps> = ({ return ( <div className={styles.wrapper}> <FlippingLogo - additionalClasses={styles.logo} + className={styles.logo} altText={altText} logoTitle={logoTitle} photo={photo} @@ -70,7 +70,7 @@ const Branding: FC<BrandingProps> = ({ isFake={!isHome} level={1} withMargin={false} - additionalClasses={styles.title} + className={styles.title} > {withLink ? ( <Link href="/"> @@ -85,7 +85,7 @@ const Branding: FC<BrandingProps> = ({ isFake={true} level={4} withMargin={false} - additionalClasses={styles.baseline} + className={styles.baseline} > {baseline} </Heading> diff --git a/src/components/molecules/layout/flipping-logo.stories.tsx b/src/components/molecules/layout/flipping-logo.stories.tsx index 1508269..1ac8de8 100644 --- a/src/components/molecules/layout/flipping-logo.stories.tsx +++ b/src/components/molecules/layout/flipping-logo.stories.tsx @@ -5,11 +5,21 @@ export default { title: 'Molecules/Layout', component: FlippingLogoComponent, argTypes: { - additionalClasses: { + altText: { + control: { + type: 'text', + }, + description: 'Photo alternative text.', + type: { + name: 'string', + required: true, + }, + }, + className: { control: { type: 'text', }, - description: 'Adds additional classes to the logo wrapper.', + description: 'Set additional classnames to the logo wrapper.', table: { category: 'Options', }, @@ -18,14 +28,17 @@ export default { required: false, }, }, - altText: { + logoTitle: { control: { type: 'text', }, - description: 'Photo alternative text.', + description: 'An accessible name for the logo.', + table: { + category: 'Accessibility', + }, type: { name: 'string', - required: true, + required: false, }, }, photo: { diff --git a/src/components/molecules/layout/flipping-logo.tsx b/src/components/molecules/layout/flipping-logo.tsx index 7bb7afc..6f7645f 100644 --- a/src/components/molecules/layout/flipping-logo.tsx +++ b/src/components/molecules/layout/flipping-logo.tsx @@ -1,13 +1,13 @@ import Logo from '@components/atoms/images/logo'; import Image from 'next/image'; -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './flipping-logo.module.scss'; type FlippingLogoProps = { /** - * Adds additional classes to the logo wrapper. + * Set additional classnames to the logo wrapper. */ - additionalClasses?: string; + className?: string; /** * Photo alternative text. */ @@ -27,14 +27,14 @@ type FlippingLogoProps = { * * Render a logo and a photo with a flipping effect. */ -const FlippingLogo: FC<FlippingLogoProps> = ({ - additionalClasses, +const FlippingLogo: VFC<FlippingLogoProps> = ({ + className = '', altText, logoTitle, photo, }) => { return ( - <div className={`${styles.logo} ${additionalClasses}`}> + <div className={`${styles.logo} ${className}`}> <div className={styles.logo__front}> <Image src={photo} alt={altText} layout="fill" objectFit="cover" /> </div> diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx index b68a24b..bd7d9f4 100644 --- a/src/components/molecules/modals/modal.stories.tsx +++ b/src/components/molecules/modals/modal.stories.tsx @@ -15,6 +15,19 @@ export default { required: true, }, }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the modal.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, icon: { control: { type: 'select', diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx index 4dc3b0a..ce12e7a 100644 --- a/src/components/molecules/modals/modal.tsx +++ b/src/components/molecules/modals/modal.tsx @@ -1,17 +1,29 @@ import Heading from '@components/atoms/headings/heading'; +import { CogProps } from '@components/atoms/icons/cog'; +import { MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass'; import dynamic from 'next/dynamic'; -import { FC, ReactNode } from 'react'; +import { FC } from 'react'; import styles from './modal.module.scss'; export type Icons = 'cogs' | 'search'; export type ModalProps = { + /** + * Set additional classnames. + */ + className?: string; + /** + * A icon to illustrate the modal. + */ icon?: Icons; + /** + * The modal title. + */ title?: string; }; -const CogIcon = dynamic<ReactNode>(() => import('@components/atoms/icons/cog')); -const SearchIcon = dynamic<ReactNode>( +const CogIcon = dynamic<CogProps>(() => import('@components/atoms/icons/cog')); +const SearchIcon = dynamic<MagnifyingGlassProps>( () => import('@components/atoms/icons/magnifying-glass') ); @@ -20,7 +32,7 @@ const SearchIcon = dynamic<ReactNode>( * * Render a modal component with an optional title and icon. */ -const Modal: FC<ModalProps> = ({ children, icon, title }) => { +const Modal: FC<ModalProps> = ({ children, className = '', icon, title }) => { const getIcon = (id: Icons) => { switch (id) { case 'cogs': @@ -33,7 +45,7 @@ const Modal: FC<ModalProps> = ({ children, icon, title }) => { }; return ( - <div className={styles.wrapper}> + <div className={`${styles.wrapper} ${className}`}> {title && ( <Heading isFake={true} level={3}> {icon && <span className={styles.icon}>{getIcon(icon)}</span>} diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx index a57cf34..63fc71d 100644 --- a/src/components/molecules/modals/tooltip.stories.tsx +++ b/src/components/molecules/modals/tooltip.stories.tsx @@ -5,6 +5,19 @@ export default { title: 'Molecules/Modals', component: TooltipComponent, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, content: { control: { type: 'text', @@ -15,6 +28,16 @@ export default { required: true, }, }, + icon: { + control: { + type: 'text', + }, + description: 'The tooltip icon.', + type: { + name: 'string', + required: true, + }, + }, title: { control: { type: 'text', diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx index ceb0b14..73f36e7 100644 --- a/src/components/molecules/modals/tooltip.tsx +++ b/src/components/molecules/modals/tooltip.tsx @@ -1,12 +1,12 @@ import List, { type ListItem } from '@components/atoms/lists/list'; -import { FC, ReactNode } from 'react'; +import { ReactNode, VFC } from 'react'; import styles from './tooltip.module.scss'; export type TooltipProps = { /** - * Set additional classes to the tooltip wrapper. + * Set additional classnames to the tooltip wrapper. */ - classes?: string; + className?: string; /** * The tooltip body. */ @@ -26,7 +26,12 @@ export type TooltipProps = { * * Render a tooltip modal. */ -const Tooltip: FC<TooltipProps> = ({ classes = '', content, icon, title }) => { +const Tooltip: VFC<TooltipProps> = ({ + className = '', + content, + icon, + title, +}) => { /** * Format an array of strings to an array of object with id and value. * @@ -40,7 +45,7 @@ const Tooltip: FC<TooltipProps> = ({ classes = '', content, icon, title }) => { }; return ( - <div className={`${styles.wrapper} ${classes}`}> + <div className={`${styles.wrapper} ${className}`}> <div className={styles.title}> <span className={styles.icon}>{icon}</span> {title} |