docs(react): create react button stories

inventare · Jan 7, 2025 · 6ceb668 · 6ceb668
1 parent 9603f2c
commit 6ceb668
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 5 deletions.
diff --git a/apps/docs-react/.storybook/main.ts b/apps/docs-react/.storybook/main.ts
@@ -2,6 +2,8 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 import { join, dirname } from "path";
 
+import remarkGfm from 'remark-gfm';
+
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
@@ -20,6 +22,16 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
     getAbsolutePath("@storybook/addon-interactions"),
+        {
+          name: '@storybook/addon-docs',
+          options: {
+            mdxPluginOptions: {
+              mdxCompileOptions: {
+                remarkPlugins: [remarkGfm],
+              },
+            },
+          },
+        },
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),

diff --git a/packages/react/src/components/button/button.mdx b/packages/react/src/components/button/button.mdx
@@ -0,0 +1,78 @@
+import { Canvas, Meta, Story, Source } from '@storybook/blocks';
+import * as ButtonStories from './button.stories';
+import { MultipleCanvas } from '../../../../../utils/storybook/components/MultipleCanvas';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Displays a button or a component that looks like a button.
+
+## Colors
+
+We provide some color schemes for the button component, each serving its own semantic purpose.
+
+<MultipleCanvas
+  components={[
+    { title: 'Primary', of: ButtonStories.Primary },
+    { title: 'Danger', of: ButtonStories.Danger }
+  ]}
+/>
+
+### Outline variants
+
+In addition, we have some outline variant for some use-cases. This outline variants are based on the same colors of the solid buttons. The outline variants are described in this section.
+
+<MultipleCanvas
+  components={[
+    { title: 'Primary Outline', of: ButtonStories.PrimaryOutline },
+    { title: 'Danger Outline', of: ButtonStories.DangerOutline }
+  ]}
+/>
+
+### Disabled states
+
+The disbaled state variant is defined by reducing the opacity of the original color schema and setting the `pointer-events` to `none`.
+
+<MultipleCanvas
+  components={[
+    { title: 'Primary', of: ButtonStories.PrimaryDisabled },
+    { title: 'Danger', of: ButtonStories.DangerDisabled },
+    { title: 'Primary Outline', of: ButtonStories.PrimaryOutlineDisabled },
+    { title: 'Danger Outline', of: ButtonStories.DangerOutlineDisabled }
+  ]}
+/>
+
+## Sizes
+
+In addiction to the colors, we provide some sizes for different scenarios usages.
+
+<MultipleCanvas
+  components={[
+    { title: 'Small', of: ButtonStories.Small },
+    { title: 'Normal', of: ButtonStories.Normal },
+    { title: 'Large', of: ButtonStories.Large },
+  ]}
+/>
+
+The padding is a custom padding for each button size:
+
+| Button Size  | Horizontal Padding      | Vertical Padding         | Preview                             |
+| ------------ | ----------------------- | ------------------------ | ----------------------------------- |
+| Small        | `var(--spacing-small)`  | `var(--spacing-xxsmall)` | <Story of={ButtonStories.Small} />  |
+| Normal       | `var(--spacing-base)`   | `var(--spacing-xsmall)`  | <Story of={ButtonStories.Normal} /> |
+| Large        | `var(--spacing-large)`  | `var(--spacing-small)`   | <Story of={ButtonStories.Large} />  |
+
+## Border-radius
+
+The `var(--border-radius)` from `Tokens/BorderRadius` is used as the `border-radius` css property for all buttons.
+
+## Text and Icon
+
+The button has a `display: inline-flex` with a gap of `var(--spacing-small)`:
+
+| Button Size  | Gap                     | Preview                                         |
+| ------------ | ----------------------- | ----------------------------------------------- |
+| Small        | `var(--spacing-small)`  | <Story of={ButtonStories.DeleteButtonSmall} />  |
+| Normal       | `var(--spacing-base)`   | <Story of={ButtonStories.DeleteButton} />       |
+| Large        | `var(--spacing-base)`   | <Story of={ButtonStories.DeleteButtonLarge} />  |
diff --git a/packages/react/src/components/button/button.stories.tsx b/packages/react/src/components/button/button.stories.tsx
@@ -1,22 +1,154 @@
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './button';
 
