From 0f936ec0e7606cb79434d94096b6e113a7ce78eb Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Dec 2023 18:35:16 +0100
Subject: refactor(stories): migrate stories to CSF3 format

---
 .../atoms/buttons/button-link/button-link.mdx      |  71 +++++++++
 .../buttons/button-link/button-link.stories.ts     |  99 ++++++++++++
 .../buttons/button-link/button-link.stories.tsx    | 114 --------------
 src/components/atoms/buttons/button/button.mdx     |  80 ++++++++++
 .../atoms/buttons/button/button.stories.ts         | 112 ++++++++++++++
 .../atoms/buttons/button/button.stories.tsx        | 172 ---------------------
 6 files changed, 362 insertions(+), 286 deletions(-)
 create mode 100644 src/components/atoms/buttons/button-link/button-link.mdx
 create mode 100644 src/components/atoms/buttons/button-link/button-link.stories.ts
 delete mode 100644 src/components/atoms/buttons/button-link/button-link.stories.tsx
 create mode 100644 src/components/atoms/buttons/button/button.mdx
 create mode 100644 src/components/atoms/buttons/button/button.stories.ts
 delete mode 100644 src/components/atoms/buttons/button/button.stories.tsx

(limited to 'src/components/atoms/buttons')

diff --git a/src/components/atoms/buttons/button-link/button-link.mdx b/src/components/atoms/buttons/button-link/button-link.mdx
new file mode 100644
index 0000000..e22471e
--- /dev/null
+++ b/src/components/atoms/buttons/button-link/button-link.mdx
@@ -0,0 +1,71 @@
+import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks';
+import * as ButtonLinkStories from './button-link.stories';
+
+<Meta of={ButtonLinkStories} />
+
+# Button
+
+<Primary />
+
+## Kind
+
+The button appearance can change depending on its kind.
+
+### Primary
+
+<Canvas of={ButtonLinkStories.Primary} />
+
+### Secondary (default)
+
+<Canvas of={ButtonLinkStories.Secondary} />
+
+### Tertiary
+
+<Canvas of={ButtonLinkStories.Tertiary} />
+
+## States
+
+It can be:
+* enabled,
+* disabled
+* external.
+
+### Enabled (default)
+
+<Canvas of={ButtonLinkStories.Enabled} />
+
+### Disabled
+
+<Canvas of={ButtonLinkStories.Disabled} />
+
+### External
+
+<Canvas of={ButtonLinkStories.ExternalLink} />
+
+## Shapes
+
+It can either:
+* be a circle,
+* be a rectangle
+* be a square,
+* or have an automatic shape.
+
+### Circle
+
+<Canvas of={ButtonLinkStories.Circle} />
+
+### Rectangle (default)
+
+<Canvas of={ButtonLinkStories.Rectangle} />
+
+### Square
+
+<Canvas of={ButtonLinkStories.Square} />
+
+### Auto
+
+<Canvas of={ButtonLinkStories.Auto} />
+
+## Props
+
+<ArgTypes of={ButtonLinkStories} />
diff --git a/src/components/atoms/buttons/button-link/button-link.stories.ts b/src/components/atoms/buttons/button-link/button-link.stories.ts
new file mode 100644
index 0000000..bbf940c
--- /dev/null
+++ b/src/components/atoms/buttons/button-link/button-link.stories.ts
@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonLink } from './button-link';
+
+const meta = {
+  component: ButtonLink,
+  title: 'Atoms/Buttons/ButtonLink',
+} satisfies Meta<typeof ButtonLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button Link',
+    isDisabled: false,
+    to: '#',
+  },
+};
+
+export const Primary: Story = {
+  name: 'Kind: Primary',
+  args: {
+    ...Default.args,
+    kind: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  name: 'Kind: Secondary',
+  args: {
+    ...Default.args,
+    kind: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  name: 'Kind: Tertiary',
+  args: {
+    ...Default.args,
+    kind: 'tertiary',
+  },
+};
+
+export const Enabled: Story = {
+  name: 'State: Enabled',
+  args: {
+    ...Default.args,
+    isDisabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  name: 'State: Disabled',
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+};
+
+export const ExternalLink: Story = {
+  name: 'State: External',
+  args: {
+    ...Default.args,
+    isExternal: true,
+  },
+};
+
+export const Circle: Story = {
+  name: 'Shape: Circle',
+  args: {
+    ...Default.args,
+    shape: 'circle',
+  },
+};
+
+export const Rectangle: Story = {
+  name: 'Shape: Rectangle',
+  args: {
+    ...Default.args,
+    shape: 'rectangle',
+  },
+};
+
+export const Square: Story = {
+  name: 'Shape: Square',
+  args: {
+    ...Default.args,
+    shape: 'square',
+  },
+};
+
+export const Auto: Story = {
+  name: 'Shape: Auto',
+  args: {
+    ...Default.args,
+    shape: 'auto',
+  },
+};
diff --git a/src/components/atoms/buttons/button-link/button-link.stories.tsx b/src/components/atoms/buttons/button-link/button-link.stories.tsx
deleted file mode 100644
index f048ce9..0000000
--- a/src/components/atoms/buttons/button-link/button-link.stories.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ButtonLink } from './button-link';
-
-/**
- * ButtonLink - Storybook Meta
- */
-export default {
-  title: 'Atoms/Buttons/ButtonLink',
-  component: ButtonLink,
-  args: {
-    isExternal: false,
-    shape: 'rectangle',
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The link body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isExternal: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the link is an external link.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link kind.',
-      options: ['primary', 'secondary', 'tertiary'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'secondary' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    shape: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link shape.',
-      options: ['circle', 'rectangle', 'square'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'rectangle' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    to: {
-      control: {
-        type: 'text',
-      },
-      description: 'The link target.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof ButtonLink>;
-
-const Template: ComponentStory<typeof ButtonLink> = (args) => (
-  <ButtonLink {...args} />
-);
-
-/**
- * ButtonLink Story - Primary
- */
-export const Primary = Template.bind({});
-Primary.args = {
-  children: 'Link',
-  kind: 'primary',
-  to: '#',
-};
-
-/**
- * ButtonLink Story - Secondary
- */
-export const Secondary = Template.bind({});
-Secondary.args = {
-  children: 'Link',
-  kind: 'secondary',
-  to: '#',
-};
-
-/**
- * ButtonLink Story - Tertiary
- */
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  children: 'Link',
-  kind: 'tertiary',
-  to: '#',
-};
diff --git a/src/components/atoms/buttons/button/button.mdx b/src/components/atoms/buttons/button/button.mdx
new file mode 100644
index 0000000..d90156e
--- /dev/null
+++ b/src/components/atoms/buttons/button/button.mdx
@@ -0,0 +1,80 @@
+import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks';
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+<Primary />
+
+## Kind
+
+The button appearance can change depending on its kind.
+
+### Primary
+
+<Canvas of={ButtonStories.Primary} />
+
+### Secondary (default)
+
+<Canvas of={ButtonStories.Secondary} />
+
+### Tertiary
+
+<Canvas of={ButtonStories.Tertiary} />
+
+### Neutral
+
+<Canvas of={ButtonStories.Neutral} />
+
+## States
+
+It can either:
+* be enabled,
+* be disabled
+* indicate a loading state,
+* indicate a pressed state.
+
+### Enabled (default)
+
+<Canvas of={ButtonStories.Enabled} />
+
+### Disabled
+
+<Canvas of={ButtonStories.Disabled} />
+
+### Loading
+
+<Canvas of={ButtonStories.Loading} />
+
+### Pressed
+
+<Canvas of={ButtonStories.Pressed} />
+
+## Shapes
+
+It can either:
+* be a circle,
+* be a rectangle
+* be a square,
+* or conserves its initial shape.
+
+### Circle
+
+<Canvas of={ButtonStories.Circle} />
+
+### Rectangle (default)
+
+<Canvas of={ButtonStories.Rectangle} />
+
+### Square
+
+<Canvas of={ButtonStories.Square} />
+
+### Initial
+
+<Canvas of={ButtonStories.Initial} />
+
+## Props
+
+<ArgTypes of={ButtonStories} />
diff --git a/src/components/atoms/buttons/button/button.stories.ts b/src/components/atoms/buttons/button/button.stories.ts
new file mode 100644
index 0000000..25fb9f8
--- /dev/null
+++ b/src/components/atoms/buttons/button/button.stories.ts
@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+
+const meta = {
+  component: Button,
+  title: 'Atoms/Buttons/Button',
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+};
+
+export const Primary: Story = {
+  name: 'Kind: Primary',
+  args: {
+    ...Default.args,
+    kind: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  name: 'Kind: Secondary',
+  args: {
+    ...Default.args,
+    kind: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  name: 'Kind: Tertiary',
+  args: {
+    ...Default.args,
+    kind: 'tertiary',
+  },
+};
+
+export const Neutral: Story = {
+  name: 'Kind: Neutral',
+  args: {
+    ...Default.args,
+    kind: 'neutral',
+  },
+};
+
+export const Enabled: Story = {
+  name: 'State: Enabled',
+  args: {
+    ...Default.args,
+  },
+};
+
+export const Disabled: Story = {
+  name: 'State: Disabled',
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+};
+
+export const Loading: Story = {
+  name: 'State: Loading',
+  args: {
+    ...Default.args,
+    isLoading: true,
+  },
+};
+
+export const Pressed: Story = {
+  name: 'State: Pressed',
+  args: {
+    ...Default.args,
+    isPressed: true,
+  },
+};
+
+export const Circle: Story = {
+  name: 'Shape: Circle',
+  args: {
+    ...Default.args,
+    shape: 'circle',
+  },
+};
+
+export const Rectangle: Story = {
+  name: 'Shape: Rectangle',
+  args: {
+    ...Default.args,
+    shape: 'rectangle',
+  },
+};
+
+export const Square: Story = {
+  name: 'Shape: Square',
+  args: {
+    ...Default.args,
+    shape: 'square',
+  },
+};
+
+export const Initial: Story = {
+  name: 'Shape: Initial',
+  args: {
+    ...Default.args,
+    shape: 'initial',
+  },
+};
diff --git a/src/components/atoms/buttons/button/button.stories.tsx b/src/components/atoms/buttons/button/button.stories.tsx
deleted file mode 100644
index 5ce28fb..0000000
--- a/src/components/atoms/buttons/button/button.stories.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Button } from './button';
-
-/**
- * Button - Storybook Meta
- */
-export default {
-  title: 'Atoms/Buttons/Button',
-  component: Button,
-  args: {
-    type: 'button',
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The button body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Should the button be disabled?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isLoading: {
-      control: {
-        type: 'boolean',
-      },
-      description:
-        'Should the button be disabled because it is loading something?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isPressed: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Define if the button is currently pressed.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'Button kind.',
-      options: ['primary', 'secondary', 'tertiary', 'neutral'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'secondary' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    onClick: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle click.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    shape: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link shape.',
-      options: ['circle', 'rectangle', 'square', 'initial'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'rectangle' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'Button type attribute.',
-      options: ['button', 'reset', 'submit'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'button' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-const logClick = () => {
-  console.log('Button has been clicked!');
-};
-
-/**
- * Button Story - Primary
- */
-export const Primary = Template.bind({});
-Primary.args = {
-  children: 'Click on the button',
-  kind: 'primary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Secondary
- */
-export const Secondary = Template.bind({});
-Secondary.args = {
-  children: 'Click on the button',
-  kind: 'secondary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Tertiary
- */
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  children: 'Click on the button',
-  kind: 'tertiary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Neutral
- */
-export const Neutral = Template.bind({});
-Neutral.args = {
-  children: 'Click on the button',
-  kind: 'neutral',
-  onClick: logClick,
-};
-- 
cgit v1.2.3