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. --- .../organisms/layout/cards-list.stories.tsx | 30 +++++++++++ src/components/organisms/layout/footer.stories.tsx | 17 ++++-- .../organisms/layout/overview.stories.tsx | 37 +++++++++---- .../organisms/layout/summary.module.scss | 1 + .../organisms/layout/summary.stories.tsx | 60 ++++++++++++++++------ src/components/organisms/layout/summary.tsx | 4 +- 6 files changed, 119 insertions(+), 30 deletions(-) (limited to 'src/components/organisms/layout') diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx index 5182808..7ff4365 100644 --- a/src/components/organisms/layout/cards-list.stories.tsx +++ b/src/components/organisms/layout/cards-list.stories.tsx @@ -1,13 +1,32 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import CardsListComponent, { type CardsListItem } from './cards-list'; +/** + * CardsList - Storybook Meta + */ export default { title: 'Organisms/Layout', component: CardsListComponent, args: { + coverFit: 'cover', kind: 'unordered', }, argTypes: { + coverFit: { + control: { + type: 'select', + }, + description: 'The cover fit.', + options: ['fill', 'contain', 'cover', 'none', 'scale-down'], + table: { + category: 'Options', + defaultValue: { summary: 'cover' }, + }, + type: { + name: 'string', + required: false, + }, + }, items: { description: 'The cards data.', type: { @@ -34,6 +53,8 @@ export default { titleLevel: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The heading level for each card.', type: { @@ -56,6 +77,8 @@ const items: CardsListItem[] = [ src: 'http://placeimg.com/640/480', width: 640, height: 480, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, }, meta: [ { id: 'meta-1', term: 'Quibusdam', value: ['Velit', 'Ex', 'Alias'] }, @@ -71,6 +94,8 @@ const items: CardsListItem[] = [ src: 'http://placeimg.com/640/480', width: 640, height: 480, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, }, meta: [{ id: 'meta-1', term: 'Est', value: ['Voluptas'] }], tagline: 'Quod vel accusamus', @@ -84,6 +109,8 @@ const items: CardsListItem[] = [ src: 'http://placeimg.com/640/480', width: 640, height: 480, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, }, meta: [ { @@ -98,6 +125,9 @@ const items: CardsListItem[] = [ }, ]; +/** + * Layout Stories - Cards list + */ export const CardsList = Template.bind({}); CardsList.args = { items, diff --git a/src/components/organisms/layout/footer.stories.tsx b/src/components/organisms/layout/footer.stories.tsx index 2ce7ee1..06819da 100644 --- a/src/components/organisms/layout/footer.stories.tsx +++ b/src/components/organisms/layout/footer.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import FooterComponent from './footer'; +/** + * Footer - Storybook Meta + */ export default { title: 'Organisms/Layout', component: FooterComponent, @@ -50,12 +53,17 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); const copyright = { @@ -66,6 +74,9 @@ const copyright = { const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }]; +/** + * Layout Stories - Footer + */ export const Footer = Template.bind({}); Footer.args = { copyright, diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx index 61d8b35..b18a6b6 100644 --- a/src/components/organisms/layout/overview.stories.tsx +++ b/src/components/organisms/layout/overview.stories.tsx @@ -1,15 +1,21 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import OverviewComponent from './overview'; +import Overview from './overview'; +/** + * Overview - Storybook Meta + */ export default { - title: 'Organisms/Layout', - component: OverviewComponent, + title: 'Organisms/Layout/Overview', + component: Overview, argTypes: { cover: { description: 'The overview cover.', + table: { + category: 'Options', + }, type: { name: 'object', - required: true, + required: false, value: {}, }, }, @@ -22,10 +28,10 @@ export default { }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (args) => ( + ); const cover = { @@ -33,6 +39,7 @@ const cover = { height: 480, src: 'http://placeimg.com/640/480/cats', width: 640, + unoptimized: true, }; const meta = { @@ -43,8 +50,20 @@ const meta = { }, }; -export const Overview = Template.bind({}); -Overview.args = { +/** + * Overview Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + cover, + meta, +}; + +/** + * Overview Stories - With cover + */ +export const WithCover = Template.bind({}); +WithCover.args = { cover, meta, }; diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss index 5da0a18..3919e15 100644 --- a/src/components/organisms/layout/summary.module.scss +++ b/src/components/organisms/layout/summary.module.scss @@ -28,6 +28,7 @@ width: auto; max-height: fun.convert-px(100); max-width: 100%; + margin-bottom: var(--spacing-sm); border: fun.convert-px(1) solid var(--color-border); @include mix.media("screen") { diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx index b33acde..05be7da 100644 --- a/src/components/organisms/layout/summary.stories.tsx +++ b/src/components/organisms/layout/summary.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import SummaryComponent from './summary'; +import Summary from './summary'; +/** + * Summary - Storybook Meta + */ export default { - title: 'Organisms/Layout', - component: SummaryComponent, + title: 'Organisms/Layout/Summary', + component: Summary, args: { titleLevel: 2, }, @@ -51,6 +54,8 @@ export default { titleLevel: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The page title level (hn)', table: { @@ -73,14 +78,27 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); +const cover = { + alt: 'A cover', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, + unoptimized: true, +}; + const meta = { publication: { name: 'Published on:', value: 'April 11th 2022' }, readingTime: { name: 'Reading time:', value: '5 minutes' }, @@ -98,14 +116,24 @@ const meta = { comments: { name: 'Comments:', value: '1 comment' }, }; -export const Summary = Template.bind({}); -Summary.args = { - cover: { - alt: 'A cover', - height: 480, - src: 'http://placeimg.com/640/480', - width: 640, - }, +/** + * Summary Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + excerpt: + 'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.', + meta, + title: 'Odio odit necessitatibus', + url: '#', +}; + +/** + * Summary Stories - With cover + */ +export const WithCover = Template.bind({}); +WithCover.args = { + cover, excerpt: 'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.', meta, diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index 733a660..28aac68 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -6,7 +6,7 @@ import ResponsiveImage, { type ResponsiveImageProps, } from '@components/molecules/images/responsive-image'; import Meta, { type MetaItem } from '@components/molecules/layout/meta'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import { useIntl } from 'react-intl'; import styles from './summary.module.scss'; @@ -83,7 +83,7 @@ const Summary: FC = ({ }, { title, - a11y: (chunks: string) => ( + a11y: (chunks: ReactNode) => ( {chunks} ), } -- cgit v1.2.3