diff options
Diffstat (limited to 'src/components/molecules')
80 files changed, 4356 insertions, 0 deletions
diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss new file mode 100644 index 0000000..9721bff --- /dev/null +++ b/src/components/molecules/buttons/back-to-top.module.scss @@ -0,0 +1,51 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + .link { + width: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)}); + height: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)}); + + svg { + width: 100%; + } + + :global { + .arrow-head { + transform: translateY(30%) scale(1.2); + transition: all 0.45s ease-in-out 0s; + } + + .arrow-bar { + opacity: 0; + transform: translateY(30%) scaleY(0); + transition: transform 0.45s ease-in-out 0s, opacity 0.1s linear 0.2s; + } + } + + &:hover, + &:focus { + :global { + .arrow-head { + transform: translateY(0) scale(1); + } + + .arrow-bar { + opacity: 1; + transform: translateY(0) scaleY(1); + } + } + + svg { + :global { + animation: pulse 1.2s ease-in-out 0.6s infinite; + } + } + } + + &:active { + svg { + animation-play-state: paused; + } + } + } +} diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx new file mode 100644 index 0000000..fe58293 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top.stories.tsx @@ -0,0 +1,44 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import BackToTopComponent from './back-to-top'; + +export default { + title: 'Molecules/Buttons', + component: BackToTopComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the button wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + target: { + control: { + type: 'text', + }, + description: 'An element id (without hashtag) to use as anchor.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof BackToTopComponent>; + +const Template: ComponentStory<typeof BackToTopComponent> = (args) => ( + <IntlProvider locale="en"> + <BackToTopComponent {...args} /> + </IntlProvider> +); + +export const BackToTop = Template.bind({}); +BackToTop.args = { + target: 'top', +}; diff --git a/src/components/molecules/buttons/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top.test.tsx new file mode 100644 index 0000000..2b3a0a9 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top.test.tsx @@ -0,0 +1,10 @@ +import { render, screen } from '@test-utils'; +import BackToTop from './back-to-top'; + +describe('BackToTop', () => { + it('renders a BackToTop link', () => { + render(<BackToTop target="top" />); + expect(screen.getByRole('link')).toHaveAccessibleName('Back to top'); + expect(screen.getByRole('link')).toHaveAttribute('href', '/#top'); + }); +}); diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx new file mode 100644 index 0000000..8a52231 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -0,0 +1,45 @@ +import ButtonLink from '@components/atoms/buttons/button-link'; +import Arrow from '@components/atoms/icons/arrow'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './back-to-top.module.scss'; + +export type BackToTopProps = { + /** + * Set additional classnames to the button wrapper. + */ + className?: string; + /** + * An element id (without hashtag) to use as anchor. + */ + target: string; +}; + +/** + * BackToTop component + * + * Render a back to top link. + */ +const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => { + const intl = useIntl(); + const linkName = intl.formatMessage({ + defaultMessage: 'Back to top', + description: 'BackToTop: link text', + id: 'm+SUSR', + }); + + return ( + <div className={`${styles.wrapper} ${className}`}> + <ButtonLink + shape="square" + target={`#${target}`} + aria-label={linkName} + className={styles.link} + > + <Arrow direction="top" /> + </ButtonLink> + </div> + ); +}; + +export default BackToTop; diff --git a/src/components/molecules/buttons/heading-button.module.scss b/src/components/molecules/buttons/heading-button.module.scss new file mode 100644 index 0000000..1d16410 --- /dev/null +++ b/src/components/molecules/buttons/heading-button.module.scss @@ -0,0 +1,41 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + transition: all 0.25s ease-in-out 0s; +} + +.wrapper { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + gap: var(--spacing-md); + width: 100%; + padding: 0 var(--spacing-2xs); + position: sticky; + top: 0; + background: inherit; + border: none; + border-top: fun.convert-px(2) solid var(--color-primary-dark); + border-bottom: fun.convert-px(2) solid var(--color-primary-dark); + cursor: pointer; + + &:hover, + &:focus { + .icon { + background: var(--color-primary-light); + color: var(--color-fg-inverted); + transform: scale(1.25); + + &::before, + &::after { + background: var(--color-bg); + } + } + } +} + +.heading { + background: none; + padding: var(--spacing-2xs) 0; +} diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx new file mode 100644 index 0000000..0a23b08 --- /dev/null +++ b/src/components/molecules/buttons/heading-button.stories.tsx @@ -0,0 +1,75 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import { IntlProvider } from 'react-intl'; +import HeadingButtonComponent from './heading-button'; + +export default { + title: 'Molecules/Buttons', + component: HeadingButtonComponent, + argTypes: { + expanded: { + control: { + type: null, + }, + description: 'Heading button state (plus or minus).', + type: { + name: 'boolean', + required: true, + }, + }, + level: { + control: { + type: 'number', + }, + description: 'Heading level.', + type: { + name: 'number', + required: true, + }, + }, + setExpanded: { + control: { + type: null, + }, + description: 'Callback function to set heading button state.', + type: { + name: 'function', + required: true, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'Heading title.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof HeadingButtonComponent>; + +const Template: ComponentStory<typeof HeadingButtonComponent> = ({ + expanded, + setExpanded: _setExpanded, + ...args +}) => { + const [isExpanded, setIsExpanded] = useState<boolean>(expanded); + + return ( + <IntlProvider locale="en"> + <HeadingButtonComponent + expanded={isExpanded} + setExpanded={setIsExpanded} + {...args} + /> + </IntlProvider> + ); +}; + +export const HeadingButton = Template.bind({}); +HeadingButton.args = { + level: 2, + title: 'Your title', +}; diff --git a/src/components/molecules/buttons/heading-button.test.tsx b/src/components/molecules/buttons/heading-button.test.tsx new file mode 100644 index 0000000..be3865a --- /dev/null +++ b/src/components/molecules/buttons/heading-button.test.tsx @@ -0,0 +1,32 @@ +import { render, screen } from '@test-utils'; +import HeadingButton from './heading-button'; + +describe('HeadingButton', () => { + it('renders a button to collapse.', () => { + render( + <HeadingButton + level={2} + title="The accordion title" + expanded={true} + setExpanded={() => null} + /> + ); + expect( + screen.getByRole('button', { name: 'Collapse The accordion title' }) + ).toBeInTheDocument(); + }); + + it('renders a button to expand.', () => { + render( + <HeadingButton + level={2} + title="The accordion title" + expanded={false} + setExpanded={() => null} + /> + ); + expect( + screen.getByRole('button', { name: 'Expand The accordion title' }) + ).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx new file mode 100644 index 0000000..fc79749 --- /dev/null +++ b/src/components/molecules/buttons/heading-button.tsx @@ -0,0 +1,67 @@ +import Heading, { type HeadingProps } from '@components/atoms/headings/heading'; +import PlusMinus from '@components/atoms/icons/plus-minus'; +import { SetStateAction, VFC } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './heading-button.module.scss'; + +export type HeadingButtonProps = Pick<HeadingProps, 'level'> & { + /** + * Set additional classnames to the button. + */ + className?: string; + /** + * Accordion state. + */ + expanded: boolean; + /** + * Callback function to set accordion state on click. + */ + setExpanded: (value: SetStateAction<boolean>) => void; + /** + * Accordion title. + */ + title: string; +}; + +/** + * HeadingButton component + * + * Render a button as accordion title to toggle body. + */ +const HeadingButton: VFC<HeadingButtonProps> = ({ + className = '', + expanded, + level, + setExpanded, + title, +}) => { + const intl = useIntl(); + const iconState = expanded ? 'minus' : 'plus'; + const titlePrefix = expanded + ? intl.formatMessage({ + defaultMessage: 'Collapse', + description: 'HeadingButton: title prefix (expanded state)', + id: 'UX9Bu8', + }) + : intl.formatMessage({ + defaultMessage: 'Expand', + description: 'HeadingButton: title prefix (collapsed state)', + id: 'bcyOgC', + }); + + return ( + <button + type="button" + className={`${styles.wrapper} ${className}`} + onClick={() => setExpanded(!expanded)} + > + <Heading level={level} withMargin={false} className={styles.heading}> + <span className="screen-reader-text">{titlePrefix} </span> + {title} + </Heading> + <PlusMinus state={iconState} className={styles.icon} /> + </button> + ); +}; + +export default HeadingButton; diff --git a/src/components/molecules/buttons/help-button.module.scss b/src/components/molecules/buttons/help-button.module.scss new file mode 100644 index 0000000..42d49f6 --- /dev/null +++ b/src/components/molecules/buttons/help-button.module.scss @@ -0,0 +1,21 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.btn { + padding: var(--spacing-xs); + + &:not(:disabled) { + &:focus { + text-decoration: none; + } + } + + @include mix.pointer("fine") { + padding: var(--spacing-2xs); + } +} + +.icon { + color: var(--color-primary-dark); + font-weight: 600; +} diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx new file mode 100644 index 0000000..cfc1b0b --- /dev/null +++ b/src/components/molecules/buttons/help-button.stories.tsx @@ -0,0 +1,44 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import HelpButtonComponent from './help-button'; + +export default { + title: 'Molecules/Buttons', + component: HelpButtonComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the button wrapper.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + onClick: { + control: { + type: null, + }, + description: 'A callback function to handle click on button.', + table: { + category: 'Events', + }, + type: { + name: 'function', + required: false, + }, + }, + }, +} as ComponentMeta<typeof HelpButtonComponent>; + +const Template: ComponentStory<typeof HelpButtonComponent> = (args) => ( + <IntlProvider locale="en"> + <HelpButtonComponent {...args} /> + </IntlProvider> +); + +export const HelpButton = Template.bind({}); diff --git a/src/components/molecules/buttons/help-button.test.tsx b/src/components/molecules/buttons/help-button.test.tsx new file mode 100644 index 0000000..78987ef --- /dev/null +++ b/src/components/molecules/buttons/help-button.test.tsx @@ -0,0 +1,9 @@ +import { render, screen } from '@test-utils'; +import HelpButton from './help-button'; + +describe('Help', () => { + it('renders a help button', () => { + render(<HelpButton />); + expect(screen.getByRole('button', { name: 'Help ?' })).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx new file mode 100644 index 0000000..aeb84ec --- /dev/null +++ b/src/components/molecules/buttons/help-button.tsx @@ -0,0 +1,38 @@ +import Button, { ButtonProps } from '@components/atoms/buttons/button'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './help-button.module.scss'; + +export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & { + /** + * Set additional classnames to the button wrapper. + */ + className?: string; +}; + +/** + * HelpButton component + * + * Render a button with an interrogation mark icon. + */ +const HelpButton: VFC<HelpButtonProps> = ({ className = '', onClick }) => { + const intl = useIntl(); + const text = intl.formatMessage({ + defaultMessage: 'Help', + id: 'i+/ckF', + description: 'HelpButton: screen reader text', + }); + + return ( + <Button + shape="circle" + className={`${styles.btn} ${className}`} + onClick={onClick} + > + <span className="screen-reader-text">{text}</span> + <span className={styles.icon}>?</span> + </Button> + ); +}; + +export default HelpButton; diff --git a/src/components/molecules/forms/ackee-select.module.scss b/src/components/molecules/forms/ackee-select.module.scss new file mode 100644 index 0000000..87cd9ee --- /dev/null +++ b/src/components/molecules/forms/ackee-select.module.scss @@ -0,0 +1,11 @@ +.wrapper { + display: flex; + flex-flow: row wrap; + align-items: center; + position: relative; +} + +.tooltip { + position: absolute; + bottom: -100%; +} diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx new file mode 100644 index 0000000..a59bfa9 --- /dev/null +++ b/src/components/molecules/forms/ackee-select.stories.tsx @@ -0,0 +1,32 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import AckeeSelectComponent from './ackee-select'; + +export default { + title: 'Molecules/Forms', + component: AckeeSelectComponent, + argTypes: { + initialValue: { + control: { + type: 'select', + }, + description: 'Initial selected option.', + options: ['full', 'partial'], + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof AckeeSelectComponent>; + +const Template: ComponentStory<typeof AckeeSelectComponent> = (args) => ( + <IntlProvider locale="en"> + <AckeeSelectComponent {...args} /> + </IntlProvider> +); + +export const AckeeSelect = Template.bind({}); +AckeeSelect.args = { + initialValue: 'full', +}; diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx new file mode 100644 index 0000000..e1e6b2d --- /dev/null +++ b/src/components/molecules/forms/ackee-select.test.tsx @@ -0,0 +1,23 @@ +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@test-utils'; +import AckeeSelect from './ackee-select'; + +describe('Select', () => { + it('should correctly set default option', () => { + render(<AckeeSelect initialValue="full" />); + expect(screen.getByRole('combobox')).toHaveValue('full'); + expect(screen.queryByRole('combobox')).not.toHaveValue('partial'); + }); + + it('should correctly change value when user choose another option', () => { + render(<AckeeSelect initialValue="full" />); + + userEvent.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 new file mode 100644 index 0000000..4a8410c --- /dev/null +++ b/src/components/molecules/forms/ackee-select.tsx @@ -0,0 +1,89 @@ +import { SelectOptions } from '@components/atoms/forms/select'; +import { Dispatch, SetStateAction, useState, VFC } from 'react'; +import { useIntl } from 'react-intl'; +import SelectWithTooltip, { + SelectWithTooltipProps, +} from './select-with-tooltip'; + +export type AckeeOptions = 'full' | 'partial'; + +export type AckeeSelectProps = Pick< + SelectWithTooltipProps, + 'labelClassName' | 'tooltipClassName' +> & { + /** + * A default value for Ackee settings. + */ + initialValue: AckeeOptions; +}; + +/** + * AckeeSelect component + * + * Render a select to set Ackee settings. + */ +const AckeeSelect: VFC<AckeeSelectProps> = ({ initialValue, ...props }) => { + const intl = useIntl(); + const [value, setValue] = useState<AckeeOptions>(initialValue); + + const ackeeLabel = intl.formatMessage({ + defaultMessage: 'Tracking:', + description: 'AckeeSelect: select label', + id: '2pmylc', + }); + const tooltipTitle = intl.formatMessage({ + defaultMessage: 'Ackee tracking (analytics)', + description: 'AckeeSelect: tooltip title', + id: 'F1EQX3', + }); + const tooltipContent = [ + intl.formatMessage({ + defaultMessage: 'Partial includes only page url, views and duration.', + description: 'AckeeSelect: tooltip message', + id: 'skb4W5', + }), + intl.formatMessage({ + defaultMessage: + 'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.', + description: 'AckeeSelect: tooltip message', + id: 'Ogccx6', + }), + ]; + const options: SelectOptions[] = [ + { + id: 'partial', + name: intl.formatMessage({ + defaultMessage: 'Partial', + description: 'AckeeSelect: partial option name', + id: 'e/8Kyj', + }), + value: 'partial', + }, + { + id: 'full', + name: intl.formatMessage({ + defaultMessage: 'Full', + description: 'AckeeSelect: full option name', + id: 'PzRpPw', + }), + value: 'full', + }, + ]; + + return ( + <SelectWithTooltip + id="ackee-settings" + name="ackee-settings" + label={ackeeLabel} + labelSize="medium" + options={options} + title={tooltipTitle} + content={tooltipContent} + value={value} + setValue={setValue as Dispatch<SetStateAction<string>>} + {...props} + /> + ); +}; + +export default AckeeSelect; diff --git a/src/components/molecules/forms/labelled-field.module.scss b/src/components/molecules/forms/labelled-field.module.scss new file mode 100644 index 0000000..64ef3d0 --- /dev/null +++ b/src/components/molecules/forms/labelled-field.module.scss @@ -0,0 +1,9 @@ +.label { + &--left { + margin-right: var(--spacing-2xs); + } + + &--top { + display: block; + } +} diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx new file mode 100644 index 0000000..b77d71e --- /dev/null +++ b/src/components/molecules/forms/labelled-field.stories.tsx @@ -0,0 +1,201 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import LabelledFieldComponent from './labelled-field'; + +export default { + title: 'Molecules/Forms', + component: LabelledFieldComponent, + args: { + disabled: false, + labelPosition: 'top', + required: false, + }, + argTypes: { + disabled: { + control: { + type: 'boolean', + }, + description: 'Field state: either enabled or disabled.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + id: { + control: { + type: 'text', + }, + description: 'Field id.', + type: { + name: 'string', + required: true, + }, + }, + label: { + control: { + type: 'text', + }, + description: 'Field label.', + type: { + name: 'string', + required: true, + }, + }, + labelPosition: { + control: { + type: 'select', + }, + description: 'The label position.', + options: ['left', 'top'], + table: { + category: 'Options', + defaultValue: { summary: 'top' }, + }, + type: { + name: 'string', + required: false, + }, + }, + max: { + control: { + type: 'number', + }, + description: 'Maximum value.', + table: { + category: 'Options', + }, + type: { + name: 'number', + required: false, + }, + }, + min: { + control: { + type: 'number', + }, + description: 'Minimum value.', + table: { + category: 'Options', + }, + type: { + name: 'number', + required: false, + }, + }, + name: { + control: { + type: 'text', + }, + description: 'Field name.', + type: { + name: 'string', + required: true, + }, + }, + placeholder: { + control: { + type: 'text', + }, + description: 'A placeholder value.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + required: { + control: { + type: 'boolean', + }, + description: 'Determine if the field is required.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + setValue: { + control: { + type: null, + }, + description: 'Callback function to set field value.', + table: { + category: 'Events', + }, + type: { + name: 'function', + required: true, + }, + }, + step: { + control: { + type: 'number', + }, + description: 'Field incremental values that are valid.', + table: { + category: 'Options', + }, + type: { + name: 'number', + required: false, + }, + }, + type: { + control: { + type: 'select', + }, + description: 'Field type: input type or textarea.', + options: [ + 'datetime-local', + 'email', + 'number', + 'search', + 'tel', + 'text', + 'textarea', + 'time', + 'url', + ], + type: { + name: 'string', + required: true, + }, + }, + value: { + control: { + type: null, + }, + description: 'Field value.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof LabelledFieldComponent>; + +const Template: ComponentStory<typeof LabelledFieldComponent> = ({ + value: _value, + setValue: _setValue, + ...args +}) => { + const [value, setValue] = useState<string>(''); + + return <LabelledFieldComponent value={value} setValue={setValue} {...args} />; +}; + +export const LabelledField = Template.bind({}); +LabelledField.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + name: 'labelled-field-storybook', +}; diff --git a/src/components/molecules/forms/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field.test.tsx new file mode 100644 index 0000000..6fabe19 --- /dev/null +++ b/src/components/molecules/forms/labelled-field.test.tsx @@ -0,0 +1,19 @@ +import { render, screen } from '@test-utils'; +import LabelledField from './labelled-field'; + +describe('LabelledField', () => { + it('renders a labelled field', () => { + render( + <LabelledField + type="text" + id="jest-text-field" + name="jest-text-field" + label="Jest text field" + value="test" + setValue={() => null} + /> + ); + expect(screen.getByLabelText('Jest text field')).toBeInTheDocument(); + expect(screen.getByRole('textbox')).toHaveValue('test'); + }); +}); diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx new file mode 100644 index 0000000..08d0126 --- /dev/null +++ b/src/components/molecules/forms/labelled-field.tsx @@ -0,0 +1,51 @@ +import Field, { type FieldProps } from '@components/atoms/forms/field'; +import Label from '@components/atoms/forms/label'; +import { VFC } from 'react'; +import styles from './labelled-field.module.scss'; + +export type LabelledFieldProps = FieldProps & { + /** + * Visually hide the field label. Default: false. + */ + hideLabel?: boolean; + /** + * The field label. + */ + label: string; + /** + * The label position. Default: top. + */ + labelPosition?: 'left' | 'top'; +}; + +/** + * LabelledField component + * + * Render a field tied to a label. + */ +const LabelledField: VFC<LabelledFieldProps> = ({ + hideLabel = false, + id, + label, + labelPosition = 'top', + required, + ...props +}) => { + const positionModifier = `label--${labelPosition}`; + const visibilityClass = hideLabel ? 'screen-reader-text' : ''; + + return ( + <> + <Label + htmlFor={id} + required={required} + className={`${visibilityClass} ${styles[positionModifier]}`} + > + {label} + </Label> + <Field id={id} required={required} {...props} /> + </> + ); +}; + +export default LabelledField; diff --git a/src/components/molecules/forms/labelled-select.module.scss b/src/components/molecules/forms/labelled-select.module.scss new file mode 100644 index 0000000..64ef3d0 --- /dev/null +++ b/src/components/molecules/forms/labelled-select.module.scss @@ -0,0 +1,9 @@ +.label { + &--left { + margin-right: var(--spacing-2xs); + } + + &--top { + display: block; + } +} diff --git a/src/components/molecules/forms/labelled-select.stories.tsx b/src/components/molecules/forms/labelled-select.stories.tsx new file mode 100644 index 0000000..0c569f5 --- /dev/null +++ b/src/components/molecules/forms/labelled-select.stories.tsx @@ -0,0 +1,195 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import LabelledSelectComponent from './labelled-select'; + +const selectOptions = [ + { id: 'option1', name: 'Option 1', value: 'option1' }, + { id: 'option2', name: 'Option 2', value: 'option2' }, + { id: 'option3', name: 'Option 3', value: 'option3' }, +]; + +export default { + title: 'Molecules/Forms', + component: LabelledSelectComponent, + args: { + disabled: false, + labelPosition: 'top', + required: false, + }, + argTypes: { + disabled: { + control: { + type: 'boolean', + }, + description: 'Field state: either enabled or disabled.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + id: { + control: { + type: 'text', + }, + description: 'Field id.', + type: { + name: 'string', + required: true, + }, + }, + label: { + control: { + type: 'text', + }, + description: 'Field label.', + type: { + name: 'string', + required: true, + }, + }, + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + labelPosition: { + control: { + type: 'select', + }, + description: 'The label position.', + options: ['left', 'top'], + table: { + category: 'Options', + defaultValue: { summary: 'top' }, + }, + type: { + name: 'string', + required: false, + }, + }, + labelSize: { + control: { + type: 'select', + }, + description: 'The label size.', + options: ['medium', 'small'], + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + name: { + control: { + type: 'text', + }, + description: 'Field name.', + type: { + name: 'string', + required: true, + }, + }, + options: { + control: { + type: null, + }, + description: 'Select options.', + type: { + name: 'array', + required: true, + value: { + name: 'string', + }, + }, + }, + required: { + control: { + type: 'boolean', + }, + description: 'Determine if the field is required.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + selectClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the select field.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + setValue: { + control: { + type: null, + }, + description: 'Callback function to set field value.', + table: { + category: 'Events', + }, + type: { + name: 'function', + required: true, + }, + }, + value: { + control: { + type: null, + }, + description: 'Field value.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof LabelledSelectComponent>; + +const Template: ComponentStory<typeof LabelledSelectComponent> = ({ + value, + setValue: _setValue, + ...args +}) => { + const [selected, setSelected] = useState<string>(value); + + return ( + <LabelledSelectComponent + value={selected} + setValue={setSelected} + {...args} + /> + ); +}; + +export const LabelledSelect = Template.bind({}); +LabelledSelect.args = { + id: 'labelled-select-storybook', + label: 'Labelled select', + name: 'labelled-select-storybook', + options: selectOptions, + value: 'option1', +}; diff --git a/src/components/molecules/forms/labelled-select.test.tsx b/src/components/molecules/forms/labelled-select.test.tsx new file mode 100644 index 0000000..9a50d6e --- /dev/null +++ b/src/components/molecules/forms/labelled-select.test.tsx @@ -0,0 +1,25 @@ +import { render, screen } from '@test-utils'; +import LabelledSelect from './labelled-select'; + +const selectOptions = [ + { id: 'option1', name: 'Option 1', value: 'option1' }, + { id: 'option2', name: 'Option 2', value: 'option2' }, + { id: 'option3', name: 'Option 3', value: 'option3' }, +]; + +describe('LabelledSelect', () => { + it('renders a labelled select', () => { + render( + <LabelledSelect + id="jest-select-field" + name="jest-select-field" + label="Jest select field" + options={selectOptions} + value="option1" + setValue={() => null} + /> + ); + expect(screen.getByLabelText('Jest select field')).toBeInTheDocument(); + expect(screen.getByRole('combobox')).toHaveValue('option1'); + }); +}); diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx new file mode 100644 index 0000000..7d4237a --- /dev/null +++ b/src/components/molecules/forms/labelled-select.tsx @@ -0,0 +1,64 @@ +import Label, { LabelProps } from '@components/atoms/forms/label'; +import Select, { type SelectProps } from '@components/atoms/forms/select'; +import { VFC } from 'react'; +import styles from './labelled-select.module.scss'; + +export type LabelledSelectProps = Omit< + SelectProps, + 'aria-labelledby' | 'className' +> & { + /** + * The field label. + */ + label: string; + /** + * Set additional classnames to the label. + */ + labelClassName?: string; + /** + * The label position. Default: top. + */ + labelPosition?: 'left' | 'top'; + /** + * The label size. + */ + labelSize?: LabelProps['size']; + /** + * Set additional classnames to the select field. + */ + selectClassName?: string; +}; + +const LabelledSelect: VFC<LabelledSelectProps> = ({ + id, + label, + labelClassName = '', + labelPosition = 'top', + labelSize, + required, + selectClassName = '', + ...props +}) => { + const positionModifier = `label--${labelPosition}`; + + return ( + <> + <Label + htmlFor={id} + required={required} + size={labelSize} + className={`${styles[positionModifier]} ${labelClassName}`} + > + {label} + </Label> + <Select + id={id} + required={required} + {...props} + className={selectClassName} + /> + </> + ); +}; + +export default LabelledSelect; diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx new file mode 100644 index 0000000..dc4d2a9 --- /dev/null +++ b/src/components/molecules/forms/motion-toggle.stories.tsx @@ -0,0 +1,31 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import MotionToggleComponent from './motion-toggle'; + +export default { + title: 'Molecules/Forms', + component: MotionToggleComponent, + argTypes: { + value: { + control: { + type: null, + }, + description: 'The reduce motion value.', + type: { + name: 'boolean', + required: true, + }, + }, + }, +} as ComponentMeta<typeof MotionToggleComponent>; + +const Template: ComponentStory<typeof MotionToggleComponent> = (args) => ( + <IntlProvider locale="en"> + <MotionToggleComponent {...args} /> + </IntlProvider> +); + +export const MotionToggle = Template.bind({}); +MotionToggle.args = { + value: false, +}; diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx new file mode 100644 index 0000000..77bc17c --- /dev/null +++ b/src/components/molecules/forms/motion-toggle.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@test-utils'; +import MotionToggle from './motion-toggle'; + +describe('MotionToggle', () => { + it('renders a checked toggle (deactivate animations choice)', () => { + render(<MotionToggle value={true} />); + expect( + screen.getByRole('checkbox', { + name: `Animations: On Off`, + }) + ).toBeChecked(); + }); +}); diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx new file mode 100644 index 0000000..9f30b42 --- /dev/null +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -0,0 +1,52 @@ +import Toggle, { + ToggleChoices, + ToggleProps, +} from '@components/molecules/forms/toggle'; +import { useState, VFC } from 'react'; +import { useIntl } from 'react-intl'; + +export type MotionToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>; + +/** + * MotionToggle component + * + * Render a Toggle component to set reduce motion. + */ +const MotionToggle: VFC<MotionToggleProps> = ({ value, ...props }) => { + const intl = useIntl(); + const [isDeactivated, setIsDeactivated] = useState<boolean>(value); + const reduceMotionLabel = intl.formatMessage({ + defaultMessage: 'Animations:', + description: 'MotionToggle: reduce motion label', + id: '/q5csZ', + }); + const onLabel = intl.formatMessage({ + defaultMessage: 'On', + description: 'MotionToggle: activate reduce motion label', + id: 'va65iw', + }); + const offLabel = intl.formatMessage({ + defaultMessage: 'Off', + description: 'MotionToggle: deactivate reduce motion label', + id: 'pWKyyR', + }); + const reduceMotionChoices: ToggleChoices = { + left: onLabel, + right: offLabel, + }; + + return ( + <Toggle + id="reduce-motion-settings" + name="reduce-motion-settings" + label={reduceMotionLabel} + labelSize="medium" + choices={reduceMotionChoices} + value={isDeactivated} + setValue={setIsDeactivated} + {...props} + /> + ); +}; + +export default MotionToggle; diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx new file mode 100644 index 0000000..dc9090b --- /dev/null +++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx @@ -0,0 +1,31 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import PrismThemeToggleComponent from './prism-theme-toggle'; + +export default { + title: 'Molecules/Forms', + component: PrismThemeToggleComponent, + argTypes: { + value: { + control: { + type: null, + }, + description: 'The prism theme value.', + type: { + name: 'boolean', + required: true, + }, + }, + }, +} as ComponentMeta<typeof PrismThemeToggleComponent>; + +const Template: ComponentStory<typeof PrismThemeToggleComponent> = (args) => ( + <IntlProvider locale="en"> + <PrismThemeToggleComponent {...args} /> + </IntlProvider> +); + +export const PrismThemeToggle = Template.bind({}); +PrismThemeToggle.args = { + value: false, +}; diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx new file mode 100644 index 0000000..0dceb92 --- /dev/null +++ b/src/components/molecules/forms/prism-theme-toggle.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@test-utils'; +import PrismThemeToggle from './prism-theme-toggle'; + +describe('PrismThemeToggle', () => { + it('renders a checked toggle (dark theme choice)', () => { + render(<PrismThemeToggle value={true} />); + expect( + screen.getByRole('checkbox', { + name: `Code blocks: Light theme Dark theme`, + }) + ).toBeChecked(); + }); +}); diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx new file mode 100644 index 0000000..daee6bd --- /dev/null +++ b/src/components/molecules/forms/prism-theme-toggle.tsx @@ -0,0 +1,57 @@ +import Moon from '@components/atoms/icons/moon'; +import Sun from '@components/atoms/icons/sun'; +import Toggle, { + ToggleChoices, + ToggleProps, +} from '@components/molecules/forms/toggle'; +import { useState, VFC } from 'react'; +import { useIntl } from 'react-intl'; + +export type PrismThemeToggleProps = Pick< + ToggleProps, + 'labelClassName' | 'value' +>; + +/** + * PrismThemeToggle component + * + * Render a Toggle component to set code blocks theme. + */ +const PrismThemeToggle: VFC<PrismThemeToggleProps> = ({ value, ...props }) => { + const intl = useIntl(); + const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value); + const themeLabel = intl.formatMessage({ + defaultMessage: 'Code blocks:', + description: 'PrismThemeToggle: theme label', + id: 'ftXN+0', + }); + const lightThemeLabel = intl.formatMessage({ + defaultMessage: 'Light theme', + description: 'PrismThemeToggle: light theme label', + id: 'tsWh8x', + }); + const darkThemeLabel = intl.formatMessage({ + defaultMessage: 'Dark theme', + description: 'PrismThemeToggle: dark theme label', + id: 'og/zWL', + }); + const themeChoices: ToggleChoices = { + left: <Sun title={lightThemeLabel} />, + right: <Moon title={darkThemeLabel} />, + }; + + return ( + <Toggle + id="prism-theme-settings" + name="prism-theme-settings" + label={themeLabel} + labelSize="medium" + choices={themeChoices} + value={isDarkTheme} + setValue={setIsDarkTheme} + {...props} + /> + ); +}; + +export default PrismThemeToggle; diff --git a/src/components/molecules/forms/select-with-tooltip.module.scss b/src/components/molecules/forms/select-with-tooltip.module.scss new file mode 100644 index 0000000..bfadece --- /dev/null +++ b/src/components/molecules/forms/select-with-tooltip.module.scss @@ -0,0 +1,48 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.wrapper { + display: flex; + flex-flow: row wrap; + align-items: center; + position: relative; +} + +.select { + width: auto; + + @include mix.pointer("fine") { + padding: fun.convert-px(3) var(--spacing-xs); + } +} + +.btn { + margin-left: var(--spacing-xs); + + &--activated { + background: var(--color-primary); + + * { + color: var(--color-fg-inverted); + } + } +} + +.tooltip { + position: absolute; + top: calc(100% + var(--spacing-xs)); + transform-origin: top; + transition: all 0.75s ease-in-out 0s; + + &--hidden { + opacity: 0; + visibility: hidden; + transform: scale(0); + } + + &--visible { + opacity: 1; + visibility: visible; + transform: scale(1); + } +} diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx new file mode 100644 index 0000000..c63e9b8 --- /dev/null +++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx @@ -0,0 +1,211 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import { IntlProvider } from 'react-intl'; +import SelectWithTooltipComponent from './select-with-tooltip'; + +export default { + title: 'Molecules/Forms', + component: SelectWithTooltipComponent, + argTypes: { + content: { + control: { + type: 'text', + }, + description: 'The tooltip body.', + type: { + name: 'string', + required: true, + }, + }, + disabled: { + control: { + type: 'boolean', + }, + description: 'Field state: either enabled or disabled.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + id: { + control: { + type: 'text', + }, + description: 'Field id.', + type: { + name: 'string', + required: true, + }, + }, + label: { + control: { + type: 'text', + }, + description: 'The select label.', + type: { + name: 'string', + required: true, + }, + }, + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + labelSize: { + control: { + type: 'select', + }, + description: 'The label size.', + options: ['medium', 'small'], + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + name: { + control: { + type: 'text', + }, + description: 'Field name.', + type: { + name: 'string', + required: true, + }, + }, + options: { + control: { + type: null, + }, + description: 'Select options.', + type: { + name: 'array', + required: true, + value: { + name: 'string', + }, + }, + }, + required: { + control: { + type: 'boolean', + }, + description: 'Determine if the field is required.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + selectClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the select field.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + setValue: { + control: { + type: null, + }, + description: 'Callback function to set field value.', + table: { + category: 'Events', + }, + type: { + name: 'function', + required: true, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The tooltip title', + type: { + name: 'string', + required: true, + }, + }, + tooltipClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + value: { + control: { + type: 'text', + }, + description: 'Field value.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof SelectWithTooltipComponent>; + +const selectOptions = [ + { id: 'option1', name: 'Option 1', value: 'option1' }, + { id: 'option2', name: 'Option 2', value: 'option2' }, + { id: 'option3', name: 'Option 3', value: 'option3' }, +]; + +const Template: ComponentStory<typeof SelectWithTooltipComponent> = ({ + value: _value, + setValue: _setValue, + ...args +}) => { + const [selected, setSelected] = useState<string>('option1'); + return ( + <IntlProvider locale="en"> + <SelectWithTooltipComponent + value={selected} + setValue={setSelected} + {...args} + /> + </IntlProvider> + ); +}; + +export const SelectWithTooltip = Template.bind({}); +SelectWithTooltip.args = { + content: 'Illo voluptatibus quia minima placeat sit nostrum excepturi.', + title: 'Possimus quidem dolor', + id: 'storybook-select', + label: 'Officiis:', + name: 'storybook-select', + options: selectOptions, +}; diff --git a/src/components/molecules/forms/select-with-tooltip.test.tsx b/src/components/molecules/forms/select-with-tooltip.test.tsx new file mode 100644 index 0000000..7a423f5 --- /dev/null +++ b/src/components/molecules/forms/select-with-tooltip.test.tsx @@ -0,0 +1,32 @@ +import { render, screen } from '@test-utils'; +import SelectWithTooltip from './select-with-tooltip'; + +const selectOptions = [ + { id: 'option1', name: 'Option 1', value: 'option1' }, + { id: 'option2', name: 'Option 2', value: 'option2' }, + { id: 'option3', name: 'Option 3', value: 'option3' }, +]; +const selectLabel = 'Jest select'; +const selectValue = selectOptions[0].value; +const tooltipTitle = 'Jest tooltip'; +const tooltipContent = 'Nesciunt voluptatibus voluptatem omnis at quia libero.'; + +describe('SelectWithTooltip', () => { + it('renders a select', () => { + render( + <SelectWithTooltip + id="jest-select" + name="jest-select" + label={selectLabel} + options={selectOptions} + value={selectValue} + setValue={() => null} + title={tooltipTitle} + content={tooltipContent} + /> + ); + expect(screen.getByRole('combobox', { name: selectLabel })).toHaveValue( + selectValue + ); + }); +}); diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx new file mode 100644 index 0000000..f537e1e --- /dev/null +++ b/src/components/molecules/forms/select-with-tooltip.tsx @@ -0,0 +1,62 @@ +import { useState, VFC } from 'react'; +import HelpButton from '../buttons/help-button'; +import Tooltip, { type TooltipProps } from '../modals/tooltip'; +import LabelledSelect, { type LabelledSelectProps } from './labelled-select'; +import styles from './select-with-tooltip.module.scss'; + +export type SelectWithTooltipProps = Omit< + LabelledSelectProps, + 'labelPosition' +> & + Pick<TooltipProps, 'title' | 'content'> & { + /** + * The select label. + */ + label: string; + /** + * Set additional classnames to the tooltip wrapper. + */ + tooltipClassName?: string; + }; + +/** + * SelectWithTooltip component + * + * Render a select with a button to display a tooltip about options. + */ +const SelectWithTooltip: VFC<SelectWithTooltipProps> = ({ + title, + content, + id, + tooltipClassName = '', + ...props +}) => { + const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false); + const buttonModifier = isTooltipOpened ? styles['btn--activated'] : ''; + const tooltipModifier = isTooltipOpened + ? styles['tooltip--visible'] + : styles['tooltip--hidden']; + + return ( + <div className={styles.wrapper}> + <LabelledSelect + labelPosition="left" + id={id} + labelClassName={styles.label} + {...props} + /> + <HelpButton + onClick={() => setIsTooltipOpened(!isTooltipOpened)} + className={`${styles.btn} ${buttonModifier}`} + /> + <Tooltip + title={title} + content={content} + icon="?" + className={`${styles.tooltip} ${tooltipModifier} ${tooltipClassName}`} + /> + </div> + ); +}; + +export default SelectWithTooltip; diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx new file mode 100644 index 0000000..a9bcf73 --- /dev/null +++ b/src/components/molecules/forms/theme-toggle.stories.tsx @@ -0,0 +1,31 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import ThemeToggleComponent from './theme-toggle'; + +export default { + title: 'Molecules/Forms', + component: ThemeToggleComponent, + argTypes: { + value: { + control: { + type: null, + }, + description: 'The theme value.', + type: { + name: 'boolean', + required: true, + }, + }, + }, +} as ComponentMeta<typeof ThemeToggleComponent>; + +const Template: ComponentStory<typeof ThemeToggleComponent> = (args) => ( + <IntlProvider locale="en"> + <ThemeToggleComponent {...args} /> + </IntlProvider> +); + +export const ThemeToggle = Template.bind({}); +ThemeToggle.args = { + value: false, +}; diff --git a/src/components/molecules/forms/theme-toggle.test.tsx b/src/components/molecules/forms/theme-toggle.test.tsx new file mode 100644 index 0000000..5cd3209 --- /dev/null +++ b/src/components/molecules/forms/theme-toggle.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@test-utils'; +import ThemeToggle from './theme-toggle'; + +describe('ThemeToggle', () => { + it('renders a checked toggle (dark theme choice)', () => { + render(<ThemeToggle value={true} />); + expect( + screen.getByRole('checkbox', { + name: `Theme: Light theme Dark theme`, + }) + ).toBeChecked(); + }); +}); diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx new file mode 100644 index 0000000..eb56ce9 --- /dev/null +++ b/src/components/molecules/forms/theme-toggle.tsx @@ -0,0 +1,54 @@ +import Moon from '@components/atoms/icons/moon'; +import Sun from '@components/atoms/icons/sun'; +import Toggle, { + ToggleChoices, + ToggleProps, +} from '@components/molecules/forms/toggle'; +import { useState, VFC } from 'react'; +import { useIntl } from 'react-intl'; + +export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>; + +/** + * ThemeToggle component + * + * Render a Toggle component to set theme. + */ +const ThemeToggle: VFC<ThemeToggleProps> = ({ value, ...props }) => { + const intl = useIntl(); + const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value); + const themeLabel = intl.formatMessage({ + defaultMessage: 'Theme:', + description: 'ThemeToggle: theme label', + id: 'suXOBu', + }); + const lightThemeLabel = intl.formatMessage({ + defaultMessage: 'Light theme', + description: 'ThemeToggle: light theme label', + id: 'Ygea7s', + }); + const darkThemeLabel = intl.formatMessage({ + defaultMessage: 'Dark theme', + description: 'ThemeToggle: dark theme label', + id: '2QwvtS', + }); + const themeChoices: ToggleChoices = { + left: <Sun title={lightThemeLabel} />, + right: <Moon title={darkThemeLabel} />, + }; + + return ( + <Toggle + id="theme-settings" + name="theme-settings" + label={themeLabel} + labelSize="medium" + choices={themeChoices} + value={isDarkTheme} + setValue={setIsDarkTheme} + {...props} + /> + ); +}; + +export default ThemeToggle; diff --git a/src/components/molecules/forms/toggle.module.scss b/src/components/molecules/forms/toggle.module.scss new file mode 100644 index 0000000..2e8a49f --- /dev/null +++ b/src/components/molecules/forms/toggle.module.scss @@ -0,0 +1,75 @@ +@use "@styles/abstracts/functions" as fun; + +.label { + --toggle-width: #{fun.convert-px(45)}; + --toggle-height: calc(var(--toggle-width) / 2); + + display: inline-flex; + align-items: center; + width: 100%; +} + +.title { + margin-right: var(--spacing-2xs); +} + +.toggle { + display: inline-flex; + align-items: center; + width: var(--toggle-width); + height: var(--toggle-height); + background: var(--color-shadow-light); + border: fun.convert-px(1) solid var(--color-primary); + border-radius: fun.convert-px(32); + box-shadow: inset 0 0 fun.convert-px(3) 0 var(--color-shadow-dark); + margin: 0 var(--spacing-2xs); + position: relative; + + &::after { + content: ""; + display: block; + width: calc((var(--toggle-width) / 2) - 1px); + height: calc((var(--toggle-width) / 2) - 1px); + background: var(--color-primary-light); + border: fun.convert-px(1) solid var(--color-primary); + border-radius: 50%; + box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1) + var(--color-shadow), + 0 0 fun.convert-px(2) fun.convert-px(1) var(--color-shadow-light); + position: absolute; + left: fun.convert-px(-2); + transition: all 0.3s ease-in-out 0s; + } +} + +.checkbox { + position: absolute; + opacity: 0; + cursor: pointer; + + &:checked ~ .label { + .toggle::after { + position: absolute; + left: calc(100% - (var(--toggle-width) / 2) + #{fun.convert-px(2)}); + } + } + + &:hover, + &:focus { + ~ .label { + .toggle::after { + background: var(--color-primary-lighter); + } + } + } + + &:focus ~ .label { + .title { + text-decoration: underline solid var(--color-primary) fun.convert-px(2); + } + + .toggle { + outline: var(--color-border) solid fun.convert-px(5); + } + } +} diff --git a/src/components/molecules/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx new file mode 100644 index 0000000..078a34c --- /dev/null +++ b/src/components/molecules/forms/toggle.stories.tsx @@ -0,0 +1,117 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import ToggleComponent from './toggle'; + +export default { + title: 'Molecules/Forms', + component: ToggleComponent, + argTypes: { + choices: { + description: 'The toggle choices.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + id: { + control: { + type: 'text', + }, + description: 'The input id.', + type: { + name: 'string', + required: true, + }, + }, + label: { + control: { + type: 'text', + }, + description: 'The toggle label.', + type: { + name: 'string', + required: true, + }, + }, + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + labelSize: { + control: { + type: 'select', + }, + description: 'The label size.', + options: ['medium', 'small'], + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + name: { + control: { + type: 'text', + }, + description: 'The input name.', + type: { + name: 'string', + required: true, + }, + }, + setValue: { + control: { + type: null, + }, + description: 'A callback function to update the toggle value.', + type: { + name: 'function', + required: true, + }, + }, + value: { + control: { + type: null, + }, + description: 'The toggle value. True if checked.', + type: { + name: 'boolean', + required: true, + }, + }, + }, +} as ComponentMeta<typeof ToggleComponent>; + +const Template: ComponentStory<typeof ToggleComponent> = ({ + value: _value, + setValue: _setValue, + ...args +}) => { + const [isChecked, setIsChecked] = useState<boolean>(false); + return ( + <ToggleComponent value={isChecked} setValue={setIsChecked} {...args} /> + ); +}; + +export const Toggle = Template.bind({}); +Toggle.args = { + choices: { + left: 'On', + right: 'Off', + }, + id: 'toggle-example', + label: 'Activate setting:', + name: 'toggle-example', +}; diff --git a/src/components/molecules/forms/toggle.test.tsx b/src/components/molecules/forms/toggle.test.tsx new file mode 100644 index 0000000..fb97adc --- /dev/null +++ b/src/components/molecules/forms/toggle.test.tsx @@ -0,0 +1,29 @@ +import { render, screen } from '@test-utils'; +import Toggle from './toggle'; + +const choices = { + left: 'On', + right: 'Off', +}; + +const label = 'Activate this setting:'; + +describe('Toggle', () => { + it('renders a checked toggle', () => { + render( + <Toggle + id="toggle-example" + name="toggle-example" + choices={choices} + label={label} + value={true} + setValue={(__value) => null} + /> + ); + expect( + screen.getByRole('checkbox', { + name: `${label} ${choices.left} ${choices.right}`, + }) + ).toBeChecked(); + }); +}); diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx new file mode 100644 index 0000000..dff2d2d --- /dev/null +++ b/src/components/molecules/forms/toggle.tsx @@ -0,0 +1,86 @@ +import Checkbox from '@components/atoms/forms/checkbox'; +import Label, { type LabelProps } from '@components/atoms/forms/label'; +import { ReactNode, VFC } from 'react'; +import styles from './toggle.module.scss'; + +export type ToggleChoices = { + /** + * The left part of the toggle field (unchecked). + */ + left: ReactNode; + /** + * The right part of the toggle field (checked). + */ + right: ReactNode; +}; + +export type ToggleProps = { + /** + * The toggle choices. + */ + choices: ToggleChoices; + /** + * The input id. + */ + id: string; + /** + * The toggle label. + */ + label: string; + /** + * Set additional classnames to the label. + */ + labelClassName?: string; + /** + * The label size. + */ + labelSize?: LabelProps['size']; + /** + * The input name. + */ + name: string; + /** + * The toggle value. True if checked. + */ + value: boolean; + /** + * A callback function to update the toggle value. + */ + setValue: (value: boolean) => void; +}; + +/** + * Toggle component + * + * Render a toggle with a label and two choices. + */ +const Toggle: VFC<ToggleProps> = ({ + choices, + id, + label, + labelClassName = '', + labelSize, + name, + setValue, + value, +}) => { + return ( + <> + <Checkbox + name={name} + id={id} + value={value} + setValue={() => setValue(!value)} + className={styles.checkbox} + /> + <Label size={labelSize} htmlFor={id} className={styles.label}> + <span className={`${styles.title} ${labelClassName}`}>{label}</span> + {choices.left} + <span className={styles.toggle}></span> + {choices.right} + </Label> + </> + ); +}; + +export default Toggle; diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss new file mode 100644 index 0000000..83e8d10 --- /dev/null +++ b/src/components/molecules/images/responsive-image.module.scss @@ -0,0 +1,52 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + display: flex; + flex-flow: column; + width: 100%; + max-width: max-content; + margin: var(--spacing-sm) auto; + position: relative; + text-align: center; +} + +.caption { + margin: 0; + padding: fun.convert-px(4) var(--spacing-2xs); + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border); + box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light); + font-weight: 500; +} + +.link { + display: flex; + flex-flow: column; + background: none; + text-decoration: none; + + .caption { + color: var(--color-primary-darker); + } + + &:hover, + &:focus { + transform: scale(1.1); + } + + &:focus { + .caption { + text-decoration: underline solid var(--color-primary-darker) + fun.convert-px(3); + } + } + + &:active { + transform: scale(0.9); + + .caption { + text-decoration: none; + } + } +} diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx new file mode 100644 index 0000000..f9c1d2b --- /dev/null +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -0,0 +1,87 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import ResponsiveImageComponent from './responsive-image'; + +export default { + title: 'Molecules/Images', + component: ResponsiveImageComponent, + argTypes: { + alt: { + control: { + type: 'text', + }, + description: 'An alternative text.', + type: { + name: 'string', + required: true, + }, + }, + caption: { + control: { + type: 'text', + }, + description: 'A figure caption.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + height: { + control: { + type: 'number', + }, + description: 'The image height.', + type: { + name: 'string', + required: true, + }, + }, + src: { + control: { + type: 'text', + }, + description: 'The image source.', + type: { + name: 'string', + required: true, + }, + }, + target: { + control: { + type: 'text', + }, + description: 'A link target.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + width: { + control: { + type: 'number', + }, + description: 'The image width.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof ResponsiveImageComponent>; + +const Template: ComponentStory<typeof ResponsiveImageComponent> = (args) => ( + <ResponsiveImageComponent {...args} /> +); + +export const ResponsiveImage = Template.bind({}); +ResponsiveImage.args = { + alt: 'An example', + src: 'http://placeimg.com/640/480/transport', + width: 640, + height: 480, +}; diff --git a/src/components/molecules/images/responsive-image.test.tsx b/src/components/molecules/images/responsive-image.test.tsx new file mode 100644 index 0000000..5452d28 --- /dev/null +++ b/src/components/molecules/images/responsive-image.test.tsx @@ -0,0 +1,18 @@ +import { render, screen } from '@test-utils'; +import ResponsiveImage from './responsive-image'; + +describe('ResponsiveImage', () => { + it('renders a responsive image', () => { + render( + <ResponsiveImage + src="http://placeimg.com/640/480" + alt="An alternative text" + width={640} + height={480} + /> + ); + expect( + screen.getByRole('img', { name: 'An alternative text' }) + ).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx new file mode 100644 index 0000000..1d8787e --- /dev/null +++ b/src/components/molecules/images/responsive-image.tsx @@ -0,0 +1,81 @@ +import Link from '@components/atoms/links/link'; +import Image, { ImageProps } from 'next/image'; +import { VFC } from 'react'; +import styles from './responsive-image.module.scss'; + +export type ResponsiveImageProps = Omit< + ImageProps, + 'alt' | 'width' | 'height' +> & { + /** + * An alternative text. + */ + alt: string; + /** + * A figure caption. + */ + caption?: string; + /** + * Set additional classnames to the figure wrapper. + */ + className?: string; + /** + * The image height. + */ + height: number | string; + /** + * A link target. + */ + target?: string; + /** + * The image width. + */ + width: number | string; +}; + +/** + * ResponsiveImage component + * + * Render a responsive image wrapped in a figure element. + */ +const ResponsiveImage: VFC<ResponsiveImageProps> = ({ + alt, + caption, + className = '', + layout, + objectFit, + target, + ...props +}) => { + return ( + <figure className={`${styles.wrapper} ${className}`}> + {target ? ( + <Link href={target} className={styles.link}> + <Image + alt={alt} + layout={layout || 'intrinsic'} + objectFit={objectFit || 'contain'} + {...props} + /> + {caption && ( + <figcaption className={styles.caption}>{caption}</figcaption> + )} + </Link> + ) : ( + <> + <Image + alt={alt} + layout={layout || 'intrinsic'} + objectFit={objectFit || 'contain'} + {...props} + /> + {caption && ( + <figcaption className={styles.caption}>{caption}</figcaption> + )} + </> + )} + </figure> + ); +}; + +export default ResponsiveImage; 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<typeof BrandingComponent>; + +const Template: ComponentStory<typeof BrandingComponent> = (args) => ( + <IntlProvider locale="en"> + <BrandingComponent {...args} /> + </IntlProvider> +); + +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( + <Branding + photo="http://placeimg.com/640/480/city" + title="Website title" + /> + ); + expect( + screen.getByRole('img', { name: 'Website title picture' }) + ).toBeInTheDocument(); + }); + + it('renders a logo', () => { + render( + <Branding photo="http://placeimg.com/640/480/city" title="Website name" /> + ); + expect(screen.getByTitle('Website name logo')).toBeInTheDocument(); + }); + + it('renders a baseline', () => { + render( + <Branding + photo="http://placeimg.com/640/480" + title="Website title" + baseline="Website baseline" + /> + ); + expect(screen.getByText('Website baseline')).toBeInTheDocument(); + }); + + it('renders a title wrapped with h1 element', () => { + render( + <Branding + photo="http://placeimg.com/640/480" + title="Website title" + isHome={true} + /> + ); + expect( + screen.getByRole('heading', { level: 1, name: 'Website title' }) + ).toBeInTheDocument(); + }); + + it('renders a title with h1 styles', () => { + render( + <Branding + photo="http://placeimg.com/640/480" + title="Website title" + isHome={false} + /> + ); + 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..9f564bf --- /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 { VFC } 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: VFC<BrandingProps> = ({ + 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 ( + <div className={styles.wrapper}> + <FlippingLogo + className={styles.logo} + altText={altText} + logoTitle={logoTitle} + photo={photo} + /> + <Heading + isFake={!isHome} + level={1} + withMargin={false} + className={styles.title} + > + {withLink ? ( + <Link href="/"> + <a className={styles.link}>{title}</a> + </Link> + ) : ( + title + )} + </Heading> + {baseline && ( + <Heading + isFake={true} + level={4} + withMargin={false} + className={styles.baseline} + > + {baseline} + </Heading> + )} + </div> + ); +}; + +export default Branding; diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss new file mode 100644 index 0000000..2b1b7dc --- /dev/null +++ b/src/components/molecules/layout/card.module.scss @@ -0,0 +1,77 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + --scale-up: 1.05; + --scale-down: 0.95; + + display: flex; + flex-flow: column wrap; + max-width: var(--card-width, 40ch); + padding: 0; + text-align: center; + + .article { + flex: 1; + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + } + + .footer { + margin-top: var(--spacing-md); + } + + .cover { + align-self: flex-start; + max-height: fun.convert-px(150); + margin: auto; + border-bottom: fun.convert-px(1) solid var(--color-border); + } + + .title, + .tagline, + .footer { + padding: 0 var(--spacing-md); + } + + .title { + flex: 1; + margin: var(--spacing-sm) 0; + } + + h2.title { + background: none; + text-shadow: none; + } + + .tagline { + flex: 1; + color: var(--color-fg); + font-weight: 400; + } + + .list { + margin-bottom: var(--spacing-md); + } + + .items { + flex-flow: row wrap; + place-content: center; + gap: var(--spacing-2xs); + } + + .term { + flex: 0 0 100%; + } + + .description { + padding: fun.convert-px(2) var(--spacing-xs); + border: fun.convert-px(1) solid var(--color-primary-darker); + color: var(--color-fg); + font-weight: 400; + + &::before { + display: none; + } + } +} diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx new file mode 100644 index 0000000..a07f8dc --- /dev/null +++ b/src/components/molecules/layout/card.stories.tsx @@ -0,0 +1,102 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import CardComponent from './card'; + +export default { + title: 'Molecules/Layout', + component: CardComponent, + argTypes: { + cover: { + description: 'The card cover data (src, dimensions, alternative text).', + table: { + category: 'Options', + }, + type: { + name: 'object', + required: false, + value: {}, + }, + }, + meta: { + description: 'The card metadata (a publication date for example).', + table: { + category: 'Options', + }, + type: { + name: 'object', + required: false, + value: {}, + }, + }, + tagline: { + control: { + type: 'text', + }, + description: 'A few words about the card.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The card title.', + type: { + name: 'string', + required: true, + }, + }, + titleLevel: { + control: { + type: 'number', + }, + description: 'The title level.', + type: { + name: 'number', + required: true, + }, + }, + url: { + control: { + type: 'text', + }, + description: 'The card target.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof CardComponent>; + +const Template: ComponentStory<typeof CardComponent> = (args) => ( + <CardComponent {...args} /> +); + +const cover = { + alt: 'A picture', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, +}; + +const meta = [ + { + id: 'an-id', + term: 'Voluptates', + value: ['Autem', 'Eos'], + }, +]; + +export const Card = Template.bind({}); +Card.args = { + cover, + meta, + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx new file mode 100644 index 0000000..404bc7a --- /dev/null +++ b/src/components/molecules/layout/card.test.tsx @@ -0,0 +1,52 @@ +import { render, screen } from '@test-utils'; +import Card from './card'; + +const cover = { + alt: 'A picture', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, +}; + +const meta = [ + { + id: 'an-id', + term: 'Voluptates', + value: ['Autem', 'Eos'], + }, +]; + +const tagline = 'Ut rerum incidunt'; + +const title = 'Alias qui porro'; + +const url = '/an-existing-url'; + +describe('Card', () => { + it('renders a title wrapped in h2 element', () => { + render(<Card title={title} titleLevel={2} url={url} />); + expect( + screen.getByRole('heading', { level: 2, name: title }) + ).toBeInTheDocument(); + }); + + it('renders a link to another page', () => { + render(<Card title={title} titleLevel={2} url={url} />); + expect(screen.getByRole('link')).toHaveAttribute('href', url); + }); + + it('renders a cover', () => { + render(<Card title={title} titleLevel={2} url={url} cover={cover} />); + expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument(); + }); + + it('renders a tagline', () => { + render(<Card title={title} titleLevel={2} url={url} tagline={tagline} />); + expect(screen.getByText(tagline)).toBeInTheDocument(); + }); + + it('renders some meta', () => { + render(<Card title={title} titleLevel={2} url={url} meta={meta} />); + expect(screen.getByText(meta[0].term)).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx new file mode 100644 index 0000000..23a0e54 --- /dev/null +++ b/src/components/molecules/layout/card.tsx @@ -0,0 +1,114 @@ +import ButtonLink from '@components/atoms/buttons/button-link'; +import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; +import DescriptionList, { + DescriptionListItem, +} from '@components/atoms/lists/description-list'; +import { VFC } from 'react'; +import ResponsiveImage, { + ResponsiveImageProps, +} from '../images/responsive-image'; +import styles from './card.module.scss'; + +export type Cover = { + /** + * The cover alternative text. + */ + alt: string; + /** + * The cover height. + */ + height: number; + /** + * The cover source. + */ + src: string; + /** + * The cover width. + */ + width: number; +}; + +export type CardProps = { + /** + * Set additional classnames to the card wrapper. + */ + className?: string; + /** + * The card cover. + */ + cover?: Cover; + /** + * The cover fit. Default: cover. + */ + coverFit?: ResponsiveImageProps['objectFit']; + /** + * The card meta. + */ + meta?: DescriptionListItem[]; + /** + * The card tagline. + */ + tagline?: string; + /** + * The card title. + */ + title: string; + /** + * The title level (hn). + */ + titleLevel: HeadingLevel; + /** + * The card target. + */ + url: string; +}; + +/** + * Card component + * + * Render a link with minimal information about its content. + */ +const Card: VFC<CardProps> = ({ + className = '', + cover, + coverFit = 'cover', + meta, + tagline, + title, + titleLevel, + url, +}) => { + return ( + <ButtonLink target={url} className={`${styles.wrapper} ${className}`}> + <article className={styles.article}> + <header className={styles.header}> + {cover && ( + <ResponsiveImage + {...cover} + objectFit={coverFit} + className={styles.cover} + /> + )} + <Heading level={titleLevel} className={styles.title}> + {title} + </Heading> + </header> + <div className={styles.tagline}>{tagline}</div> + {meta && ( + <footer className={styles.footer}> + <DescriptionList + items={meta} + layout="inline" + className={styles.list} + groupClassName={styles.items} + termClassName={styles.term} + descriptionClassName={styles.description} + /> + </footer> + )} + </article> + </ButtonLink> + ); +}; + +export default Card; 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..1ac8de8 --- /dev/null +++ b/src/components/molecules/layout/flipping-logo.stories.tsx @@ -0,0 +1,66 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import FlippingLogoComponent from './flipping-logo'; + +export default { + title: 'Molecules/Layout', + component: FlippingLogoComponent, + argTypes: { + altText: { + control: { + type: 'text', + }, + description: 'Photo alternative text.', + type: { + name: 'string', + required: true, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the logo wrapper.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + logoTitle: { + control: { + type: 'text', + }, + description: 'An accessible name for the logo.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, + photo: { + control: { + type: 'text', + }, + description: 'Photo url.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof FlippingLogoComponent>; + +const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => ( + <FlippingLogoComponent {...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( + <FlippingLogo + altText="Alternative text" + photo="http://placeimg.com/640/480" + /> + ); + expect(screen.getByAltText('Alternative text')).toBeInTheDocument(); + }); + + it('renders a logo', () => { + render( + <FlippingLogo + altText="Alternative text" + logoTitle="A logo title" + photo="http://placeimg.com/640/480" + /> + ); + 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..6f7645f --- /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 { VFC } from 'react'; +import styles from './flipping-logo.module.scss'; + +type FlippingLogoProps = { + /** + * Set additional classnames to the logo wrapper. + */ + className?: 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: VFC<FlippingLogoProps> = ({ + className = '', + altText, + logoTitle, + photo, +}) => { + return ( + <div className={`${styles.logo} ${className}`}> + <div className={styles.logo__front}> + <Image src={photo} alt={altText} layout="fill" objectFit="cover" /> + </div> + <div className={styles.logo__back}> + <Logo title={logoTitle} /> + </div> + </div> + ); +}; + +export default FlippingLogo; diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx new file mode 100644 index 0000000..e7a932d --- /dev/null +++ b/src/components/molecules/layout/meta.stories.tsx @@ -0,0 +1,57 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import MetaComponent from './meta'; + +export default { + title: 'Molecules/Layout', + component: MetaComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the meta wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + meta: { + control: { + type: null, + }, + description: 'The page metadata.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + }, +} as ComponentMeta<typeof MetaComponent>; + +const Template: ComponentStory<typeof MetaComponent> = (args) => ( + <MetaComponent {...args} /> +); + +const data = { + publication: { name: 'Published on:', value: 'April 9th 2022' }, + categories: { + name: 'Categories:', + value: [ + <a key="category1" href="#"> + Category 1 + </a>, + <a key="category2" href="#"> + Category 2 + </a>, + ], + }, +}; + +export const Meta = Template.bind({}); +Meta.args = { + data, +}; diff --git a/src/components/molecules/layout/meta.test.tsx b/src/components/molecules/layout/meta.test.tsx new file mode 100644 index 0000000..a738bdb --- /dev/null +++ b/src/components/molecules/layout/meta.test.tsx @@ -0,0 +1,8 @@ +import { render } from '@test-utils'; +import Meta from './meta'; + +describe('Meta', () => { + it('renders a Meta component', () => { + render(<Meta data={{}} />); + }); +}); diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx new file mode 100644 index 0000000..218ebd9 --- /dev/null +++ b/src/components/molecules/layout/meta.tsx @@ -0,0 +1,74 @@ +import DescriptionList, { + type DescriptionListProps, + type DescriptionListItem, +} from '@components/atoms/lists/description-list'; +import { ReactNode, VFC } from 'react'; + +export type MetaItem = { + /** + * The meta name. + */ + name: string; + /** + * The meta value. + */ + value: ReactNode | ReactNode[]; +}; + +export type MetaMap = { + [key: string]: MetaItem | undefined; +}; + +export type MetaProps = { + /** + * Set additional classnames to the meta wrapper. + */ + className?: string; + /** + * The meta data. + */ + data: MetaMap; + /** + * The meta layout. + */ + layout?: DescriptionListProps['layout']; + /** + * Determine if the layout should be responsive. + */ + responsiveLayout?: DescriptionListProps['responsiveLayout']; +}; + +/** + * Meta component + * + * Renders the page metadata. + */ +const Meta: VFC<MetaProps> = ({ data, ...props }) => { + /** + * Transform the metadata to description list item format. + * + * @param {MetaMap} items - The meta. + * @returns {DescriptionListItem[]} The formatted description list items. + */ + const getItems = (items: MetaMap): DescriptionListItem[] => { + const listItems: DescriptionListItem[] = Object.entries(items) + .map(([key, item]) => { + if (!item) return; + + const { name, value } = item; + + return { + id: key, + term: name, + value: Array.isArray(value) ? value : [value], + } as DescriptionListItem; + }) + .filter((item): item is DescriptionListItem => !!item); + + return listItems; + }; + + return <DescriptionList items={getItems(data)} {...props} />; +}; + +export default Meta; 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<typeof WidgetComponent>; + +const Template: ComponentStory<typeof WidgetComponent> = (args) => ( + <IntlProvider locale="en"> + <WidgetComponent {...args} /> + </IntlProvider> +); + +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( + <Widget expanded={true} title={title} level={titleLevel}> + {children} + </Widget> + ); + 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<WidgetProps> = ({ + children, + className = '', + expanded = true, + level, + title, + withBorders = false, +}) => { + const [isExpanded, setIsExpanded] = useState<boolean>(expanded); + const stateClass = isExpanded ? 'widget--expanded' : 'widget--collapsed'; + const bordersClass = withBorders + ? 'widget--has-borders' + : 'widget--no-borders'; + + return ( + <div + className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${className}`} + > + <HeadingButton + level={level} + title={title} + expanded={isExpanded} + setExpanded={setIsExpanded} + className={styles.widget__header} + /> + <div className={styles.widget__body}>{children}</div> + </div> + ); +}; + +export default Widget; diff --git a/src/components/molecules/modals/modal.module.scss b/src/components/molecules/modals/modal.module.scss new file mode 100644 index 0000000..8866834 --- /dev/null +++ b/src/components/molecules/modals/modal.module.scss @@ -0,0 +1,38 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.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); + + @include mix.media("screen") { + @include mix.dimensions(null, "sm") { + padding: var(--spacing-xs); + border-left: none; + border-right: none; + + .title { + margin-bottom: var(--spacing-2xs); + } + } + + @include mix.dimensions("sm") { + max-width: 35ch; + } + } +} + +.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..bd7d9f4 --- /dev/null +++ b/src/components/molecules/modals/modal.stories.tsx @@ -0,0 +1,69 @@ +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, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the modal.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + 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<typeof ModalComponent>; + +const Template: ComponentStory<typeof ModalComponent> = (args) => ( + <ModalComponent {...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(<Modal title="A custom title" />); + 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..52ada57 --- /dev/null +++ b/src/components/molecules/modals/modal.tsx @@ -0,0 +1,77 @@ +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 } from 'react'; +import styles from './modal.module.scss'; + +export type Icons = 'cogs' | 'search'; + +export type ModalProps = { + /** + * Set additional classnames. + */ + className?: string; + /** + * Set additional classnames to the heading. + */ + headingClassName?: string; + /** + * A icon to illustrate the modal. + */ + icon?: Icons; + /** + * The modal title. + */ + title?: string; +}; + +const CogIcon = dynamic<CogProps>(() => import('@components/atoms/icons/cog'), { + ssr: false, +}); +const SearchIcon = dynamic<MagnifyingGlassProps>( + () => import('@components/atoms/icons/magnifying-glass'), + { ssr: false } +); + +/** + * Modal component + * + * Render a modal component with an optional title and icon. + */ +const Modal: FC<ModalProps> = ({ + children, + className = '', + headingClassName = '', + icon, + title, +}) => { + const getIcon = (id: Icons) => { + switch (id) { + case 'cogs': + return <CogIcon />; + case 'search': + return <SearchIcon />; + default: + return <></>; + } + }; + + return ( + <div className={`${styles.wrapper} ${className}`}> + {title && ( + <Heading + isFake={true} + level={3} + className={`${styles.title} ${headingClassName}`} + > + {icon && <span className={styles.icon}>{getIcon(icon)}</span>} + {title} + </Heading> + )} + {children} + </div> + ); +}; + +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..63fc71d --- /dev/null +++ b/src/components/molecules/modals/tooltip.stories.tsx @@ -0,0 +1,64 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import TooltipComponent from './tooltip'; + +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', + }, + description: 'The tooltip body.', + type: { + name: 'string', + required: true, + }, + }, + icon: { + control: { + type: 'text', + }, + description: 'The tooltip icon.', + type: { + name: 'string', + required: true, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The tooltip title', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof TooltipComponent>; + +const Template: ComponentStory<typeof TooltipComponent> = (args) => ( + <TooltipComponent {...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(<Tooltip title={title} content={content} icon={icon} />); + expect(screen.getByText(title)).toBeInTheDocument(); + }); + + it('renders an explanation', () => { + render(<Tooltip title={title} content={content} icon={icon} />); + expect(screen.getByText(content)).toBeInTheDocument(); + }); + + it('renders an icon', () => { + render(<Tooltip title={title} content={content} icon={icon} />); + 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..73f36e7 --- /dev/null +++ b/src/components/molecules/modals/tooltip.tsx @@ -0,0 +1,62 @@ +import List, { type ListItem } from '@components/atoms/lists/list'; +import { ReactNode, VFC } from 'react'; +import styles from './tooltip.module.scss'; + +export type TooltipProps = { + /** + * Set additional classnames to the tooltip wrapper. + */ + className?: 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: VFC<TooltipProps> = ({ + className = '', + 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 ( + <div className={`${styles.wrapper} ${className}`}> + <div className={styles.title}> + <span className={styles.icon}>{icon}</span> + {title} + </div> + {Array.isArray(content) ? ( + <List items={getListItems(content)} /> + ) : ( + content + )} + </div> + ); +}; + +export default Tooltip; diff --git a/src/components/molecules/nav/breadcrumb.module.scss b/src/components/molecules/nav/breadcrumb.module.scss new file mode 100644 index 0000000..c26f60a --- /dev/null +++ b/src/components/molecules/nav/breadcrumb.module.scss @@ -0,0 +1,19 @@ +@use "@styles/abstracts/placeholders"; + +.list { + @extend %reset-ordered-list; + + display: flex; + flex-flow: row wrap; + align-items: center; + gap: var(--spacing-2xs); +} + +.item { + &:not(:last-of-type) { + &::after { + content: ">"; + margin-left: var(--spacing-2xs); + } + } +} diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx new file mode 100644 index 0000000..d283619 --- /dev/null +++ b/src/components/molecules/nav/breadcrumb.stories.tsx @@ -0,0 +1,48 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import BreadcrumbComponent, { type BreadcrumbItem } from './breadcrumb'; + +export default { + title: 'Molecules/Nav', + component: BreadcrumbComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + table: { + category: 'Styles', + }, + description: 'Set additional classnames to the nav element.', + type: { + name: 'string', + required: false, + }, + }, + items: { + description: 'The breadcrumb items.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + }, +} as ComponentMeta<typeof BreadcrumbComponent>; + +const Template: ComponentStory<typeof BreadcrumbComponent> = (args) => ( + <IntlProvider locale="en"> + <BreadcrumbComponent {...args} /> + </IntlProvider> +); + +const items: BreadcrumbItem[] = [ + { id: 'home', url: '#', name: 'Home' }, + { id: 'blog', url: '#', name: 'Blog' }, + { id: 'post1', url: '#', name: 'A Post' }, +]; + +export const Breadcrumb = Template.bind({}); +Breadcrumb.args = { + items, +}; diff --git a/src/components/molecules/nav/breadcrumb.test.tsx b/src/components/molecules/nav/breadcrumb.test.tsx new file mode 100644 index 0000000..43220c9 --- /dev/null +++ b/src/components/molecules/nav/breadcrumb.test.tsx @@ -0,0 +1,15 @@ +import { render, screen } from '@test-utils'; +import Breadcrumb, { type BreadcrumbItem } from './breadcrumb'; + +const items: BreadcrumbItem[] = [ + { id: 'home', url: '#', name: 'Home' }, + { id: 'blog', url: '#', name: 'Blog' }, + { id: 'post1', url: '#', name: 'A Post' }, +]; + +describe('Breadcrumb', () => { + it('renders a navigation', () => { + render(<Breadcrumb items={items} />); + expect(screen.getByRole('navigation')).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx new file mode 100644 index 0000000..33af735 --- /dev/null +++ b/src/components/molecules/nav/breadcrumb.tsx @@ -0,0 +1,113 @@ +import Link from '@components/atoms/links/link'; +import { settings } from '@utils/config'; +import Script from 'next/script'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import { BreadcrumbList, ListItem, WithContext } from 'schema-dts'; +import styles from './breadcrumb.module.scss'; + +export type BreadcrumbItem = { + /** + * The item id. + */ + id: string; + /** + * The item URL. + */ + url: string; + /** + * The item name. + */ + name: string; +}; + +export type BreadcrumbProps = { + /** + * Set additional classnames to the nav element. + */ + className?: string; + /** + * The breadcrumb items + */ + items: BreadcrumbItem[]; +}; + +/** + * Breadcrumb component + * + * Render a breadcrumb navigation. + */ +const Breadcrumb: VFC<BreadcrumbProps> = ({ items, ...props }) => { + const intl = useIntl(); + + /** + * Retrieve the breadcrumb list items. + * + * @param {BreadcrumbItem[]} list - The breadcrumb items. + * @returns {JSX.Element[]} The list items. + */ + const getListItems = (list: BreadcrumbItem[]): JSX.Element[] => { + return list.map((item, index) => { + const isLastItem = index === list.length - 1; + const itemClassnames = isLastItem + ? `${styles.item} screen-reader-text` + : styles.item; + + return ( + <li key={item.id} className={itemClassnames}> + {isLastItem ? item.name : <Link href={item.url}>{item.name}</Link>} + </li> + ); + }); + }; + + /** + * Retrieve the breadcrumb list items with Schema.org format. + * + * @param {BreadcrumbItem[]} list - The breadcrumb items. + * @returns {ListItem[]} An array of list items using Schema.org format. + */ + const getSchemaItems = (list: BreadcrumbItem[]): ListItem[] => { + const schemaItems: ListItem[] = []; + + list.forEach((item, index) => { + schemaItems.push({ + '@type': 'ListItem', + position: index + 1, + name: item.name, + item: item.url, + }); + }); + + return schemaItems; + }; + + const schemaJsonLd: WithContext<BreadcrumbList> = { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + '@id': `${settings.url}/#breadcrumb`, + itemListElement: getSchemaItems(items), + }; + + return ( + <> + <Script + id="schema-breadcrumb" + type="application/ld+json" + dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} + /> + <nav {...props}> + <span className="screen-reader-text"> + {intl.formatMessage({ + defaultMessage: 'You are here:', + description: 'Breadcrumb: You are here prefix', + id: '16zl9Z', + })} + </span> + <ol className={styles.list}>{getListItems(items)}</ol> + </nav> + </> + ); +}; + +export default Breadcrumb; diff --git a/src/components/molecules/nav/nav.module.scss b/src/components/molecules/nav/nav.module.scss new file mode 100644 index 0000000..9c0f6de --- /dev/null +++ b/src/components/molecules/nav/nav.module.scss @@ -0,0 +1,22 @@ +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; + +.nav { + &__list { + @extend %reset-list; + + display: flex; + flex-flow: row wrap; + gap: var(--spacing-2xs); + align-items: center; + } + + &--footer & { + &__item:not(:first-child) { + &::before { + content: "\2022"; + margin-right: var(--spacing-2xs); + } + } + } +} diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx new file mode 100644 index 0000000..9975bbd --- /dev/null +++ b/src/components/molecules/nav/nav.stories.tsx @@ -0,0 +1,75 @@ +import Envelop from '@components/atoms/icons/envelop'; +import Home from '@components/atoms/icons/home'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import NavComponent, { type NavItem } from './nav'; + +const MainNavItems: NavItem[] = [ + { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> }, + { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> }, +]; + +const FooterNavItems: NavItem[] = [ + { id: 'contactLink', href: '/contact', label: 'Contact' }, + { id: 'legalLink', href: '/legal-notice', label: 'Legal notice' }, +]; + +export default { + title: 'Molecules/Nav', + component: NavComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the navigation wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + items: { + control: { + type: null, + }, + description: 'The nav items.', + type: { + name: 'other', + required: true, + value: '', + }, + }, + kind: { + control: { + type: 'select', + }, + description: 'The navigation kind.', + options: ['main', 'footer'], + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof NavComponent>; + +const Template: ComponentStory<typeof NavComponent> = (args) => ( + <IntlProvider locale="en"> + <NavComponent {...args} /> + </IntlProvider> +); + +export const MainNav = Template.bind({}); +MainNav.args = { + items: MainNavItems, + kind: 'main', +}; + +export const FooterNav = Template.bind({}); +FooterNav.args = { + items: FooterNavItems, + kind: 'footer', +}; diff --git a/src/components/molecules/nav/nav.test.tsx b/src/components/molecules/nav/nav.test.tsx new file mode 100644 index 0000000..183ca0b --- /dev/null +++ b/src/components/molecules/nav/nav.test.tsx @@ -0,0 +1,28 @@ +import Envelop from '@components/atoms/icons/envelop'; +import Home from '@components/atoms/icons/home'; +import { render, screen } from '@test-utils'; +import Nav, { type NavItem } from './nav'; + +const navItems: NavItem[] = [ + { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> }, + { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> }, +]; + +describe('Nav', () => { + it('renders a main navigation', () => { + render(<Nav kind="main" items={navItems} />); + expect(screen.getByRole('navigation')).toHaveClass('nav--main'); + }); + + it('renders a footer navigation', () => { + render(<Nav kind="footer" items={navItems} />); + expect(screen.getByRole('navigation')).toHaveClass('nav--footer'); + }); + + it('renders navigation links', () => { + render(<Nav kind="main" items={navItems} />); + expect( + screen.getByRole('link', { name: navItems[0].label }) + ).toHaveAttribute('href', navItems[0].href); + }); +}); diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx new file mode 100644 index 0000000..6ef9158 --- /dev/null +++ b/src/components/molecules/nav/nav.tsx @@ -0,0 +1,80 @@ +import Link from '@components/atoms/links/link'; +import NavLink from '@components/atoms/links/nav-link'; +import { ReactNode, VFC } from 'react'; +import styles from './nav.module.scss'; + +export type NavItem = { + /** + * The item id. + */ + id: string; + /** + * The item link. + */ + href: string; + /** + * The item name. + */ + label: string; + /** + * The item logo. + */ + logo?: ReactNode; +}; + +export type NavProps = { + /** + * Set additional classnames to the navigation wrapper. + */ + className?: string; + /** + * The navigation items. + */ + items: NavItem[]; + /** + * The navigation kind. + */ + kind: 'main' | 'footer'; + /** + * Set additional classnames to the navigation list. + */ + listClassName?: string; +}; + +/** + * Nav component + * + * Render the nav links. + */ +const Nav: VFC<NavProps> = ({ + className = '', + items, + kind, + listClassName = '', +}) => { + const kindClass = `nav--${kind}`; + + /** + * Get the nav items. + * @returns {JSX.Element[]} An array of nav items. + */ + const getItems = (): JSX.Element[] => { + return items.map(({ id, href, label, logo }) => ( + <li key={id} className={styles.nav__item}> + {kind === 'main' ? ( + <NavLink href={href} label={label} logo={logo} /> + ) : ( + <Link href={href}>{label}</Link> + )} + </li> + )); + }; + + return ( + <nav className={`${styles[kindClass]} ${className}`}> + <ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul> + </nav> + ); +}; + +export default Nav; |