added color prop to ProgressStep

teamleadercrm · Sep 7, 2023 · 47fe299 · 47fe299
1 parent e7ad9e7
commit 47fe299
Show file tree

Hide file tree

Showing 2 changed files with 148 additions and 0 deletions.
diff --git a/src/components/progressTracker/ProgressStep.tsx b/src/components/progressTracker/ProgressStep.tsx
@@ -5,6 +5,7 @@ import theme from './theme.css';
 import Box from '../box';
 import { TextSmall } from '../typography';
 import { GenericComponent } from '../../@types/types';
+import { COLORS } from '@teamleader/ui-colors/constants';
 
 export interface ProgressStepProps {
   /** The label for the progress step */
@@ -15,6 +16,8 @@ export interface ProgressStepProps {
   active?: boolean;
   /** Whether or not the step has been completed */
   completed?: boolean;
+  /** Color theme of the progress step. */
+  color?: typeof COLORS[number];
   /** Callback function that is fired when the progress step is clicked */
   onClick?: () => void;
 }
@@ -24,13 +27,16 @@ const ProgressStep: GenericComponent<ProgressStepProps> = ({
   meta,
   active = false,
   completed = false,
+  color,
   onClick,
 }: ProgressStepProps) => {
+  const colorClassName = color || '';
   const classNames = cx(theme['step'], {
     [theme['is-active']]: active,
     [theme['is-completed']]: completed,
     [theme['is-clickable']]: !!onClick,
     [theme['has-meta']]: !!meta,
+    [theme[colorClassName]]: !!color,
   });
   return (
     <Box className={classNames}>

diff --git a/src/components/progressTracker/theme.css b/src/components/progressTracker/theme.css
@@ -259,6 +259,27 @@
   }
 }
 
+/* Step color override */
+.neutral.step {
+  &.is-completed,
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-neutral);
+    }
+  }
+
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-neutral-dark);
+    }
+  }
+
+  .status-bullet-halo {
+    background-color: var(--color-neutral);
+  }
+}
+
+
 .mint .step {
   &.is-completed,
   &.is-active {
@@ -281,6 +302,26 @@
   }
 }
 
+/* Step color override */
+.mint.step {
+  &.is-completed,
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-mint);
+    }
+  }
+
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-mint-dark);
+    }
+  }
+
+  .status-bullet-halo {
+    background-color: var(--color-mint);
+  }
+}
+
 .aqua .step {
   &.is-completed,
   &.is-active {
@@ -303,6 +344,26 @@
   }
 }
 
+/* Step color override */
+.aqua.step {
+  &.is-completed,
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-aqua);
+    }
+  }
+
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-aqua-dark);
+    }
+  }
+
+  .status-bullet-halo {
+    background-color: var(--color-aqua);
+  }
+}
+
 .violet .step {
   &.is-completed,
   &.is-active {
@@ -325,6 +386,27 @@
   }
 }
 
+/* Step color override */
+.violet.step {
+  &.is-completed,
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-violet);
+    }
+  }
+
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-violet-dark);
+    }
+  }
+
+  .status-bullet-halo {
+    background-color: var(--color-violet);
+  }
+}
+
+
 .gold .step {
   &.is-completed,
   &.is-active {
@@ -347,6 +429,26 @@
   }
 }
 
+/* Step color override */
+.gold.step {
+  &.is-completed,
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-gold);
+    }
+  }
+
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-gold-dark);
+    }
+  }
+
+  .status-bullet-halo {
+    background-color: var(--color-gold);
+  }
+}
+
 .ruby .step {
   &.is-completed,
   &.is-active {
@@ -369,6 +471,26 @@
   }
 }
 
+/* Step color override */
+.ruby.step {
+  &.is-completed,
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-ruby);
+    }
+  }
+
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-ruby-dark);
+    }
+  }
+
+  .status-bullet-halo {
+    background-color: var(--color-ruby);
+  }
+}
+
 .teal .step {
   &.is-completed,
   &.is-active {
@@ -391,6 +513,26 @@
   }
 }
 
+/* Step color override */
+.teal.step {
+  &.is-completed,
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-teal);
+    }
+  }
+
+  &.is-active {
+    .status-bullet {
+      background-color: var(--color-teal-dark);
+    }
+  }
+
+  .status-bullet-halo {
+    background-color: var(--color-teal);
+  }
+}
+
 @keyframes showBulletCenter {
   0% {
     background-color: transparent;