refactor: button autodocs

bootwindui · Nov 20, 2023 · 3c332e0 · 3c332e0
1 parent 0e323f2
commit 3c332e0
Showing 1 changed file with 80 additions and 51 deletions.
diff --git a/packages/button/src/stories/Button.stories.tsx b/packages/button/src/stories/Button.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { HiOutlineArrowRight } from 'react-icons/hi'
 
 import Title from '@bootwind/title';
 import { Button, ButtonProps } from '../index';
@@ -8,63 +9,91 @@ import { FaRegEnvelope } from 'react-icons/fa6';
 export default {
   title: 'Components/Button',
   component: Button,
+  tags: ['autodocs'],
+  args: {
+    children: "Button"
+  },
   argTypes: {
+    children: {
+      type: 'string',
+      description: "Content of the button",
+      control: {
+        type: 'text',
+      }
+    },
     variant: {
       control: { type: 'radio', options: ['primary', 'secondary', 'ghost'] },
     },
     size: {
       control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] },
     },
+    leftIcon: {
+      control: { 
+        mapping: {
+          empty: [],
+        } 
+      },
+    },
+    rightIcon: {
+      control: { 
+        mapping: {
+          empty: [],
+        } 
+      },
+    },
   },
 } as Meta;
+type Story = StoryObj<ButtonProps>;
 
-export const Variants = (args: ButtonProps) => (
-  <>
-    <Title
-      title="Buttons"
-      description="The Forms component in the Bootwind Design System provides a fundamental building block for user input and interaction. Customize form fields, layouts, and validation to create user-friendly and functional forms that seamlessly integrate with your design. Whether you're collecting user data, processing payments, or enabling various interactions, the Forms component ensures a smooth and intuitive experience for users as they engage with your application or website."
-    />
-
-    <div className="flex flex-col space-y-8">
-      <div>
-        <Button variant="primary">Primary</Button>
-      </div>
-      <div>
-        <Button hasArrow={true} variant="primary">
-          Primary with Arrow
-        </Button>
-      </div>
-      <div>
-        <Button icon={<FaRegEnvelope />} hasArrow={true} variant="primary">
-          Primary with Arrow and Icon
-        </Button>
-      </div>
-      <div>
-        <Button variant="secondary">Secondary</Button>
-      </div>
-      <div>
-        <Button variant="ghost">Ghost</Button>
-      </div>
-    </div>
-  </>
-);
-
-export const Sizes = (args: ButtonProps) => (
-  <>
-    <Title
-      title="Buttons"
-      description="The Forms component in the Bootwind Design System provides a fundamental building block for user input and interaction. Customize form fields, layouts, and validation to create user-friendly and functional forms that seamlessly integrate with your design. Whether you're collecting user data, processing payments, or enabling various interactions, the Forms component ensures a smooth and intuitive experience for users as they engage with your application or website."
-    />
-    <div className="flex flex-col space-y-4 mt-8">
-      <div>
-        <Button size="sm">Small</Button>
-      </div>
-      <div>
-        <Button size="md">Medium</Button>
-      </div>
-      <div>
-        <Button size="lg">Large</Button>
-      </div>
-    </div>
-  </>
-);
+export const Basic: Story = {
+  args: {
+    rightIcon: <HiOutlineArrowRight/>,
+    leftIcon: <FaRegEnvelope />,
+    size: 'lg',
+  }
+}
+export const SizeSmall: Story = {
+  args: {
+    size: 'sm',
+    children: "Small"
+  }
+}
+export const SizeMedium: Story = {
+  args: {
+    size: 'md',
+    children: "Small"
+  }
+}
+export const SizeLarge: Story = {
+  args: {
+    size: 'lg',
+    children: "Small"
+  }
+}
+export const VariantPrimary: Story = {
+  args: {
+    children: "Click Me",
+    rightIcon: <HiOutlineArrowRight/>,
+    leftIcon: <FaRegEnvelope />,
+    variant: 'primary'
+  }
+}
+export const VariantSecondary: Story = {
+  args: {
+    children: "Click Me",
+    rightIcon: <HiOutlineArrowRight/>,
+    leftIcon: <FaRegEnvelope />,
+    variant: 'secondary'
+  }
+}
+export const VariantTextOnly: Story = {
+  args: {
+    children: "Click Me",
+    rightIcon: <HiOutlineArrowRight/>,
+    leftIcon: <FaRegEnvelope />,
+    variant: 'text-only'
+  }
+}
+export const Disabled = (args: ButtonProps) => (
+  <Button {...args} disabled={true} rightIcon={<HiOutlineArrowRight/>} leftIcon={<FaRegEnvelope />}></Button>
+)