diff options
Diffstat (limited to 'src/components/atoms')
24 files changed, 157 insertions, 74 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 ( |