44 lines
1.3 KiB
Svelte
44 lines
1.3 KiB
Svelte
<script module>
|
|
import { createTypographyControl } from '$shared/lib';
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import ComboControlV2 from './ComboControlV2.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/ComboControlV2',
|
|
component: ComboControlV2,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'ComboControl with input field and slider',
|
|
},
|
|
story: { inline: false }, // Render stories in iframe for state isolation
|
|
},
|
|
},
|
|
argTypes: {
|
|
orientation: {
|
|
control: 'select',
|
|
options: ['horizontal', 'vertical'],
|
|
description: 'Orientation of the ComboControl',
|
|
defaultValue: 'vertical',
|
|
},
|
|
label: {
|
|
control: 'text',
|
|
description: 'Label for the ComboControl',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const control = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
|
|
</script>
|
|
|
|
<Story name="Horizontal" args={{ orientation: 'horizontal', control }}>
|
|
<ComboControlV2 control={control} orientation="horizontal" />
|
|
</Story>
|
|
|
|
<Story name="Vertical" args={{ orientation: 'vertical', control, class: 'h-48' }}>
|
|
<ComboControlV2 control={control} orientation="vertical" />
|
|
</Story>
|