aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/heading
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-12-15 18:35:16 +0100
committerArmand Philippot <git@armandphilippot.com>2023-12-15 18:49:49 +0100
commit0f936ec0e7606cb79434d94096b6e113a7ce78eb (patch)
tree465ec7f66ac9459be6a18ac046e10357814c7b92 /src/components/atoms/heading
parent4e4d2eb25365be861e19f9756cf334ba2faa6911 (diff)
refactor(stories): migrate stories to CSF3 format
Diffstat (limited to 'src/components/atoms/heading')
-rw-r--r--src/components/atoms/heading/heading.stories.ts69
-rw-r--r--src/components/atoms/heading/heading.stories.tsx106
2 files changed, 69 insertions, 106 deletions
diff --git a/src/components/atoms/heading/heading.stories.ts b/src/components/atoms/heading/heading.stories.ts
new file mode 100644
index 0000000..0bc8c68
--- /dev/null
+++ b/src/components/atoms/heading/heading.stories.ts
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading } from './heading';
+
+const meta = {
+ component: Heading,
+ title: 'Atoms/Headings',
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const HeadingTemplate: Story = {
+ args: {
+ children: 'The quick brown fox jumps over a lazy dog',
+ isFake: false,
+ level: 2,
+ },
+};
+
+export const H1: Story = {
+ args: {
+ ...HeadingTemplate.args,
+ level: 1,
+ },
+};
+
+export const H2: Story = {
+ args: {
+ ...HeadingTemplate.args,
+ level: 2,
+ },
+};
+
+export const H3: Story = {
+ args: {
+ ...HeadingTemplate.args,
+ level: 3,
+ },
+};
+
+export const H4: Story = {
+ args: {
+ ...HeadingTemplate.args,
+ level: 4,
+ },
+};
+
+export const H5: Story = {
+ args: {
+ ...HeadingTemplate.args,
+ level: 5,
+ },
+};
+
+export const H6: Story = {
+ args: {
+ ...HeadingTemplate.args,
+ level: 6,
+ },
+};
+
+export const FakeH2: Story = {
+ args: {
+ ...HeadingTemplate.args,
+ isFake: true,
+ level: 2,
+ },
+};
diff --git a/src/components/atoms/heading/heading.stories.tsx b/src/components/atoms/heading/heading.stories.tsx
deleted file mode 100644
index c5ac4a0..0000000
--- a/src/components/atoms/heading/heading.stories.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Heading } from './heading';
-
-/**
- * Heading - Storybook Meta
- */
-export default {
- title: 'Atoms/Headings',
- component: Heading,
- args: {
- isFake: false,
- },
- argTypes: {
- children: {
- description: 'Heading body.',
- type: {
- name: 'string',
- required: true,
- },
- },
- isFake: {
- control: {
- type: 'boolean',
- },
- description: 'Use an heading element or only its styles.',
- table: {
- category: 'Options',
- defaultValue: { summary: false },
- },
- type: {
- name: 'boolean',
- required: false,
- },
- },
- level: {
- control: {
- type: 'number',
- min: 1,
- max: 6,
- },
- description: 'Heading level.',
- type: {
- name: 'number',
- required: true,
- },
- },
- },
-} as ComponentMeta<typeof Heading>;
-
-const Template: ComponentStory<typeof Heading> = (args) => (
- <Heading {...args} />
-);
-
-/**
- * Heading Story - h1
- */
-export const H1 = Template.bind({});
-H1.args = {
- children: 'Your title',
- level: 1,
-};
-
-/**
- * Heading Story - h2
- */
-export const H2 = Template.bind({});
-H2.args = {
- children: 'Your title',
- level: 2,
-};
-
-/**
- * Heading Story - h3
- */
-export const H3 = Template.bind({});
-H3.args = {
- children: 'Your title',
- level: 3,
-};
-
-/**
- * Heading Story - h4
- */
-export const H4 = Template.bind({});
-H4.args = {
- children: 'Your title',
- level: 4,
-};
-
-/**
- * Heading Story - h5
- */
-export const H5 = Template.bind({});
-H5.args = {
- children: 'Your title',
- level: 5,
-};
-
-/**
- * Heading Story - h6
- */
-export const H6 = Template.bind({});
-H6.args = {
- children: 'Your title',
- level: 6,
-};