From 445de5955cae750bb4529cefaef7b203f381c6a4 Mon Sep 17 00:00:00 2001
From: Steven Balasta <sbal13@gmail.com>
Date: Tue, 17 Sep 2024 16:28:34 -0400
Subject: [PATCH 1/2] DATA-3167 add progress variant of badge

---
 packages/core/src/lib/__tests__/badge.spec.ts | 13 +++++
 packages/core/src/lib/badge.svelte            | 52 ++++++++++++-------
 .../core/src/lib/progress/progress.svelte     |  1 +
 packages/core/src/routes/+page.svelte         |  6 ++-
 4 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/lib/__tests__/badge.spec.ts b/packages/core/src/lib/__tests__/badge.spec.ts
index f30eec003..0859276cb 100644
--- 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
index 4505e886e..420b67717 100644
--- 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
index 4da3f57ac..f66cf93e7 100644
--- 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
index e16850ea1..4aa084887 100644
--- 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 -->

From c16be2ff0349df95672eb40370f225cd68d555d3 Mon Sep 17 00:00:00 2001
From: Steven Balasta <sbal13@gmail.com>
Date: Wed, 18 Sep 2024 11:37:20 -0400
Subject: [PATCH 2/2] DATA-3167 bump

---
 packages/core/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 69624a65e..ca02ddc03 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.150",
+  "version": "0.0.151",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",