moved constants file to a global constants file

Author: GokulSNath

src/bubble/bubble.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { IBubbleProps } from "./types";
 import whiteTick from '../assets/white-tick.svg';
-import { STEP_STATUSES } from './constants';
+import { STEP_STATUSES } from '../constants';
 import styles from './styles';
 const Bubble: FC<IBubbleProps> = (props) => {
   const {

src/bubble/constants.ts src/constants.tssrc/bubble/constants.ts renamed to src/constants.ts

@@ -2,7 +2,7 @@ import React, { useState, useEffect, ReactElement, FC } from 'react';
 import styles from './styles';
 import { IStep, IStepperProps } from './types';
 import Bubble from '../bubble';
-import { LABEL_POSITION } from '../bubble/constants';
+import { LABEL_POSITION } from '../constants';
 
 const Stepper: FC<IStepperProps> = (props) => {
   const {
@@ -27,10 +27,10 @@ const Stepper: FC<IStepperProps> = (props) => {
     getInActiveBubbleStyles
   } = stylesOverride;
 
-  const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>();
+  const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>(0);
 
   useEffect(() => {
-    setCurrentActiveStepIndexVal(currentActiveStepIndex ?? 0);
+    setCurrentActiveStepIndexVal((currentActiveStepIndex ?? 0) as  number);
   }, [currentActiveStepIndex]);
 
   const handleStepClick = (stepIndex: number): void => {
@@ -65,6 +65,7 @@ const Stepper: FC<IStepperProps> = (props) => {
               {step?.label && (
                 <span
                   style={{...styles.labelTitle,
+                    ...((enableStepClick && styles.cursorPointer) || {}),
                     ...((getLabelTitleStyles && getLabelTitleStyles(step, index)) || {}),
                     ...((index === currentActiveStepIndexVal && styles.activeLabelTitle) || {}),
                     ...((index === currentActiveStepIndexVal && getActiveLabelTitleStyles && getActiveLabelTitleStyles(step, index)) || {})
@@ -77,19 +78,23 @@ const Stepper: FC<IStepperProps> = (props) => {
               )}
               {step?.description && (
                 <span style={{...styles.labelDescription,
+                  ...((enableStepClick && styles.cursorPointer) || {}),
                   ...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, index)) || {}),
                   ...((index === currentActiveStepIndexVal) && styles.activeLabelDescription|| {}),
                   ...((index === currentActiveStepIndexVal && getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, index)) || {})
-                }}>
+                }}
+                onClick={(): void => handleStepClick(index)}
+                role="presentation"
+                >
                   {step.description}
                 </span>
               )}
             </div>
             {index < steps?.length - 1 && (
               <div style={{...styles.lineSeparator,
                 ...((getLineSeparatorStyles && getLineSeparatorStyles(step, index)) || {}),
-                ...((currentActiveStepIndexVal && index > currentActiveStepIndexVal - 1) && styles.inactiveStepLineSeparator || {}),
-                ...((currentActiveStepIndexVal && index > currentActiveStepIndexVal - 1
+                ...((index > currentActiveStepIndexVal - 1) && styles.inactiveStepLineSeparator || {}),
+                ...((index > currentActiveStepIndexVal - 1
                   && getInactiveLineSeparatorStyles && getInactiveLineSeparatorStyles(step, index)) || {})
               }} />
             )}

src/stepper-component/stepperComponent.tsx

@@ -55,6 +55,9 @@ const styles = {
   activeLabelDescription: {
     color: '#676767'
   },
+  cursorPointer: {
+    cursor: 'pointer'
+  },
   lineSeparator: {
     height: '22px',
     width: '1px',

src/stepper-component/styles.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react"
-import { LABEL_POSITION } from "../bubble/constants"
+import { LABEL_POSITION } from "../constants"
 export interface IStep {
     label: string,
     description?: string,

src/stepper-component/types.ts

@@ -14,8 +14,8 @@ export default {
 
   const Template: ComponentStory<typeof Stepper> = (args) => <Stepper {...args} />;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
+export const VerticalStepper = Template.bind({});
+VerticalStepper.args = {
   steps: [{
     label: 'Step 1',
     description: 'The quick brown fox jumps over the lazy dog'
@@ -36,5 +36,5 @@ LoggedIn.args = {
   enableStepClick: true,
   // onStepClick: (stepIndex: number) => console.log("🚀 ~ file: StepperComponent.stories.tsx:37 ~ stepIndex", stepIndex)
   // renderAdornment: (step, index) => {},
-  labelPosition: 'left'
+  // labelPosition: 'left'
 };