added left and right alignment options for label

Author: GokulSNath

src/bubble/constants.ts

@@ -2,4 +2,9 @@ export enum STEP_STATUSES {
    VISITED = 'visited',
    UNVISITED = 'unvisited',
    COMPLETED = 'completed'
+}
+
+export enum LABEL_POSITION {
+   LEFT = 'left',
+   RIGHT = 'right'
 }

src/stepper-component/stepperComponent.tsx

@@ -2,6 +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';
 
 const Stepper: FC<IStepperProps> = (props) => {
   const {
@@ -10,7 +11,8 @@ const Stepper: FC<IStepperProps> = (props) => {
     enableStepClick = false,
     onStepClick,
     renderAdornment,
-    stylesOverride = {}
+    stylesOverride = {},
+    labelPosition = LABEL_POSITION.RIGHT
   } = props;
 
   const {
@@ -54,7 +56,12 @@ const Stepper: FC<IStepperProps> = (props) => {
               getActiveBubbleStyles={getActiveBubbleStyles}
               getInActiveBubbleStyles={getInActiveBubbleStyles}
             />
-            <div style={styles.eachLabel}>
+            <div
+              style={{
+                ...styles.labelContainer,
+                ...styles[`labelContainer__${labelPosition}`] ?? {}
+              }}
+            >
               {step?.label && (
                 <span
                   style={{...styles.labelTitle,

src/stepper-component/styles.ts

@@ -23,15 +23,22 @@ const styles = {
     alignItems: 'center',
     width: 'fit-content'
   },
-  eachLabel: {
+  labelContainer: {
     position: 'absolute',
-    top: '4px',
-    left: '44px',
     width: 'max-content',
     height: 'fit-content',
     display: 'flex',
     flexDirection: 'column'
   },
+  labelContainer__right: {
+    top: '4px',
+    left: '44px'
+  },
+  labelContainer__left: {
+    top: '4px',
+    right: '44px',
+    alignItems: 'end'
+  },
   labelTitle: {
     color: '#4F4F4F'
   },

src/stepper-component/types.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react"
-
+import { LABEL_POSITION } from "../bubble/constants"
 export interface IStep {
     label: string,
     description?: string,
@@ -12,7 +12,8 @@ export interface IStepperProps {
     onStepClick?(stepIndex: number): void,
     enableStepClick?: boolean,
     renderAdornment?(step: IStep, index: number): ReactElement,
-    stylesOverride?: IStylesOverride
+    stylesOverride?: IStylesOverride,
+    labelPosition?: LABEL_POSITION.LEFT | LABEL_POSITION.RIGHT
 }
 
 export interface IStylesOverride {

src/stories/StepperComponent.stories.tsx

@@ -35,5 +35,6 @@ LoggedIn.args = {
   currentActiveStepIndex: 2,
   enableStepClick: true,
   // onStepClick: (stepIndex: number) => console.log("🚀 ~ file: StepperComponent.stories.tsx:37 ~ stepIndex", stepIndex)
-  // renderAdornment: (step, index) => {}
+  // renderAdornment: (step, index) => {},
+  labelPosition: 'left'
 };