moved label render inside bubble component

Author: GokulSNath

src/bubble/bubble.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import type { IBubbleProps } from "./types";
 import { Elements } from "../constants";
 import whiteTick from '../assets/white-tick.svg';
-import { STEP_STATUSES } from '../constants';
+import { STEP_STATUSES, LABEL_POSITION } from '../constants';
 import styles from './styles.module.scss';
 
 const Bubble: FC<IBubbleProps> = (props) => {
@@ -13,7 +13,8 @@ const Bubble: FC<IBubbleProps> = (props) => {
     currentStepIndex,
     handleStepClick = null,
     showCursor,
-    getStyles
+    getStyles,
+    labelPosition
   } = props;
 
   return (
@@ -45,6 +46,41 @@ const Bubble: FC<IBubbleProps> = (props) => {
         || index + 1}
       </>
     )}
+      <div className={`${styles.labelContainer} ${styles[`labelContainer__${labelPosition || LABEL_POSITION.RIGHT}`]}`}>
+        {step?.label && (
+          <span
+            className={`${styles.labelTitle}
+                  ${showCursor && styles.cursorPointer}
+                  ${index === currentStepIndex && styles.activeLabelTitle}`}
+            style={{
+              ...((getStyles(Elements.LabelTitle)) || {}),
+              ...((index === currentStepIndex && getStyles(Elements.ActiveLabelTitle)) || {})
+            }}
+            onClick={(): void | null => handleStepClick && handleStepClick()}
+            role="presentation"
+            id={`stepper-label-${index}`}
+          >
+            {step.label}
+          </span>
+        )}
+        {step?.description && (
+          <span
+            className={`${styles.labelDescription}
+                  ${handleStepClick && styles.cursorPointer}
+                  ${index === currentStepIndex && styles.activeLabelDescription}`}
+            style={{
+              ...((getStyles(Elements.LabelDescription)) || {}),
+              ...((index === currentStepIndex &&
+                      getStyles(Elements.ActiveLabelDescription)) || {})
+            }}
+            onClick={(): void | null => handleStepClick && handleStepClick()}
+            role="presentation"
+            id={`stepper-desc-${index}`}
+          >
+            {step.description}
+          </span>
+        )}
+      </div>
     </div>
   );
 };

src/bubble/styles.module.scss

@@ -11,10 +11,12 @@
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
-    border: 7px solid;
+    margin: 7px;
+    position: relative;
   }
   .activeStepBubble {
     border: 7px solid #CBCBEF;
+    margin: 0;
   }
   .inactiveStepBubble {
     opacity: 0.4;
@@ -26,4 +28,35 @@
   }
   .cursorPointer {
     cursor: pointer;
+  }
+
+  .labelContainer {
+    position: absolute;
+    width: max-content;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &__right {
+      left: 44px;
+    }
+    &__left {
+      right: 44px;
+      align-items: end;
+    }
+    .labelTitle {
+      color: #4F4F4F;
+    }
+    .activeLabelTitle {
+      font-weight: 700;
+    }
+    .labelDescription {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 21px;
+      color: #929292;
+    }
+    .activeLabelDescription {
+      color: #676767;
+    }
   }

src/bubble/types.d.ts

@@ -9,5 +9,6 @@ export type IBubbleProps = {
   currentStepIndex?: number,
   handleStepClick(): void,
   showCursor: boolean,
-  getStyles(element: Elements): object
+  getStyles(element: Elements): object,
+  labelPosition: 'left' | 'right'
 }

src/stepper-component/stepperComponent.tsx

@@ -35,42 +35,8 @@ const Stepper: FC<IStepperProps> = (props) => {
               showCursor={!!onStepClick}
               renderAdornment={renderBubble}
               getStyles={(element: Elements): object => getStyles(element, step, stepIndex)}
+              labelPosition={labelPosition}
             />
-            <div className={`${classes.labelContainer} ${classes[`labelContainer__${labelPosition || LABEL_POSITION.RIGHT}`]}`}>
-              {step?.label && (
-                <span
-                  className={`${classes.labelTitle}
-                  ${onStepClick && classes.cursorPointer}
-                  ${stepIndex === currentStepIndex && classes.activeLabelTitle}`}
-                  style={{
-                    ...((getStyles(Elements.LabelTitle, step, stepIndex)) || {}),
-                    ...((stepIndex === currentStepIndex && getStyles(Elements.ActiveLabelTitle, step, stepIndex)) || {})
-                  }}
-                  onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
-                  role="presentation"
-                  id={`stepper-label-${stepIndex}`}
-                >
-                  {step.label}
-                </span>
-              )}
-              {step?.description && (
-                <span
-                  className={`${classes.labelDescription}
-                  ${onStepClick && classes.cursorPointer}
-                  ${stepIndex === currentStepIndex && classes.activeLabelDescription}`}
-                  style={{
-                    ...((getStyles(Elements.LabelDescription, step, stepIndex)) || {}),
-                    ...((stepIndex === currentStepIndex &&
-                      getStyles(Elements.ActiveLabelDescription, step, stepIndex)) || {})
-                  }}
-                  onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
-                  role="presentation"
-                  id={`stepper-desc-${stepIndex}`}
-                >
-                  {step.description}
-                </span>
-              )}
-            </div>
             {stepIndex < steps?.length - 1 && (
               <div
                 className={`${classes.lineSeparator}

src/stepper-component/styles.module.scss

@@ -15,37 +15,6 @@
       flex-direction: column;
       align-items: center;
       width: fit-content;
-      .labelContainer {
-        position: absolute;
-        width: max-content;
-        height: fit-content;
-        display: flex;
-        flex-direction: column;
-        &__right {
-          top: 4px;
-          left: 44px;
-        }
-        &__left {
-          top: 4px;
-          right: 44px;
-          align-items: end;
-        }
-        .labelTitle {
-          color: #4F4F4F;
-        }
-        .activeLabelTitle {
-          font-weight: 700;
-        }
-        .labelDescription {
-          font-weight: 400;
-          font-size: 12px;
-          line-height: 21px;
-          color: #929292;
-        }
-        .activeLabelDescription {
-          color: #676767;
-        }
-      }
       .lineSeparator {
         height: 22px;
         width: 1px;