From 6cbc8560a1d28995abb8c7a864debffe6496aab3 Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Tue, 5 Dec 2023 17:37:17 +0100
Subject: [PATCH] feat(progress-tracker): add documentation and few tweaks

---
 .../src/ProgressTracker.doc.mdx               |  6 ++++++
 .../src/ProgressTracker.stories.tsx           | 20 ++++++++++++++++++-
 .../src/ProgressTrackerStep.styles.ts         |  2 +-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/components/progress-tracker/src/ProgressTracker.doc.mdx b/packages/components/progress-tracker/src/ProgressTracker.doc.mdx
index f88f419892..6f5fe671c5 100644
--- a/packages/components/progress-tracker/src/ProgressTracker.doc.mdx
+++ b/packages/components/progress-tracker/src/ProgressTracker.doc.mdx
@@ -41,3 +41,9 @@ import { ProgressTracker } from '@spark-ui/progress-tracker'
 ### Default
 
 <Canvas of={stories.Default} />
+
+### Sizes
+
+Use `size` prop to set the size of the progress indicators.
+
+<Canvas of={stories.Size} />
diff --git a/packages/components/progress-tracker/src/ProgressTracker.stories.tsx b/packages/components/progress-tracker/src/ProgressTracker.stories.tsx
index bb499e19dd..6d76f91030 100644
--- 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,6 +10,8 @@ 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" />
@@ -16,3 +19,18 @@ export const Default: StoryFn = _args => (
     <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
index 3482f072c4..16b5a40bf6 100644
--- 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',
       },