From cfc34fd8aad9277c158f6ceec560601100d72e4e Mon Sep 17 00:00:00 2001
From: Steve Kinney <hello@stevekinney.net>
Date: Fri, 3 May 2024 12:30:06 -0600
Subject: [PATCH] Add stories & address accessibility issues with Compatibility
 Badge

---
 .../compatibility-badge.stories.svelte        | 102 ++++++++++++++++++
 src/lib/holocene/compatibility-badge.svelte   |  23 ++--
 2 files changed, 112 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/holocene/compatibility-badge.stories.svelte

diff --git a/src/lib/holocene/compatibility-badge.stories.svelte b/src/lib/holocene/compatibility-badge.stories.svelte
new file mode 100644
index 000000000..81a4cdea4
--- /dev/null
+++ b/src/lib/holocene/compatibility-badge.stories.svelte
@@ -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>
diff --git a/src/lib/holocene/compatibility-badge.svelte b/src/lib/holocene/compatibility-badge.svelte
index 3382c0100..f83613262 100644
--- a/src/lib/holocene/compatibility-badge.svelte
+++ b/src/lib/holocene/compatibility-badge.svelte
@@ -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>