Update stories to match new component organization
This commit is contained in:
adilallo
@@ -0,0 +1,368 @@
|
||||
import Button from "../../app/components/buttons/Button";
|
||||
|
||||
export default {
|
||||
title: "Components/Buttons/Button",
|
||||
component: Button,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A versatile button component with multiple variants, sizes, and states. Can render as a button or link with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"filled",
|
||||
"filled-inverse",
|
||||
"outline",
|
||||
"outline-inverse",
|
||||
"ghost",
|
||||
"ghost-inverse",
|
||||
"danger",
|
||||
"danger-inverse",
|
||||
],
|
||||
description: "The visual style variant of the button",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["xsmall", "small", "medium", "large", "xlarge"],
|
||||
description: "The size of the button",
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the button is disabled",
|
||||
},
|
||||
href: {
|
||||
control: { type: "text" },
|
||||
description: "If provided, renders as a link instead of a button",
|
||||
},
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
children: "Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const Variants = {
|
||||
args: {
|
||||
children: "Button",
|
||||
size: "large",
|
||||
},
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {..._args} variant="filled">
|
||||
Filled
|
||||
</Button>
|
||||
<Button {..._args} variant="filled-inverse">
|
||||
Filled Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="outline">
|
||||
Outline
|
||||
</Button>
|
||||
<Button {..._args} variant="outline-inverse">
|
||||
Outline Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="ghost">
|
||||
Ghost
|
||||
</Button>
|
||||
<Button {..._args} variant="ghost-inverse">
|
||||
Ghost Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="danger">
|
||||
Danger
|
||||
</Button>
|
||||
<Button {..._args} variant="danger-inverse">
|
||||
Danger Inverse
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the button component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
args: {
|
||||
children: "Button",
|
||||
variant: "filled",
|
||||
},
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {..._args} size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button {..._args} size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button {..._args} size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button {..._args} size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button {..._args} size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the button component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const States = {
|
||||
args: {
|
||||
children: "Button",
|
||||
size: "large",
|
||||
variant: "filled",
|
||||
},
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {..._args}>Normal</Button>
|
||||
<Button {..._args} disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different states of the button component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const AllVariants = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Filled Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="filled" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="filled" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="filled" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="filled" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled-inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outline Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outline" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outline" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outline" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outline" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outline" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outline-inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Ghost Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="ghost" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="ghost" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="ghost" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="ghost" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="ghost" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="ghost-inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Danger Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="danger" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="danger-inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled" size="large" disabled>
|
||||
Filled Disabled
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="large" disabled>
|
||||
Filled Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="outline" size="large" disabled>
|
||||
Outline Disabled
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="large" disabled>
|
||||
Outline Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="ghost" size="large" disabled>
|
||||
Ghost Disabled
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="large" disabled>
|
||||
Ghost Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="danger" size="large" disabled>
|
||||
Danger Disabled
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large" disabled>
|
||||
Danger Inverse Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all button variants, sizes, and states.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,353 @@
|
||||
import Button from "../../app/components/buttons/Button";
|
||||
import { within, userEvent } from "@storybook/test";
|
||||
|
||||
export default {
|
||||
title: "Components/Buttons/Button/Visual Regression",
|
||||
component: Button,
|
||||
parameters: {
|
||||
// Chromatic configuration for visual testing
|
||||
chromatic: {
|
||||
viewports: [320, 640, 1024, 1280],
|
||||
delay: 200,
|
||||
modes: {
|
||||
light: {},
|
||||
dark: {
|
||||
colorScheme: "dark",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["xsmall", "small", "medium", "large", "xlarge"],
|
||||
},
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "home"],
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Default button states
|
||||
export const Default = {
|
||||
args: {
|
||||
children: "Default Button",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default button state for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Hover = {
|
||||
args: {
|
||||
children: "Hover Button",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Button in hover state for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByRole("button");
|
||||
await userEvent.hover(button);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
},
|
||||
};
|
||||
|
||||
export const Focus = {
|
||||
args: {
|
||||
children: "Focus Button",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Button in focus state for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByRole("button");
|
||||
button.focus();
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
},
|
||||
};
|
||||
|
||||
export const Active = {
|
||||
args: {
|
||||
children: "Active Button",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Button in active/pressed state for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByRole("button");
|
||||
await userEvent.click(button);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled = {
|
||||
args: {
|
||||
children: "Disabled Button",
|
||||
disabled: true,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Disabled button state for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Size variants
|
||||
export const XSmall = {
|
||||
args: {
|
||||
children: "XSmall Button",
|
||||
size: "xsmall",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Extra small button size for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
children: "Small Button",
|
||||
size: "small",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Small button size for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Medium = {
|
||||
args: {
|
||||
children: "Medium Button",
|
||||
size: "medium",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Medium button size for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Large = {
|
||||
args: {
|
||||
children: "Large Button",
|
||||
size: "large",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Large button size for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const XLarge = {
|
||||
args: {
|
||||
children: "XLarge Button",
|
||||
size: "xlarge",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Extra large button size for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Variant styles
|
||||
export const HomeVariant = {
|
||||
args: {
|
||||
children: "Home Button",
|
||||
variant: "home",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Home variant button for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Button with icon/content
|
||||
export const WithIcon = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<span>Button with Icon</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
|
||||
</svg>
|
||||
</>
|
||||
),
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Button with icon for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LongText = {
|
||||
args: {
|
||||
children:
|
||||
"This is a button with very long text content that might wrap or overflow",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Button with long text for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Button grid for comparison
|
||||
export const SizeComparison = {
|
||||
render: () => (
|
||||
<div className="space-y-4 p-4">
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<Button size="xsmall">XSmall</Button>
|
||||
<Button size="small">Small</Button>
|
||||
<Button size="medium">Medium</Button>
|
||||
<Button size="large">Large</Button>
|
||||
<Button size="xlarge">XLarge</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "All button sizes for comparison and visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const StateComparison = {
|
||||
render: () => (
|
||||
<div className="space-y-4 p-4">
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<Button>Default</Button>
|
||||
<Button disabled>Disabled</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<Button variant="home">Home Default</Button>
|
||||
<Button variant="home" disabled>
|
||||
Home Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Button states for comparison and visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Interactive states
|
||||
export const InteractiveStates = {
|
||||
render: () => (
|
||||
<div className="space-y-4 p-4">
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<Button id="hover-test">Hover Me</Button>
|
||||
<Button id="focus-test">Focus Me</Button>
|
||||
<Button id="click-test">Click Me</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Interactive button states for visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step("Test hover state", async () => {
|
||||
const hoverButton = canvas.getByRole("button", { name: "Hover Me" });
|
||||
await userEvent.hover(hoverButton);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
});
|
||||
|
||||
await step("Test focus state", async () => {
|
||||
const focusButton = canvas.getByRole("button", { name: "Focus Me" });
|
||||
focusButton.focus();
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
});
|
||||
|
||||
await step("Test click state", async () => {
|
||||
const clickButton = canvas.getByRole("button", { name: "Click Me" });
|
||||
await userEvent.click(clickButton);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// Edge cases
|
||||
export const EdgeCases = {
|
||||
render: () => (
|
||||
<div className="space-y-4 p-4">
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<Button size="xsmall">Very Small</Button>
|
||||
<Button size="xlarge">Very Large</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<Button>Normal</Button>
|
||||
<Button disabled>Disabled</Button>
|
||||
<Button variant="home">Home</Button>
|
||||
<Button variant="home" disabled>
|
||||
Home Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Edge cases for button visual regression testing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user