added customizations to all elements

Author: GokulSNath

.eslintrc

@@ -23,7 +23,13 @@
     "@typescript-eslint/explicit-function-return-type": "error",
     "react/prop-types": "warn",
     "indent": ["error", 2],
-    "arrow-body-style": ["error", "as-needed"]
+    "arrow-body-style": ["error", "as-needed"],
+    "no-trailing-spaces":"error",
+    "comma-dangle":"error",
+    "default-case":"error",
+    "block-spacing": "error",
+    "max-len":["warn", 150],
+    "space-before-blocks":"error"
   },
   "settings": {
     "react": {

src/bubble/bubble.tsx

@@ -4,13 +4,27 @@ import whiteTick from '../assets/white-tick.svg';
 import { STEP_STATUSES } from './constants';
 import styles from './styles';
 const Bubble = (props: IBubbleProps): ReactElement => {
-  const { step, enableStepClick, renderAdornment, index, currentActiveStepIndexVal, handleStepClick } = props; 
+  const {
+    step,
+    enableStepClick,
+    renderAdornment,
+    index,
+    currentActiveStepIndexVal,
+    handleStepClick,
+    getBubbleStyles,
+    getActiveBubbleStyles,
+    getInActiveBubbleStyles
+  } = props;
   return (
     <div
       style={{...styles.eachBubble,
+        ...((getBubbleStyles && getBubbleStyles(step, index)) || {}),
         ...((enableStepClick && styles.cursorPointer) || {}),
         ...((index === currentActiveStepIndexVal) && styles.activeStepBubble || {}),
-        ...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && styles.inactiveStepBubble || {})
+        ...((index === currentActiveStepIndexVal && getActiveBubbleStyles && getActiveBubbleStyles(step, index)) || {}),
+        ...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && styles.inactiveStepBubble || {}),
+        ...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index
+            && getInActiveBubbleStyles && getInActiveBubbleStyles(step, index)) || {})
       }}
       onClick={(): void => handleStepClick(index)}
       role="presentation"

src/bubble/constants.ts

@@ -1,9 +1,5 @@
-const VISITED = 'visited';
-const UNVISITED = 'unvisited';
-const COMPLETED = 'completed';
-
-export const STEP_STATUSES = {
-  VISITED,
-  UNVISITED,
-  COMPLETED
-};
+export enum STEP_STATUSES {
+   VISITED = 'visited',
+   UNVISITED = 'unvisited',
+   COMPLETED = 'completed'
+}

src/bubble/types.d.ts

@@ -7,5 +7,8 @@ export interface IBubbleProps {
     renderAdornment?(step: IStep, index: number): ReactElement,
     index: number,
     currentActiveStepIndexVal: number,
-    handleStepClick(index: number): void
+    handleStepClick(index: number): void,
+    getBubbleStyles?(step: IStep, index: number): object,
+    getActiveBubbleStyles?(step: IStep, index: number): object,
+    getInActiveBubbleStyles?(step: IStep, index: number): object,
 }

src/stepper-component/stepperComponent.tsx

