added activeStepColor prop to ProgressTracker

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}
           />
         );