09b234a07f
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
- Button.css uses only CSS custom properties, no fallbacks - Token validator now blocks hardcoded values (strict_mode: true) - Hook scripts converted from ESM (.js) to CommonJS (.cjs) - Storybook unified config with HMR disabled for nginx proxy - Added dss-ui package with Figma-synced components and stories 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
108 lines
1.9 KiB
TypeScript
108 lines
1.9 KiB
TypeScript
/**
|
|
* Button Stories
|
|
* @generated 2025-12-11T14:37:52.568631
|
|
*/
|
|
import type { Meta, StoryObj } from '@storybook/preact';
|
|
import { Button, type ButtonProps } from '../src/atoms/Button';
|
|
|
|
const meta: Meta<ButtonProps> = {
|
|
title: '2. Atoms/Button',
|
|
component: Button,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: `Auto-generated Button component
|
|
|
|
**Classification:** atom
|
|
**Slots:** icon, label
|
|
**Figma ID:** 9:1071`
|
|
}
|
|
}
|
|
},
|
|
argTypes: {
|
|
roundness: {
|
|
control: 'select',
|
|
options: ['Default', 'Round'],
|
|
description: 'Roundness variant',
|
|
},
|
|
variant: {
|
|
control: 'select',
|
|
options: ['Destructive', 'Ghost', 'Ghost Muted', 'Outline', 'Primary', 'Secondary'],
|
|
description: 'Variant variant',
|
|
},
|
|
size: {
|
|
control: 'select',
|
|
options: ['Large', 'Mini', 'Regular', 'Small'],
|
|
description: 'Size variant',
|
|
},
|
|
state: {
|
|
control: 'select',
|
|
options: ['Default', 'Disabled', 'Focus', 'Hover & Active'],
|
|
description: 'State variant',
|
|
},
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<ButtonProps>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
roundness: 'Default',
|
|
variant: 'Destructive',
|
|
size: 'Large',
|
|
state: 'Default',
|
|
children: 'Button'
|
|
},
|
|
};
|
|
|
|
export const SizeLarge: Story = {
|
|
args: {
|
|
...Default.args,
|
|
size: 'Large',
|
|
},
|
|
};
|
|
|
|
export const SizeMini: Story = {
|
|
args: {
|
|
...Default.args,
|
|
size: 'Mini',
|
|
},
|
|
};
|
|
|
|
export const SizeRegular: Story = {
|
|
args: {
|
|
...Default.args,
|
|
size: 'Regular',
|
|
},
|
|
};
|
|
|
|
export const Destructive: Story = {
|
|
args: {
|
|
...Default.args,
|
|
variant: 'Destructive',
|
|
},
|
|
};
|
|
|
|
export const Ghost: Story = {
|
|
args: {
|
|
...Default.args,
|
|
variant: 'Ghost',
|
|
},
|
|
};
|
|
|
|
export const GhostMuted: Story = {
|
|
args: {
|
|
...Default.args,
|
|
variant: 'Ghost Muted',
|
|
},
|
|
};
|
|
|
|
export const Outline: Story = {
|
|
args: {
|
|
...Default.args,
|
|
variant: 'Outline',
|
|
},
|
|
};
|