feat(progress-tracker): add design prop with style refacto

packages/components/progress-tracker/src/ProgressTracker.doc.mdx

@@ -77,16 +77,18 @@ Use `intent` prop to set the color of the progress indicators.
 
 <Canvas of={stories.Intent} />
 
+### Design
+
+Use `design` prop to set the look and feel.
+
+<Canvas of={stories.Design} />
+
 ### Orientation
 
 Use `orientation` prop to set `horizontal|vertical` orientation.
 
 <Canvas of={stories.Orientation} />
 
-### Design
-
-Use `design` prop to set the look and feel.
-
 ## Accessibility
 
 ### Keyboard Interactions

packages/components/progress-tracker/src/ProgressTracker.stories.tsx

@@ -14,6 +14,7 @@ const meta: Meta<typeof ProgressTracker> = {
 export default meta
 
 const sizes: ProgressTrackerProps['size'][] = ['sm', 'md', 'lg']
+const designs: ProgressTrackerProps['design'][] = ['outline', 'tinted']
 const intents: ProgressTrackerProps['intent'][] = [
   'basic',
   'support',
@@ -132,6 +133,30 @@ export const Size: StoryFn = _args => (
   </div>
 )
 
+export const Design: StoryFn = _args => (
+  <div className="flex flex-wrap items-center gap-2xl">
+    {designs.map(design => (
+      <div key={design}>
+        <StoryLabel>{`${design}${design === 'outline' ? ' (default)' : ''}`}</StoryLabel>
+        <ProgressTracker stepIndex={1} design={design as ProgressTrackerProps['design']}>
+          <ProgressTracker.Step>
+            <ProgressTrackerStepIndicator />
+            <ProgressTracker.StepLabel>Build</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+          <ProgressTracker.Step>
+            <ProgressTrackerStepIndicator />
+            <ProgressTracker.StepLabel>Deploy</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+          <ProgressTracker.Step>
+            <ProgressTrackerStepIndicator />
+            <ProgressTracker.StepLabel>Iterate</ProgressTracker.StepLabel>
+          </ProgressTracker.Step>
+        </ProgressTracker>
+      </div>
+    ))}
+  </div>
+)
+
 export const Intent: StoryFn = _args => (
   <div className="flex flex-wrap items-center gap-2xl">
     {intents.map(intent => (

packages/components/progress-tracker/src/ProgressTracker.tsx

@@ -10,7 +10,7 @@ import type { StepIndicatorVariantProps } from './ProgressTrackerStepIndicator.s
 
 export interface ProgressTrackerProps
   extends ComponentPropsWithoutRef<'div'>,
-    Pick<StepIndicatorVariantProps, 'size' | 'intent'> {
+    Pick<StepIndicatorVariantProps, 'size' | 'intent' | 'design'> {
   /**
    * The orientation of the progress tracker
    * @default 'horizontal"
@@ -40,6 +40,7 @@ export const ProgressTracker = forwardRef<HTMLDivElement, PropsWithChildren<Prog
       readOnly = false,
       intent = 'basic',
       size = 'lg',
+      design = 'outline',
       orientation = 'horizontal',
       children,
       className,
@@ -61,7 +62,7 @@ export const ProgressTracker = forwardRef<HTMLDivElement, PropsWithChildren<Prog
 
     return (
       <ProgressTrackerContext.Provider
-        value={{ stepIndex, onStepClick, steps, setSteps, size, intent, readOnly }}
+        value={{ stepIndex, onStepClick, steps, setSteps, size, intent, design, readOnly }}
       >
         <Component
           ref={ref}

packages/components/progress-tracker/src/ProgressTrackerContext.ts

@@ -4,7 +4,10 @@ import type { ProgressTrackerProps } from './ProgressTracker'
 
 // Main Progress Tracker
 export type ProgressTrackerContextInterface = Required<
-  Pick<ProgressTrackerProps, 'stepIndex' | 'onStepClick' | 'size' | 'intent' | 'readOnly'>
+  Pick<
+    ProgressTrackerProps,
+    'stepIndex' | 'onStepClick' | 'size' | 'intent' | 'design' | 'readOnly'
+  >
 > & {
   steps: Map<string, string[]>
   setSteps: Dispatch<SetStateAction<Map<string, string[]>>>

packages/components/progress-tracker/src/ProgressTrackerStepIndicator.styles.ts

@@ -1,11 +1,13 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 
+import { outlineVariants, tintedVariants } from './stepIndicatorVariants'
+
 export const stepIndicatorVariant = cva(
   [
     'relative flex shrink-0 justify-center items-center',
-    'rounded-full border-sm',
+    'rounded-full',
     'text-body-2 font-bold',
-    'group-disabled/btn:opacity-dim-3 group-disabled/btn:bg-transparent',
+    'group-disabled/btn:opacity-dim-3',
   ],
   {
     variants: {
@@ -27,120 +29,38 @@ export const stepIndicatorVariant = cva(
         ],
       },
       intent: {
-        basic: 'text-on-basic-container',
-        support: 'text-on-support-container',
-        main: 'text-on-main-container',
-        neutral: 'text-on-neutral-container',
-        info: 'text-on-info-container',
-        accent: 'text-on-accent-container',
-        danger: 'text-on-error-container',
-        alert: 'text-on-alert-container',
-        success: 'text-on-success-container',
+        basic: '',
+        support: '',
+        main: '',
+        neutral: '',
+        info: '',
+        accent: '',
+        danger: '',
+        alert: '',
+        success: '',
+      },
+      design: {
+        outline: 'border-sm',
+        tinted: '',
       },
       state: {
-        complete: ['group-data-[interactive=false]/btn:group-hover/btn:bg-transparent'],
-        incomplete: ['group-data-[interactive=false]/btn:group-hover/btn:bg-transparent'],
+        complete: '',
+        incomplete: '',
         active: '',
       },
     },
-    compoundVariants: [
-      // Complete/Incomplete
-      {
-        intent: 'basic',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-basic/dim-5',
-      },
-      {
-        intent: 'support',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-support/dim-5',
-      },
-      {
-        intent: 'main',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-main/dim-5',
-      },
-      {
-        intent: 'neutral',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-neutral/dim-5',
-      },
-      {
-        intent: 'info',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-info/dim-5',
-      },
-      {
-        intent: 'accent',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-accent/dim-5',
-      },
-      {
-        intent: 'danger',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-error/dim-5',
-      },
-      {
-        intent: 'alert',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-alert/dim-5',
-      },
-      {
-        intent: 'success',
-        state: ['complete', 'incomplete'],
-        class: 'group-data-[interactive=true]/btn:group-hover/btn:bg-success/dim-5',
-      },
-      // Active
-      {
-        intent: 'basic',
-        state: 'active',
-        class: 'bg-basic-container',
-      },
-      {
-        intent: 'support',
-        state: 'active',
-        class: 'bg-support-container',
-      },
-      {
-        intent: 'main',
-        state: 'active',
-        class: 'bg-main-container',
-      },
-      {
-        intent: 'neutral',
-        state: 'active',
-        class: 'bg-neutral-container',
-      },
-      {
-        intent: 'info',
-        state: 'active',
-        class: 'bg-info-container',
-      },
-      {
-        intent: 'accent',
-        state: 'active',
-        class: 'bg-accent-container',
-      },
-      {
-        intent: 'danger',
-        state: 'active',
-        class: 'bg-error-container',
-      },
-      {
-        intent: 'alert',
-        state: 'active',
-        class: 'bg-alert-container',
-      },
-      {
-        intent: 'success',
-        state: 'active',
-        class: 'bg-success-container',
-      },
-    ],
+    /**
+     * Known type issue with CVA compoundVariants and VS Code/Intellisense:
+     * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163
+     * */
+    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+    /* @ts-ignore */
+    compoundVariants: [...outlineVariants, ...tintedVariants],
     defaultVariants: {
       size: 'lg',
       state: 'incomplete',
       intent: 'basic',
+      design: 'outline',
     },
   }
 )

packages/components/progress-tracker/src/ProgressTrackerStepIndicator.tsx

@@ -21,11 +21,11 @@ export const ProgressTrackerStepIndicator = ({
   incomplete,
   className,
 }: ProgressTrackerStepIndicatorProps) => {
-  const { size, intent } = useProgressTrackerContext()
+  const { size, intent, design } = useProgressTrackerContext()
   const { index, state } = useProgressTrackerStepContext()
 
   return (
-    <span className={stepIndicatorVariant({ size, intent, state, className })}>
+    <span className={stepIndicatorVariant({ size, intent, design, state, className })}>
       {size !== 'sm' && (
         <>
           {state === 'complete' ? (

packages/components/progress-tracker/src/stepIndicatorVariants/index.ts

@@ -0,0 +1,2 @@
+export { outlineVariants } from './outline'
+export { tintedVariants } from './tinted'