added color prop to ProgressStep

teamleadercrm · Sep 8, 2023 · cb6c64f · cb6c64f
1 parent a698be5
commit cb6c64f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/components/progressTracker/ProgressStep.tsx b/src/components/progressTracker/ProgressStep.tsx
@@ -1,10 +1,10 @@
-import React, { ReactNode } from 'react';
 import cx from 'classnames';
+import React, { ReactNode } from 'react';
 import theme from './theme.css';
 
+import { GenericComponent } from '../../@types/types';
 import Box from '../box';
 import { TextSmall } from '../typography';
-import { GenericComponent } from '../../@types/types';
 
 export interface ProgressStepProps {
   /** The label for the progress step */
@@ -15,6 +15,8 @@ export interface ProgressStepProps {
   active?: boolean;
   /** Whether or not the step has been completed */
   completed?: boolean;
+  /** Color theme of the progress step. */
+  color?: string;
   /** Callback function that is fired when the progress step is clicked */
   onClick?: () => void;
 }
@@ -24,16 +26,18 @@ const ProgressStep: GenericComponent<ProgressStepProps> = ({
   meta,
   active = false,
   completed = false,
+  color = '',
   onClick,
 }: ProgressStepProps) => {
   const classNames = cx(theme['step'], {
     [theme['is-active']]: active,
     [theme['is-completed']]: completed,
     [theme['is-clickable']]: !!onClick,
     [theme['has-meta']]: !!meta,
+    [theme['custom-color']]: !!color,
   });
   return (
-    <Box className={classNames}>
+    <Box className={classNames} style={{ '--step-color': color } as React.CSSProperties}>
       <div className={theme['step-label-holder']}>
         <TextSmall className={theme['step-label']}>{label}</TextSmall>
         {meta && <TextSmall className={theme['step-meta']}>{meta}</TextSmall>}

diff --git a/src/components/progressTracker/theme.css b/src/components/progressTracker/theme.css
@@ -237,6 +237,25 @@
   }
 }
 
+.custom-color {
+  &.is-completed,
+  &.is-active {
+    .status-bullet {
+      background-color: var(--step-color)!important;
+    }
+  }
+
+  &.is-active {
+    .status-bullet {
+      background-color: var(--step-color)!important;
+    }
+  }
+
+  .status-bullet-halo {
+    background-color: var(--step-color)!important;
+  }
+}
+
 .neutral .step {
   &.is-completed,
   &.is-active {