2 files changed, 135 insertions, 210 deletions
diff --git a/src/components/atoms/images/icons/icon.stories.ts b/src/components/atoms/images/icons/icon.stories.ts
new file mode 100644
index 0000000..55b5c31
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.stories.ts
@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from './icon';
+
+const meta = {
+  component: Icon,
+  title: 'Atoms/Images/Icons',
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ArrowRight: Story = {
+  args: {
+    orientation: 'right',
+    shape: 'arrow',
+  },
+};
+
+export const ArrowLeft: Story = {
+  args: {
+    orientation: 'left',
+    shape: 'arrow',
+  },
+};
+
+export const ArrowBottom: Story = {
+  args: {
+    orientation: 'bottom',
+    shape: 'arrow',
+  },
+};
+
+export const ArrowTop: Story = {
+  args: {
+    orientation: 'top',
+    shape: 'arrow',
+  },
+};
+
+export const Career: Story = {
+  args: {
+    shape: 'career',
+  },
+};
+
+export const CCBySA: Story = {
+  args: {
+    shape: 'cc-by-sa',
+  },
+};
+
+export const Cog: Story = {
+  args: {
+    shape: 'cog',
+  },
+};
+
+export const Computer: Story = {
+  args: {
+    shape: 'computer',
+  },
+};
+
+export const Cross: Story = {
+  args: {
+    shape: 'cross',
+  },
+};
+
+export const Envelop: Story = {
+  args: {
+    shape: 'envelop',
+  },
+};
+
+export const Feed: Story = {
+  args: {
+    shape: 'feed',
+  },
+};
+
+export const Hamburger: Story = {
+  args: {
+    shape: 'hamburger',
+  },
+};
+
+export const Help: Story = {
+  args: {
+    shape: 'help',
+  },
+};
+
+export const Home: Story = {
+  args: {
+    shape: 'home',
+  },
+};
+
+export const MagnifyingGlass: Story = {
+  args: {
+    shape: 'magnifying-glass',
+  },
+};
+
+export const Minus: Story = {
+  args: {
+    shape: 'minus',
+  },
+};
+
+export const Moon: Story = {
+  args: {
+    shape: 'moon',
+  },
+};
+
+export const Plus: Story = {
+  args: {
+    shape: 'plus',
+  },
+};
+
+export const PostsStack: Story = {
+  args: {
+    shape: 'posts-stack',
+  },
+};
+
+export const Sun: Story = {
+  args: {
+    shape: 'sun',
+  },
+};
diff --git a/src/components/atoms/images/icons/icon.stories.tsx b/src/components/atoms/images/icons/icon.stories.tsx
deleted file mode 100644
index 0da568a..0000000
--- a/src/components/atoms/images/icons/icon.stories.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Icon, type IconProps, type IconShape } from './icon';
-
-/**
- * Home icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Images/Icons',
-  component: Icon,
-  argTypes: {
-    shape: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'arrow',
-        'career',
-        'cc-by-sa',
-        'cog',
-        'computer',
-        'cross',
-        'envelop',
-        'feed',
-        'hamburger',
-        'help',
-        'home',
-        'magnifying-glass',
-        'minus',
-        'moon',
-        'posts-stack',
-        'plus',
-        'sun',
-      ],
-      description: 'Define the icon shape.',
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Icon>;
-
-const Template: ComponentStory<typeof Icon> = ({
-  shape,
-  ...args
-}: IconProps<IconShape>) => <Icon {...args} shape={shape} />;
-
-/**
- * Icon Stories - ArrowRight
- */
-export const ArrowRight = Template.bind({});
-ArrowRight.args = {
-  orientation: 'right',
-  shape: 'arrow',
-};
-
-/**
- * Icon Stories - ArrowLeft
- */
-export const ArrowLeft = Template.bind({});
-ArrowLeft.args = {
-  orientation: 'left',
-  shape: 'arrow',
-};
-
-/**
- * Icon Stories - ArrowBottom
- */
-export const ArrowBottom = Template.bind({});
-ArrowBottom.args = {
-  orientation: 'bottom',
-  shape: 'arrow',
-};
-
-/**
- * Icon Stories - ArrowTop
- */
-export const ArrowTop = Template.bind({});
-ArrowTop.args = {
-  orientation: 'top',
-  shape: 'arrow',
-};
-
-/**
- * Icon Stories - Career
- */
-export const Career = Template.bind({});
-Career.args = {
-  shape: 'career',
-};
-
-/**
- * Icon Stories - CCBySA
- */
-export const CCBySA = Template.bind({});
-CCBySA.args = {
-  shape: 'cc-by-sa',
-};
-
-/**
- * Icon Stories - Cog
- */
-export const Cog = Template.bind({});
-Cog.args = {
-  shape: 'cog',
-};
-
-/**
- * Icon Stories - Computer
- */
-export const Computer = Template.bind({});
-Computer.args = {
-  shape: 'computer',
-};
-
-/**
- * Icon Stories - Cross
- */
-export const Cross = Template.bind({});
-Cross.args = {
-  shape: 'cross',
-};
-
-/**
- * Icon Stories - Envelop
- */
-export const Envelop = Template.bind({});
-Envelop.args = {
-  shape: 'envelop',
-};
-
-/**
- * Icon Stories - Feed
- */
-export const Feed = Template.bind({});
-Feed.args = {
-  shape: 'feed',
-};
-
-/**
- * Icon Stories - Hamburger
- */
-export const Hamburger = Template.bind({});
-Hamburger.args = {
-  shape: 'hamburger',
-};
-
-/**
- * Icon Stories - Help
- */
-export const Help = Template.bind({});
-Help.args = {
-  shape: 'help',
-};
-
-/**
- * Icon Stories - Home
- */
-export const Home = Template.bind({});
-Home.args = {
-  shape: 'home',
-};
-
-/**
- * Icon Stories - MagnifyingGlass
- */
-export const MagnifyingGlass = Template.bind({});
-MagnifyingGlass.args = {
-  shape: 'magnifying-glass',
-};
-
-/**
- * Icon Stories - Minus
- */
-export const Minus = Template.bind({});
-Minus.args = {
-  shape: 'minus',
-};
-
-/**
- * Icon Stories - Moon
- */
-export const Moon = Template.bind({});
-Moon.args = {
-  shape: 'moon',
-};
-
-/**
- * Icon Stories - Plus
- */
-export const Plus = Template.bind({});
-Plus.args = {
-  shape: 'plus',
-};
-
-/**
- * Icon Stories - PostsStack
- */
-export const PostsStack = Template.bind({});
-PostsStack.args = {
-  shape: 'posts-stack',
-};
-
-/**
- * Icon Stories - Sun
- */
-export const Sun = Template.bind({});
-Sun.args = {
-  shape: 'sun',
-};