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

---
 .../visually-hidden/visually-hidden.stories.tsx    | 62 ++++++++--------------
 1 file changed, 22 insertions(+), 40 deletions(-)

(limited to 'src/components/atoms/visually-hidden/visually-hidden.stories.tsx')

diff --git a/src/components/atoms/visually-hidden/visually-hidden.stories.tsx b/src/components/atoms/visually-hidden/visually-hidden.stories.tsx
index 24ac921..f2868fd 100644
--- a/src/components/atoms/visually-hidden/visually-hidden.stories.tsx
+++ b/src/components/atoms/visually-hidden/visually-hidden.stories.tsx
@@ -1,48 +1,30 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Link } from '../links';
+import type { Meta, StoryObj } from '@storybook/react';
 import { VisuallyHidden } from './visually-hidden';
 
-/**
- * Sidebar - Storybook Meta
- */
-export default {
-  title: 'Atoms/VisuallyHidden',
+const meta = {
   component: VisuallyHidden,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The contents to visually hide.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof VisuallyHidden>;
+  title: 'Atoms/Visually Hidden',
+} satisfies Meta<typeof VisuallyHidden>;
+
+export default meta;
 
-const Template: ComponentStory<typeof VisuallyHidden> = (args) => (
-  <VisuallyHidden {...args} />
-);
+type Story = StoryObj<typeof meta>;
 
-/**
- * VisuallyHidden Stories - Not focusable
- */
-export const NotFocusable = Template.bind({});
-NotFocusable.args = {
-  children: 'Esse quia deserunt animi id sit voluptatem aperiam.',
+const VisuallyHiddenTemplate: Story = {
+  args: {
+    children: 'Some content not focusable.',
+  },
 };
 
-/**
- * VisuallyHidden Stories - Focusable
- */
-export const Focusable = Template.bind({});
-Focusable.args = {
-  children: (
-    <>
-      {'Esse quia deserunt animi id sit voluptatem aperiam. '}
-      <Link href="#">Any link.</Link>
-    </>
-  ),
+export const NotFocusable: Story = {
+  args: {
+    ...VisuallyHiddenTemplate.args,
+  },
+};
+
+export const Focusable: Story = {
+  args: {
+    ...VisuallyHiddenTemplate.args,
+    children: <a href="#anchor">A skip to anchor link</a>,
+  },
 };
-- 
cgit v1.2.3