Skip to content

Commit 12e8d6a

Browse files
aarathyKeyvalueaarathyKeyvalue
authored
Changed default styles in to scss and changed prop names
2 parents cf0fccc + 0c52f63 commit 12e8d6a

10 files changed

Lines changed: 171 additions & 216 deletions

File tree

‎global.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
declare module "*.svg" {
22
const content: string;
33
export default content;
4+
}
5+
declare module '*.scss' {
6+
const content: Record<string, string>;
7+
export default content;
48
}

‎src/bubble/bubble.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,32 @@ import React, { FC } from "react";
22
import { IBubbleProps } from "./types";
33
import whiteTick from '../assets/white-tick.svg';
44
import { STEP_STATUSES } from '../constants';
5-
import styles from './styles';
5+
import styles from './styles.module.scss';
66
const Bubble: FC<IBubbleProps> = (props) => {
77
const {
88
step,
9-
enableStepClick,
109
renderAdornment,
1110
index,
12-
currentActiveStepIndexVal,
13-
handleStepClick,
11+
currentStepIndex,
12+
handleStepClick = null,
1413
getBubbleStyles,
1514
getActiveBubbleStyles,
1615
getInActiveBubbleStyles
1716
} = props;
1817
return (
1918
<div
20-
style={{...styles.eachBubble,
19+
className={`${styles.eachBubble}
20+
${handleStepClick && styles.cursorPointer}
21+
${index === currentStepIndex && styles.activeStepBubble}
22+
${step.status === STEP_STATUSES.UNVISITED && currentStepIndex !== index && styles.inactiveStepBubble}
23+
`}
24+
style={{
2125
...((getBubbleStyles && getBubbleStyles(step, index)) || {}),
22-
...((enableStepClick && styles.cursorPointer) || {}),
23-
...((index === currentActiveStepIndexVal) && styles.activeStepBubble || {}),
24-
...((index === currentActiveStepIndexVal && getActiveBubbleStyles && getActiveBubbleStyles(step, index)) || {}),
25-
...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && styles.inactiveStepBubble || {}),
26-
...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index
26+
...((index === currentStepIndex && getActiveBubbleStyles && getActiveBubbleStyles(step, index)) || {}),
27+
...((step.status === STEP_STATUSES.UNVISITED && currentStepIndex !== index
2728
&& getInActiveBubbleStyles && getInActiveBubbleStyles(step, index)) || {})
2829
}}
29-
onClick={(): void => handleStepClick(index)}
30+
onClick={(): void | null => handleStepClick && handleStepClick()}
3031
role="presentation"
3132
data-testId="stepper-bubble"
3233
>
@@ -36,7 +37,7 @@ const Bubble: FC<IBubbleProps> = (props) => {
3637
{step?.status === STEP_STATUSES.COMPLETED && (
3738
<img
3839
src={whiteTick}
39-
style={styles.whiteTickImg}
40+
className={styles.whiteTickImg}
4041
alt=""
4142
/>)
4243
|| index + 1}

‎src/bubble/styles.module.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.eachBubble {
2+
border-radius: 50%;
3+
height: 24px;
4+
width: 24px;
5+
background: #312ec0;
6+
color: white;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
overflow: visible;
11+
font-weight: 400;
12+
font-size: 12px;
13+
line-height: 16px;
14+
border: 7px solid;
15+
}
16+
.activeStepBubble {
17+
border: 7px solid #CBCBEF;
18+
}
19+
.inactiveStepBubble {
20+
opacity: 0.4;
21+
}
22+
.whiteTickImg {
23+
object-fit: cover;
24+
width: 10px;
25+
height: 8px;
26+
}
27+
.cursorPointer {
28+
cursor: pointer;
29+
}

‎src/bubble/styles.ts‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/bubble/types.d.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { ReactElement } from "react";
2-
import { IStep } from "../stepper-component/types";
2+
import { IStep, IStyleFunction } from "../stepper-component/types";
33

44
export interface IBubbleProps {
55
step: IStep,
6-
enableStepClick: boolean,
76
renderAdornment?(step: IStep, index: number): ReactElement,
87
index: number,
9-
currentActiveStepIndexVal?: number,
10-
handleStepClick(index: number): void,
11-
getBubbleStyles?(step: IStep, index: number): object,
12-
getActiveBubbleStyles?(step: IStep, index: number): object,
13-
getInActiveBubbleStyles?(step: IStep, index: number): object,
8+
currentStepIndex?: number,
9+
handleStepClick(): void,
10+
getBubbleStyles?: IStyleFunction,
11+
getActiveBubbleStyles?: IStyleFunction,
12+
getInActiveBubbleStyles?: IStyleFunction
1413
}

‎src/stepper-component/stepperComponent.tsx‎

Lines changed: 44 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import React, { useState, useEffect, ReactElement, FC } from 'react';
2-
import styles from './styles';
2+
import classes from './styles.module.scss';
33
import { IStep, IStepperProps } from './types';
44
import Bubble from '../bubble';
55
import { LABEL_POSITION } from '../constants';
66

77
const Stepper: FC<IStepperProps> = (props) => {
88
const {
99
steps,
10-
currentActiveStepIndex,
11-
enableStepClick = false,
10+
currentStepIndex,
1211
onStepClick,
13-
renderAdornment,
14-
stylesOverride = {},
12+
renderBubble,
13+
styles = {},
1514
labelPosition = LABEL_POSITION.RIGHT
1615
} = props;
1716

@@ -25,80 +24,68 @@ const Stepper: FC<IStepperProps> = (props) => {
2524
getBubbleStyles,
2625
getActiveBubbleStyles,
2726
getInActiveBubbleStyles
28-
} = stylesOverride;
29-
30-
const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>(0);
31-
32-
useEffect(() => {
33-
setCurrentActiveStepIndexVal((currentActiveStepIndex ?? 0) as number);
34-
}, [currentActiveStepIndex]);
35-
36-
const handleStepClick = (stepIndex: number): void => {
37-
if (enableStepClick) {
38-
if (onStepClick) onStepClick(stepIndex);
39-
else setCurrentActiveStepIndexVal(stepIndex);
40-
}
41-
}
27+
} = styles;
4228

4329
return (
44-
<div style={styles.stepperContainer}>
45-
{steps?.map((step: IStep, index: number): ReactElement => (
46-
<div key={index} style={styles.eachStep} data-testId="stepper-steps">
47-
<div style={styles.bubbleLineWrapper}>
30+
<div className={classes.stepperContainer}>
31+
{steps?.map((step: IStep, stepIndex: number): ReactElement => (
32+
<div key={stepIndex} className={classes.eachStep} data-testId="stepper-steps">
33+
<div className={classes.bubbleLineWrapper}>
4834
<Bubble
4935
step={step}
50-
index={index}
51-
enableStepClick={enableStepClick}
52-
currentActiveStepIndexVal= {currentActiveStepIndexVal}
53-
handleStepClick={handleStepClick}
54-
renderAdornment={renderAdornment}
36+
index={stepIndex}
37+
currentStepIndex= {currentStepIndex}
38+
handleStepClick={(): void => onStepClick && onStepClick(step, stepIndex)}
39+
renderAdornment={renderBubble}
5540
getBubbleStyles={getBubbleStyles}
5641
getActiveBubbleStyles={getActiveBubbleStyles}
5742
getInActiveBubbleStyles={getInActiveBubbleStyles}
5843
/>
59-
<div
60-
style={{
61-
...styles.labelContainer,
62-
...styles[`labelContainer__${labelPosition}`] ?? {}
63-
}}
64-
>
44+
<div className={`${classes.labelContainer} ${classes[`labelContainer__${labelPosition || LABEL_POSITION.RIGHT}`]}`}>
6545
{step?.label && (
6646
<span
67-
style={{...styles.labelTitle,
68-
...((enableStepClick && styles.cursorPointer) || {}),
69-
...((getLabelTitleStyles && getLabelTitleStyles(step, index)) || {}),
70-
...((index === currentActiveStepIndexVal && styles.activeLabelTitle) || {}),
71-
...((index === currentActiveStepIndexVal && getActiveLabelTitleStyles && getActiveLabelTitleStyles(step, index)) || {})
47+
className={`${classes.labelTitle}
48+
${onStepClick && classes.cursorPointer}
49+
${stepIndex === currentStepIndex && classes.activeLabelTitle}`}
50+
style={{
51+
...((getLabelTitleStyles && getLabelTitleStyles(step, stepIndex)) || {}),
52+
...((stepIndex === currentStepIndex && getActiveLabelTitleStyles && getActiveLabelTitleStyles(step, stepIndex)) || {})
7253
}}
73-
onClick={(): void => handleStepClick(index)}
54+
onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
7455
role="presentation"
75-
data-testId={`stepper-label-${index}`}
56+
data-testId={`stepper-label-${stepIndex}`}
7657
>
7758
{step.label}
7859
</span>
7960
)}
8061
{step?.description && (
81-
<span style={{...styles.labelDescription,
82-
...((enableStepClick && styles.cursorPointer) || {}),
83-
...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, index)) || {}),
84-
...((index === currentActiveStepIndexVal) && styles.activeLabelDescription|| {}),
85-
...((index === currentActiveStepIndexVal && getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, index)) || {})
86-
}}
87-
onClick={(): void => handleStepClick(index)}
88-
role="presentation"
89-
data-testId={`stepper-desc-${index}`}
62+
<span
63+
className={`${classes.labelDescription}
64+
${onStepClick && classes.cursorPointer}
65+
${stepIndex === currentStepIndex && classes.activeLabelDescription}`}
66+
style={{
67+
...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, stepIndex)) || {}),
68+
...((stepIndex === currentStepIndex &&
69+
getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, stepIndex)) || {})
70+
}}
71+
onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
72+
role="presentation"
73+
data-testId={`stepper-desc-${stepIndex}`}
9074
>
9175
{step.description}
9276
</span>
9377
)}
9478
</div>
95-
{index < steps?.length - 1 && (
96-
<div style={{...styles.lineSeparator,
97-
...((getLineSeparatorStyles && getLineSeparatorStyles(step, index)) || {}),
98-
...((index > currentActiveStepIndexVal - 1) && styles.inactiveStepLineSeparator || {}),
99-
...((index > currentActiveStepIndexVal - 1
100-
&& getInactiveLineSeparatorStyles && getInactiveLineSeparatorStyles(step, index)) || {})
101-
}} />
79+
{stepIndex < steps?.length - 1 && (
80+
<div
81+
className={`${classes.lineSeparator}
82+
${currentStepIndex && stepIndex > currentStepIndex - 1 && classes.inactiveStepLineSeparator}`}
83+
style={{
84+
...((getLineSeparatorStyles && getLineSeparatorStyles(step, stepIndex)) || {}),
85+
...(( currentStepIndex && stepIndex > currentStepIndex - 1
86+
&& getInactiveLineSeparatorStyles && getInactiveLineSeparatorStyles(step, stepIndex)) || {})
87+
}}
88+
/>
10289
)}
10390
</div>
10491
</div>

‎src/stepper-component/styles.module.scss‎

Lines changed: 57 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,63 @@
11
.stepperContainer {
2+
display: flex;
3+
width: 100%;
4+
height: 100%;
5+
flex-direction: column;
6+
margin-left: 10px;
7+
align-items: center;
8+
.eachStep {
29
display: flex;
3-
width: 100%;
4-
height: 100%;
510
flex-direction: column;
6-
margin-left: 10px;
7-
}
8-
9-
.eachBubble {
10-
border-radius: 50%;
11-
height: 24px;
12-
width: 24px;
13-
background-color: blue;
14-
color: white;
15-
display: flex;
1611
align-items: center;
17-
justify-content: center;
12+
position: relative;
13+
.bubbleLineWrapper {
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
width: fit-content;
18+
.labelContainer {
19+
position: absolute;
20+
width: max-content;
21+
height: fit-content;
22+
display: flex;
23+
flex-direction: column;
24+
&__right {
25+
top: 4px;
26+
left: 44px;
27+
}
28+
&__left {
29+
top: 4px;
30+
right: 44px;
31+
align-items: end;
32+
}
33+
.labelTitle {
34+
color: #4F4F4F;
35+
}
36+
.activeLabelTitle {
37+
font-weight: 700;
38+
}
39+
.labelDescription {
40+
font-weight: 400;
41+
font-size: 12px;
42+
line-height: 21px;
43+
color: #929292;
44+
}
45+
.activeLabelDescription {
46+
color: #676767;
47+
}
48+
}
49+
.lineSeparator {
50+
height: 22px;
51+
width: 1px;
52+
border-right: 2px solid #dfdff2;
53+
margin: 4px 0;
54+
}
55+
.inactiveStepLineSeparator {
56+
border-right: 2px dashed #dfdff2;
57+
}
58+
}
59+
}
1860
}
19-
20-
.eachStep {
21-
display: flex;
22-
flex-direction: column;
23-
align-items: 'center'
61+
.cursorPointer {
62+
cursor: pointer;
2463
}

0 commit comments

Comments
 (0)