Ilia Mashkov
53 lines
1.5 KiB
Svelte
53 lines
1.5 KiB
Svelte
<script module lang="ts">
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import StatGroup from './StatGroup.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/StatGroup',
|
|
component: StatGroup,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: { component: 'Horizontal row of Stat items with automatic separators between them.' },
|
|
story: { inline: false },
|
|
},
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
stats: {
|
|
control: 'object',
|
|
description: 'Array of stat items with label, value, and optional variant',
|
|
},
|
|
class: {
|
|
control: 'text',
|
|
description: 'Additional CSS classes',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { ComponentProps } from 'svelte';
|
|
</script>
|
|
|
|
<Story name="Default/Basic" args={{ stats: [{ label: 'Size', value: '16px' }, { label: 'Weight', value: 400 }] }}>
|
|
{#snippet template(args: ComponentProps<typeof StatGroup>)}
|
|
<StatGroup {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Three stats"
|
|
args={{ stats: [{ label: 'Size', value: '24px' }, { label: 'Weight', value: 700 }, { label: 'Line height', value: 1.5 }] }}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof StatGroup>)}
|
|
<StatGroup {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="Single stat" args={{ stats: [{ label: 'Style', value: 'Italic' }] }}>
|
|
{#snippet template(args: ComponentProps<typeof StatGroup>)}
|
|
<StatGroup {...args} />
|
|
{/snippet}
|
|
</Story>
|