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

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

const { Story } = defineMeta({
    title: 'Shared/ButtonGroup',
    component: ButtonGroup,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Wraps buttons in a warm-surface pill with a 1px gap and subtle border. Use for segmented controls, view toggles, or any mutually exclusive button set.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        class: {
            control: 'text',
            description: 'Additional CSS classes',
        },
    },
});
</script>

<script lang="ts">
import { Button } from '$shared/ui/Button';
import type { ComponentProps } from 'svelte';
</script>

<Story name="Default">
    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <ButtonGroup {...args}>
            <Button variant="tertiary">Option 1</Button>
            <Button variant="tertiary">Option 2</Button>
            <Button variant="tertiary">Option 3</Button>
        </ButtonGroup>
    {/snippet}
</Story>

<Story name="Horizontal">
    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <ButtonGroup {...args}>
            <Button variant="tertiary">Day</Button>
            <Button variant="tertiary" active>Week</Button>
            <Button variant="tertiary">Month</Button>
            <Button variant="tertiary">Year</Button>
        </ButtonGroup>
    {/snippet}
</Story>

<Story name="Vertical">
    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <ButtonGroup {...args} class="flex-col">
            <Button variant="tertiary">Top</Button>
            <Button variant="tertiary" active>Middle</Button>
            <Button variant="tertiary">Bottom</Button>
        </ButtonGroup>
    {/snippet}
</Story>

<Story name="With Icons">
    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <ButtonGroup {...args}>
            <Button variant="tertiary">Grid</Button>
            <Button variant="tertiary" active>List</Button>
            <Button variant="tertiary">Map</Button>
        </ButtonGroup>
    {/snippet}
</Story>

<Story
    name="Dark Mode"
    parameters={{
        backgrounds: {
            default: 'dark',
        },
    }}
>
    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <div class="p-8 bg-background text-foreground">
            <h3 class="mb-4 text-sm font-medium">Dark Mode</h3>
            <ButtonGroup {...args}>
                <Button variant="tertiary">Option A</Button>
                <Button variant="tertiary" active>Option B</Button>
                <Button variant="tertiary">Option C</Button>
            </ButtonGroup>
        </div>
    {/snippet}
</Story>