From a08291b1586858fc894a27d56f55f87a88f8dbd3 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 20 Apr 2022 19:24:21 +0200 Subject: refactor(storybook): reorganize design system Add more stories for each components and change some components categories for better organization. --- .../molecules/buttons/back-to-top.stories.tsx | 17 +++- .../molecules/buttons/heading-button.stories.tsx | 78 +++++++++++++-- .../molecules/buttons/help-button.stories.tsx | 17 +++- .../molecules/forms/ackee-select.stories.tsx | 57 +++++++++-- .../molecules/forms/labelled-field.stories.tsx | 107 +++++++++++++++++++-- .../molecules/forms/labelled-select.stories.tsx | 69 ++++++++++--- .../molecules/forms/motion-toggle.stories.tsx | 36 +++++-- .../molecules/forms/prism-theme-toggle.stories.tsx | 44 +++++++-- .../forms/select-with-tooltip.stories.tsx | 35 ++++--- .../molecules/forms/theme-toggle.stories.tsx | 44 +++++++-- src/components/molecules/forms/toggle.stories.tsx | 24 +++-- .../molecules/images/flipping-logo.module.scss | 59 ++++++++++++ .../molecules/images/flipping-logo.stories.tsx | 75 +++++++++++++++ .../molecules/images/flipping-logo.test.tsx | 25 +++++ src/components/molecules/images/flipping-logo.tsx | 55 +++++++++++ .../molecules/images/responsive-image.module.scss | 2 +- .../molecules/images/responsive-image.stories.tsx | 63 ++++++++++-- .../molecules/layout/branding.stories.tsx | 46 +++++++-- src/components/molecules/layout/branding.tsx | 4 +- src/components/molecules/layout/card.module.scss | 5 +- src/components/molecules/layout/card.stories.tsx | 69 +++++++++++-- src/components/molecules/layout/card.tsx | 2 +- .../molecules/layout/flipping-logo.module.scss | 59 ------------ .../molecules/layout/flipping-logo.stories.tsx | 66 ------------- .../molecules/layout/flipping-logo.test.tsx | 25 ----- src/components/molecules/layout/flipping-logo.tsx | 48 --------- src/components/molecules/layout/meta.stories.tsx | 11 ++- src/components/molecules/layout/widget.module.scss | 5 + src/components/molecules/layout/widget.stories.tsx | 46 ++++++--- src/components/molecules/modals/modal.stories.tsx | 32 ++++-- .../molecules/modals/tooltip.stories.tsx | 22 +++-- .../molecules/nav/breadcrumb.stories.tsx | 60 +++++++++--- src/components/molecules/nav/nav.stories.tsx | 42 +++++--- 33 files changed, 956 insertions(+), 393 deletions(-) create mode 100644 src/components/molecules/images/flipping-logo.module.scss create mode 100644 src/components/molecules/images/flipping-logo.stories.tsx create mode 100644 src/components/molecules/images/flipping-logo.test.tsx create mode 100644 src/components/molecules/images/flipping-logo.tsx delete mode 100644 src/components/molecules/layout/flipping-logo.module.scss delete mode 100644 src/components/molecules/layout/flipping-logo.stories.tsx delete mode 100644 src/components/molecules/layout/flipping-logo.test.tsx delete mode 100644 src/components/molecules/layout/flipping-logo.tsx (limited to 'src/components/molecules') 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) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (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) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = ({ @@ -58,18 +70,64 @@ const Template: ComponentStory = ({ const [isExpanded, setIsExpanded] = useState(expanded); return ( - - - + ); }; -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) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (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; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (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; +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ value: _value, setValue: _setValue, ...args }) => { const [value, setValue] = useState(''); - return ; + return ; +}; + +/** + * 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; +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ value, setValue: _setValue, ...args }) => { const [selected, setSelected] = useState(value); - return ( - - ); + return ; }; -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) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (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; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (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; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; 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 = ({ +const Template: ComponentStory = ({ value: _value, setValue: _setValue, ...args }) => { const [selected, setSelected] = useState('option1'); return ( - - - + ); }; -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; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (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; +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ value: _value, setValue: _setValue, ...args }) => { const [isChecked, setIsChecked] = useState(false); - return ( - - ); + return ; }; -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/images/flipping-logo.module.scss b/src/components/molecules/images/flipping-logo.module.scss new file mode 100644 index 0000000..89b9499 --- /dev/null +++ b/src/components/molecules/images/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/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx new file mode 100644 index 0000000..40a4c49 --- /dev/null +++ b/src/components/molecules/images/flipping-logo.stories.tsx @@ -0,0 +1,75 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import FlippingLogoComponent from './flipping-logo'; + +/** + * FlippingLogo - Storybook Meta + */ +export default { + title: 'Molecules/Images', + 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, + }, + }, + unoptimized: { table: { disable: true } }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (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/images/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx new file mode 100644 index 0000000..806fdbe --- /dev/null +++ b/src/components/molecules/images/flipping-logo.test.tsx @@ -0,0 +1,25 @@ +import { render, screen } from '@test-utils'; +import FlippingLogo from './flipping-logo'; + +describe('FlippingLogo', () => { + it('renders a photo', () => { + render( + + ); + expect(screen.getByAltText('Alternative text')).toBeInTheDocument(); + }); + + it('renders a logo', () => { + render( + + ); + expect(screen.getByTitle('A logo title')).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx new file mode 100644 index 0000000..0d31fa3 --- /dev/null +++ b/src/components/molecules/images/flipping-logo.tsx @@ -0,0 +1,55 @@ +import Logo, { type LogoProps } from '@components/atoms/images/logo'; +import Image from 'next/image'; +import { FC } from 'react'; +import styles from './flipping-logo.module.scss'; + +export type FlippingLogoProps = { + /** + * Set additional classnames to the logo wrapper. + */ + className?: string; + /** + * Photo alternative text. + */ + altText: string; + /** + * Logo image title. + */ + logoTitle?: LogoProps['title']; + /** + * Photo url. + */ + photo: string; +}; + +/** + * FlippingLogo component + * + * Render a logo and a photo with a flipping effect. + */ +const FlippingLogo: FC = ({ + className = '', + altText, + logoTitle, + photo, + ...props +}) => { + return ( +
+
+ {altText} +
+
+ +
+
+ ); +}; + +export default FlippingLogo; 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; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (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; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (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 & { /** @@ -35,6 +35,7 @@ const Branding: FC = ({ photo, title, withLink = false, + ...props }) => { const intl = useIntl(); const altText = intl.formatMessage( @@ -61,6 +62,7 @@ const Branding: FC = ({ altText={altText} logoTitle={logoTitle} photo={photo} + {...props} /> ; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - -); +const Template: ComponentStory = (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 = ({ {title} -
{tagline}
+ {tagline &&
{tagline}
} {meta && (