78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Label } from './Label';
|
|
|
|
const meta = {
|
|
title: 'Components/Label',
|
|
component: Label,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Typography helper component for headings, body text, caption, error text, and inline code styles.'
|
|
}
|
|
}
|
|
},
|
|
argTypes: {
|
|
variant: {
|
|
description: 'Typography style preset.',
|
|
options: ['h1', 'h2', 'h3', 'h4', 'body', 'body2', 'caption', 'error', 'code'],
|
|
control: 'select',
|
|
table: { type: { summary: "'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'" } }
|
|
},
|
|
as: {
|
|
description: "Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
|
|
control: false,
|
|
table: { type: { summary: 'ElementType' } }
|
|
},
|
|
className: {
|
|
description: 'Extra CSS classes.',
|
|
control: 'text',
|
|
table: { type: { summary: 'string' } }
|
|
},
|
|
children: {
|
|
description: 'Label content.',
|
|
control: 'text',
|
|
table: { type: { summary: 'ReactNode' } }
|
|
}
|
|
},
|
|
args: {
|
|
variant: 'body',
|
|
children: 'Label text'
|
|
}
|
|
} satisfies Meta<typeof Label>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Body: Story = {};
|
|
|
|
export const Error: Story = {
|
|
args: {
|
|
variant: 'error',
|
|
children: 'This field is required'
|
|
}
|
|
};
|
|
|
|
export const Code: Story = {
|
|
args: {
|
|
variant: 'code',
|
|
children: 'const isPublished = true;'
|
|
}
|
|
};
|
|
|
|
export const VariantScale: Story = {
|
|
render: () => (
|
|
<div className="flex max-w-md flex-col gap-2">
|
|
<Label variant="caption">Caption</Label>
|
|
<Label variant="h1">Heading 1</Label>
|
|
<Label variant="h2">Heading 2</Label>
|
|
<Label variant="h3">Heading 3</Label>
|
|
<Label variant="h4">Heading 4</Label>
|
|
<Label variant="body">Primary body copy</Label>
|
|
<Label variant="body2">Secondary body copy</Label>
|
|
<Label variant="error">Error copy</Label>
|
|
<Label variant="code">npm run build</Label>
|
|
</div>
|
|
)
|
|
};
|