Merge branch 'next-release' into feature/create-tag

.github/workflows/check-types.yaml

@@ -8,7 +8,7 @@ jobs:
     if: ${{ !contains(github.head_ref, 'hotfix/') && !contains(github.event.head_commit.message, 'hotfix/') }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
       - name: Check types
         run: |
           yarn install --silent --frozen-lockfile

.github/workflows/chromatic.yml

@@ -6,7 +6,7 @@ jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
         with:
           fetch-depth: 0
       - uses: actions/setup-node@v3

.github/workflows/ci.yaml

@@ -34,7 +34,7 @@ jobs:
       env: production
     steps:
       - name: Check out code
-        uses: actions/checkout@v3
+        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
       - name: Set env
         run: cat env/${{ env.env }}/build.env >> $GITHUB_ENV
       - name: Configure AWS Credentials

.github/workflows/lint-node.yaml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ !contains(github.head_ref, 'hotfix/') && !contains(github.event.head_commit.message, 'hotfix/') }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
       - name: Install Node
         uses: actions/setup-node@v3
         with:

.github/workflows/pr.yaml

@@ -18,7 +18,7 @@ jobs:
   lint-yaml:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
       - name: yaml lint
         run: |
           yamllint -d \

.github/workflows/reviewer-lottery.yaml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.actor == 'dependabot[bot]' }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
       - uses: uesteibar/reviewer-lottery@v3
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test-node.yaml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ !contains(github.head_ref, 'hotfix/') && !contains(github.event.head_commit.message, 'hotfix/') }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
       - name: Install Node
         uses: actions/setup-node@v3
         with:

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"
@@ -47,7 +47,7 @@
     "react-day-picker": "^7.4.10",
     "react-draft-wysiwyg": "^1.14.7",
     "react-input-mask": "^2.0.4",
-    "react-resize-detector": "^8.0.1",
+    "react-resize-detector": "^9.1.0",
     "react-select": "5.7.0",
     "react-transition-group": "^4.2.1",
     "smoothscroll-polyfill": "^0.4.4"
@@ -94,7 +94,7 @@
     "@types/lodash.throttle": "^4.1.7",
     "@types/lodash.without": "^4.4.6",
     "@types/luxon": "^3.0.1",
-    "@types/node": "^18.11.18",
+    "@types/node": "^20.5.9",
     "@types/react": "^17",
     "@types/react-dom": "^17",
     "@types/react-draft-wysiwyg": "^1.13.4",

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 {