54 lines
1.6 KiB
Svelte
54 lines
1.6 KiB
Svelte
|
<script module>
|
||
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||
|
|
import ControlGroup from './ControlGroup.svelte';
|
||
|
|
|
||
|
|
const { Story } = defineMeta({
|
||
|
|
title: 'Shared/ControlGroup',
|
||
|
|
component: ControlGroup,
|
||
|
|
tags: ['autodocs'],
|
||
|
|
parameters: {
|
||
|
|
docs: {
|
||
|
|
description: { component: 'Labelled section for grouping related sidebar controls, with a bottom border.' },
|
||
|
|
story: { inline: false },
|
||
|
|
},
|
||
|
|
layout: 'padded',
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
label: {
|
||
|
|
control: 'text',
|
||
|
|
description: 'Uppercase label shown above the control content',
|
||
|
|
},
|
||
|
|
class: {
|
||
|
|
control: 'text',
|
||
|
|
description: 'Additional CSS classes',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Story name="Default/Basic">
|
||
|
|
{#snippet template()}
|
||
|
|
<div class="w-64">
|
||
|
|
<ControlGroup label="Font Size">
|
||
|
|
<div class="text-sm text-neutral-500">Control content here</div>
|
||
|
|
</ControlGroup>
|
||
|
|
</div>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story name="With form control">
|
||
|
|
{#snippet template()}
|
||
|
|
<div class="w-64">
|
||
|
|
<ControlGroup label="Weight">
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<button class="px-3 py-1 text-xs border border-neutral-300 rounded">100</button>
|
||
|
|
<button class="px-3 py-1 text-xs border border-neutral-300 rounded">400</button>
|
||
|
|
<button class="px-3 py-1 text-xs border border-neutral-300 rounded bg-neutral-900 text-white">
|
||
|
|
700
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</ControlGroup>
|
||
|
|
</div>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|