changed to styles in ts from css

Author: GokulSNath

src/stepper-component/stepperComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, ReactElement } from 'react';
-import './styles.css';
+import styles from './styles';
 import { Istep, IstepperProps } from './types';
 import whiteTick from '../assets/white-tick.svg';
 import { STEP_STATUSES } from './constants';
@@ -21,44 +21,49 @@ const Stepper = (props: IstepperProps): ReactElement => {
   }
 
   return (
-    <div className="stepperContainer">
+    <div style={styles.stepperContainer}>
       {steps?.map((step: Istep, index: number): ReactElement => (
-        <div key={index} className="eachStep">
-          <div className='bubbleLineWrapper'>
+        <div key={index} style={styles.eachStep}>
+          <div style={styles.bubbleLineWrapper}>
             <div
-              className={`eachBubble
-              ${enableStepClick && 'cursorPointer'}
-              ${index === currentActiveStepIndexVal && 'activeStepBubble'}
-              ${(step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && 'inactiveStepBubble'}`}
+              style={{...styles.eachBubble,
+                ...((enableStepClick && styles.cursorPointer) || {}),
+                ...((index === currentActiveStepIndexVal) && styles.activeStepBubble || {}),
+                ...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && styles.inactiveStepBubble || {})
+              }}
               onClick={(): void => handleStepClick(index)}
+              role="presentation"
             >
               {step?.status === STEP_STATUSES.COMPLETED && (
                 <img
                   src={whiteTick}
-                  className="whiteTickImg"
+                  style={styles.whiteTickImg}
                   alt=""
                 />
               )
               || index + 1}
             </div>
-            <div className='eachLabel'>
-              {step.label && (
+            <div style={styles.eachLabel}>
+              {step?.label && (
                 <span
-                  className={`labelTitle ${index === currentActiveStepIndexVal && 'activeLabelTitle'}`}
+                  style={{...styles.labelTitle,
+                    ...((index === currentActiveStepIndexVal && styles.activeLabelTitle) || {})}}
                   onClick={(): void => handleStepClick(index)}
                   role="presentation"
                 >
-                  {step?.label}
+                  {step.label}
                 </span>
               )}
               {step?.description && (
-                <span className={`labelDescription ${index === currentActiveStepIndexVal && 'activeLabelDescription'}`}>
-                  {step?.description}
+                <span style={{...styles.labelDescription,
+                  ...((index === currentActiveStepIndexVal) && styles.activeLabelDescription|| {})}}>
+                  {step.description}
                 </span>
               )}
             </div>
             {index < steps?.length - 1 && (
-              <div className={`lineSeparator ${(index > currentActiveStepIndexVal - 1) && 'activeStepLineSeparator'}`} />
+              <div style={{...styles.lineSeparator,
+                ...((index > currentActiveStepIndexVal - 1) && styles.activeStepLineSeparator || {})}} />
             )}
           </div>
         </div>

src/stepper-component/styles.css

@@ -0,0 +1,91 @@
+
+
+const styles = {
+  stepperContainer: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    marginLeft: '10px',
+    alignItems: 'center'
+  },
+  stepSection: {
+    display: 'flex'
+  },
+  eachBubble: {
+    borderRadius: '50%',
+    height: '24px',
+    width: '24px',
+    background: '#312ec0',
+    color: 'white',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'visible',
+    fontWeight: '400',
+    fontSize: '12px',
+    lineHeight: '16px',
+    border: '7px solid'
+  },
+  activeStepBubble: {
+    border: '7px solid #CBCBEF'
+  },
+  inactiveStepBubble: {
+    opacity: 0.4
+  },
+  cursorPointer: {
+    cursor: 'pointer'
+  },
+  whiteTickImg: {
+    objectFit: 'cover',
+    width: '10px',
+    height: '8px'
+  },
+  eachStep: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative'
+  
+  },
+  bubbleLineWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: 'fit-content'
+  },
+  eachLabel: {
+    position: 'absolute',
+    top: '4px',
+    left: '44px',
+    width: 'max-content',
+    height: 'fit-content',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  labelTitle: {
+    color: '#4F4F4F'
+  },
+  activeLabelTitle: {
+    fontWeight: 700
+  },
+  labelDescription: {
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '21px',
+    letterSpacing: '0.02em',
+    color: '#929292'
+  },
+  activeLabelDescription: {
+    color: '#676767'
+  },
+  lineSeparator: {
+    height: '22px',
+    width: '1px',
+    borderRight: '2px solid #dfdff2',
+    margin: '4px 0'
+  },
+  activeStepLineSeparator: {
+    borderRight: '2px dashed #dfdff2'
+  }
+} as const
+export default styles;