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/forms/fieldset/fieldset.stories.tsx      | 96 +++++++++-------------
 1 file changed, 41 insertions(+), 55 deletions(-)

(limited to 'src/components/atoms/forms/fieldset/fieldset.stories.tsx')

diff --git a/src/components/atoms/forms/fieldset/fieldset.stories.tsx b/src/components/atoms/forms/fieldset/fieldset.stories.tsx
index a7d665d..e3dd53e 100644
--- a/src/components/atoms/forms/fieldset/fieldset.stories.tsx
+++ b/src/components/atoms/forms/fieldset/fieldset.stories.tsx
@@ -1,61 +1,47 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Input } from '../fields';
-import { Legend } from '../legend';
-import { Fieldset as FieldsetComponent } from './fieldset';
-
-/**
- * Fieldset - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms',
-  component: FieldsetComponent,
+import { Fieldset, type FieldsetProps } from './fieldset';
+
+const meta = {
+  component: Fieldset,
+  title: 'Atoms/Forms/Fieldset',
+} satisfies Meta<typeof Fieldset>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+const FieldsetWithFields = ({
+  inputLabel,
+  ...props
+}: FieldsetProps & { inputLabel: string }) => (
+  <Fieldset {...props}>
+    <Input aria-label={inputLabel} id="field" name="field" type="text" />
+  </Fieldset>
+);
+
+type WithFieldStory = StoryObj<FieldsetProps & { inputLabel: string }>;
+
+export const Enabled: WithFieldStory = {
+  name: 'State: Enabled',
   args: {
+    ...Default.args,
+    inputLabel: 'Example of a field inside an enabled fieldset',
     isDisabled: false,
   },
-  argTypes: {
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description:
-        'Define if the fields inside the fieldset should be disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof FieldsetComponent>;
-
-const Template: ComponentStory<typeof FieldsetComponent> = (args) => (
-  <FieldsetComponent {...args}>
-    <div>
-      <Input
-        aria-label="A field example"
-        id="field1"
-        name="field1"
-        type="text"
-      />
-    </div>
-    <div>
-      <Input
-        aria-label="Another field example"
-        id="field2"
-        name="field2"
-        type="text"
-      />
-    </div>
-  </FieldsetComponent>
-);
+  render: FieldsetWithFields,
+};
 
-/**
- * Fieldset Story
- */
-export const Fieldset = Template.bind({});
-Fieldset.args = {
-  legend: <Legend>The fieldset legend</Legend>,
+export const Disabled: WithFieldStory = {
+  name: 'State: Disabled',
+  args: {
+    ...Default.args,
+    inputLabel: 'Example of a field inside a disabled fieldset',
+    isDisabled: true,
+  },
+  render: FieldsetWithFields,
 };
-- 
cgit v1.2.3