11a832e271
- Storybook 8 with React Vite framework + a11y addon - Stories for Button (7 variants), Badge (6), Input (5), Card (4) - Dark/elevated/light background presets - Run: pnpm --filter @bytelyst/ui storybook
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Card, CardHeader, CardTitle, CardDescription } from './Card.js';
|
|
|
|
const meta: Meta<typeof Card> = {
|
|
title: 'Components/Card',
|
|
component: Card,
|
|
argTypes: {
|
|
padding: { control: 'select', options: ['none', 'sm', 'md', 'lg'] },
|
|
hover: { control: 'boolean' },
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof Card>;
|
|
|
|
export const Default: Story = {
|
|
args: { children: 'Card content goes here' },
|
|
};
|
|
|
|
export const WithHeader: Story = {
|
|
render: args => (
|
|
<Card {...args}>
|
|
<CardHeader>
|
|
<CardTitle>Card Title</CardTitle>
|
|
<CardDescription>A short description of this card.</CardDescription>
|
|
</CardHeader>
|
|
<p style={{ color: 'var(--bl-text-secondary, #a0a0b0)', fontSize: 14 }}>Body content</p>
|
|
</Card>
|
|
),
|
|
};
|
|
|
|
export const Hoverable: Story = {
|
|
args: { hover: true, children: 'Hover me to see the border effect' },
|
|
};
|
|
|
|
export const LargePadding: Story = {
|
|
args: { padding: 'lg', children: 'Large padding card' },
|
|
};
|