From 4f1181581e177dd80a76165a0f930ef4577f9c6a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 22 Nov 2023 19:07:25 +0100 Subject: refactor(components): integrate sectioned page template into Page * replace Section component by a generic one (other components should be able to use it) * add a PageSection component * add `hasSections` prop to Page component * remove sectioned-page template --- .../atoms/layout/section/section.stories.tsx | 66 +++------------------- 1 file changed, 9 insertions(+), 57 deletions(-) (limited to 'src/components/atoms/layout/section/section.stories.tsx') diff --git a/src/components/atoms/layout/section/section.stories.tsx b/src/components/atoms/layout/section/section.stories.tsx index e21209b..fdc8217 100644 --- a/src/components/atoms/layout/section/section.stories.tsx +++ b/src/components/atoms/layout/section/section.stories.tsx @@ -1,85 +1,37 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Heading } from '../../heading'; -import { Section } from './section'; +import { Section as SectionComponent } from './section'; /** * Section - Storybook Meta */ export default { title: 'Atoms/Layout/Section', - component: Section, - args: { - hasBorder: true, - variant: 'light', - }, + component: SectionComponent, argTypes: { children: { - description: 'The section content.', + description: 'The section contents.', type: { name: 'function', required: true, }, }, - hasBorder: { - control: { - type: 'boolean', - }, - description: 'Add a border at the bottom of the section.', - table: { - category: 'Styles', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - variant: { - control: { - type: 'select', - }, - description: 'The section variant.', - options: ['light', 'dark'], - table: { - category: 'Styles', - defaultValue: { summary: 'dark' }, - }, - type: { - name: 'string', - required: false, - }, - }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( -
+const Template: ComponentStory = (args) => ( + ); /** - * Section Stories - Light - */ -export const Light = Template.bind({}); -Light.args = { - children: ( - <> - A section title -
The body
- - ), - variant: 'light', -}; - -/** - * Section Stories - Dark + * Section Story */ -export const Dark = Template.bind({}); -Dark.args = { +export const Section = Template.bind({}); +Section.args = { children: ( <> A section title
The body
), - variant: 'dark', }; -- cgit v1.2.3