@@ -4,7 +4,26 @@ import { IStep, IStepperProps } from './types';
 import Bubble from '../bubble';
 
 const Stepper = (props: IStepperProps): ReactElement => {
-  const { steps, currentActiveStepIndex, onStepClick, enableStepClick = false, renderAdornment } = props;
+  const {
+    steps,
+    currentActiveStepIndex,
+    enableStepClick = false,
+    onStepClick,
+    renderAdornment,
+    stylesOverride
+  } = props;
+
+  const {
+    getLabelDescriptionStyles,
+    getLabelTitleStyles,
+    getActiveLabelTitleStyles,
+    getActiveLabelDescriptionStyles,
+    getLineSeparatorStyles,
+    getInactiveLineSeparatorStyles,
+    getBubbleStyles,
+    getActiveBubbleStyles,
+    getInActiveBubbleStyles
+  } = stylesOverride;
 
   const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>();
 
@@ -31,12 +50,18 @@ const Stepper = (props: IStepperProps): ReactElement => {
               currentActiveStepIndexVal= {currentActiveStepIndexVal}
               handleStepClick={handleStepClick}
               renderAdornment={renderAdornment}
+              getBubbleStyles={getBubbleStyles}
+              getActiveBubbleStyles={getActiveBubbleStyles}
+              getInActiveBubbleStyles={getInActiveBubbleStyles}
             />
             <div style={styles.eachLabel}>
               {step?.label && (
                 <span
                   style={{...styles.labelTitle,
-                    ...((index === currentActiveStepIndexVal && styles.activeLabelTitle) || {})}}
+                    ...((getLabelTitleStyles && getLabelTitleStyles(step, index)) || {}),
+                    ...((index === currentActiveStepIndexVal && styles.activeLabelTitle) || {}),
+                    ...((index === currentActiveStepIndexVal && getActiveLabelTitleStyles && getActiveLabelTitleStyles(step, index)) || {})
+                  }}
                   onClick={(): void => handleStepClick(index)}
                   role="presentation"
                 >
@@ -45,14 +70,21 @@ const Stepper = (props: IStepperProps): ReactElement => {
               )}
               {step?.description && (
                 <span style={{...styles.labelDescription,
-                  ...((index === currentActiveStepIndexVal) && styles.activeLabelDescription|| {})}}>
+                  ...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, index)) || {}),
+                  ...((index === currentActiveStepIndexVal) && styles.activeLabelDescription|| {}),
+                  ...((index === currentActiveStepIndexVal && getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, index)) || {})
+                }}>
                   {step.description}
                 </span>
               )}
             </div>
             {index < steps?.length - 1 && (
               <div style={{...styles.lineSeparator,
-                ...((index > currentActiveStepIndexVal - 1) && styles.activeStepLineSeparator || {})}} />
+                ...((getLineSeparatorStyles && getLineSeparatorStyles(step, index)) || {}),
+                ...((index > currentActiveStepIndexVal - 1) && styles.inactiveStepLineSeparator || {}),
+                ...((index > currentActiveStepIndexVal - 1&& getInactiveLineSeparatorStyles && getInactiveLineSeparatorStyles(step, index)) || {})
+
+              }} />
             )}
           </div>
         </div>

src/stepper-component/styles.ts

@@ -1,5 +1,4 @@
 
-
 const styles = {
   stepperContainer: {
     display: 'flex',
@@ -16,7 +15,7 @@ const styles = {
     display: 'flex',
     flexDirection: 'column',
     position: 'relative'
-      
+
   },
   bubbleLineWrapper: {
     display: 'flex',
@@ -55,7 +54,7 @@ const styles = {
     borderRight: '2px solid #dfdff2',
     margin: '4px 0'
   },
-  activeStepLineSeparator: {
+  inactiveStepLineSeparator: {
     borderRight: '2px dashed #dfdff2'
   }
 } as const

src/stepper-component/types.ts

@@ -11,5 +11,18 @@ export interface IStepperProps {
     currentActiveStepIndex: number,
     onStepClick?(stepIndex: number): void,
     enableStepClick?: boolean,
-    renderAdornment?(step: IStep, index: number): ReactElement
+    renderAdornment?(step: IStep, index: number): ReactElement,
+    stylesOverride?: IStylesOverride
+}
+
+export interface IStylesOverride {
+    getLabelDescriptionStyles?(step: IStep, index: number): object,
+    getLabelTitleStyles?(step: IStep, index: number): object,
+    getActiveLabelDescriptionStyles?(step: IStep, index: number): object,
+    getActiveLabelTitleStyles?(step: IStep, index: number): object,
+    getLineSeparatorStyles?(step: IStep, index: number): object,
+    getInactiveLineSeparatorStyles?(step: IStep, index: number): object,
+    getBubbleStyles?(step: IStep, index: number): object,
+    getActiveBubbleStyles?(step: IStep, index: number): object,
+    getInActiveBubbleStyles?(step: IStep, index: number): object,
 }