54 lines
1.4 KiB
Svelte
54 lines
1.4 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import Divider from './Divider.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/Divider',
|
|
component: Divider,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: '1px separator line, horizontal or vertical.',
|
|
},
|
|
story: { inline: false },
|
|
},
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
orientation: {
|
|
control: 'select',
|
|
options: ['horizontal', 'vertical'],
|
|
description: 'Divider orientation',
|
|
defaultValue: 'horizontal',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<Story
|
|
name="Horizontal"
|
|
args={{ orientation: 'horizontal' }}
|
|
>
|
|
{#snippet template()}
|
|
<div class="flex flex-col gap-4 w-full max-w-md">
|
|
<div class="text-sm">Content above divider</div>
|
|
<Divider orientation="horizontal" />
|
|
<div class="text-sm">Content below divider</div>
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Vertical"
|
|
args={{ orientation: 'vertical' }}
|
|
>
|
|
{#snippet template()}
|
|
<div class="flex items-center gap-4 h-24">
|
|
<div class="text-sm">Left content</div>
|
|
<Divider orientation="vertical" />
|
|
<div class="text-sm">Right content</div>
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|