integrated basic logic for stepper

Author: GokulSNath

global.d.ts

@@ -1,4 +1,4 @@
-declare module '*.scss' {
-    const content: {[className: string]: string};
-    export = content;
+declare module "*.svg" {
+    const content: string;
+    export default content;
 }

package.json

@@ -19,6 +19,7 @@
   "engines": {
     "node": ">=10"
   },
+  "appRoot": "src",
   "repository": {
     "type": "github",
     "url": "https://github.com/aarathyKeyvalue/vertical-stepper"

src/assets/white-tick.svg

@@ -1,21 +1,43 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useState, useEffect } from 'react';
 import './styles.css';
-import { stepTypes } from './types';
+import { Istep, IstepperProps } from './types';
+import whiteTick from '../assets/white-tick.svg';
 
-const Stepper = (props: { steps: stepTypes[]}): any => {
-  const { steps } = props;
+const Stepper = (props: IstepperProps): any => {
+  const { steps, currentActiveStepIndex } = props;
 
-  const [stepVal, setSteps] = useState([]);
+  // const whiteTick = require('../assets/white-tick.svg') as string;
+  const [stepsVal, setSteps] = useState<Istep[]>([]);
+  const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>()
 
-  useEffect(()      => {
+  useEffect(() => {
     setSteps(steps);
   }, [steps]);
+
+  useEffect(() => {
+    setCurrentActiveStepIndexVal(currentActiveStepIndex ?? 0);
+  }, [currentActiveStepIndex]);
+
   return (
     <div className="stepperContainer">
-      {stepVal?.map((step, index) => (index < stepVal?.length - 1) && (
+      {stepsVal?.map((step: Istep, index: number) => (
         <div key={index} className="eachStep">
           <div className='bubbleLineWrapper'>
-            <div className='eachBubble'>{index + 1}</div>
+            <div
+              className={`eachBubble
+              ${index === currentActiveStepIndexVal && 'activeStepBubble'}
+              ${index > currentActiveStepIndexVal && 'inactiveStepBubble'}`}
+            >
+              {currentActiveStepIndexVal > index && (
+                <img
+                  src={whiteTick}
+                  className="whiteTickImg"
+                  alt=""
+                />
+              )
+              || index + 1}
+            </div>
             <div className='eachLabel'>
               {step.label && (
                 <span className='labelTitle'>
@@ -28,29 +50,12 @@ const Stepper = (props: { steps: stepTypes[]}): any => {
                 </span>
               )}
             </div>
-            <div className='lineSeparator' />
-          </div>
-        </div>
-      ))}
-      <div className="eachStep">
-        <div className='bubbleLineWrapper'>
-          <div className='eachBubble'>
-            {stepVal?.length}
-          </div>
-          <div className='eachLabel'>
-            {stepVal[stepVal?.length - 1]?.label && (
-              <span className='labelTitle'>
-                {stepVal[stepVal?.length - 1]?.label}
-              </span>
-            )}
-            {stepVal[stepVal?.length - 1]?.description && (
-              <span className='labelDescription'>
-                {stepVal[stepVal?.length - 1]?.description}
-              </span>
+            {index < stepsVal?.length - 1 && (
+              <div className={`lineSeparator ${(index > currentActiveStepIndexVal - 1) && 'activeStepLineSeparator'}`} />
             )}
           </div>
         </div>
-      </div>
+      ))}
     </div>
   );
 };

src/stepper-component/stepperComponent.tsx

@@ -20,6 +20,21 @@
   align-items: center;
   justify-content: center;
   overflow: visible;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  border: 7px solid;
+}
+.activeStepBubble {
+  border: 7px solid #CBCBEF
+}
+.inactiveStepBubble {
+  opacity: 0.4;
+}
+.whiteTickImg {
+  object-fit: cover;
+  width: 10px;
+  height: 8px;
 }
 
 .eachStep {
@@ -59,3 +74,6 @@
   border-right: 2px solid #dfdff2;
   margin: 4px 0;
 }
+.activeStepLineSeparator {
+  border-right: 2px dashed #dfdff2;
+}

src/stepper-component/styles.css

@@ -1,3 +1,9 @@
-export interface stepTypes {
-    label: string
+export interface Istep {
+    label: string,
+    description?: string
+}
+
+export interface IstepperProps {
+    steps: Istep[],
+    currentActiveStepIndex: number
 }

src/stepper-component/types.ts

@@ -32,4 +32,5 @@ LoggedIn.args = {
     label: 'Step 4',
     description: 'The quick brown fox jumps over the lazy dog'
   }],
+  currentActiveStepIndex: 2
 };