diff options
Diffstat (limited to 'src/components/organisms/layout')
6 files changed, 119 insertions, 30 deletions
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) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof FooterComponent>; const Template: ComponentStory<typeof FooterComponent> = (args) => ( - <IntlProvider locale="en"> - <FooterComponent {...args} /> - </IntlProvider> + <FooterComponent {...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<typeof OverviewComponent>; +} as ComponentMeta<typeof Overview>; -const Template: ComponentStory<typeof OverviewComponent> = (args) => ( - <OverviewComponent {...args} /> +const Template: ComponentStory<typeof Overview> = (args) => ( + <Overview {...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<typeof SummaryComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof Summary>; -const Template: ComponentStory<typeof SummaryComponent> = (args) => ( - <IntlProvider locale="en"> - <SummaryComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof Summary> = (args) => ( + <Summary {...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<SummaryProps> = ({ }, { title, - a11y: (chunks: string) => ( + a11y: (chunks: ReactNode) => ( <span className="screen-reader-text">{chunks}</span> ), } |