-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add stories & address accessibility issues with Compatibility Badge (#…
- Loading branch information
1 parent
9c74b35
commit b9f8206
Showing
2 changed files
with
112 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| <script lang="ts" context="module"> | ||
| import { Story, Template } from '@storybook/addon-svelte-csf'; | ||
| import type { Meta } from '@storybook/svelte'; | ||
| import CompatibilityBadge from '$lib/holocene/compatibility-badge.svelte'; | ||
| export const meta = { | ||
| title: 'Compatibility Badge', | ||
| component: CompatibilityBadge, | ||
| args: { | ||
| defaultVersion: true, | ||
| active: false, | ||
| buildId: '1234567890', | ||
| }, | ||
| } satisfies Meta<CompatibilityBadge>; | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <CompatibilityBadge {...args} /> | ||
| </Template> | ||
|
|
||
| <Story name="Build ID" args={{ defaultVersion: false }} /> | ||
|
|
||
| <Story name="Active" args={{ defaultVersion: true, active: true }} /> | ||
|
|
||
| <Story name="Default Worker" let:args> | ||
| <CompatibilityBadge {...args}> | ||
| <span slot="default-worker">Default</span> | ||
| </CompatibilityBadge> | ||
| </Story> | ||
|
|
||
| <Story name="Overall Default Worker" let:args> | ||
| <CompatibilityBadge {...args}> | ||
| <span slot="overall-default-worker">Overall</span> | ||
| </CompatibilityBadge> | ||
| </Story> | ||
|
|
||
| <Story name="Default Worker (Active)" args={{ active: true }} let:args> | ||
| <CompatibilityBadge {...args}> | ||
| <span slot="default-worker">Default</span> | ||
| </CompatibilityBadge> | ||
| </Story> | ||
|
|
||
| <Story name="Overall Default Worker (Active)" args={{ active: true }} let:args> | ||
| <CompatibilityBadge {...args}> | ||
| <span slot="overall-default-worker">Overall</span> | ||
| </CompatibilityBadge> | ||
| </Story> | ||
|
|
||
| <Story | ||
| name="Build ID (Dark)" | ||
| args={{ defaultVersion: false }} | ||
| parameters={{ themes: { themeOverride: 'dark' } }} | ||
| /> | ||
|
|
||
| <Story | ||
| name="Active (Dark)" | ||
| args={{ defaultVersion: true, active: true }} | ||
| parameters={{ themes: { themeOverride: 'dark' } }} | ||
| /> | ||
|
|
||
| <Story | ||
| name="Default Worker (Dark)" | ||
| parameters={{ themes: { themeOverride: 'dark' } }} | ||
| let:args | ||
| > | ||
| <CompatibilityBadge {...args}> | ||
| <span slot="default-worker">Default</span> | ||
| </CompatibilityBadge> | ||
| </Story> | ||
|
|
||
| <Story | ||
| name="Overall Default Worker (Dark)" | ||
| parameters={{ themes: { themeOverride: 'dark' } }} | ||
| let:args | ||
| > | ||
| <CompatibilityBadge {...args}> | ||
| <span slot="overall-default-worker">Overall</span> | ||
| </CompatibilityBadge> | ||
| </Story> | ||
|
|
||
| <Story | ||
| name="Default Worker (Active, Dark)" | ||
| args={{ active: true }} | ||
| parameters={{ themes: { themeOverride: 'dark' } }} | ||
| let:args | ||
| > | ||
| <CompatibilityBadge {...args}> | ||
| <span slot="default-worker">Default</span> | ||
| </CompatibilityBadge> | ||
| </Story> | ||
|
|
||
| <Story | ||
| name="Overall Default Worker (Active, Dark)" | ||
| args={{ active: true }} | ||
| parameters={{ themes: { themeOverride: 'dark' } }} | ||
| let:args | ||
| > | ||
| <CompatibilityBadge {...args}> | ||
| <span slot="overall-default-worker">Overall</span> | ||
| </CompatibilityBadge> | ||
| </Story> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,28 @@ | ||
| <script lang="ts"> | ||
| import { twMerge as merge } from 'tailwind-merge'; | ||
| import Icon from '$lib/holocene/icon/icon.svelte'; | ||
| export let defaultVersion = false; | ||
| export let active = false; | ||
| export let buildId = ''; | ||
| export let buildId: string; | ||
| </script> | ||
|
|
||
| <p class="flex select-all gap-2 font-mono"> | ||
| {#if defaultVersion && buildId} | ||
| <span class:active-version={active} class:version={!active}> | ||
| <span | ||
| class={merge( | ||
| 'flex items-center gap-1 rounded border px-1 text-sm', | ||
| active && 'border-green-100 bg-green-100 text-green-800', | ||
| )} | ||
| > | ||
| <Icon name="merge" />{buildId} | ||
| <slot name="overall-default-worker" /> | ||
| <slot name="default-worker" /> | ||
| </span> | ||
| {:else if buildId} | ||
| <span class="version"> | ||
| <span class="flex items-center gap-1 rounded border px-1 text-sm"> | ||
| <Icon name="merge" />{buildId} | ||
| </span> | ||
| {/if} | ||
| </p> | ||
|
|
||
| <style lang="postcss"> | ||
| .version { | ||
| @apply flex items-center gap-1 rounded border px-1 text-sm; | ||
| } | ||
| .active-version { | ||
| @apply flex items-center gap-1 rounded bg-green-100 px-1 text-sm text-green-700; | ||
| } | ||
| </style> |