100 lines
2.8 KiB
Svelte
100 lines
2.8 KiB
Svelte
<script module>
|
|
import { createTypographyControl } from '$shared/lib';
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import ComboControl from './ComboControl.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/ComboControl',
|
|
component: ComboControl,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Provides multiple ways to change a numeric value via decrease/increase buttons, slider, and direct input. All three methods are synchronized, giving users flexibility based on precision needs.',
|
|
},
|
|
story: { inline: false }, // Render stories in iframe for state isolation
|
|
},
|
|
},
|
|
argTypes: {
|
|
control: {
|
|
control: 'object',
|
|
description: 'TypographyControl instance managing the value and bounds',
|
|
},
|
|
decreaseLabel: {
|
|
control: 'text',
|
|
description: 'Accessibility label for the decrease button',
|
|
},
|
|
increaseLabel: {
|
|
control: 'text',
|
|
description: 'Accessibility label for the increase button',
|
|
},
|
|
controlLabel: {
|
|
control: 'text',
|
|
description: 'Accessibility label for the control button (opens popover)',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const defaultControl = createTypographyControl({ value: 77, min: 0, max: 100, step: 1 });
|
|
const atMinimumControl = createTypographyControl({ value: 0, min: 0, max: 100, step: 1 });
|
|
const atMaximumControl = createTypographyControl({ value: 100, min: 0, max: 100, step: 1 });
|
|
const withFloatControl = createTypographyControl({ value: 77.5, min: 0, max: 100, step: 0.1 });
|
|
const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 100, step: 1 });
|
|
</script>
|
|
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
control: defaultControl,
|
|
}}
|
|
>
|
|
<ComboControl control={defaultControl} />
|
|
</Story>
|
|
|
|
<Story
|
|
name="At Minimum"
|
|
args={{
|
|
control: atMinimumControl,
|
|
}}
|
|
>
|
|
<ComboControl control={atMinimumControl} />
|
|
</Story>
|
|
|
|
<Story
|
|
name="At Maximum"
|
|
args={{
|
|
control: atMaximumControl,
|
|
}}
|
|
>
|
|
<ComboControl control={atMaximumControl} />
|
|
</Story>
|
|
|
|
<Story
|
|
name="With Float"
|
|
args={{
|
|
control: withFloatControl,
|
|
}}
|
|
>
|
|
<ComboControl control={withFloatControl} />
|
|
</Story>
|
|
|
|
<Story
|
|
name="Custom Labels"
|
|
args={{
|
|
control: customLabelsControl,
|
|
decreaseLabel: 'Decrease font size',
|
|
increaseLabel: 'Increase font size',
|
|
controlLabel: 'Open font size controls',
|
|
}}
|
|
>
|
|
<ComboControl
|
|
control={customLabelsControl}
|
|
decreaseLabel="Decrease font size"
|
|
increaseLabel="Increase font size"
|
|
controlLabel="Open font size controls"
|
|
/>
|
|
</Story>
|