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/forms/comment-form.stories.tsx | 31 +++++++--- .../organisms/forms/contact-form.stories.tsx | 29 ++++++--- .../organisms/forms/search-form.stories.tsx | 46 +++++++++++--- .../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 +- .../organisms/modals/search-modal.stories.tsx | 42 ++++++++++--- .../organisms/modals/settings-modal.stories.tsx | 30 ++++++++- .../organisms/toolbar/main-nav.stories.tsx | 45 ++++++++++---- .../organisms/toolbar/search.stories.tsx | 41 +++++++++---- .../organisms/toolbar/settings.stories.tsx | 41 +++++++++---- .../organisms/toolbar/toolbar.stories.tsx | 40 +++++++++++- .../organisms/widgets/image-widget.module.scss | 1 - .../organisms/widgets/image-widget.stories.tsx | 71 +++++++++++++++++++--- .../widgets/links-list-widget.stories.tsx | 37 +++++++++-- .../organisms/widgets/sharing.stories.tsx | 19 +++++- src/components/organisms/widgets/sharing.tsx | 2 +- .../organisms/widgets/social-media.stories.tsx | 19 +++++- 21 files changed, 512 insertions(+), 131 deletions(-) (limited to 'src/components/organisms') diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx index 670176c..f66d35c 100644 --- a/src/components/organisms/forms/comment-form.stories.tsx +++ b/src/components/organisms/forms/comment-form.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import CommentFormComponent from './comment-form'; +import CommentForm from './comment-form'; +/** + * CommentForm - Storybook Meta + */ export default { title: 'Organisms/Forms', - component: CommentFormComponent, + component: CommentForm, argTypes: { className: { control: { @@ -58,6 +61,8 @@ export default { titleLevel: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The title level (hn).', table: { @@ -69,16 +74,24 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const CommentForm = Template.bind({}); -CommentForm.args = { +/** + * Forms Stories - Comment + */ +export const Comment = Template.bind({}); +Comment.args = { saveComment: (reset: () => void) => { reset(); }, diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx index 2c8ab32..9b936f9 100644 --- a/src/components/organisms/forms/contact-form.stories.tsx +++ b/src/components/organisms/forms/contact-form.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import ContactFormComponent from './contact-form'; +import ContactForm from './contact-form'; +/** + * ContactForm - Storybook Meta + */ export default { title: 'Organisms/Forms', - component: ContactFormComponent, + component: ContactForm, argTypes: { className: { control: { @@ -43,16 +46,24 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const ContactForm = Template.bind({}); -ContactForm.args = { +/** + * Forms Stories - Contact + */ +export const Contact = Template.bind({}); +Contact.args = { sendMail: (reset: () => void) => { reset(); }, diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx index 4ec1c21..7f4c7c0 100644 --- a/src/components/organisms/forms/search-form.stories.tsx +++ b/src/components/organisms/forms/search-form.stories.tsx @@ -1,10 +1,16 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import SearchFormComponent from './search-form'; +import SearchForm from './search-form'; +/** + * SearchForm - Storybook Meta + */ export default { title: 'Organisms/Forms', - component: SearchFormComponent, + component: SearchForm, + args: { + hideLabel: false, + }, argTypes: { className: { control: { @@ -19,16 +25,38 @@ export default { required: false, }, }, + hideLabel: { + control: { + type: 'boolean', + }, + description: 'Determine if the input label should be visually hidden.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const SearchForm = Template.bind({}); -SearchForm.args = { +/** + * Forms Stories - Search + */ +export const Search = Template.bind({}); +Search.args = { hideLabel: true, }; 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} ), } diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx index b35c841..3ad6abd 100644 --- a/src/components/organisms/modals/search-modal.stories.tsx +++ b/src/components/organisms/modals/search-modal.stories.tsx @@ -1,16 +1,42 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import SearchModalComponent from './search-modal'; +import SearchModal from './search-modal'; +/** + * SearchModal - Storybook Meta + */ export default { title: 'Organisms/Modals', - component: SearchModalComponent, -} as ComponentMeta; + component: SearchModal, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the search modal wrapper.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const SearchModal = Template.bind({}); +/** + * Modals Stories - Search + */ +export const Search = Template.bind({}); diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx index c19a6d7..0abe004 100644 --- a/src/components/organisms/modals/settings-modal.stories.tsx +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import SettingsModal from './settings-modal'; +/** + * SettingsModal - Storybook Meta + */ export default { title: 'Organisms/Modals', component: SettingsModal, @@ -19,13 +22,34 @@ export default { required: false, }, }, + tooltipClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); +/** + * Modals Stories - Settings + */ export const Settings = Template.bind({}); diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx index 27387c0..04b22cb 100644 --- a/src/components/organisms/toolbar/main-nav.stories.tsx +++ b/src/components/organisms/toolbar/main-nav.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import MainNavComponent from './main-nav'; +import MainNav from './main-nav'; +/** + * MainNav - Storybook Meta + */ export default { - title: 'Organisms/Toolbar', - component: MainNavComponent, + title: 'Organisms/Toolbar/MainNav', + component: MainNav, argTypes: { className: { control: { @@ -49,27 +52,45 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ isActive, setIsActive: _setIsActive, ...args }) => { const [isOpen, setIsOpen] = useState(isActive); - return ( - - - - ); + return ; }; -export const MainNav = Template.bind({}); -MainNav.args = { +/** + * MainNav Stories - Inactive + */ +export const Inactive = Template.bind({}); +Inactive.args = { isActive: false, items: [ { id: 'home', label: 'Home', href: '#' }, { id: 'contact', label: 'Contact', href: '#' }, ], }; + +/** + * MainNav Stories - Active + */ +export const Active = Template.bind({}); +Active.args = { + isActive: true, + items: [ + { id: 'home', label: 'Home', href: '#' }, + { id: 'contact', label: 'Contact', href: '#' }, + ], +}; diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx index 8c2e871..0421c8c 100644 --- a/src/components/organisms/toolbar/search.stories.tsx +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import SearchComponent from './search'; +import Search from './search'; +/** + * Search - Storybook Meta + */ export default { - title: 'Organisms/Toolbar', - component: SearchComponent, + title: 'Organisms/Toolbar/Search', + component: Search, argTypes: { className: { control: { @@ -41,23 +44,37 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ isActive, setIsActive: _setIsActive, ...args }) => { const [isOpen, setIsOpen] = useState(isActive); - return ( - - - - ); + return ; }; -export const Search = Template.bind({}); -Search.args = { +/** + * Search Stories - Inactive + */ +export const Inactive = Template.bind({}); +Inactive.args = { isActive: false, }; + +/** + * Search Stories - Active + */ +export const Active = Template.bind({}); +Active.args = { + isActive: true, +}; diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index f01e772..1ec0897 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import SettingsComponent from './settings'; +import Settings from './settings'; +/** + * Settings - Storybook Meta + */ export default { - title: 'Organisms/Toolbar', - component: SettingsComponent, + title: 'Organisms/Toolbar/Settings', + component: Settings, argTypes: { className: { control: { @@ -54,23 +57,37 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ isActive, setIsActive: _setIsActive, ...args }) => { const [isOpen, setIsOpen] = useState(isActive); - return ( - - - - ); + return ; }; -export const Settings = Template.bind({}); -Settings.args = { +/** + * Settings Stories - Inactive + */ +export const Inactive = Template.bind({}); +Inactive.args = { isActive: false, }; + +/** + * Settings Stories - Active + */ +export const Active = Template.bind({}); +Active.args = { + isActive: true, +}; diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 75d70d8..de94e31 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -2,15 +2,46 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import ToolbarComponent from './toolbar'; +/** + * Toolbar - Storybook Meta + */ export default { title: 'Organisms/Toolbar', component: ToolbarComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the toolbar wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + nav: { + description: 'The main nav items.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); const nav = [ @@ -20,6 +51,9 @@ const nav = [ { id: 'contact-link', href: '#', label: 'Contact' }, ]; +/** + * Toolbar Story + */ export const Toolbar = Template.bind({}); Toolbar.args = { nav, diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss index 78c0d26..8e4d0aa 100644 --- a/src/components/organisms/widgets/image-widget.module.scss +++ b/src/components/organisms/widgets/image-widget.module.scss @@ -1,7 +1,6 @@ @use "@styles/abstracts/functions" as fun; .img { - max-height: fun.convert-px(350); margin: 0; } diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx index 1c2397b..27871ae 100644 --- a/src/components/organisms/widgets/image-widget.stories.tsx +++ b/src/components/organisms/widgets/image-widget.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import ImageWidgetComponent from './image-widget'; +import ImageWidget from './image-widget'; +/** + * ImageWidget - Storybook Meta + */ export default { - title: 'Organisms/Widgets', - component: ImageWidgetComponent, + title: 'Organisms/Widgets/Image', + component: ImageWidget, args: { alignment: 'left', }, @@ -58,6 +61,8 @@ export default { level: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The widget title level (hn).', type: { @@ -89,12 +94,17 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); const img = { @@ -102,10 +112,51 @@ const img = { height: 480, src: 'http://placeimg.com/640/480/nature', width: 640, + unoptimized: true, }; -export const ImageWidget = Template.bind({}); -ImageWidget.args = { +/** + * ImageWidget Stories - Align left + */ +export const AlignLeft = Template.bind({}); +AlignLeft.args = { + alignment: 'left', + expanded: true, + img, + level: 2, + title: 'Quo et totam', +}; + +/** + * ImageWidget Stories - Align center + */ +export const AlignCenter = Template.bind({}); +AlignCenter.args = { + alignment: 'center', + expanded: true, + img, + level: 2, + title: 'Quo et totam', +}; + +/** + * ImageWidget Stories - Align right + */ +export const AlignRight = Template.bind({}); +AlignRight.args = { + alignment: 'right', + expanded: true, + img, + level: 2, + title: 'Quo et totam', +}; + +/** + * ImageWidget Stories - With description + */ +export const WithDescription = Template.bind({}); +WithDescription.args = { + description: 'Sint enim harum', expanded: true, img, level: 2, diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx index 528f6f7..0f03a2c 100644 --- a/src/components/organisms/widgets/links-list-widget.stories.tsx +++ b/src/components/organisms/widgets/links-list-widget.stories.tsx @@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import LinksListWidget from './links-list-widget'; +/** + * LinksListWidget - Storybook Meta + */ export default { - title: 'Organisms/Widgets', + title: 'Organisms/Widgets/LinksList', component: LinksListWidget, args: { kind: 'unordered', @@ -35,6 +38,8 @@ export default { level: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The heading level.', type: { @@ -53,12 +58,17 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); const items = [ @@ -84,9 +94,24 @@ const items = [ { name: 'Level 1: Item 4', url: '#' }, ]; -export const LinksList = Template.bind({}); -LinksList.args = { +/** + * Links List Widget Stories - Unordered + */ +export const Unordered = Template.bind({}); +Unordered.args = { items, + kind: 'unordered', + level: 2, + title: 'A list of links', +}; + +/** + * Links List Widget Stories - Ordered + */ +export const Ordered = Template.bind({}); +Ordered.args = { + items, + kind: 'ordered', level: 2, title: 'A list of links', }; diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx index be20b84..c3c3488 100644 --- a/src/components/organisms/widgets/sharing.stories.tsx +++ b/src/components/organisms/widgets/sharing.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import SharingWidget from './sharing'; +/** + * Sharing - Storybook Meta + */ export default { title: 'Organisms/Widgets', component: SharingWidget, @@ -27,6 +30,8 @@ export default { level: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The heading level.', type: { @@ -55,14 +60,22 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); +/** + * Widgets Stories - Sharing + */ export const Sharing = Template.bind({}); Sharing.args = { expanded: true, diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx index 571c1a4..05a3f73 100644 --- a/src/components/organisms/widgets/sharing.tsx +++ b/src/components/organisms/widgets/sharing.tsx @@ -21,7 +21,7 @@ export type SharingData = { url: string; }; -export type SharingProps = Omit & { +export type SharingProps = Pick & { /** * The page data to share. */ diff --git a/src/components/organisms/widgets/social-media.stories.tsx b/src/components/organisms/widgets/social-media.stories.tsx index 2b84012..2fa8bd7 100644 --- a/src/components/organisms/widgets/social-media.stories.tsx +++ b/src/components/organisms/widgets/social-media.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import SocialMediaWidget, { Media } from './social-media'; +/** + * SocialMedia - Storybook Meta + */ export default { title: 'Organisms/Widgets', component: SocialMediaWidget, @@ -9,6 +12,8 @@ export default { level: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The heading level.', type: { @@ -35,12 +40,17 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); const media: Media[] = [ @@ -48,6 +58,9 @@ const media: Media[] = [ { name: 'LinkedIn', url: '#' }, ]; +/** + * Widgets Stories - Social media + */ export const SocialMedia = Template.bind({}); SocialMedia.args = { media, -- cgit v1.2.3