-const meta = {
+const meta: Meta<typeof Button> = {
   title: 'Forms/Button',
   component: Button,
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      options: ['primary', 'danger'],
+      control: { type: 'select' },
+    },
+    size: {
+      options: ['small', 'normal', 'large'],
+      control: { type: 'select' },
+    },
+    disabled: { control: { type: 'check' } },
+  }
 };
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Primary: Story = {
   args: {
-    children: 'Button',
+    children: 'Primary',
+    color: 'primary',
+    outline: false,
+    size: 'normal',
   },
 };
 
+export const PrimaryDisabled: Story = {
+  args: {
+    children: 'Primary',
+    color: 'primary',
+    outline: false,
+    size: 'normal',
+    disabled: true,
+  },
+};
+
+export const PrimaryOutline: Story = {
+  args: {
+    children: 'Primary',
+    color: 'primary',
+    outline: true,
+    size: 'normal',
+  },
+};
+
+export const PrimaryOutlineDisabled: Story = {
+  args: {
+    children: 'Primary',
+    color: 'primary',
+    outline: true,
+    size: 'normal',
+    disabled: true,
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    children: 'Danger',
+    color: 'danger',
+    outline: false,
+    size: 'normal',
+  },
+};
+
+export const DangerDisabled: Story = {
+  args: {
+    children: 'Danger',
+    color: 'danger',
+    outline: false,
+    size: 'normal',
+    disabled: true,
+  },
+};
+
+export const DangerOutline: Story = {
+  args: {
+    children: 'Danger Outline',
+    color: 'danger',
+    outline: true,
+    size: 'normal',
+  },
+};
+
+export const DangerOutlineDisabled: Story = {
+  args: {
+    children: 'Danger Outline',
+    color: 'danger',
+    outline: true,
+    size: 'normal',
+    disabled: true,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large',
+    color: 'primary',
+    size: 'large',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: 'Small',
+    color: 'primary',
+    size: 'small',
+  },
+};
+
+export const Normal: Story = {
+  args: {
+    children: 'Normal',
+    color: 'primary',
+    size: 'normal',
+  },
+};
+
+const DeleteIcon = () => (
+  <svg viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '1rem' }}>
+    <path d="M1.5 4.99996H3.16667M3.16667 4.99996H16.5M3.16667 4.99996V16.6666C3.16667 17.1087 3.34226 17.5326 3.65482 17.8451C3.96738 18.1577 4.39131 18.3333 4.83333 18.3333H13.1667C13.6087 18.3333 14.0326 18.1577 14.3452 17.8451C14.6577 17.5326 14.8333 17.1087 14.8333 16.6666V4.99996H3.16667ZM5.66667 4.99996V3.33329C5.66667 2.89127 5.84226 2.46734 6.15482 2.15478C6.46738 1.84222 6.89131 1.66663 7.33333 1.66663H10.6667C11.1087 1.66663 11.5326 1.84222 11.8452 2.15478C12.1577 2.46734 12.3333 2.89127 12.3333 3.33329V4.99996M7.33333 9.16663V14.1666M10.6667 9.16663V14.1666" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+)
+
+export const DeleteButton: Story = {
+  args: {
+    color: 'danger',
+    children: <><DeleteIcon /> Delete</>,
+  }
+}
+
+export const DeleteButtonLarge = {
+  args: {
+    color: 'danger',
+    size: 'large',
+    children: <><DeleteIcon /> Delete</>,
+  }
+}
+
+export const DeleteButtonSmall = {
+  args: {
+    color: 'danger',
+    size: 'small',
+    children: <><DeleteIcon /> Delete</>,
+  }
+}