docs: separate Action Button stories

docs/stories/ActionButton.stories.tsx → docs/stories/ActionButtonLarge.stories.tsx

@@ -8,7 +8,8 @@ import { SeedThemeDecorator } from "./components/decorator";
 import { VariantTable } from "./components/variant-table";
 
 const meta = {
-  component: ActionButton,
+  title: "Action Button Large",
+  component: (props) => <ActionButton size="large" {...props} />,
   decorators: [SeedThemeDecorator],
 } satisfies Meta<typeof ActionButton>;
 
@@ -39,14 +40,18 @@ const conditionMap = {
 
 const CommonStoryTemplate: Story = {
   args: {},
-  render: (args) => (
-    <VariantTable
-      Component={meta.component}
-      variantMap={actionButtonVariantMap}
-      conditionMap={conditionMap}
-      {...args}
-    />
-  ),
+  render: (args) => {
+    const { size, ...variantMap } = actionButtonVariantMap;
+
+    return (
+      <VariantTable
+        Component={meta.component}
+        variantMap={variantMap}
+        conditionMap={conditionMap}
+        {...args}
+      />
+    );
+  },
 };
 
 export const LightTheme = CommonStoryTemplate;

docs/stories/ActionButtonMedium.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ActionButton } from "seed-design/ui/action-button";
+
+import { IconBellFill, IconChevronRightFill } from "@daangn/react-monochrome-icon";
+import { actionButtonVariantMap } from "@seed-design/recipe/actionButton";
+import { SeedThemeDecorator } from "./components/decorator";
+import { VariantTable } from "./components/variant-table";
+
+const meta = {
+  title: "Action Button Medium",
+  component: (props) => <ActionButton size="medium" {...props} />,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof ActionButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const conditionMap = {
+  disabled: {
+    false: { disabled: false },
+    true: { disabled: true },
+  },
+  loading: {
+    false: { loading: false },
+    true: { loading: true },
+  },
+  layout: {
+    textOnly: { layout: "withText", children: "Action Button" },
+    iconFirst: { layout: "withText", children: "Action Button", prefixIcon: <IconBellFill /> },
+    iconLast: {
+      layout: "withText",
+      children: "Action Button",
+      suffixIcon: <IconChevronRightFill />,
+    },
+    iconOnly: { layout: "iconOnly", children: <IconBellFill /> },
+  },
+};
+
+const CommonStoryTemplate: Story = {
+  args: {},
+  render: (args) => {
+    const { size, ...variantMap } = actionButtonVariantMap;
+
+    return (
+      <VariantTable
+        Component={meta.component}
+        variantMap={variantMap}
+        conditionMap={conditionMap}
+        {...args}
+      />
+    );
+  },
+};
+
+export const LightTheme = CommonStoryTemplate;
+
+export const DarkTheme = CommonStoryTemplate;
+
+export const FontScalingExtraSmall = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge = CommonStoryTemplate;

docs/stories/ActionButtonSmall.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ActionButton } from "seed-design/ui/action-button";
+
+import { IconBellFill, IconChevronRightFill } from "@daangn/react-monochrome-icon";
+import { actionButtonVariantMap } from "@seed-design/recipe/actionButton";
+import { SeedThemeDecorator } from "./components/decorator";
+import { VariantTable } from "./components/variant-table";
+
+const meta = {
+  title: "Action Button Small",
+  component: (props) => <ActionButton size="small" {...props} />,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof ActionButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const conditionMap = {
+  disabled: {
+    false: { disabled: false },
+    true: { disabled: true },
+  },
+  loading: {
+    false: { loading: false },
+    true: { loading: true },
+  },
+  layout: {
+    textOnly: { layout: "withText", children: "Action Button" },
+    iconFirst: { layout: "withText", children: "Action Button", prefixIcon: <IconBellFill /> },
+    iconLast: {
+      layout: "withText",
+      children: "Action Button",
+      suffixIcon: <IconChevronRightFill />,
+    },
+    iconOnly: { layout: "iconOnly", children: <IconBellFill /> },
+  },
+};
+
+const CommonStoryTemplate: Story = {
+  args: {},
+  render: (args) => {
+    const { size, ...variantMap } = actionButtonVariantMap;
+
+    return (
+      <VariantTable
+        Component={meta.component}
+        variantMap={variantMap}
+        conditionMap={conditionMap}
+        {...args}
+      />
+    );
+  },
+};
+
+export const LightTheme = CommonStoryTemplate;
+
+export const DarkTheme = CommonStoryTemplate;
+
+export const FontScalingExtraSmall = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge = CommonStoryTemplate;

docs/stories/ActionButtonXSmall.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ActionButton } from "seed-design/ui/action-button";
+
+import { IconBellFill, IconChevronRightFill } from "@daangn/react-monochrome-icon";
+import { actionButtonVariantMap } from "@seed-design/recipe/actionButton";
+import { SeedThemeDecorator } from "./components/decorator";
+import { VariantTable } from "./components/variant-table";
+
+const meta = {
+  title: "Action Button XSmall",
+  component: (props) => <ActionButton size="xsmall" {...props} />,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof ActionButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const conditionMap = {
+  disabled: {
+    false: { disabled: false },
+    true: { disabled: true },
+  },
+  loading: {
+    false: { loading: false },
+    true: { loading: true },
+  },
+  layout: {
+    textOnly: { layout: "withText", children: "Action Button" },
+    iconFirst: { layout: "withText", children: "Action Button", prefixIcon: <IconBellFill /> },
+    iconLast: {
+      layout: "withText",
+      children: "Action Button",
+      suffixIcon: <IconChevronRightFill />,
+    },
+    iconOnly: { layout: "iconOnly", children: <IconBellFill /> },
+  },
+};
+
+const CommonStoryTemplate: Story = {
+  args: {},
+  render: (args) => {
+    const { size, ...variantMap } = actionButtonVariantMap;
+
+    return (
+      <VariantTable
+        Component={meta.component}
+        variantMap={variantMap}
+        conditionMap={conditionMap}
+        {...args}
+      />
+    );
+  },
+};
+
+export const LightTheme = CommonStoryTemplate;
+
+export const DarkTheme = CommonStoryTemplate;
+
+export const FontScalingExtraSmall = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge = CommonStoryTemplate;