diff options
Diffstat (limited to 'src/components/molecules')
29 files changed, 760 insertions, 197 deletions
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx index fe58293..7d4bc39 100644 --- a/src/components/molecules/buttons/back-to-top.stories.tsx +++ b/src/components/molecules/buttons/back-to-top.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import BackToTopComponent from './back-to-top'; +/** + * BackToTop - Storybook Meta + */ export default { title: 'Molecules/Buttons', component: BackToTopComponent, @@ -30,14 +33,22 @@ export default { }, }, }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof BackToTopComponent>; const Template: ComponentStory<typeof BackToTopComponent> = (args) => ( - <IntlProvider locale="en"> - <BackToTopComponent {...args} /> - </IntlProvider> + <BackToTopComponent {...args} /> ); +/** + * Buttons Stories - Back to top + */ export const BackToTop = Template.bind({}); BackToTop.args = { target: 'top', diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx index 0a23b08..b0e1465 100644 --- a/src/components/molecules/buttons/heading-button.stories.tsx +++ b/src/components/molecules/buttons/heading-button.stories.tsx @@ -3,8 +3,11 @@ import { useState } from 'react'; import { IntlProvider } from 'react-intl'; import HeadingButtonComponent from './heading-button'; +/** + * HeadingButton - Storybook Meta + */ export default { - title: 'Molecules/Buttons', + title: 'Molecules/Buttons/HeadingButton', component: HeadingButtonComponent, argTypes: { expanded: { @@ -20,6 +23,8 @@ export default { level: { control: { type: 'number', + min: 1, + max: 6, }, description: 'Heading level.', type: { @@ -48,6 +53,13 @@ export default { }, }, }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof HeadingButtonComponent>; const Template: ComponentStory<typeof HeadingButtonComponent> = ({ @@ -58,18 +70,64 @@ const Template: ComponentStory<typeof HeadingButtonComponent> = ({ const [isExpanded, setIsExpanded] = useState<boolean>(expanded); return ( - <IntlProvider locale="en"> - <HeadingButtonComponent - expanded={isExpanded} - setExpanded={setIsExpanded} - {...args} - /> - </IntlProvider> + <HeadingButtonComponent + expanded={isExpanded} + setExpanded={setIsExpanded} + {...args} + /> ); }; -export const HeadingButton = Template.bind({}); -HeadingButton.args = { +/** + * Heading Button Stories - Level 1 + */ +export const Level1 = Template.bind({}); +Level1.args = { + level: 1, + title: 'Your title', +}; + +/** + * Heading Button Stories - Level 2 + */ +export const Level2 = Template.bind({}); +Level2.args = { level: 2, title: 'Your title', }; + +/** + * Heading Button Stories - Level 3 + */ +export const Level3 = Template.bind({}); +Level3.args = { + level: 3, + title: 'Your title', +}; + +/** + * Heading Button Stories - Level 4 + */ +export const Level4 = Template.bind({}); +Level4.args = { + level: 4, + title: 'Your title', +}; + +/** + * Heading Button Stories - Level 5 + */ +export const Level5 = Template.bind({}); +Level5.args = { + level: 5, + title: 'Your title', +}; + +/** + * Heading Button Stories - Level 6 + */ +export const Level6 = Template.bind({}); +Level6.args = { + level: 6, + title: 'Your title', +}; diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx index cfc1b0b..cfc603e 100644 --- a/src/components/molecules/buttons/help-button.stories.tsx +++ b/src/components/molecules/buttons/help-button.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import HelpButtonComponent from './help-button'; +/** + * HelpButton - Storybook Meta + */ export default { title: 'Molecules/Buttons', component: HelpButtonComponent, @@ -33,12 +36,20 @@ export default { }, }, }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof HelpButtonComponent>; const Template: ComponentStory<typeof HelpButtonComponent> = (args) => ( - <IntlProvider locale="en"> - <HelpButtonComponent {...args} /> - </IntlProvider> + <HelpButtonComponent {...args} /> ); +/** + * Help Button Stories - Level 1 + */ export const HelpButton = Template.bind({}); diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx index a59bfa9..4e6adf1 100644 --- a/src/components/molecules/forms/ackee-select.stories.tsx +++ b/src/components/molecules/forms/ackee-select.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import AckeeSelectComponent from './ackee-select'; +import AckeeSelect from './ackee-select'; +/** + * AckeeSelect - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: AckeeSelectComponent, + title: 'Molecules/Forms/Select', + component: AckeeSelect, argTypes: { initialValue: { control: { @@ -17,16 +20,50 @@ export default { required: true, }, }, + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + tooltipClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, }, -} as ComponentMeta<typeof AckeeSelectComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof AckeeSelect>; -const Template: ComponentStory<typeof AckeeSelectComponent> = (args) => ( - <IntlProvider locale="en"> - <AckeeSelectComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof AckeeSelect> = (args) => ( + <AckeeSelect {...args} /> ); -export const AckeeSelect = Template.bind({}); -AckeeSelect.args = { +/** + * Select Stories - Ackee select + */ +export const Ackee = Template.bind({}); +Ackee.args = { initialValue: 'full', }; diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx index b77d71e..56eef00 100644 --- a/src/components/molecules/forms/labelled-field.stories.tsx +++ b/src/components/molecules/forms/labelled-field.stories.tsx @@ -1,16 +1,45 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledFieldComponent from './labelled-field'; +import LabelledField from './labelled-field'; +/** + * LabelledField - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: LabelledFieldComponent, + title: 'Molecules/Forms/Field', + component: LabelledField, args: { disabled: false, labelPosition: 'top', required: false, }, argTypes: { + 'aria-labelledby': { + control: { + type: 'text', + }, + description: 'One or more ids that refers to the field name.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the field.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, disabled: { control: { type: 'boolean', @@ -35,6 +64,20 @@ export default { required: true, }, }, + hideLabel: { + control: { + type: 'boolean', + }, + description: 'Visually hide the field label.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, label: { control: { type: 'text', @@ -181,20 +224,68 @@ export default { }, }, }, -} as ComponentMeta<typeof LabelledFieldComponent>; +} as ComponentMeta<typeof LabelledField>; -const Template: ComponentStory<typeof LabelledFieldComponent> = ({ +const Template: ComponentStory<typeof LabelledField> = ({ value: _value, setValue: _setValue, ...args }) => { const [value, setValue] = useState<string>(''); - return <LabelledFieldComponent value={value} setValue={setValue} {...args} />; + return <LabelledField value={value} setValue={setValue} {...args} />; +}; + +/** + * Labelled Field Stories - Left + */ +export const Left = Template.bind({}); +Left.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + labelPosition: 'left', + name: 'labelled-field-storybook', +}; + +/** + * Labelled Field Stories - Top + */ +export const Top = Template.bind({}); +Top.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + labelPosition: 'top', + name: 'labelled-field-storybook', +}; + +/** + * Labelled Field Stories - Required + */ +export const Required = Template.bind({}); +Required.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + name: 'labelled-field-storybook', + required: true, +}; + +/** + * Labelled Field Stories - Hidden label + */ +export const HiddenLabel = Template.bind({}); +HiddenLabel.args = { + hideLabel: true, + id: 'labelled-field-storybook', + label: 'Labelled field', + name: 'labelled-field-storybook', }; -export const LabelledField = Template.bind({}); -LabelledField.args = { +/** + * Labelled Field Stories - Disabled + */ +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, id: 'labelled-field-storybook', label: 'Labelled field', name: 'labelled-field-storybook', diff --git a/src/components/molecules/forms/labelled-select.stories.tsx b/src/components/molecules/forms/labelled-select.stories.tsx index 0c569f5..d02732c 100644 --- a/src/components/molecules/forms/labelled-select.stories.tsx +++ b/src/components/molecules/forms/labelled-select.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledSelectComponent from './labelled-select'; +import LabelledSelect from './labelled-select'; const selectOptions = [ { id: 'option1', name: 'Option 1', value: 'option1' }, @@ -8,9 +8,12 @@ const selectOptions = [ { id: 'option3', name: 'Option 3', value: 'option3' }, ]; +/** + * LabelledSelect - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: LabelledSelectComponent, + title: 'Molecules/Forms/Select', + component: LabelledSelect, args: { disabled: false, labelPosition: 'top', @@ -167,29 +170,67 @@ export default { }, }, }, -} as ComponentMeta<typeof LabelledSelectComponent>; +} as ComponentMeta<typeof LabelledSelect>; -const Template: ComponentStory<typeof LabelledSelectComponent> = ({ +const Template: ComponentStory<typeof LabelledSelect> = ({ value, setValue: _setValue, ...args }) => { const [selected, setSelected] = useState<string>(value); - return ( - <LabelledSelectComponent - value={selected} - setValue={setSelected} - {...args} - /> - ); + return <LabelledSelect value={selected} setValue={setSelected} {...args} />; }; -export const LabelledSelect = Template.bind({}); -LabelledSelect.args = { +/** + * Labelled Select Stories - Left + */ +export const Left = Template.bind({}); +Left.args = { id: 'labelled-select-storybook', label: 'Labelled select', + labelPosition: 'left', name: 'labelled-select-storybook', options: selectOptions, value: 'option1', }; + +/** + * Labelled Select Stories - Top + */ +export const Top = Template.bind({}); +Top.args = { + id: 'labelled-select-storybook', + label: 'Labelled select', + labelPosition: 'top', + name: 'labelled-select-storybook', + options: selectOptions, + value: 'option1', +}; + +/** + * Labelled Select Stories - Disabled + */ +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, + id: 'labelled-select-storybook', + label: 'Labelled select', + name: 'labelled-select-storybook', + options: selectOptions, + value: 'option1', +}; + +/** + * Labelled Select Stories - Required + */ +export const Required = Template.bind({}); +Required.args = { + id: 'labelled-select-storybook', + label: 'Labelled select', + labelPosition: 'top', + name: 'labelled-select-storybook', + options: selectOptions, + required: true, + value: 'option1', +}; diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx index dc4d2a9..dcfc68d 100644 --- a/src/components/molecules/forms/motion-toggle.stories.tsx +++ b/src/components/molecules/forms/motion-toggle.stories.tsx @@ -2,10 +2,26 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import MotionToggleComponent from './motion-toggle'; +/** + * MotionToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', + title: 'Molecules/Forms/Toggle', component: MotionToggleComponent, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof MotionToggleComponent>; const Template: ComponentStory<typeof MotionToggleComponent> = (args) => ( - <IntlProvider locale="en"> - <MotionToggleComponent {...args} /> - </IntlProvider> + <MotionToggleComponent {...args} /> ); -export const MotionToggle = Template.bind({}); -MotionToggle.args = { +/** + * Toggle Stories - Motion + */ +export const Motion = Template.bind({}); +Motion.args = { value: false, }; diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx index dc9090b..513ebfc 100644 --- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx @@ -1,11 +1,27 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import PrismThemeToggleComponent from './prism-theme-toggle'; +import PrismThemeToggle from './prism-theme-toggle'; +/** + * PrismThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: PrismThemeToggleComponent, + title: 'Molecules/Forms/Toggle', + component: PrismThemeToggle, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, -} as ComponentMeta<typeof PrismThemeToggleComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof PrismThemeToggle>; -const Template: ComponentStory<typeof PrismThemeToggleComponent> = (args) => ( - <IntlProvider locale="en"> - <PrismThemeToggleComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof PrismThemeToggle> = (args) => ( + <PrismThemeToggle {...args} /> ); -export const PrismThemeToggle = Template.bind({}); -PrismThemeToggle.args = { +/** + * Toggle Stories - Prism theme + */ +export const PrismTheme = Template.bind({}); +PrismTheme.args = { value: false, }; diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx index c63e9b8..d757b2b 100644 --- a/src/components/molecules/forms/select-with-tooltip.stories.tsx +++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import SelectWithTooltipComponent from './select-with-tooltip'; +import SelectWithTooltip from './select-with-tooltip'; +/** + * SelectWithTooltip - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: SelectWithTooltipComponent, + title: 'Molecules/Forms/Select', + component: SelectWithTooltip, argTypes: { content: { control: { @@ -175,7 +178,14 @@ export default { }, }, }, -} as ComponentMeta<typeof SelectWithTooltipComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof SelectWithTooltip>; const selectOptions = [ { id: 'option1', name: 'Option 1', value: 'option1' }, @@ -183,25 +193,22 @@ const selectOptions = [ { id: 'option3', name: 'Option 3', value: 'option3' }, ]; -const Template: ComponentStory<typeof SelectWithTooltipComponent> = ({ +const Template: ComponentStory<typeof SelectWithTooltip> = ({ value: _value, setValue: _setValue, ...args }) => { const [selected, setSelected] = useState<string>('option1'); return ( - <IntlProvider locale="en"> - <SelectWithTooltipComponent - value={selected} - setValue={setSelected} - {...args} - /> - </IntlProvider> + <SelectWithTooltip value={selected} setValue={setSelected} {...args} /> ); }; -export const SelectWithTooltip = Template.bind({}); -SelectWithTooltip.args = { +/** + * Select Stories - With tooltip + */ +export const WithTooltip = Template.bind({}); +WithTooltip.args = { content: 'Illo voluptatibus quia minima placeat sit nostrum excepturi.', title: 'Possimus quidem dolor', id: 'storybook-select', diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx index a9bcf73..05d94b9 100644 --- a/src/components/molecules/forms/theme-toggle.stories.tsx +++ b/src/components/molecules/forms/theme-toggle.stories.tsx @@ -1,11 +1,27 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import ThemeToggleComponent from './theme-toggle'; +import ThemeToggle from './theme-toggle'; +/** + * ThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: ThemeToggleComponent, + title: 'Molecules/Forms/Toggle', + component: ThemeToggle, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, -} as ComponentMeta<typeof ThemeToggleComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof ThemeToggle>; -const Template: ComponentStory<typeof ThemeToggleComponent> = (args) => ( - <IntlProvider locale="en"> - <ThemeToggleComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof ThemeToggle> = (args) => ( + <ThemeToggle {...args} /> ); -export const ThemeToggle = Template.bind({}); -ThemeToggle.args = { +/** + * Toggle Stories - Theme + */ +export const Theme = Template.bind({}); +Theme.args = { value: false, }; diff --git a/src/components/molecules/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx index 078a34c..0351ab7 100644 --- a/src/components/molecules/forms/toggle.stories.tsx +++ b/src/components/molecules/forms/toggle.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import ToggleComponent from './toggle'; +import Toggle from './toggle'; +/** + * ThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: ToggleComponent, + title: 'Molecules/Forms/Toggle', + component: Toggle, argTypes: { choices: { description: 'The toggle choices.', @@ -92,21 +95,22 @@ export default { }, }, }, -} as ComponentMeta<typeof ToggleComponent>; +} as ComponentMeta<typeof Toggle>; -const Template: ComponentStory<typeof ToggleComponent> = ({ +const Template: ComponentStory<typeof Toggle> = ({ value: _value, setValue: _setValue, ...args }) => { const [isChecked, setIsChecked] = useState<boolean>(false); - return ( - <ToggleComponent value={isChecked} setValue={setIsChecked} {...args} /> - ); + return <Toggle value={isChecked} setValue={setIsChecked} {...args} />; }; -export const Toggle = Template.bind({}); -Toggle.args = { +/** + * Toggle Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { choices: { left: 'On', right: 'Off', diff --git a/src/components/molecules/layout/flipping-logo.module.scss b/src/components/molecules/images/flipping-logo.module.scss index 89b9499..89b9499 100644 --- a/src/components/molecules/layout/flipping-logo.module.scss +++ b/src/components/molecules/images/flipping-logo.module.scss diff --git a/src/components/molecules/layout/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx index 1ac8de8..40a4c49 100644 --- a/src/components/molecules/layout/flipping-logo.stories.tsx +++ b/src/components/molecules/images/flipping-logo.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import FlippingLogoComponent from './flipping-logo'; +/** + * FlippingLogo - Storybook Meta + */ export default { - title: 'Molecules/Layout', + title: 'Molecules/Images', component: FlippingLogoComponent, argTypes: { altText: { @@ -51,6 +54,7 @@ export default { required: true, }, }, + unoptimized: { table: { disable: true } }, }, } as ComponentMeta<typeof FlippingLogoComponent>; @@ -58,9 +62,14 @@ const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => ( <FlippingLogoComponent {...args} /> ); +/** + * Images Stories - Flipping Logo + */ export const FlippingLogo = Template.bind({}); FlippingLogo.args = { altText: 'Website picture', logoTitle: 'Website logo', photo: 'http://placeimg.com/640/480', + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, }; diff --git a/src/components/molecules/layout/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx index 806fdbe..806fdbe 100644 --- a/src/components/molecules/layout/flipping-logo.test.tsx +++ b/src/components/molecules/images/flipping-logo.test.tsx diff --git a/src/components/molecules/layout/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx index 4a216ef..0d31fa3 100644 --- a/src/components/molecules/layout/flipping-logo.tsx +++ b/src/components/molecules/images/flipping-logo.tsx @@ -32,11 +32,18 @@ const FlippingLogo: FC<FlippingLogoProps> = ({ altText, logoTitle, photo, + ...props }) => { return ( <div className={`${styles.logo} ${className}`}> <div className={styles.logo__front}> - <Image src={photo} alt={altText} layout="fill" objectFit="cover" /> + <Image + src={photo} + alt={altText} + layout="fill" + objectFit="cover" + {...props} + /> </div> <div className={styles.logo__back}> <Logo title={logoTitle} /> diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss index 83e8d10..3566421 100644 --- a/src/components/molecules/images/responsive-image.module.scss +++ b/src/components/molecules/images/responsive-image.module.scss @@ -5,7 +5,7 @@ flex-flow: column; width: 100%; max-width: max-content; - margin: var(--spacing-sm) auto; + margin: 0; position: relative; text-align: center; } diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx index f9c1d2b..a1f5295 100644 --- a/src/components/molecules/images/responsive-image.stories.tsx +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ResponsiveImageComponent from './responsive-image'; +import ResponsiveImage from './responsive-image'; +/** + * ResponsiveImage - Storybook Meta + */ export default { - title: 'Molecules/Images', - component: ResponsiveImageComponent, + title: 'Molecules/Images/ResponsiveImage', + component: ResponsiveImage, argTypes: { alt: { control: { @@ -72,16 +75,60 @@ export default { }, }, }, -} as ComponentMeta<typeof ResponsiveImageComponent>; +} as ComponentMeta<typeof ResponsiveImage>; -const Template: ComponentStory<typeof ResponsiveImageComponent> = (args) => ( - <ResponsiveImageComponent {...args} /> +const Template: ComponentStory<typeof ResponsiveImage> = (args) => ( + <ResponsiveImage {...args} /> ); -export const ResponsiveImage = Template.bind({}); -ResponsiveImage.args = { +/** + * Responsive Image Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { alt: 'An example', src: 'http://placeimg.com/640/480/transport', width: 640, height: 480, + unoptimized: true, +}; + +/** + * Responsive Image Stories - With link + */ +export const WithLink = Template.bind({}); +WithLink.args = { + alt: 'An example', + src: 'http://placeimg.com/640/480/transport', + width: 640, + height: 480, + unoptimized: true, + target: '#', +}; + +/** + * Responsive Image Stories - With caption + */ +export const WithCaption = Template.bind({}); +WithCaption.args = { + alt: 'An example', + src: 'http://placeimg.com/640/480/transport', + width: 640, + height: 480, + caption: 'Omnis nulla labore', + unoptimized: true, +}; + +/** + * Responsive Image Stories - With caption and link + */ +export const WithCaptionAndLink = Template.bind({}); +WithCaptionAndLink.args = { + alt: 'An example', + src: 'http://placeimg.com/640/480/transport', + width: 640, + height: 480, + caption: 'Omnis nulla labore', + target: '#', + unoptimized: true, }; diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx index 726ba26..1637c99 100644 --- a/src/components/molecules/layout/branding.stories.tsx +++ b/src/components/molecules/layout/branding.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import BrandingComponent from './branding'; +import Branding from './branding'; +/** + * Branding - Storybook Meta + */ export default { - title: 'Molecules/Layout', - component: BrandingComponent, + title: 'Molecules/Layout/Branding', + component: Branding, args: { isHome: false, }, @@ -53,6 +56,7 @@ export default { required: true, }, }, + unoptimized: { table: { disable: true } }, withLink: { control: { type: 'boolean', @@ -68,16 +72,38 @@ export default { }, }, }, -} as ComponentMeta<typeof BrandingComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof Branding>; -const Template: ComponentStory<typeof BrandingComponent> = (args) => ( - <IntlProvider locale="en"> - <BrandingComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof Branding> = (args) => ( + <Branding {...args} /> ); -export const Branding = Template.bind({}); -Branding.args = { +/** + * Branding Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { title: 'Website title', photo: 'http://placeimg.com/640/480', + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, +}; + +/** + * Branding Stories - With baseline + */ +export const WithBaseline = Template.bind({}); +WithBaseline.args = { + title: 'Website title', + baseline: 'Maiores corporis qui', + photo: 'http://placeimg.com/640/480', + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, }; diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx index 9fe89e7..423c54f 100644 --- a/src/components/molecules/layout/branding.tsx +++ b/src/components/molecules/layout/branding.tsx @@ -2,8 +2,8 @@ import Heading from '@components/atoms/headings/heading'; import Link from 'next/link'; import { FC } from 'react'; import { useIntl } from 'react-intl'; +import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo'; import styles from './branding.module.scss'; -import FlippingLogo, { type FlippingLogoProps } from './flipping-logo'; export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & { /** @@ -35,6 +35,7 @@ const Branding: FC<BrandingProps> = ({ photo, title, withLink = false, + ...props }) => { const intl = useIntl(); const altText = intl.formatMessage( @@ -61,6 +62,7 @@ const Branding: FC<BrandingProps> = ({ altText={altText} logoTitle={logoTitle} photo={photo} + {...props} /> <Heading isFake={!isHome} diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss index 2b1b7dc..85c319a 100644 --- a/src/components/molecules/layout/card.module.scss +++ b/src/components/molecules/layout/card.module.scss @@ -17,10 +17,6 @@ justify-content: flex-start; } - .footer { - margin-top: var(--spacing-md); - } - .cover { align-self: flex-start; max-height: fun.convert-px(150); @@ -46,6 +42,7 @@ .tagline { flex: 1; + margin-bottom: var(--spacing-md); color: var(--color-fg); font-weight: 400; } diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx index a07f8dc..ed78d00 100644 --- a/src/components/molecules/layout/card.stories.tsx +++ b/src/components/molecules/layout/card.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import CardComponent from './card'; +import Card from './card'; +/** + * Card - Storybook Meta + */ export default { - title: 'Molecules/Layout', - component: CardComponent, + title: 'Molecules/Layout/Card', + component: Card, argTypes: { cover: { description: 'The card cover data (src, dimensions, alternative text).', @@ -53,6 +56,8 @@ export default { titleLevel: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The title level.', type: { @@ -71,17 +76,16 @@ export default { }, }, }, -} as ComponentMeta<typeof CardComponent>; +} as ComponentMeta<typeof Card>; -const Template: ComponentStory<typeof CardComponent> = (args) => ( - <CardComponent {...args} /> -); +const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />; const cover = { alt: 'A picture', height: 480, src: 'http://placeimg.com/640/480', width: 640, + unoptimized: true, }; const meta = [ @@ -92,10 +96,57 @@ const meta = [ }, ]; -export const Card = Template.bind({}); -Card.args = { +/** + * Card Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With cover + */ +export const WithCover = Template.bind({}); +WithCover.args = { + cover, + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With meta + */ +export const WithMeta = Template.bind({}); +WithMeta.args = { + meta, + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With tagline + */ +export const WithTagline = Template.bind({}); +WithTagline.args = { + tagline: 'Ullam accusantium ipsa', + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With all data + */ +export const WithAll = Template.bind({}); +WithAll.args = { cover, meta, + tagline: 'Ullam accusantium ipsa', title: 'Veritatis dicta quod', titleLevel: 2, url: '#', diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx index 89f100e..15927e9 100644 --- a/src/components/molecules/layout/card.tsx +++ b/src/components/molecules/layout/card.tsx @@ -93,7 +93,7 @@ const Card: FC<CardProps> = ({ {title} </Heading> </header> - <div className={styles.tagline}>{tagline}</div> + {tagline && <div className={styles.tagline}>{tagline}</div>} {meta && ( <footer className={styles.footer}> <DescriptionList diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx index e7a932d..0323f90 100644 --- a/src/components/molecules/layout/meta.stories.tsx +++ b/src/components/molecules/layout/meta.stories.tsx @@ -1,6 +1,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import MetaComponent from './meta'; +/** + * Meta - Storybook Meta + */ export default { title: 'Molecules/Layout', component: MetaComponent, @@ -18,10 +21,7 @@ export default { required: false, }, }, - meta: { - control: { - type: null, - }, + data: { description: 'The page metadata.', type: { name: 'object', @@ -51,6 +51,9 @@ const data = { }, }; +/** + * Layout Stories - Meta + */ export const Meta = Template.bind({}); Meta.args = { data, diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss index 727ffb7..5854206 100644 --- a/src/components/molecules/layout/widget.module.scss +++ b/src/components/molecules/layout/widget.module.scss @@ -5,9 +5,14 @@ flex-flow: column; &__header { + z-index: 2; background: var(--color-bg); } + &__body { + position: relative; + } + &--has-borders & { &__body { border: fun.convert-px(2) solid var(--color-primary-dark); diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx index d79f66e..c113db9 100644 --- a/src/components/molecules/layout/widget.stories.tsx +++ b/src/components/molecules/layout/widget.stories.tsx @@ -1,12 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import WidgetComponent from './widget'; +import Widget from './widget'; +/** + * Widget - Storybook Meta + */ export default { - title: 'Molecules/Layout', - component: WidgetComponent, + title: 'Molecules/Layout/Widget', + component: Widget, args: { - expanded: true, withBorders: false, }, argTypes: { @@ -37,6 +39,8 @@ export default { level: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The heading level.', type: { @@ -69,17 +73,35 @@ export default { }, }, }, -} as ComponentMeta<typeof WidgetComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof Widget>; -const Template: ComponentStory<typeof WidgetComponent> = (args) => ( - <IntlProvider locale="en"> - <WidgetComponent {...args} /> - </IntlProvider> -); +const Template: ComponentStory<typeof Widget> = (args) => <Widget {...args} />; -export const Widget = Template.bind({}); -Widget.args = { +/** + * Widget Stories - Expanded + */ +export const Expanded = Template.bind({}); +Expanded.args = { children: 'Widget body', + expanded: true, + level: 2, + title: 'Widget title', +}; + +/** + * Widget Stories - Collapsed + */ +export const Collapsed = Template.bind({}); +Collapsed.args = { + children: 'Widget body', + expanded: false, level: 2, title: 'Widget title', }; diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx index bd7d9f4..55b7677 100644 --- a/src/components/molecules/modals/modal.stories.tsx +++ b/src/components/molecules/modals/modal.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ModalComponent from './modal'; +import Modal from './modal'; +/** + * Widget - Storybook Meta + */ export default { - title: 'Molecules/Modals', - component: ModalComponent, + title: 'Molecules/Modals/Modal', + component: Modal, argTypes: { children: { control: { @@ -56,14 +59,25 @@ export default { }, }, }, -} as ComponentMeta<typeof ModalComponent>; +} as ComponentMeta<typeof Modal>; -const Template: ComponentStory<typeof ModalComponent> = (args) => ( - <ModalComponent {...args} /> -); +const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />; -export const Modal = Template.bind({}); -Modal.args = { +/** + * Modal Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { children: 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', }; + +/** + * Modal Stories - With title + */ +export const WithTitle = Template.bind({}); +WithTitle.args = { + children: + 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', + title: 'Alias praesentium corporis', +}; diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx index 63fc71d..06a4855 100644 --- a/src/components/molecules/modals/tooltip.stories.tsx +++ b/src/components/molecules/modals/tooltip.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import TooltipComponent from './tooltip'; +import Tooltip from './tooltip'; +/** + * Tooltip - Storybook Meta + */ export default { - title: 'Molecules/Modals', - component: TooltipComponent, + title: 'Molecules/Modals/Tooltip', + component: Tooltip, argTypes: { className: { control: { @@ -49,14 +52,17 @@ export default { }, }, }, -} as ComponentMeta<typeof TooltipComponent>; +} as ComponentMeta<typeof Tooltip>; -const Template: ComponentStory<typeof TooltipComponent> = (args) => ( - <TooltipComponent {...args} /> +const Template: ComponentStory<typeof Tooltip> = (args) => ( + <Tooltip {...args} /> ); -export const Tooltip = Template.bind({}); -Tooltip.args = { +/** + * Tooltip Stories - Help + */ +export const Help = Template.bind({}); +Help.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: '?', diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx index d283619..500ae6c 100644 --- a/src/components/molecules/nav/breadcrumb.stories.tsx +++ b/src/components/molecules/nav/breadcrumb.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import BreadcrumbComponent, { type BreadcrumbItem } from './breadcrumb'; +import Breadcrumb from './breadcrumb'; +/** + * Breadcrumb - Storybook Meta + */ export default { - title: 'Molecules/Nav', - component: BreadcrumbComponent, + title: 'Molecules/Navigation/Breadcrumb', + component: Breadcrumb, argTypes: { className: { control: { @@ -28,21 +31,46 @@ export default { }, }, }, -} as ComponentMeta<typeof BreadcrumbComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof Breadcrumb>; -const Template: ComponentStory<typeof BreadcrumbComponent> = (args) => ( - <IntlProvider locale="en"> - <BreadcrumbComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof Breadcrumb> = (args) => ( + <Breadcrumb {...args} /> ); -const items: BreadcrumbItem[] = [ - { id: 'home', url: '#', name: 'Home' }, - { id: 'blog', url: '#', name: 'Blog' }, - { id: 'post1', url: '#', name: 'A Post' }, -]; +/** + * Breadcrumb Stories - One item + */ +export const OneItem = Template.bind({}); +OneItem.args = { + items: [{ id: 'home', url: '#', name: 'Home' }], +}; + +/** + * Breadcrumb Stories - Two items + */ +export const TwoItems = Template.bind({}); +TwoItems.args = { + items: [ + { id: 'home', url: '#', name: 'Home' }, + { id: 'blog', url: '#', name: 'Blog' }, + ], +}; -export const Breadcrumb = Template.bind({}); -Breadcrumb.args = { - items, +/** + * Breadcrumb Stories - Three items + */ +export const ThreeItems = Template.bind({}); +ThreeItems.args = { + items: [ + { id: 'home', url: '#', name: 'Home' }, + { id: 'blog', url: '#', name: 'Blog' }, + { id: 'post1', url: '#', name: 'A Post' }, + ], }; diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx index 9975bbd..25455fd 100644 --- a/src/components/molecules/nav/nav.stories.tsx +++ b/src/components/molecules/nav/nav.stories.tsx @@ -4,18 +4,11 @@ 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' }, -]; - +/** + * Nav - Storybook Meta + */ export default { - title: 'Molecules/Nav', + title: 'Molecules/Navigation/Nav', component: NavComponent, argTypes: { className: { @@ -54,20 +47,41 @@ export default { }, }, }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof NavComponent>; const Template: ComponentStory<typeof NavComponent> = (args) => ( - <IntlProvider locale="en"> - <NavComponent {...args} /> - </IntlProvider> + <NavComponent {...args} /> ); +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' }, +]; + +/** + * Nav Stories - Main navigation + */ export const MainNav = Template.bind({}); MainNav.args = { items: MainNavItems, kind: 'main', }; +/** + * Nav Stories - Footer navigation + */ export const FooterNav = Template.bind({}); FooterNav.args = { items: FooterNavItems, |