46 lines
1.3 KiB
Svelte
46 lines
1.3 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import SectionSeparator from './SectionSeparator.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/SectionSeparator',
|
|
component: SectionSeparator,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: { component: 'Full-width horizontal rule for separating page sections.' },
|
|
story: { inline: false },
|
|
},
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
class: {
|
|
control: 'text',
|
|
description: 'Additional CSS classes to merge onto the element',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { ComponentProps } from 'svelte';
|
|
</script>
|
|
|
|
<Story name="Default/Basic" args={{}}>
|
|
{#snippet template(args: ComponentProps<typeof SectionSeparator>)}
|
|
<div class="w-96">
|
|
<SectionSeparator {...args} />
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="Custom class" args={{ class: 'my-4' }}>
|
|
{#snippet template(args: ComponentProps<typeof SectionSeparator>)}
|
|
<div class="w-96">
|
|
<p class="text-sm text-neutral-500">Above</p>
|
|
<SectionSeparator {...args} />
|
|
<p class="text-sm text-neutral-500">Below</p>
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|