From a08291b1586858fc894a27d56f55f87a88f8dbd3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
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.
---
 .../molecules/buttons/heading-button.stories.tsx   | 78 +++++++++++++++++++---
 1 file changed, 68 insertions(+), 10 deletions(-)

(limited to 'src/components/molecules/buttons/heading-button.stories.tsx')

diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx
index 0a23b08..b0e1465 100644
--- a/src/components/molecules/buttons/heading-button.stories.tsx
+++ b/src/components/molecules/buttons/heading-button.stories.tsx
@@ -3,8 +3,11 @@ import { useState } from 'react';
 import { IntlProvider } from 'react-intl';
 import HeadingButtonComponent from './heading-button';
 
+/**
+ * HeadingButton - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Buttons',
+  title: 'Molecules/Buttons/HeadingButton',
   component: HeadingButtonComponent,
   argTypes: {
     expanded: {
@@ -20,6 +23,8 @@ export default {
     level: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'Heading level.',
       type: {
@@ -48,6 +53,13 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof HeadingButtonComponent>;
 
 const Template: ComponentStory<typeof HeadingButtonComponent> = ({
@@ -58,18 +70,64 @@ const Template: ComponentStory<typeof HeadingButtonComponent> = ({
   const [isExpanded, setIsExpanded] = useState<boolean>(expanded);
 
   return (
-    <IntlProvider locale="en">
-      <HeadingButtonComponent
-        expanded={isExpanded}
-        setExpanded={setIsExpanded}
-        {...args}
-      />
-    </IntlProvider>
+    <HeadingButtonComponent
+      expanded={isExpanded}
+      setExpanded={setIsExpanded}
+      {...args}
+    />
   );
 };
 
-export const HeadingButton = Template.bind({});
-HeadingButton.args = {
+/**
+ * Heading Button Stories - Level 1
+ */
+export const Level1 = Template.bind({});
+Level1.args = {
+  level: 1,
+  title: 'Your title',
+};
+
+/**
+ * Heading Button Stories - Level 2
+ */
+export const Level2 = Template.bind({});
+Level2.args = {
   level: 2,
   title: 'Your title',
 };
+
+/**
+ * Heading Button Stories - Level 3
+ */
+export const Level3 = Template.bind({});
+Level3.args = {
+  level: 3,
+  title: 'Your title',
+};
+
+/**
+ * Heading Button Stories - Level 4
+ */
+export const Level4 = Template.bind({});
+Level4.args = {
+  level: 4,
+  title: 'Your title',
+};
+
+/**
+ * Heading Button Stories - Level 5
+ */
+export const Level5 = Template.bind({});
+Level5.args = {
+  level: 5,
+  title: 'Your title',
+};
+
+/**
+ * Heading Button Stories - Level 6
+ */
+export const Level6 = Template.bind({});
+Level6.args = {
+  level: 6,
+  title: 'Your title',
+};
-- 
cgit v1.2.3

