feat: UX for stepper changed

Author: tumms2021389

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

@@ -185,21 +185,26 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--stepper-completed-bg-color);
   color: white;
   border-radius: 50%;
   height: 24px;
   width: 24px;
   position: relative;
 }
 
-.psdk-horizontal-step-icon-future {
+.future .psdk-horizontal-step-icon {
   color: var(--app-neutral-color);
   border: 1px solid var(--app-neutral-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  position: relative;
+}
+
+.current .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--app-primary-color);
+}
+
+.success .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
 }
 
 .psdk-horizontal-step-icon-content {
@@ -210,15 +215,6 @@ mat-horizontal-stepper {
   transform: translate(-50%, -50%);
 }
 
-.psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  position: relative;
-}
-
 .psdk-horizontal-step-label {
   color: var(--text-secondary-color);
   font-size: 14px;
@@ -234,9 +230,12 @@ mat-horizontal-stepper {
   margin-left: 8px;
 }
 
+.flex-auto {
+  flex: auto;
+}
+
 .psdk-horizontal-step-line {
   border-top: 1px solid var(--app-neutral-color);
-  flex: auto;
   min-width: 32px;
   margin: 0px 8px;
 }

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

@@ -56,22 +56,33 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     return 'psdk-vertical-step-body';
   }
 
-  function _getHIconClass(step): string {
+  function _getHLabelClass(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-label-selected';
     }
 
-    return 'psdk-horizontal-step-icon';
+    return 'psdk-horizontal-step-label';
   }
 
-  function _getHLabelClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-label-selected';
+  function _getAutoFlexClass(currentStep): string {
+    const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
+    const len = arNavigationSteps.length;
+
+    console.log('Current Step Index:', currentStep, arNavigationSteps.length - 2);
+
+    if (currentStepIndex === arNavigationSteps.length - 2 && arNavigationSteps[len - 1].visited_status === 'current') {
+      return 'flex-auto';
     }
 
-    return 'psdk-horizontal-step-label';
+    if (currentStep.visited_status === 'current') {
+      return 'flex-auto';
+    }
+
+    if (currentStep.visited_status === 'current') {
+      return 'flex-auto';
+    }
+
+    return '';
   }
 
   function _showHLine(index: number): boolean {
@@ -144,15 +155,15 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             {arNavigationSteps.map((mainStep, index) => {
               return (
                 <React.Fragment key={mainStep.actionID}>
-                  <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep)}>
+                  <div className={`psdk-horizontal-step-header ${mainStep.visited_status}`}>
+                    <div className='psdk-horizontal-step-icon'>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
                     <div className={_getHLabelClass(mainStep)}>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
-                  {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
+                  {_showHLine(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
                 </React.Fragment>
               );
             })}