From ae57665ce3053d7e869bf3700de0ed248653a03b Mon Sep 17 00:00:00 2001
From: Micheal Parks <103450731+micheal-parks@users.noreply.github.com>
Date: Wed, 24 Apr 2024 14:34:09 -0400
Subject: [PATCH] Add progress component (#514)

---
 packages/core/package.json                    |  2 +-
 packages/core/src/lib/button/button.svelte    |  2 +-
 packages/core/src/lib/button/progress.svelte  | 35 ---------------
 packages/core/src/lib/index.ts                |  1 +
 .../core/src/lib/progress/progress.svelte     | 45 +++++++++++++++++++
 packages/core/src/routes/+page.svelte         |  6 +++
 packages/storybook/package.json               |  1 +
 packages/storybook/src/stories/progress.mdx   | 26 +++++++++++
 .../src/stories/progress.stories.svelte       | 24 ++++++++++
 9 files changed, 105 insertions(+), 37 deletions(-)
 delete mode 100644 packages/core/src/lib/button/progress.svelte
 create mode 100644 packages/core/src/lib/progress/progress.svelte
 create mode 100644 packages/storybook/src/stories/progress.mdx
 create mode 100644 packages/storybook/src/stories/progress.stories.svelte

diff --git a/packages/core/package.json b/packages/core/package.json
index 41a20308..586ca48e 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.113",
+  "version": "0.0.114",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/core/src/lib/button/button.svelte b/packages/core/src/lib/button/button.svelte
index bb14e83c..2ecc1713 100644
--- a/packages/core/src/lib/button/button.svelte
+++ b/packages/core/src/lib/button/button.svelte
@@ -13,7 +13,7 @@ For user triggered actions.
 import cx from 'classnames';
 import { Icon, type IconName } from '$lib';
 import { preventHandler } from '$lib/prevent-handler';
-import Progress from './progress.svelte';
+import Progress from '../progress/progress.svelte';
 
 /** Whether or not the button accepts clicks. */
 export let disabled = false;
diff --git a/packages/core/src/lib/button/progress.svelte b/packages/core/src/lib/button/progress.svelte
deleted file mode 100644
index 2f57ceeb..00000000
--- a/packages/core/src/lib/button/progress.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-export let variant: 'dark' | 'light';
-</script>
-
-<!-- @TODO(mp) Rip this out and make it our canonical loader. -->
-<div class="container -ml-1 flex w-4 items-center p-[1.5px]">
-  {#each { length: 8 } as _, index}
-    <div
-      style="
-        transform: rotate({index * 45}deg);
-        animation-delay: {index * 100}ms;
-      "
-      class="pill absolute -mt-[0.5px] h-px w-[3px] rounded-[1px] {variant ===
-      'dark'
-        ? 'bg-gray-8'
-        : 'bg-white'}"
-    />
-  {/each}
-</div>
-
-<style>
-.pill {
-  transform-origin: 6.5px 0.5px;
-  animation: 0.8s linear 0s infinite fadeout;
-}
-
-@keyframes fadeout {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
-</style>
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index dea71200..21d61a32 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.ts
@@ -55,6 +55,7 @@ export { preventHandler, preventKeyboardHandler } from './prevent-handler';
 
 export * from './select';
 
+export { default as Progress } from './progress/progress.svelte';
 export { default as Switch } from './switch.svelte';
 export { default as Radio } from './radio.svelte';
 export { default as Table, type TableVariant } from './table/table.svelte';
diff --git a/packages/core/src/lib/progress/progress.svelte b/packages/core/src/lib/progress/progress.svelte
new file mode 100644
index 00000000..09662e37
--- /dev/null
+++ b/packages/core/src/lib/progress/progress.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+import cx from 'classnames';
+export let size: 'small' | 'medium' | 'large' = 'small';
+export let variant: 'dark' | 'light' = 'dark';
+</script>
+
+<div
+  class={cx(
+    'container -ml-1 flex h-4 w-4 items-center justify-center p-[1.5px]',
+    {
+      '': size === 'small',
+      'scale-[1.125]': size === 'medium',
+      'scale-[1.5]': size === 'large',
+    }
+  )}
+>
+  {#each { length: 8 } as _, index}
+    <div
+      style="
+          transform: rotate({index * 45}deg);
+          animation-delay: {index * 100}ms;
+        "
+      class="pill absolute -mt-[0.5px] h-px w-[3px] rounded-[1px] {variant ===
+      'dark'
+        ? 'bg-gray-8'
+        : 'bg-white'}"
+    />
+  {/each}
+</div>
+
+<style>
+.pill {
+  transform-origin: 6.5px 0.5px;
+  animation: 0.8s linear 0s infinite fadeout;
+}
+
+@keyframes fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+</style>
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index b262d613..7d669176 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -41,6 +41,7 @@ import {
   Modal,
   CodeSnippet,
   RangeInput,
+  Progress,
 } from '$lib';
 import { uniqueId } from 'lodash-es';
 
@@ -519,6 +520,11 @@ const onHoverDelayMsInput = (event: Event) => {
   <h1 class="text-2xl">Breadcrumbs</h1>
   <Breadcrumbs crumbs={['Chocolate Chip', 'Oatmeal Raisin']} />
 
+  <!-- Progress -->
+  <Progress size="small" />
+  <Progress size="medium" />
+  <Progress size="large" />
+
   <!-- Button -->
   <h1 class="text-2xl">Button</h1>
 
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 6e048dfb..2431fe9f 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -9,6 +9,7 @@
     "check-lint": "pnpm run _prettier --check && pnpm run _eslint",
     "format": "pnpm run _prettier --write",
     "storybook": "storybook dev -p 6006",
+    "dev": "storybook dev -p 6006",
     "build": "storybook build --docs -o prime",
     "_prettier": "prettier \"**/*.{js,cjs,ts,svelte,css,json,yml,yaml,md,mdx}\"",
     "_eslint": "eslint \".*.cjs\" \"**/*.{js,cjs,ts,svelte}\""
diff --git a/packages/storybook/src/stories/progress.mdx b/packages/storybook/src/stories/progress.mdx
new file mode 100644
index 00000000..0e18567d
--- /dev/null
+++ b/packages/storybook/src/stories/progress.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import * as ProgressStories from './progress.stories.svelte';
+
+<Meta title='Elements/Progress' />
+
+# Progress
+
+```ts
+import { Progress } from '@viamrobotics/prime-core';
+```
+
+<Canvas>
+  <Story of={ProgressStories.Default} />
+</Canvas>
+
+<Canvas>
+  <Story of={ProgressStories.Light} />
+</Canvas>
+
+<Canvas>
+  <Story of={ProgressStories.Medium} />
+</Canvas>
+
+<Canvas>
+  <Story of={ProgressStories.Large} />
+</Canvas>
diff --git a/packages/storybook/src/stories/progress.stories.svelte b/packages/storybook/src/stories/progress.stories.svelte
new file mode 100644
index 00000000..e90707d3
--- /dev/null
+++ b/packages/storybook/src/stories/progress.stories.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+import { Meta, Story } from '@storybook/addon-svelte-csf';
+import { Progress } from '@viamrobotics/prime-core';
+</script>
+
+<Meta title="Elements/Progress" />
+
+<Story name="Default">
+  <Progress />
+</Story>
+
+<Story name="Light">
+  <div class="-m-10 bg-gray-9 p-10">
+    <Progress variant="light" />
+  </div>
+</Story>
+
+<Story name="Medium">
+  <Progress size="medium" />
+</Story>
+
+<Story name="Large">
+  <Progress size="large" />
+</Story>