chore: consolifates button stories

holisticon · Nov 15, 2024 · 038daa1 · 038daa1
1 parent 3891484
commit 038daa1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 131 deletions.
diff --git a/packages/documentation/src/elements/button/button-primary.stories.ts b/packages/documentation/src/elements/button/button-primary.stories.ts
diff --git a/packages/documentation/src/elements/button/button-secondary.stories.ts b/packages/documentation/src/elements/button/button-secondary.stories.ts
diff --git a/packages/documentation/src/elements/button/button-story-helpers.ts b/packages/documentation/src/elements/button/button-story-helpers.ts
@@ -1,4 +1,4 @@
-import type { ArgTypes, StoryObj } from "@storybook/web-components";
+import type { ArgTypes } from "@storybook/web-components";
 import { html } from "lit";
 
 type ButtonSize = "default" | "small";
@@ -10,9 +10,6 @@ export const buttonArgs = (variant: ButtonVariant): ButtonArgs => ({
   variant,
   size: "default",
   disabled: false,
-  hovered: false,
-  active: false,
-  focused: false,
   iconPosition: "left",
   label: "",
 });
@@ -33,55 +30,10 @@ export interface ButtonArgs {
   variant: ButtonVariant;
   size: ButtonSize;
   disabled: boolean;
-  hovered: boolean;
-  active: boolean;
-  focused: boolean;
   icon?: string;
   iconPosition: ButtonIconPosition;
 }
 
-export type Story = StoryObj<ButtonArgs>;
-export const EnabledStory: Story = {
-  args: {
-    label: "Enabled Button",
-  },
-};
-
-// Hovered (Button Hovered)
-export const HoveredStory: Story = {
-  args: {
-    label: "Hovered Button",
-    hovered: true,
-  },
-  parameters: { pseudo: { hover: true } },
-};
-
-// Focused
-export const FocusedStory: Story = {
-  args: {
-    label: "Focused Button",
-    focused: true,
-  },
-  parameters: { pseudo: { focus: true } },
-};
-
-// Active (Pressed)
-export const ActiveStory: Story = {
-  args: {
-    label: "Active Button",
-    active: true,
-  },
-  parameters: { pseudo: { active: true } },
-};
-
-// Disabled
-export const DisabledStory: Story = {
-  args: {
-    label: "Disabled Button",
-    disabled: true,
-  },
-};
-
 export const renderButtons = (args: ButtonArgs, colorScheme: ColorScheme) =>
   html`<div
     style="display:flex;gap:0.5rem;flex-direction:column;padding:2rem;color-scheme:${colorScheme};background-color:${colorScheme ===

diff --git a/packages/documentation/src/elements/button/button.stories.ts b/packages/documentation/src/elements/button/button.stories.ts
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+import {
+  buttonArgs,
+  buttonArgTypes,
+  renderButtons,
+  type ButtonArgs,
+} from "./button-story-helpers.js";
+
+const meta: Meta<ButtonArgs> = {
+  argTypes: buttonArgTypes,
+
+  render: (args) =>
+    html`<div style="display:flex;gap:1rem">
+      ${renderButtons(args, "light")}${renderButtons(args, "dark")}
+    </div>`,
+};
+
+export default meta;
+
+export type Story = StoryObj<ButtonArgs>;
+
+export const ButtonPrimary: Story = { args: buttonArgs("primary") };
+export const ButtonSecondary: Story = { args: buttonArgs("secondary") };