Ilia Mashkov
92 lines
2.6 KiB
Svelte
92 lines
2.6 KiB
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';
|
|
</script>
|
|
|
|
<Story name="Default">
|
|
{#snippet template(args)}
|
|
<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)}
|
|
<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)}
|
|
<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)}
|
|
<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)}
|
|
<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>
|