From 7a42ab90f8290203f2a828d39d125be33de4f5f0 Mon Sep 17 00:00:00 2001
From: Savut Sang <savut.sang@equisoft.com>
Date: Fri, 16 Feb 2024 12:32:39 -0500
Subject: [PATCH] fix: console.warn, colors, label required

---
 .../progress-tracker.test.tsx                 |  21 ++--
 .../progress-tracker.test.tsx.snap            | 105 ++++++++++++++----
 .../progress-tracker/progress-tracker.tsx     |  22 ++--
 .../stories/progress-tracker.stories.tsx      |  26 ++---
 4 files changed, 115 insertions(+), 59 deletions(-)

diff --git a/packages/react/src/components/progress-tracker/progress-tracker.test.tsx b/packages/react/src/components/progress-tracker/progress-tracker.test.tsx
index da312735a8..b855186d73 100644
--- a/packages/react/src/components/progress-tracker/progress-tracker.test.tsx
+++ b/packages/react/src/components/progress-tracker/progress-tracker.test.tsx
@@ -8,12 +8,8 @@ function generateSteps(count: number): ProgressTrackerStep[] {
 }
 
 describe('Progress Component', () => {
-    it('should render all steps', () => {
-        const steps = generateSteps(3);
-
-        const wrapper = mountWithTheme(<ProgressTracker steps={steps} value={1} />);
-        const allSteps = wrapper.find('li[data-testid^="progress-tracker-step-"]');
-        expect(allSteps.length).toBe(3);
+    beforeEach(() => {
+        jest.spyOn(console, 'warn').mockImplementation(() => { });
     });
 
     it('should render all steps labels', () => {
@@ -71,7 +67,7 @@ describe('Progress Component', () => {
     });
 
     describe('Snapshots', () => {
-        it('with labels', () => {
+        it('linear', () => {
             const steps = generateSteps(3);
 
             const wrapper = renderWithProviders(<ProgressTracker steps={steps} value={2} />);
@@ -79,10 +75,15 @@ describe('Progress Component', () => {
             expect(wrapper).toMatchSnapshot();
         });
 
-        it('without labels', () => {
-            const steps: ProgressTrackerStep[] = [{}, {}, {}];
+        it('non linear', () => {
+            const steps: ProgressTrackerStep[] = [
+                { label: 'Step 1', completion: 'completed' },
+                { label: 'Step 2', completion: 'uncompleted' },
+                { label: 'Step 3' },
+                { label: 'Step 4' },
+            ];
 
-            const wrapper = renderWithProviders(<ProgressTracker steps={steps} value={2} />);
+            const wrapper = renderWithProviders(<ProgressTracker steps={steps} value={3} />);
 
             expect(wrapper).toMatchSnapshot();
         });
diff --git a/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap b/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
index 4ebbbe8d59..9d295e6544 100644
--- a/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
+++ b/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Progress Component Snapshots with labels 1`] = `
+exports[`Progress Component Snapshots linear 1`] = `
 .c6 {
   border: 0;
   -webkit-clip: rect(0,0,0,0);
@@ -109,14 +109,14 @@ exports[`Progress Component Snapshots with labels 1`] = `
 }
 
 .c3::before {
-  background-color: #004E78;
-  border-color: #004E78;
+  background-color: #006296;
+  border-color: #006296;
   color: #FFFFFF;
-  font-weight: var(--font-bold);
+  font-weight: var(--font-semi-bold);
 }
 
 .c3::after {
-  background-color: #004E78;
+  background-color: #006296;
 }
 
 .c3 .c4 {
@@ -124,7 +124,7 @@ exports[`Progress Component Snapshots with labels 1`] = `
 }
 
 .c7::before {
-  border-color: #004E78;
+  border-color: #006296;
   border-width: 0.25rem;
   color: #003A5A;
   font-weight: var(--font-bold);
@@ -134,7 +134,7 @@ exports[`Progress Component Snapshots with labels 1`] = `
 }
 
 .c7::after {
-  background-color: #004E78;
+  background-color: #006296;
 }
 
 .c7 .c4 {
@@ -206,8 +206,8 @@ exports[`Progress Component Snapshots with labels 1`] = `
 </section>
 `;
 
-exports[`Progress Component Snapshots without labels 1`] = `
-.c4 {
+exports[`Progress Component Snapshots non linear 1`] = `
+.c6 {
   border: 0;
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
@@ -239,6 +239,17 @@ exports[`Progress Component Snapshots without labels 1`] = `
   padding: 0;
 }
 
+.c5 {
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  margin-top: var(--spacing-half);
+}
+
 .c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -304,18 +315,22 @@ exports[`Progress Component Snapshots without labels 1`] = `
 }
 
 .c3::before {
-  background-color: #004E78;
-  border-color: #004E78;
+  background-color: #006296;
+  border-color: #006296;
   color: #FFFFFF;
-  font-weight: var(--font-bold);
+  font-weight: var(--font-semi-bold);
 }
 
 .c3::after {
-  background-color: #004E78;
+  background-color: #006296;
+}
+
+.c3 .c4 {
+  color: #006296;
 }
 
-.c5::before {
-  border-color: #004E78;
+.c7::before {
+  border-color: #006296;
   border-width: 0.25rem;
   color: #003A5A;
   font-weight: var(--font-bold);
@@ -324,15 +339,24 @@ exports[`Progress Component Snapshots without labels 1`] = `
   width: var(--size-2x);
 }
 
-.c5::after {
-  background-color: #004E78;
+.c7::after {
+  background-color: #006296;
 }
 
-.c6::before {
+.c7 .c4 {
+  color: #003A5A;
+  font-weight: var(--font-bold);
+}
+
+.c8::before {
   border-color: #B7BBC2;
   color: #1B1C1E;
 }
 
+.c8 .c4 {
+  color: #60666E;
+}
+
 <section
   class="c0"
 >
@@ -345,22 +369,57 @@ exports[`Progress Component Snapshots without labels 1`] = `
       data-testid="progress-tracker-step-completed"
     >
       <span
-        class="c4"
+        class="c4 c5"
+        data-testid="progress-tracker-label"
+      >
+        Step 1
+      </span>
+      <span
+        class="c6"
+      >
+        completed
+      </span>
+    </li>
+    <li
+      class="c2 c3"
+      data-testid="progress-tracker-step-completed"
+    >
+      <span
+        class="c4 c5"
+        data-testid="progress-tracker-label"
+      >
+        Step 2
+      </span>
+      <span
+        class="c6"
       >
         completed
       </span>
     </li>
     <li
       aria-current="step"
-      class="c2 c5"
+      class="c2 c7"
       data-testid="progress-tracker-step-current"
-    />
+    >
+      <span
+        class="c4 c5"
+        data-testid="progress-tracker-label"
+      >
+        Step 3
+      </span>
+    </li>
     <li
-      class="c2 c6"
+      class="c2 c8"
       data-testid="progress-tracker-step-uncompleted"
     >
       <span
-        class="c4"
+        class="c4 c5"
+        data-testid="progress-tracker-label"
+      >
+        Step 4
+      </span>
+      <span
+        class="c6"
       >
         not completed
       </span>
diff --git a/packages/react/src/components/progress-tracker/progress-tracker.tsx b/packages/react/src/components/progress-tracker/progress-tracker.tsx
index 79ca217b2c..bea670e9b6 100644
--- a/packages/react/src/components/progress-tracker/progress-tracker.tsx
+++ b/packages/react/src/components/progress-tracker/progress-tracker.tsx
@@ -83,14 +83,14 @@ const StyledStep = styled.li<{ $linear: boolean }>`
 
 const CompletedStep = styled(StyledStep)`
     &::before {
-        background-color: ${({ theme }) => theme.main['primary-3']};
-        border-color: ${({ theme }) => theme.main['primary-3']};
+        background-color: ${({ theme }) => theme.main['primary-1.1']};
+        border-color: ${({ theme }) => theme.main['primary-1.1']};
         color: ${({ theme }) => theme.greys.white};
-        font-weight: var(--font-bold);
+        font-weight: var(--font-semi-bold);
     }
 
     &::after {
-        background-color: ${({ $linear, theme }) => $linear && theme.main['primary-3']};
+        background-color: ${({ $linear, theme }) => $linear && theme.main['primary-1.1']};
     }
 
     ${Label} {
@@ -100,7 +100,7 @@ const CompletedStep = styled(StyledStep)`
 
 const CurrentStep = styled(StyledStep)`
     &::before {
-        border-color: ${({ theme }) => theme.main['primary-3']};
+        border-color: ${({ theme }) => theme.main['primary-1.1']};
         border-width: 0.25rem;
         color: ${({ theme }) => theme.main['primary-1.3']};
         font-weight: var(--font-bold);
@@ -110,7 +110,7 @@ const CurrentStep = styled(StyledStep)`
     }
 
     &::after {
-        background-color: ${({ $linear, theme }) => $linear && theme.main['primary-3']};
+        background-color: ${({ $linear, theme }) => $linear && theme.main['primary-1.1']};
     }
 
     ${Label} {
@@ -140,8 +140,8 @@ const UncompletedIcon = styled(Icon)`
 
 export interface ProgressTrackerStep {
     href?: string;
-    label?: string;
-    completion?: 'uncompleted' | 'completed';
+    label: string;
+    completion?: 'completed' | 'uncompleted';
     onClick?: (stepNumber: number) => void;
 }
 
@@ -186,7 +186,7 @@ const Step: VoidFunctionComponent<StepProps> = ({
 
     const content = (
         <>
-            {showUncompletedIcon && <UncompletedIcon name='alertCircle' size='16' />}
+            {showUncompletedIcon && <UncompletedIcon name='alertCircle' size='16' aria-hidden="true" />}
             {step.label && <Label data-testid="progress-tracker-label">{step.label}</Label>}
             {screenReaderText && <ScreenReaderOnlyText label={screenReaderText} />}
         </>
@@ -228,6 +228,10 @@ export const ProgressTracker: VoidFunctionComponent<ProgressTrackerProps> = ({
     const clampValue = clamp(value, 1, max);
     const hasAnyLink = steps.some((step) => step.href || step.onClick);
 
+    if (!ariaLabel) {
+        console.warn('ariaLabel is required for Accessibility');
+    }
+
     return (
         <Container className={className} aria-label={ariaLabel} as={hasAnyLink ? 'nav' : undefined}>
             <Steps data-testid="progress-tracker">
diff --git a/packages/storybook/stories/progress-tracker.stories.tsx b/packages/storybook/stories/progress-tracker.stories.tsx
index bc14aab949..529538b8ec 100644
--- a/packages/storybook/stories/progress-tracker.stories.tsx
+++ b/packages/storybook/stories/progress-tracker.stories.tsx
@@ -10,14 +10,6 @@ export default {
 
 };
 
-function createEmptySteps(count: number): ProgressTrackerStep[] {
-    const steps: ProgressTrackerStep[] = [];
-    for (let i = 1; i <= count; i++) {
-        steps.push({});
-    }
-    return steps;
-}
-
 function createSteps(count: number): ProgressTrackerStep[] {
     const steps: ProgressTrackerStep[] = [];
     for (let i = 1; i <= count; i++) {
@@ -27,14 +19,14 @@ function createSteps(count: number): ProgressTrackerStep[] {
 }
 
 export const Normal: Story = () => (
-    <ProgressTracker steps={createEmptySteps(3)} value={2} />
+    <ProgressTracker steps={createSteps(3)} value={2} ariaLabel='Storybook progress' />
 );
 
 export const Steps: Story = () => (
     <>
-        <ProgressTracker steps={createEmptySteps(3)} value={1} />
-        <ProgressTracker steps={createEmptySteps(3)} value={2} />
-        <ProgressTracker steps={createEmptySteps(3)} value={3} />
+        <ProgressTracker steps={createSteps(3)} value={1} ariaLabel='Storybook progress' />
+        <ProgressTracker steps={createSteps(3)} value={2} ariaLabel='Storybook progress' />
+        <ProgressTracker steps={createSteps(3)} value={3} ariaLabel='Storybook progress' />
     </>
 );
 
@@ -44,9 +36,9 @@ export const WithLabels: Story = () => (
 
 export const AriaLabel: Story = () => (
     <ProgressTracker
-        steps={createEmptySteps(3)}
+        steps={createSteps(3)}
         value={2}
-        ariaLabel="Create account steps"
+        ariaLabel='Storybook progress'
     />
 );
 
@@ -58,7 +50,7 @@ export const OnclickEvent: Story = () => {
         { label: 'Step 2', onClick: (stepNumber) => setCurrentStep(stepNumber) },
         { label: 'Step 3', onClick: (stepNumber) => setCurrentStep(stepNumber) },
     ];
-    return <ProgressTracker steps={steps} value={currentStep} />;
+    return <ProgressTracker steps={steps} value={currentStep} ariaLabel='Storybook progress' />;
 };
 
 export const HrefLinks: Story = () => {
@@ -67,7 +59,7 @@ export const HrefLinks: Story = () => {
         { label: 'Step 2', href: 'https://equisoft.com' },
         { label: 'Step 3', href: 'https://equisoft.com' },
     ];
-    return <ProgressTracker steps={steps} value={2} />;
+    return <ProgressTracker steps={steps} value={2} ariaLabel='Storybook progress' />;
 };
 
 export const NonLinear: Story = () => {
@@ -79,5 +71,5 @@ export const NonLinear: Story = () => {
         { label: 'Step 3', onClick: (stepNumber) => setCurrentStep(stepNumber) },
         { label: 'Step 4', onClick: (stepNumber) => setCurrentStep(stepNumber) },
     ];
-    return <ProgressTracker linear={false} steps={steps} value={currentStep} />;
+    return <ProgressTracker linear={false} steps={steps} value={currentStep} ariaLabel='Storybook progress' />;
 };