frontend-svelte/src/shared/ui/Button/ToggleButton.stories.svelte

<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import ToggleButton from './ToggleButton.svelte';

const { Story } = defineMeta({
    title: 'Shared/ToggleButton',
    component: ToggleButton,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Toggle button with selected/active states. Accepts `selected` prop as alias for `active`, matching common toggle patterns.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        variant: {
            control: 'select',
            options: ['primary', 'secondary', 'tertiary', 'outline', 'ghost'],
            defaultValue: 'tertiary',
        },
        size: {
            control: 'select',
            options: ['xs', 'sm', 'md', 'lg', 'xl'],
            defaultValue: 'md',
        },
        selected: {
            control: 'boolean',
            description: 'Selected state (alias for active)',
        },
        active: {
            control: 'boolean',
            defaultValue: false,
        },
        animate: {
            control: 'boolean',
            defaultValue: true,
        },
    },
});
</script>

<script lang="ts">
let selected = $state(false);
</script>

<Story
    name="Default"
    args={{ variant: 'tertiary', size: 'md', selected: false, animate: true }}
>
    {#snippet template(args)}
        <ToggleButton {...args}>Toggle Me</ToggleButton>
    {/snippet}
</Story>

<Story
    name="Selected/Unselected"
    args={{ variant: 'tertiary', size: 'md', animate: true }}
>
    {#snippet template(args)}
        <div class="flex items-center gap-4">
            <ToggleButton {...args} selected={false}>
                Unselected
            </ToggleButton>
            <ToggleButton {...args} selected={true}>
                Selected
            </ToggleButton>
        </div>
    {/snippet}
</Story>

<Story
    name="Variants"
    args={{ size: 'md', selected: true, animate: true }}
>
    {#snippet template(args)}
        <div class="flex items-center gap-4">
            <ToggleButton {...args} variant="primary">
                Primary
            </ToggleButton>
            <ToggleButton {...args} variant="secondary">
                Secondary
            </ToggleButton>
            <ToggleButton {...args} variant="tertiary">
                Tertiary
            </ToggleButton>
            <ToggleButton {...args} variant="outline">
                Outline
            </ToggleButton>
            <ToggleButton {...args} variant="ghost">
                Ghost
            </ToggleButton>
        </div>
    {/snippet}
</Story>

<Story
    name="Interactive"
    args={{ variant: 'tertiary', size: 'md', animate: true }}
>
    {#snippet template(args)}
        <div class="flex items-center gap-4">
            <ToggleButton {...args} selected={selected} onclick={() => selected = !selected}>
                Click to toggle
            </ToggleButton>
            <span class="text-sm text-muted-foreground">Currently: {selected ? 'selected' : 'unselected'}</span>
        </div>
    {/snippet}
</Story>

<Story
    name="Dark Mode"
    parameters={{
        backgrounds: {
            default: 'dark',
        },
    }}
>
    {#snippet template(args)}
        <div class="p-8 bg-background text-foreground">
            <h3 class="mb-4 text-sm font-medium">Dark Mode</h3>
            <div class="flex items-center gap-4">
                <ToggleButton {...args} variant="primary" selected={true}>
                    Primary
                </ToggleButton>
                <ToggleButton {...args} variant="secondary" selected={false}>
                    Secondary
                </ToggleButton>
                <ToggleButton {...args} variant="tertiary" selected={false}>
                    Tertiary
                </ToggleButton>
            </div>
        </div>
    {/snippet}
</Story>