feat(progress-tracker): add documentation and few tweaks

adevinta · Dec 6, 2023 · a8daab4 · a8daab4
1 parent 045a052
commit a8daab4
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
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 '@docs/helpers/ArgTypes'
+import { Kbd } from '@spark-ui/kbd'
 
 import { ProgressTracker } from '.'
 
@@ -41,3 +42,31 @@ import { ProgressTracker } from '@spark-ui/progress-tracker'
 ### Default
 
 <Canvas of={stories.Default} />
+
+### Sizes
+
+Use `size` prop to set the size of the progress indicators. Smallest size doesn't get any content.
+
+<Canvas of={stories.Size} />
+
+### Intent
+
+Use `intent` prop to set the color intent.
+
+### Design
+
+Use `design` prop to set the look and feel.
+
+### Disabled
+
+Use `disabled` prop on a step to disable it.
+
+### Orientation
+
+## Accessibility
+
+### 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,7 @@
+import { StoryLabel } from '@docs/helpers/StoryLabel'
 import { Meta, StoryFn } from '@storybook/react'
 
-import { ProgressTracker } from '.'
+import { ProgressTracker, type ProgressTrackerProps } from '.'
 
 const meta: Meta<typeof ProgressTracker> = {
   title: 'Experimental/ProgressTracker',
@@ -9,10 +10,27 @@ const meta: Meta<typeof ProgressTracker> = {
 
 export default meta
 
+const sizes: ProgressTrackerProps['size'][] = ['sm', 'md', 'lg']
+
 export const Default: StoryFn = _args => (
   <ProgressTracker stepIndex={1} onStepClick={id => console.log('Clicked on', id)}>
     <ProgressTracker.Step label="Etape 1" />
     <ProgressTracker.Step label="Etape 2" />
     <ProgressTracker.Step label="Etape 3" />
   </ProgressTracker>
 )
+
+export const Size: StoryFn = _args => (
+  <div className="flex flex-wrap items-center gap-md">
+    {sizes.map(size => (
+      <div key={size}>
+        <StoryLabel>{`${size}${size === 'lg' ? ' (default)' : ''}`}</StoryLabel>
+        <ProgressTracker size={size as ProgressTrackerProps['size']}>
+          <ProgressTracker.Step label="Etape 1" />
+          <ProgressTracker.Step label="Etape 2" />
+          <ProgressTracker.Step label="Etape 3" />
+        </ProgressTracker>
+      </div>
+    ))}
+  </div>
+)
diff --git a/packages/components/progress-tracker/src/ProgressTrackerStep.styles.ts b/packages/components/progress-tracker/src/ProgressTrackerStep.styles.ts
@@ -51,7 +51,7 @@ export const stepButtonVariant = cva(
   {
     variants: {
       size: {
-        sm: ['before:w-sz-16 before:h-sz-16', 'before:content-["_"]'],
+        sm: ['before:w-sz-16 before:h-sz-16', 'before:!content-["_"]'],
         md: 'before:w-sz-24 before:h-sz-24',
         lg: 'before:w-sz-32 before:h-sz-32',
       },