feat(DotIndicator): create DotIndicator ui component
This commit is contained in:
Ilia Mashkov
189
src/shared/ui/DotIndicator/DotIndicator.stories.svelte
Normal file
189
src/shared/ui/DotIndicator/DotIndicator.stories.svelte
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
<script module>
|
||||||
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||||
|
import DotIndicator from './DotIndicator.svelte';
|
||||||
|
|
||||||
|
const { Story } = defineMeta({
|
||||||
|
title: 'Shared/DotIndicator',
|
||||||
|
component: DotIndicator,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component:
|
||||||
|
'Circular status indicator with size options and pulse animation. Use for showing online/offline status, loading states, or feedback indicators.',
|
||||||
|
},
|
||||||
|
story: { inline: false },
|
||||||
|
},
|
||||||
|
layout: 'centered',
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
variant: {
|
||||||
|
control: 'select',
|
||||||
|
options: ['online', 'offline', 'busy', 'away', 'success', 'warning', 'error'],
|
||||||
|
description: 'Status variant of the indicator',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
control: 'select',
|
||||||
|
options: ['sm', 'md', 'lg'],
|
||||||
|
description: 'Size of the indicator',
|
||||||
|
},
|
||||||
|
pulse: {
|
||||||
|
control: 'boolean',
|
||||||
|
description: 'Enable pulse animation',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Story name="Default">
|
||||||
|
{#snippet template(args)}
|
||||||
|
<DotIndicator {...args} />
|
||||||
|
{/snippet}
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="Variants">
|
||||||
|
{#snippet template(args)}
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="online" {...args} />
|
||||||
|
<span class="text-sm">Online</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="offline" {...args} />
|
||||||
|
<span class="text-sm">Offline</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="busy" {...args} />
|
||||||
|
<span class="text-sm">Busy</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="away" {...args} />
|
||||||
|
<span class="text-sm">Away</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="success" {...args} />
|
||||||
|
<span class="text-sm">Success</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="warning" {...args} />
|
||||||
|
<span class="text-sm">Warning</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="error" {...args} />
|
||||||
|
<span class="text-sm">Error</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/snippet}
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="Sizes">
|
||||||
|
{#snippet template(args)}
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator size="sm" {...args} />
|
||||||
|
<span class="text-sm text-xs">Small</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator size="md" {...args} />
|
||||||
|
<span class="text-sm">Medium</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator size="lg" {...args} />
|
||||||
|
<span class="text-sm">Large</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/snippet}
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="With Pulse">
|
||||||
|
{#snippet template(args)}
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="online" pulse {...args} />
|
||||||
|
<span class="text-sm">Online</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="busy" pulse {...args} />
|
||||||
|
<span class="text-sm">Busy</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="away" pulse {...args} />
|
||||||
|
<span class="text-sm">Away</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/snippet}
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="All Combinations">
|
||||||
|
{#snippet template(args)}
|
||||||
|
<div class="space-y-3">
|
||||||
|
<h3 class="text-sm font-semibold">Sizes</h3>
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="online" size="sm" {...args} />
|
||||||
|
<span class="text-sm text-xs">Small</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="online" size="md" {...args} />
|
||||||
|
<span class="text-sm">Medium</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="online" size="lg" {...args} />
|
||||||
|
<span class="text-sm">Large</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="text-sm font-semibold mt-4">Status Variants</h3>
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="online" {...args} />
|
||||||
|
<span class="text-sm">Online</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="offline" {...args} />
|
||||||
|
<span class="text-sm">Offline</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="busy" {...args} />
|
||||||
|
<span class="text-sm">Busy</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="away" {...args} />
|
||||||
|
<span class="text-sm">Away</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="text-sm font-semibold mt-4">Feedback Variants</h3>
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="success" {...args} />
|
||||||
|
<span class="text-sm">Success</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="warning" {...args} />
|
||||||
|
<span class="text-sm">Warning</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="error" {...args} />
|
||||||
|
<span class="text-sm">Error</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="text-sm font-semibold mt-4">With Pulse Animation</h3>
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="online" pulse {...args} />
|
||||||
|
<span class="text-sm">Online</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DotIndicator variant="busy" pulse {...args} />
|
||||||
|
<span class="text-sm">Busy</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/snippet}
|
||||||
|
</Story>
|
||||||
60
src/shared/ui/DotIndicator/DotIndicator.svelte
Normal file
60
src/shared/ui/DotIndicator/DotIndicator.svelte
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<!--
|
||||||
|
Component: DotIndicator
|
||||||
|
Circular status indicator with size options and pulse animation
|
||||||
|
-->
|
||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
/**
|
||||||
|
* Status variant of the indicator
|
||||||
|
* @default online
|
||||||
|
*/
|
||||||
|
variant?: 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error';
|
||||||
|
/**
|
||||||
|
* Size of the indicator
|
||||||
|
* @default md
|
||||||
|
*/
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
/**
|
||||||
|
* Enable pulse animation
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
pulse?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
variant = 'online',
|
||||||
|
size = 'md',
|
||||||
|
pulse = false,
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
const baseClasses = 'rounded-full';
|
||||||
|
|
||||||
|
const variantClasses = $derived(
|
||||||
|
variant === 'online' || variant === 'success'
|
||||||
|
? 'bg-green-500'
|
||||||
|
: variant === 'offline'
|
||||||
|
? 'bg-gray-400'
|
||||||
|
: variant === 'busy' || variant === 'error'
|
||||||
|
? 'bg-red-500'
|
||||||
|
: variant === 'away'
|
||||||
|
? 'bg-yellow-500'
|
||||||
|
: variant === 'warning'
|
||||||
|
? 'bg-yellow-500'
|
||||||
|
: 'bg-gray-400',
|
||||||
|
);
|
||||||
|
|
||||||
|
const sizeClasses = $derived(
|
||||||
|
size === 'sm'
|
||||||
|
? 'w-1.5 h-1.5'
|
||||||
|
: size === 'lg'
|
||||||
|
? 'w-3 h-3'
|
||||||
|
: 'w-2 h-2',
|
||||||
|
);
|
||||||
|
|
||||||
|
const pulseAnimation = $derived(pulse && 'animate-pulse');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="{baseClasses} {variantClasses} {sizeClasses} {pulseAnimation}"
|
||||||
|
aria-label="Status indicator"
|
||||||
|
></span>
|
||||||
Reference in New Issue
Block a user