From a698be5667fd778113abcb09308e095e331939fc Mon Sep 17 00:00:00 2001 From: qubis741 Date: Fri, 8 Sep 2023 10:00:08 +0200 Subject: [PATCH 1/5] changed opacity according to design --- src/components/progressTracker/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/progressTracker/theme.css b/src/components/progressTracker/theme.css index 163dbe89f..9dfe3be7a 100644 --- a/src/components/progressTracker/theme.css +++ b/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%; From cb6c64fb62be18abd220420cb78e3af018ffade2 Mon Sep 17 00:00:00 2001 From: qubis741 Date: Fri, 8 Sep 2023 10:01:28 +0200 Subject: [PATCH 2/5] added color prop to ProgressStep --- .../progressTracker/ProgressStep.tsx | 10 +++++++--- src/components/progressTracker/theme.css | 19 +++++++++++++++++++ 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/progressTracker/ProgressStep.tsx b/src/components/progressTracker/ProgressStep.tsx index 78c9362de..a1eb1f1c8 100644 --- 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,6 +26,7 @@ const ProgressStep: GenericComponent = ({ meta, active = false, completed = false, + color = '', onClick, }: ProgressStepProps) => { const classNames = cx(theme['step'], { @@ -31,9 +34,10 @@ const ProgressStep: GenericComponent = ({ [theme['is-completed']]: completed, [theme['is-clickable']]: !!onClick, [theme['has-meta']]: !!meta, + [theme['custom-color']]: !!color, }); return ( - +
{label} {meta && {meta}} diff --git a/src/components/progressTracker/theme.css b/src/components/progressTracker/theme.css index 9dfe3be7a..29e86ca5e 100644 --- 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 { From f058ec08c941fda047cde1ec37352b5e85264b5c Mon Sep 17 00:00:00 2001 From: qubis741 Date: Fri, 8 Sep 2023 10:02:04 +0200 Subject: [PATCH 3/5] added activeStepColor prop to ProgressTracker --- src/components/progressTracker/ProgressTracker.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/progressTracker/ProgressTracker.tsx b/src/components/progressTracker/ProgressTracker.tsx index ac828c46e..996ff710c 100644 --- a/src/components/progressTracker/ProgressTracker.tsx +++ b/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 & { ProgressStep: currentStep = 0, done, labelPosition = 'top', + activeStepColor, }: ProgressTrackerProps) => { const classNames = cx(theme['tracker'], theme[color], theme[`tracker-${labelPosition}`]); - return ( {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 ( ); From 857482ee5019cba34fea449380c6749fda795352 Mon Sep 17 00:00:00 2001 From: qubis741 Date: Fri, 8 Sep 2023 10:02:29 +0200 Subject: [PATCH 4/5] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e8ab1a319..246630c50 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@teamleader/ui", "description": "Teamleader UI library", - "version": "22.2.2", + "version": "22.3.0", "author": "Teamleader ", "bugs": { "url": "https://github.com/teamleadercrm/ui/issues" From 9d4d2b87ba4d775116d96fa3c96bf8fba8aba1a2 Mon Sep 17 00:00:00 2001 From: qubis741 Date: Fri, 8 Sep 2023 10:13:43 +0200 Subject: [PATCH 5/5] updated changelog --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 611e62c63..76ad730de 100644 --- a/CHANGELOG.md +++ b/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