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

---
 .../widgets/image-widget/image-widget.stories.tsx  | 141 +++++++--------------
 1 file changed, 47 insertions(+), 94 deletions(-)

(limited to 'src/components/organisms/widgets/image-widget')

diff --git a/src/components/organisms/widgets/image-widget/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget/image-widget.stories.tsx
index 33f3e7b..5f302e0 100644
--- a/src/components/organisms/widgets/image-widget/image-widget.stories.tsx
+++ b/src/components/organisms/widgets/image-widget/image-widget.stories.tsx
@@ -1,55 +1,16 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import NextImage from 'next/image';
 import { Heading } from '../../../atoms';
 import { ImageWidget } from './image-widget';
 
-/**
- * ImageWidget - Storybook Meta
- */
-export default {
-  title: 'Organisms/Widgets/Image',
+const meta = {
   component: ImageWidget,
-  argTypes: {
-    description: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add a caption image.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    img: {
-      description: 'The image.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    url: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add a link to the image.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof ImageWidget>;
+  title: 'Organisms/Widgets/Image',
+} satisfies Meta<typeof ImageWidget>;
+
+export default meta;
 
-const Template: ComponentStory<typeof ImageWidget> = (args) => (
-  <ImageWidget {...args} />
-);
+type Story = StoryObj<typeof meta>;
 
 const image = {
   alt: '',
@@ -58,58 +19,50 @@ const image = {
   width: 640,
 };
 
-/**
- * ImageWidget Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  heading: (
-    <Heading isFake level={3}>
-      Quo et totam
-    </Heading>
-  ),
-  img: <NextImage {...image} />,
+export const Example: Story = {
+  args: {
+    heading: (
+      <Heading isFake level={3}>
+        Quo et totam
+      </Heading>
+    ),
+    img: <NextImage {...image} />,
+  },
 };
 
-/**
- * ImageWidget Stories - WithDescription
- */
-export const WithDescription = Template.bind({});
-WithDescription.args = {
-  description: 'Any image used as an example',
-  heading: (
-    <Heading isFake level={3}>
-      Quo et totam
-    </Heading>
-  ),
-  img: <NextImage {...image} />,
+export const WithDescription: Story = {
+  args: {
+    description: 'Any image used as an example',
+    heading: (
+      <Heading isFake level={3}>
+        Quo et totam
+      </Heading>
+    ),
+    img: <NextImage {...image} />,
+  },
 };
 
-/**
- * ImageWidget Stories - WithLink
- */
-export const WithLink = Template.bind({});
-WithLink.args = {
-  heading: (
-    <Heading isFake level={3}>
-      Quo et totam
-    </Heading>
-  ),
-  img: <NextImage {...image} />,
-  url: 'https://www.armandphilippot.com/',
+export const WithLink: Story = {
+  args: {
+    heading: (
+      <Heading isFake level={3}>
+        Quo et totam
+      </Heading>
+    ),
+    img: <NextImage {...image} />,
+    url: 'https://www.armandphilippot.com/',
+  },
 };
 
-/**
- * ImageWidget Stories - WithDescriptionAndLink
- */
-export const WithDescriptionAndLink = Template.bind({});
-WithDescriptionAndLink.args = {
-  description: 'Any image used as an example',
-  heading: (
-    <Heading isFake level={3}>
-      Quo et totam
-    </Heading>
-  ),
-  img: <NextImage {...image} />,
-  url: 'https://www.armandphilippot.com/',
+export const WithDescriptionAndLink: Story = {
+  args: {
+    description: 'Any image used as an example',
+    heading: (
+      <Heading isFake level={3}>
+        Quo et totam
+      </Heading>
+    ),
+    img: <NextImage {...image} />,
+    url: 'https://www.armandphilippot.com/',
+  },
 };
-- 
cgit v1.2.3