Added color prop to ProgressStep and activeStepColor to ProgressTracker

CHANGELOG.md

@@ -12,6 +12,13 @@
 
 ### Dependency updates
 
+## [22.3.0] - 2023-09-08
+
+### Added
+
+`ProgressTracker`: `activeStepColor` prop. ([@qubis741](https://https://github.com/qubis741) in [#2752](https://github.com/teamleadercrm/ui/pull/2752))
+`ProgressStep`: `color` prop. ([@qubis741](https://https://github.com/qubis741) in [#2752](https://github.com/teamleadercrm/ui/pull/2752))
+
 ## [22.2.2] - 2023-08-22
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "22.2.2",
+  "version": "22.3.0",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

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>}

src/components/progressTracker/ProgressTracker.tsx

@@ -16,6 +16,8 @@ export interface ProgressTrackerProps {
   children?: ReactNode;
   /** Color theme of the progress tracker. */
   color?: typeof COLORS[number];
+  /** Color of the progress step. */
+  activeStepColor?: string;
   /** Where to position the labels. Alternating allows for wider labels. */
   labelPosition?: 'top' | 'alternating' | 'bottom';
 }
@@ -26,19 +28,21 @@ const ProgressTracker: GenericComponent<ProgressTrackerProps> & { ProgressStep:
   currentStep = 0,
   done,
   labelPosition = 'top',
+  activeStepColor,
 }: ProgressTrackerProps) => {
   const classNames = cx(theme['tracker'], theme[color], theme[`tracker-${labelPosition}`]);
-
   return (
     <Box data-teamleader-ui="progress-tracker" className={classNames}>
       {React.Children.map(children, (child, index) => {
         const activeStep = Math.max(0, currentStep);
+        const isActiveStep = index === activeStep;
         const childProps = React.isValidElement(child) && child.props;
-
+        const hasColoredActiveStep = isActiveStep && activeStepColor && !done;
         return (
           <ProgressStep
-            active={done ? false : index === activeStep}
+            active={done ? false : isActiveStep}
             completed={done || index < activeStep}
+            color={hasColoredActiveStep ? activeStepColor : ''}
             {...childProps}
           />
         );

src/components/progressTracker/theme.css

@@ -120,7 +120,7 @@
 
   .status-bullet-halo {
     transform: scale(0);
-    opacity: 0.5;
+    opacity: 0.6;
     transition: transform var(--animation-duration) var(--animation-curve-default)
       calc(var(--animation-duration) - 0.1s);
     border-radius: 50%;
@@ -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 {