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

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

const { Story } = defineMeta({
    title: 'Shared/Button',
    component: Button,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: '',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        variant: {
            control: 'select',
            options: ['primary', 'secondary', 'icon', 'outline', 'ghost'],
            defaultValue: 'secondary',
        },
        size: {
            control: 'select',
            options: ['xs', 'sm', 'md', 'lg', 'xl'],
            defaultValue: 'md',
        },
        iconPosition: {
            control: 'select',
            options: ['left', 'right'],
            defaultValue: 'left',
        },
        active: {
            control: 'boolean',
            defaultValue: false,
        },
        animate: {
            control: 'boolean',
            defaultValue: true,
        },
    },
});
</script>

<script lang="ts">
import XIcon from '@lucide/svelte/icons/x';
import ButtonGroup from './ButtonGroup.svelte';
</script>

<Story
    name="Default/Basic"
    parameters={{ docs: { description: { story: 'Standard text button at all sizes' } } }}
>
    {#snippet template(args)}
        <ButtonGroup>
            <Button {...args} size="xs">xs</Button>
            <Button {...args} size="sm">sm</Button>
            <Button {...args} size="md">md</Button>
            <Button {...args} size="lg">lg</Button>
            <Button {...args} size="xl">xl</Button>
        </ButtonGroup>
    {/snippet}
</Story>

<Story
    name="Default/With Icon"
    args={{ variant: 'secondary', size: 'md', iconPosition: 'left', active: false, animate: true }}
>
    {#snippet template(args)}
        <Button {...args}>
            {#snippet icon()}
                <XIcon />
            {/snippet}
            Close
        </Button>
    {/snippet}
</Story>

<Story
    name="Primary"
    args={{ variant: 'primary', size: 'md', iconPosition: 'left', active: false, animate: true }}
>
    {#snippet template(args)}
        <Button {...args}>Primary</Button>
    {/snippet}
</Story>

<Story
    name="Secondary"
    args={{ variant: 'secondary', size: 'md', iconPosition: 'left', active: false, animate: true }}
>
    {#snippet template(args)}
        <Button {...args}>Secondary</Button>
    {/snippet}
</Story>

<Story
    name="Icon"
    args={{ variant: 'icon', size: 'md', iconPosition: 'left', active: false, animate: true }}
>
    {#snippet template(args)}
        <Button {...args}>
            {#snippet icon()}
                <XIcon />
            {/snippet}
        </Button>
    {/snippet}
</Story>

<Story
    name="Ghost"
    args={{ variant: 'ghost', size: 'md', iconPosition: 'left', active: false, animate: true }}
>
    {#snippet template(args)}
        <Button {...args}>
            Ghost
        </Button>
    {/snippet}
</Story>