Merge pull request #1714 from adevinta/progress-tracker-base

feat(progress-tracker): add base markup for progress-tracker
adevinta · Jan 5, 2024 · e6279f7 · e6279f7
2 parents 0df36ae + 0ba3e16
commit e6279f7
Show file tree

Hide file tree

Showing 24 changed files with 1,531 additions and 23 deletions.
diff --git a/.nx/cache/nx-console-project-graph/project-graph.html b/.nx/cache/nx-console-project-graph/project-graph.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full w-full overflow-hidden">
+  <head>
+    <meta charset="utf-8" />
+    <title>Nx Workspace Project Graph</title>
+
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+    <script id="environment" src="static/environment.js"></script>
+
+    <!-- Theming -->
+    <script>
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      if (
+        localStorage.getItem('nx-dep-graph-theme') === 'dark' ||
+        (localStorage.getItem('nx-dep-graph-theme') === null &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches)
+      ) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    </script>
+  <link rel="stylesheet" href="static/styles.css"></head>
+
+  <body
+    class="h-full w-full overflow-hidden bg-white text-slate-500 dark:bg-slate-900 dark:text-slate-400"
+  >
+    <div class="flex h-full w-full overflow-hidden p-0" id="app"></div>
+  <script src="static/runtime.js" ></script><script src="static/polyfills.js" ></script><script src="static/styles.js" ></script><script src="static/main.js" ></script></body>
+</html>
diff --git a/.nx/cache/nx-console-project-graph/static/3rdpartylicenses.txt b/.nx/cache/nx-console-project-graph/static/3rdpartylicenses.txt
diff --git a/.nx/cache/nx-console-project-graph/static/environment.js b/.nx/cache/nx-console-project-graph/static/environment.js
diff --git a/.nx/cache/nx-console-project-graph/static/favicon.ico b/.nx/cache/nx-console-project-graph/static/favicon.ico
diff --git a/.nx/cache/nx-console-project-graph/static/main.js b/.nx/cache/nx-console-project-graph/static/main.js
diff --git a/.nx/cache/nx-console-project-graph/static/polyfills.js b/.nx/cache/nx-console-project-graph/static/polyfills.js
diff --git a/.nx/cache/nx-console-project-graph/static/runtime.js b/.nx/cache/nx-console-project-graph/static/runtime.js
diff --git a/.nx/cache/nx-console-project-graph/static/styles.css b/.nx/cache/nx-console-project-graph/static/styles.css
diff --git a/.nx/cache/nx-console-project-graph/static/styles.js b/.nx/cache/nx-console-project-graph/static/styles.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/progress-tracker/package.json b/packages/components/progress-tracker/package.json
@@ -22,7 +22,13 @@
   "scripts": {
     "build": "vite build"
   },
