98 lines
2.4 KiB
Svelte
98 lines
2.4 KiB
Svelte
|
<script module>
|
||
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||
|
|
import TechText from './TechText.svelte';
|
||
|
|
|
||
|
|
const { Story } = defineMeta({
|
||
|
|
title: 'Shared/TechText',
|
||
|
|
component: TechText,
|
||
|
|
tags: ['autodocs'],
|
||
|
|
parameters: {
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component: 'Monospace <code> element for technical values, measurements, identifiers.',
|
||
|
|
},
|
||
|
|
story: { inline: false },
|
||
|
|
},
|
||
|
|
layout: 'centered',
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
variant: {
|
||
|
|
control: 'select',
|
||
|
|
options: ['default', 'accent', 'muted', 'success', 'warning', 'error'],
|
||
|
|
description: 'Text variant',
|
||
|
|
defaultValue: 'muted',
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
control: 'select',
|
||
|
|
options: ['xs', 'sm', 'md'],
|
||
|
|
description: 'Text size',
|
||
|
|
defaultValue: 'sm',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="Default variant"
|
||
|
|
args={{ variant: 'default', size: 'sm' }}
|
||
|
|
>
|
||
|
|
{#snippet template()}
|
||
|
|
<TechText variant="default" size="sm">0x1F4A9</TechText>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="Accent variant"
|
||
|
|
args={{ variant: 'accent', size: 'sm' }}
|
||
|
|
>
|
||
|
|
{#snippet template()}
|
||
|
|
<TechText variant="accent" size="sm">0x1F4A9</TechText>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="Muted variant"
|
||
|
|
args={{ variant: 'muted', size: 'sm' }}
|
||
|
|
>
|
||
|
|
{#snippet template()}
|
||
|
|
<TechText variant="muted" size="sm">0x1F4A9</TechText>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="Success variant"
|
||
|
|
args={{ variant: 'success', size: 'sm' }}
|
||
|
|
>
|
||
|
|
{#snippet template()}
|
||
|
|
<TechText variant="success" size="sm">0x1F4A9</TechText>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="Warning variant"
|
||
|
|
args={{ variant: 'warning', size: 'sm' }}
|
||
|
|
>
|
||
|
|
{#snippet template()}
|
||
|
|
<TechText variant="warning" size="sm">0x1F4A9</TechText>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="Error variant"
|
||
|
|
args={{ variant: 'error', size: 'sm' }}
|
||
|
|
>
|
||
|
|
{#snippet template()}
|
||
|
|
<TechText variant="error" size="sm">0x1F4A9</TechText>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story name="All sizes">
|
||
|
|
{#snippet template()}
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<TechText variant="default" size="xs">XS: font-family-16px</TechText>
|
||
|
|
<TechText variant="default" size="sm">SM: font-family-16px</TechText>
|
||
|
|
<TechText variant="default" size="md">MD: font-family-16px</TechText>
|
||
|
|
</div>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|