Add progress component (viamrobotics#514)

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.113",
+  "version": "0.0.114",
   "publishConfig": {
     "access": "public"
   },

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;

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';

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>

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>
 

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}\""

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>

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>