+  "dependencies": {
+    "@spark-ui/icon": "^2.1.0",
+    "@spark-ui/icons": "^1.21.3",
+    "class-variance-authority": "0.7.0"
+  },
   "peerDependencies": {
+    "@spark-ui/theme-utils": "^4.0.0",
     "react": "^16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0",
     "tailwindcss": "^3.0.0"

diff --git a/packages/components/progress-tracker/src/ProgressTracker.doc.mdx b/packages/components/progress-tracker/src/ProgressTracker.doc.mdx
@@ -1,5 +1,6 @@
 import { Meta, Canvas } from '@storybook/addon-docs'
-import { ArgTypes } from '@storybook/blocks';
+import { ArgTypes } from '@docs/helpers/ArgTypes'
+import { Kbd } from '@spark-ui/kbd'
 
 import { ProgressTracker } from '.'
 
@@ -20,12 +21,76 @@ npm install @spark-ui/progress-tracker
 ## Import
 
 ```tsx
-import { ProgressTracker } from "@spark-ui/progress-tracker"
+import { ProgressTracker } from '@spark-ui/progress-tracker'
 ```
 
 ## Props
 
-<ArgTypes of={ProgressTracker} />
+<ArgTypes
+  of={ProgressTracker}
+  description="Contains all the progress tracker component parts."
+  subcomponents={{
+    'ProgressTracker.Step': {
+      of: ProgressTracker.Step,
+      description: 'Contains the button associated to a step.',
+    },
+    'ProgressTracker.StepLabel': {
+      of: ProgressTracker.StepLabel,
+      description: 'The label describing the step.',
+    },
+    'ProgressTracker.StepIndicator': {
+      of: ProgressTracker.StepIndicator,
+      description: 'Contains the custom content of a step, for complete and incomplete states.',
+    },
+  }}
+/>
+
+## Usage
+
+### Default
+
+Step indicator content defaults to step index, or checkmark icon when completed. Use `StepIndicator` to customize this content, through `complete` and `incomplete` props.
 
-## Variants
 <Canvas of={stories.Default} />
+
+### Readonly
+
+Use `readOnly` prop to indicate that the component is not interactive.
+
+<Canvas of={stories.Readonly} />
+
+### Disabled
+
+Use `disabled` prop on a step to disable it.
+
+<Canvas of={stories.Disabled} />
+
+### Sizes
+
+Use `size` prop to set the size of the progress indicators. Smallest size doesn't get any content.
+
+<Canvas of={stories.Size} />
+
+### Orientation
+
+Use `orientation` prop to set `horizontal|vertical` orientation.
+
+<Canvas of={stories.Orientation} />
+
+### Intent
+
+Use `intent` prop to set the color.
+
+### Design
+
+Use `design` prop to set the look and feel.
+
+## Accessibility
+
+To enforce your implementation's accessibility we recommend using a specific `aria-label` on `ProgressTracker` root component.
+
+### Keyboard Interactions
+
+- <Kbd>Tab</Kbd>: Moves focus to the next step depending on `orientation`.
+- <Kbd>Space</Kbd>: Activates the step.
+- <Kbd>Enter</Kbd>: Activates the step.
diff --git a/packages/components/progress-tracker/src/ProgressTracker.stories.tsx b/packages/components/progress-tracker/src/ProgressTracker.stories.tsx
@@ -1,6 +1,9 @@
+import { StoryLabel } from '@docs/helpers/StoryLabel'
+import { Icon } from '@spark-ui/icon'
+import { BookmarkFill } from '@spark-ui/icons/dist/icons/BookmarkFill'
 import { Meta, StoryFn } from '@storybook/react'
 
-import { ProgressTracker } from '.'
+import { ProgressTracker, type ProgressTrackerProps } from '.'
 
 const meta: Meta<typeof ProgressTracker> = {
   title: 'Experimental/ProgressTracker',
@@ -9,4 +12,164 @@ const meta: Meta<typeof ProgressTracker> = {
 
 export default meta
 
-export const Default: StoryFn = _args => <ProgressTracker>Hello World!</ProgressTracker>
+const sizes: ProgressTrackerProps['size'][] = ['sm', 'md', 'lg']
+const orientations: ProgressTrackerProps['orientation'][] = ['horizontal', 'vertical']
+
+export const Default: StoryFn = _args => (
+  <div className="flex flex-wrap items-center gap-2xl">
+    <ProgressTracker
+      aria-label="Default progress tracker"
+      stepIndex={1}
+      onStepClick={id => console.log('Clicked on', id)}
+    >
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator />
+        <ProgressTracker.StepLabel>Build</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator />
+        <ProgressTracker.StepLabel>Deploy</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator />
+        <ProgressTracker.StepLabel>Iterate</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+    </ProgressTracker>
+
+    <ProgressTracker stepIndex={1} aria-label="Default progress tracker with custom indicators">
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator
+          complete={
+            <Icon>
+              <BookmarkFill />
+            </Icon>
+          }
+          incomplete="A"
+        />
+        <ProgressTracker.StepLabel>Build</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator incomplete="B" />
+        <ProgressTracker.StepLabel>Deploy</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator incomplete="C" />
+        <ProgressTracker.StepLabel>Iterate</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+    </ProgressTracker>
+
+    <ProgressTracker
+      stepIndex={1}
+      aria-label="Default progress tracker with empty incomplete indicator"
+    >
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator incomplete={null} />
+        <ProgressTracker.StepLabel>Build</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator incomplete={null} />
+        <ProgressTracker.StepLabel>Deploy</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+      <ProgressTracker.Step>
+        <ProgressTracker.StepIndicator incomplete={null} />
+        <ProgressTracker.StepLabel>Iterate</ProgressTracker.StepLabel>
+      </ProgressTracker.Step>
+    </ProgressTracker>
+  </div>
+)
+
+export const Disabled: StoryFn = _args => (
+  <ProgressTracker
+    aria-label="Progress tracker with disabled step"
+    stepIndex={1}
+    onStepClick={id => console.log('Clicked on', id)}
+  >
+    <ProgressTracker.Step>
+      <ProgressTracker.StepIndicator />
+      <ProgressTracker.StepLabel>Build</ProgressTracker.StepLabel>
+    </ProgressTracker.Step>
+    <ProgressTracker.Step>
+      <ProgressTracker.StepIndicator />
+      <ProgressTracker.StepLabel>Deploy</ProgressTracker.StepLabel>
+    </ProgressTracker.Step>
+    <ProgressTracker.Step disabled>
+      <ProgressTracker.StepIndicator />
+      <ProgressTracker.StepLabel>Iterate</ProgressTracker.StepLabel>
+    </ProgressTracker.Step>
+  </ProgressTracker>
+)
+
+export const Readonly: StoryFn = _args => (
+  <ProgressTracker aria-label="Non interactive progress tracker" stepIndex={1} readOnly>
+    <ProgressTracker.Step aria-label="Build" />
+    <ProgressTracker.Step aria-label="Deploy" />
+    <ProgressTracker.Step aria-label="Iterate" />
+  </ProgressTracker>
+)
+
+export const Size: StoryFn = _args => (
+  <div className="flex flex-wrap items-center gap-2xl">
+    {sizes.map(size => (
+      <div key={size}>
+        <StoryLabel>{`${size}${size === 'lg' ? ' (default)' : ''}`}</StoryLabel>
+
+        <ProgressTracker
+          aria-label={`Progress tracker "${size}"`}
+          stepIndex={1}
+          size={size as ProgressTrackerProps['size']}
+        >
+          <ProgressTracker.Step>
+            <ProgressTracker.StepIndicator />
+            <ProgressTracker.StepLabel>Build</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+          <ProgressTracker.Step>
+            <ProgressTracker.StepIndicator />
+            <ProgressTracker.StepLabel>Deploy</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+          <ProgressTracker.Step>
+            <ProgressTracker.StepIndicator />
+            <ProgressTracker.StepLabel>Iterate</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+        </ProgressTracker>
+      </div>
+    ))}
+  </div>
+)
+
+export const Orientation: StoryFn = _args => (
+  <div className="flex flex-wrap gap-2xl">
+    {orientations.map(orientation => (
+      <div key={orientation}>
+        <StoryLabel>{`${orientation}${
+          orientation === 'horizontal' ? ' (default)' : ''
+        }`}</StoryLabel>
+
+        <ProgressTracker
+          stepIndex={1}
+          aria-label={`Progress tracker with "${orientation}" orientation`}
+          orientation={orientation as ProgressTrackerProps['orientation']}
+          {...(orientation === 'vertical' && {
+            className: 'w-[120px]',
+          })}
+        >
+          <ProgressTracker.Step>
+            <ProgressTracker.StepIndicator />
+            <ProgressTracker.StepLabel>Build</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+          <ProgressTracker.Step>
+            <ProgressTracker.StepIndicator />
+            <ProgressTracker.StepLabel>Deploy with confidence</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+          <ProgressTracker.Step>
+            <ProgressTracker.StepIndicator />
+            <ProgressTracker.StepLabel>Iterate again and again</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+          <ProgressTracker.Step>
+            <ProgressTracker.StepIndicator />
+            <ProgressTracker.StepLabel>Repeat</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+        </ProgressTracker>
+      </div>
+    ))}
+  </div>
+)
diff --git a/packages/components/progress-tracker/src/ProgressTracker.styles.ts b/packages/components/progress-tracker/src/ProgressTracker.styles.ts
@@ -0,0 +1,7 @@
+import { cx } from 'class-variance-authority'
+
+export const progressList = cx([
+  'flex flex-nowrap items-start group/list',
+  'data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',
+  'data-[orientation=vertical]:flex-col',
+])