121 lines
3.0 KiB
Svelte
121 lines
3.0 KiB
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>
|