DATA-3167 add progress variant of badge (#578)

viamrobotics · Sep 18, 2024 · e19992c · e19992c
1 parent 643b731
commit e19992c
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/packages/core/src/lib/__tests__/badge.spec.ts b/packages/core/src/lib/__tests__/badge.spec.ts
@@ -69,6 +69,19 @@ describe('Badge', () => {
     );
   });
 
+  it('Renders a progress badge with spinning loader if the variant is specified as progress', () => {
+    render(Badge, { variant: 'progress', label: 'Progress' });
+    const badge = screen.getByText('Progress');
+    const progress = screen.getByLabelText(/progress spinner/iu);
+
+    expect(badge).toHaveClass(
+      'border-info-medium',
+      'bg-info-light',
+      'text-info-dark'
+    );
+    expect(progress).toBeInTheDocument();
+  });
+
   it('Renders with the passed cx classes', () => {
     render(Badge, {
       label: 'Inactive',

diff --git a/packages/core/src/lib/badge.svelte b/packages/core/src/lib/badge.svelte
@@ -14,34 +14,46 @@
 
 <script lang="ts">
 import cx from 'classnames';
+import Progress from './progress/progress.svelte';
 
 /** The badge text. */
 export let label = '';
 
 /** The color theme of the badge. */
-export let variant: 'success' | 'warning' | 'danger' | 'inactive' | 'neutral' =
-  'inactive';
+export let variant:
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'inactive'
+  | 'neutral'
+  | 'progress' = 'inactive';
 
 /** Additional CSS classes to pass to the badge. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
 </script>
 
-<small
-  class={cx(
-    'inline-block rounded-full border px-2.5 py-0.5 text-xs',
-    {
-      'border-success-medium bg-success-light text-success-dark':
-        variant === 'success',
-      'border-warning-medium bg-warning-light text-warning-dark':
-        variant === 'warning',
-      'border-danger-medium bg-danger-light text-danger-dark':
-        variant === 'danger',
-      'border-medium bg-disabled-light text-default': variant === 'inactive',
-      'border-info-medium bg-info-light text-info-dark': variant === 'neutral',
-    },
-    extraClasses
-  )}
->
-  {label}
-</small>
+<div class="inline-block">
+  <small
+    class={cx(
+      'flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs',
+      {
+        'border-success-medium bg-success-light text-success-dark':
+          variant === 'success',
+        'border-warning-medium bg-warning-light text-warning-dark':
+          variant === 'warning',
+        'border-danger-medium bg-danger-light text-danger-dark':
+          variant === 'danger',
+        'border-medium bg-disabled-light text-default': variant === 'inactive',
+        'border-info-medium bg-info-light text-info-dark':
+          variant === 'neutral' || variant === 'progress',
+      },
+      extraClasses
+    )}
+  >
+    {#if variant === 'progress'}
+      <Progress />
+    {/if}
+    {label}
+  </small>
+</div>
diff --git a/packages/core/src/lib/progress/progress.svelte b/packages/core/src/lib/progress/progress.svelte
@@ -10,6 +10,7 @@ export let variant: 'dark' | 'light' = 'dark';
     'scale-[1.125]': size === 'medium',
     'scale-[1.5]': size === 'large',
   })}
+  aria-label="Progress spinner"
 >
   <div class="translate-x-[-6.5px]">
     {#each { length: 8 } as _, index}

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -462,7 +462,7 @@ const onHoverDelayMsInput = (event: Event) => {
 <div class="container mx-auto my-4 flex flex-col gap-8 p-4">
   <!-- Badge -->
   <h1 class="text-2xl">Badge</h1>
-  <div>
+  <div class="flex items-center gap-2">
     <Badge
       variant="inactive"
       label="Inactive"
@@ -483,6 +483,10 @@ const onHoverDelayMsInput = (event: Event) => {
       variant="neutral"
       label="Neutral"
     />
+    <Badge
+      variant="progress"
+      label="Progress"
+    />
   </div>
 
   <!-- Banner -->