81 lines
1.9 KiB
Svelte
81 lines
1.9 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import StatusIndicator from './StatusIndicator.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/StatusIndicator',
|
|
component: StatusIndicator,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Coloured dot with optional label. Dot can pulse for live states.',
|
|
},
|
|
story: { inline: false },
|
|
},
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
status: {
|
|
control: 'select',
|
|
options: ['active', 'inactive', 'warning', 'error'],
|
|
description: 'Status type',
|
|
},
|
|
label: {
|
|
control: 'text',
|
|
description: 'Optional label text',
|
|
},
|
|
pulse: {
|
|
control: 'boolean',
|
|
description: 'Enable pulsing animation',
|
|
defaultValue: false,
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<Story
|
|
name="Active status"
|
|
args={{ status: 'active', label: 'Active' }}
|
|
>
|
|
{#snippet template()}
|
|
<StatusIndicator status="active" label="Active" />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Inactive status"
|
|
args={{ status: 'inactive', label: 'Inactive' }}
|
|
>
|
|
{#snippet template()}
|
|
<StatusIndicator status="inactive" label="Inactive" />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Warning status"
|
|
args={{ status: 'warning', label: 'Warning' }}
|
|
>
|
|
{#snippet template()}
|
|
<StatusIndicator status="warning" label="Warning" />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Error status"
|
|
args={{ status: 'error', label: 'Error' }}
|
|
>
|
|
{#snippet template()}
|
|
<StatusIndicator status="error" label="Error" />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="With pulse"
|
|
args={{ status: 'active', label: 'Connected', pulse: true }}
|
|
>
|
|
{#snippet template()}
|
|
<StatusIndicator status="active" label="Connected" pulse={true} />
|
|
{/snippet}
|
|
</Story>
|