integrated step click handler

Author: GokulSNath

src/stepper-component/constants.ts

@@ -0,0 +1,9 @@
+const VISITED = 'visited';
+const UNVISITED = 'unvisited';
+const COMPLETED = 'completed';
+
+export const STEP_STATUSES = {
+  VISITED,
+  UNVISITED,
+  COMPLETED
+};

src/stepper-component/stepperComponent.tsx

@@ -1,35 +1,38 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, ReactElement } from 'react';
 import './styles.css';
 import { Istep, IstepperProps } from './types';
 import whiteTick from '../assets/white-tick.svg';
+import { STEP_STATUSES } from './constants';
 
-const Stepper = (props: IstepperProps): any => {
-  const { steps, currentActiveStepIndex } = props;
+const Stepper = (props: IstepperProps): ReactElement => {
+  const { steps, currentActiveStepIndex, onStepClick, enableStepClick = false } = props;
 
-  // const whiteTick = require('../assets/white-tick.svg') as string;
-  const [stepsVal, setSteps] = useState<Istep[]>([]);
   const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>()
 
-  useEffect(() => {
-    setSteps(steps);
-  }, [steps]);
-
   useEffect(() => {
     setCurrentActiveStepIndexVal(currentActiveStepIndex ?? 0);
   }, [currentActiveStepIndex]);
 
+  const handleStepClick = (stepIndex: number): void => {
+    if (enableStepClick) {
+      if (onStepClick !== undefined ) onStepClick(stepIndex);
+      else setCurrentActiveStepIndexVal(stepIndex);
+    }
+  }
+
   return (
     <div className="stepperContainer">
-      {stepsVal?.map((step: Istep, index: number) => (
+      {steps?.map((step: Istep, index: number): ReactElement => (
         <div key={index} className="eachStep">
           <div className='bubbleLineWrapper'>
             <div
               className={`eachBubble
+              ${enableStepClick && 'cursorPointer'}
               ${index === currentActiveStepIndexVal && 'activeStepBubble'}
-              ${index > currentActiveStepIndexVal && 'inactiveStepBubble'}`}
+              ${(step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && 'inactiveStepBubble'}`}
+              onClick={(): void => handleStepClick(index)}
             >
-              {currentActiveStepIndexVal > index && (
+              {step?.status === STEP_STATUSES.COMPLETED && (
                 <img
                   src={whiteTick}
                   className="whiteTickImg"
@@ -40,17 +43,17 @@ const Stepper = (props: IstepperProps): any => {
             </div>
             <div className='eachLabel'>
               {step.label && (
-                <span className='labelTitle'>
+                <span className={`labelTitle ${index === currentActiveStepIndexVal && 'activeLabelTitle'}`}>
                   {step?.label}
                 </span>
               )}
               {step?.description && (
-                <span className='labelDescription'>
+                <span className={`labelDescription ${index === currentActiveStepIndexVal && 'activeLabelDescription'}`}>
                   {step?.description}
                 </span>
               )}
             </div>
-            {index < stepsVal?.length - 1 && (
+            {index < steps?.length - 1 && (
               <div className={`lineSeparator ${(index > currentActiveStepIndexVal - 1) && 'activeStepLineSeparator'}`} />
             )}
           </div>

src/stepper-component/styles.css

@@ -31,6 +31,9 @@
 .inactiveStepBubble {
   opacity: 0.4;
 }
+.cursorPointer {
+  cursor: pointer;
+}
 .whiteTickImg {
   object-fit: cover;
   width: 10px;
@@ -61,13 +64,19 @@
 .labelTitle {
   color: #4F4F4F;
 }
+.activeLabelTitle {
+  font-weight: 700;
+}
 .labelDescription {
   font-weight: 400;
   font-size: 12px;
   line-height: 21px;
   letter-spacing: 0.02em;
   color: #929292;
 }
+.activeLabelDescription {
+  color: #676767;
+}
 .lineSeparator {
   height: 22px;
   width: 1px;

src/stepper-component/types.ts

@@ -1,9 +1,12 @@
 export interface Istep {
     label: string,
-    description?: string
+    description?: string,
+    status: string
 }
 
 export interface IstepperProps {
     steps: Istep[],
-    currentActiveStepIndex: number
+    currentActiveStepIndex: number,
+    onStepClick?(stepIndex: number): void,
+    enableStepClick: boolean
 }

src/stories/StepperComponent.stories.tsx

@@ -32,5 +32,7 @@ LoggedIn.args = {
     label: 'Step 4',
     description: 'The quick brown fox jumps over the lazy dog'
   }],
-  currentActiveStepIndex: 2
+  currentActiveStepIndex: 2,
+  enableStepClick: true,
+  // onStepClick: (stepIndex: number) => console.log("🚀 ~ file: StepperComponent.stories.tsx:37 ~ stepIndex", stepIndex)
 };