web-ui/src/components/Label.stories.tsx

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 ErrorState: Story = {
    name: 'Error',
    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>
    ),
};