From 34502bd004c2522a8f2a217da3adf51586d1dec3 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 21 Apr 2022 17:03:45 +0200 Subject: chore: add a PageHeader component --- .../molecules/layout/page-header.stories.tsx | 103 +++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 src/components/molecules/layout/page-header.stories.tsx (limited to 'src/components/molecules/layout/page-header.stories.tsx') diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx new file mode 100644 index 0000000..6054845 --- /dev/null +++ b/src/components/molecules/layout/page-header.stories.tsx @@ -0,0 +1,103 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import PageHeader from './page-header'; + +/** + * Page Header - Storybook Meta + */ +export default { + title: 'Molecules/Layout/PageHeader', + component: PageHeader, + argTypes: { + intro: { + control: { + type: 'text', + }, + description: 'The page introduction.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + meta: { + description: 'The page metadata.', + table: { + category: 'Options', + }, + type: { + name: 'object', + required: false, + value: {}, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The page title.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const meta = { + publication: { name: 'Published on:', value: 'April 9th 2022' }, + categories: { + name: 'Categories:', + value: [ + + Category 1 + , + + Category 2 + , + ], + }, +}; + +/** + * Page Header Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + title: 'Excepturi nesciunt illum', +}; + +/** + * Page Header Stories - With introduction + */ +export const WithIntro = Template.bind({}); +WithIntro.args = { + intro: + 'Minima dolor nihil. Velit atque odit totam enim. Quisquam reprehenderit ut et inventore et nihil libero exercitationem. Cumque similique magni placeat et. Et sed est cumque labore. Et quia similique.', + title: 'Excepturi nesciunt illum', +}; + +/** + * Page Header Stories - With meta + */ +export const WithMeta = Template.bind({}); +WithMeta.args = { + meta, + title: 'Excepturi nesciunt illum', +}; + +/** + * Page Header Stories - With introduction and meta + */ +export const WithIntroAndMeta = Template.bind({}); +WithIntroAndMeta.args = { + intro: + 'Minima dolor nihil. Velit atque odit totam enim. Quisquam reprehenderit ut et inventore et nihil libero exercitationem. Cumque similique magni placeat et. Et sed est cumque labore. Et quia similique.', + meta, + title: 'Excepturi nesciunt illum', +}; -- cgit v1.2.3