SDK-R Multistep stepper styling changes

Author: tammy-a11y

packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css

@@ -79,12 +79,21 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
+  background-color: var(--stepper-completed-bg-color);
   color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
+  position: relative;
+}
+
+.psdk-vertical-step-icon-future {
+  margin-right: 12px;
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
   position: relative;
 }
 
@@ -93,7 +102,6 @@ mat-horizontal-stepper {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: var(--app-text-color);
 }
 
 .psdk-vertical-step-icon-selected {
@@ -162,7 +170,6 @@ mat-horizontal-stepper {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  text-align: left;
 }
 
 .psdk-horizontal-step-header {
@@ -175,20 +182,24 @@ mat-horizontal-stepper {
   height: 72px;
   overflow: hidden;
   align-items: center;
-  padding: 0 24px;
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
+  color: white;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  position: relative;
+}
+
+.psdk-horizontal-step-icon-future {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
 }
 
 .psdk-horizontal-step-icon-content {
@@ -205,39 +216,27 @@ mat-horizontal-stepper {
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
 }
 
 .psdk-horizontal-step-label {
   color: var(--text-secondary-color);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
 }
 
 .psdk-horizontal-step-label-selected {
   color: var(--text-primary-color);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
+  margin-left: 8px;
 }
 
 .psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
-  border-top-width: 1px;
-  border-top-style: solid;
+  border-top: 1px solid var(--app-neutral-color);
   flex: auto;
-  height: 0;
-  margin: 0 -16px;
   min-width: 32px;
+  margin: 0px 8px;
 }

packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.tsx

@@ -33,6 +33,8 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   function _getVIconClass(status): string {
     if (status === 'current') {
       return 'psdk-vertical-step-icon-selected';
+    } else if (status === 'future') {
+      return 'psdk-vertical-step-icon-future';
     }
 
     return 'psdk-vertical-step-icon';
@@ -57,6 +59,8 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   function _getHIconClass(step): string {
     if (step.ID === currentStep?.ID) {
       return 'psdk-horizontal-step-icon-selected';
+    } else if (step.visited_status === 'future') {
+      return 'psdk-horizontal-step-icon-future';
     }
 
     return 'psdk-horizontal-step-icon';
@@ -92,7 +96,7 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
+                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
                   <div className={_getVBodyClass(index)}>
                     {mainStep?.steps && (
@@ -122,9 +126,11 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                       </ul>
                     )}
                     {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                        {children}
-                      </AssignmentCard>
+                      <div style={{ paddingLeft: 20 }}>
+                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                          {children}
+                        </AssignmentCard>
+                      </div>
                     )}
                   </div>
                 </div>
@@ -144,11 +150,7 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep)}>
-                      <div className='psdk-horizontal-step-text-label' id='selected-label'>
-                        {mainStep.name}
-                      </div>
-                    </div>
+                    <div className={_getHLabelClass(mainStep)}>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
                   {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
                 </React.Fragment>

packages/react-sdk-components/src/theme.ts

@@ -78,7 +78,8 @@ const lightThemeColours = {
     '--secondary-button-text-color': '#ffffff',
 
     '--text-primary-color': '#000',
-    '--text-secondary-color': '#c0c0c0'
+    '--text-secondary-color': '#c0c0c0',
+    '--stepper-completed-bg-color': '#218721'
   }
 };
 const darkThemeColours = {
@@ -123,7 +124,8 @@ const darkThemeColours = {
     '--secondary-button-text-color': '#1a103c',
 
     '--text-primary-color': '#e0e0e0',
-    '--text-secondary-color': '#c0c0c0'
+    '--text-secondary-color': '#c0c0c0',
+    '--stepper-completed-bg-color': '#158715'
   }
 };