fix(progress-tracker,themes): apply @LarryMatte change requests

kronostechnologies · Mar 12, 2024 · 0c3c108 · 0c3c108
1 parent b60fe57
commit 0c3c108
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 30 deletions.
diff --git a/packages/react/src/components/progress-tracker/progress-tracker.tsx b/packages/react/src/components/progress-tracker/progress-tracker.tsx
@@ -81,22 +81,22 @@ const StyledStep = styled.li<{ $linear: boolean }>`
     }
 `;
 
-const CompleteStep = styled(StyledStep)`
+const CompletedStep = styled(StyledStep)`
     &::before {
-        background-color: ${({ theme }) => theme.component['progress-tracker-step-complete-background-color']};
-        border-color: ${({ theme }) => theme.component['progress-tracker-step-complete-border-color']};
-        color: ${({ theme }) => theme.component['progress-tracker-step-complete-text-color']};
+        background-color: ${({ theme }) => theme.component['progress-tracker-step-completed-background-color']};
+        border-color: ${({ theme }) => theme.component['progress-tracker-step-completed-border-color']};
+        color: ${({ theme }) => theme.component['progress-tracker-step-completed-text-color']};
         font-weight: var(--font-semi-bold);
     }
 
     &::after {
         ${({ $linear, theme }) => $linear && css`
-            background-color: ${theme.component['progress-tracker-bridge-complete-color']};
+            background-color: ${theme.component['progress-tracker-bridge-completed-color']};
         `}
     }
 
     ${Label} {
-        color: ${({ theme }) => theme.component['progress-tracker-step-label-complete-text-color']};
+        color: ${({ theme }) => theme.component['progress-tracker-step-label-completed-text-color']};
     }
 `;
 
@@ -123,14 +123,14 @@ const ActiveStep = styled(StyledStep)`
     }
 `;
 
-const IncompleteStep = styled(StyledStep)`
+const UncompletedStep = styled(StyledStep)`
     &::before {
-        border-color: ${({ theme }) => theme.component['progress-tracker-step-incomplete-border-color']};
-        color: ${({ theme }) => theme.component['progress-tracker-step-incomplete-text-color']};
+        border-color: ${({ theme }) => theme.component['progress-tracker-step-uncompleted-border-color']};
+        color: ${({ theme }) => theme.component['progress-tracker-step-uncompleted-text-color']};
     }
 
     ${Label} {
-        color: ${({ theme }) => theme.component['progress-tracker-step-label-incomplete-text-color']};
+        color: ${({ theme }) => theme.component['progress-tracker-step-label-uncompleted-text-color']};
     }
 `;
 
@@ -181,11 +181,11 @@ const Step: VoidFunctionComponent<StepProps> = ({
     } else if ((linear && stepNumber < value) || (!linear && step.completion === 'completed')) {
         dataTestId = 'progress-tracker-step-completed';
         screenReaderText = t('completedAriaLabel');
-        StepComponent = CompleteStep;
+        StepComponent = CompletedStep;
     } else {
         dataTestId = 'progress-tracker-step-uncompleted';
         screenReaderText = t('uncompletedAriaLabel');
-        StepComponent = IncompleteStep;
+        StepComponent = UncompletedStep;
     }
 
     const content = (

diff --git a/packages/react/src/themes/tokens/component/progress-tracker-tokens.ts b/packages/react/src/themes/tokens/component/progress-tracker-tokens.ts
@@ -7,18 +7,18 @@ export type ProgressTrackerTokens =
     | 'progress-tracker-bridge-todo-background-color'
     | 'progress-tracker-step-todo-text-color'
     | 'progress-tracker-step-todo-background-color'
-    | 'progress-tracker-step-incomplete-border-color'
-    | 'progress-tracker-step-incomplete-text-color'
-    | 'progress-tracker-step-label-incomplete-text-color'
+    | 'progress-tracker-step-uncompleted-border-color'
+    | 'progress-tracker-step-uncompleted-text-color'
+    | 'progress-tracker-step-label-uncompleted-text-color'
     | 'progress-tracker-bridge-active-background-color'
     | 'progress-tracker-step-active-border-color'
     | 'progress-tracker-step-active-text-color'
     | 'progress-tracker-step-label-active-text-color'
-    | 'progress-tracker-bridge-complete-color'
-    | 'progress-tracker-step-complete-background-color'
-    | 'progress-tracker-step-complete-border-color'
-    | 'progress-tracker-step-complete-text-color'
-    | 'progress-tracker-step-label-complete-text-color'
+    | 'progress-tracker-bridge-completed-color'
+    | 'progress-tracker-step-completed-background-color'
+    | 'progress-tracker-step-completed-border-color'
+    | 'progress-tracker-step-completed-text-color'
+    | 'progress-tracker-step-label-completed-text-color'
 
 export type ProgressTrackerTokenValue = AliasTokens | RefTokens;
 
@@ -33,19 +33,19 @@ export const defaultProgressTrackerTokens: ProgressTrackerTokenMap = {
     'progress-tracker-bridge-todo-background-color': 'color-neutral-15',
     'progress-tracker-step-todo-text-color': 'color-brand-50',
     'progress-tracker-step-todo-background-color': 'color-white',
-    // Incomplete
-    'progress-tracker-step-incomplete-border-color': 'color-neutral-30',
-    'progress-tracker-step-incomplete-text-color': 'color-neutral-90',
-    'progress-tracker-step-label-incomplete-text-color': 'color-neutral-65',
+    // Uncompleted
+    'progress-tracker-step-uncompleted-border-color': 'color-neutral-30',
+    'progress-tracker-step-uncompleted-text-color': 'color-neutral-90',
+    'progress-tracker-step-label-uncompleted-text-color': 'color-neutral-65',
     // Active
     'progress-tracker-bridge-active-background-color': 'color-brand-50',
     'progress-tracker-step-active-border-color': 'color-brand-50',
     'progress-tracker-step-active-text-color': 'color-brand-70',
     'progress-tracker-step-label-active-text-color': 'color-brand-70',
-    // Complete
-    'progress-tracker-bridge-complete-color': 'color-brand-50',
-    'progress-tracker-step-complete-background-color': 'color-brand-50',
-    'progress-tracker-step-complete-border-color': 'color-brand-50',
-    'progress-tracker-step-complete-text-color': 'color-white',
-    'progress-tracker-step-label-complete-text-color': 'color-brand-50',
+    // Completed
+    'progress-tracker-bridge-completed-color': 'color-brand-50',
+    'progress-tracker-step-completed-background-color': 'color-brand-50',
+    'progress-tracker-step-completed-border-color': 'color-brand-50',
+    'progress-tracker-step-completed-text-color': 'color-white',
+    'progress-tracker-step-label-completed-text-color': 'color-brand-50',
 };