Skip to content

Commit 80ec347

Browse files
GokulSNathGokulSNath
committed
changed built in styles to scss
1 parent 2ee9034 commit 80ec347

10 files changed

Lines changed: 224 additions & 801 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
}

‎package-lock.json‎

Lines changed: 85 additions & 636 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bubble/bubble.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ 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,
@@ -17,12 +17,14 @@ const Bubble: FC<IBubbleProps> = (props) => {
1717
} = props;
1818
return (
1919
<div
20-
style={{...styles.eachBubble,
20+
className={`${styles.eachBubble}
21+
${enableStepClick && styles.cursorPointer}
22+
${index === currentActiveStepIndexVal && styles.activeStepBubble}
23+
${step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index && styles.inactiveStepBubble}
24+
`}
25+
style={{
2126
...((getBubbleStyles && getBubbleStyles(step, index)) || {}),
22-
...((enableStepClick && styles.cursorPointer) || {}),
23-
...((index === currentActiveStepIndexVal) && styles.activeStepBubble || {}),
2427
...((index === currentActiveStepIndexVal && getActiveBubbleStyles && getActiveBubbleStyles(step, index)) || {}),
25-
...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && styles.inactiveStepBubble || {}),
2628
...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index
2729
&& getInActiveBubbleStyles && getInActiveBubbleStyles(step, index)) || {})
2830
}}
@@ -35,7 +37,7 @@ const Bubble: FC<IBubbleProps> = (props) => {
3537
{step?.status === STEP_STATUSES.COMPLETED && (
3638
<img
3739
src={whiteTick}
38-
style={styles.whiteTickImg}
40+
className={styles.whiteTickImg}
3941
alt=""
4042
/>)
4143
|| 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/stepper-component/stepperComponent.tsx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect, ReactElement, FC } from 'react';
2-
import styles from './styles';
2+
import styles from './styles.module.scss';
33
import { IStep, IStepperProps } from './types';
44
import Bubble from '../bubble';
55
import { LABEL_POSITION } from '../constants';
@@ -41,10 +41,10 @@ const Stepper: FC<IStepperProps> = (props) => {
4141
}
4242

4343
return (
44-
<div style={styles.stepperContainer}>
44+
<div className={styles.stepperContainer}>
4545
{steps?.map((step: IStep, index: number): ReactElement => (
46-
<div key={index} style={styles.eachStep}>
47-
<div style={styles.bubbleLineWrapper}>
46+
<div key={index} className={styles.eachStep}>
47+
<div className={styles.bubbleLineWrapper}>
4848
<Bubble
4949
step={step}
5050
index={index}
@@ -56,18 +56,14 @@ const Stepper: FC<IStepperProps> = (props) => {
5656
getActiveBubbleStyles={getActiveBubbleStyles}
5757
getInActiveBubbleStyles={getInActiveBubbleStyles}
5858
/>
59-
<div
60-
style={{
61-
...styles.labelContainer,
62-
...styles[`labelContainer__${labelPosition}`] ?? {}
63-
}}
64-
>
59+
<div className={`${styles.labelContainer} ${styles[`labelContainer__${labelPosition || LABEL_POSITION.RIGHT}`]}`}>
6560
{step?.label && (
6661
<span
67-
style={{...styles.labelTitle,
68-
...((enableStepClick && styles.cursorPointer) || {}),
62+
className={`${styles.labelTitle}
63+
${enableStepClick && styles.cursorPointer}
64+
${index === currentActiveStepIndexVal && styles.activeLabelTitle}`}
65+
style={{
6966
...((getLabelTitleStyles && getLabelTitleStyles(step, index)) || {}),
70-
...((index === currentActiveStepIndexVal && styles.activeLabelTitle) || {}),
7167
...((index === currentActiveStepIndexVal && getActiveLabelTitleStyles && getActiveLabelTitleStyles(step, index)) || {})
7268
}}
7369
onClick={(): void => handleStepClick(index)}
@@ -77,26 +73,32 @@ const Stepper: FC<IStepperProps> = (props) => {
7773
</span>
7874
)}
7975
{step?.description && (
80-
<span style={{...styles.labelDescription,
81-
...((enableStepClick && styles.cursorPointer) || {}),
82-
...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, index)) || {}),
83-
...((index === currentActiveStepIndexVal) && styles.activeLabelDescription|| {}),
84-
...((index === currentActiveStepIndexVal && getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, index)) || {})
85-
}}
86-
onClick={(): void => handleStepClick(index)}
87-
role="presentation"
76+
<span
77+
className={`${styles.labelDescription}
78+
${enableStepClick && styles.cursorPointer}
79+
${index === currentActiveStepIndexVal && styles.activeLabelDescription}`}
80+
style={{
81+
...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, index)) || {}),
82+
...((index === currentActiveStepIndexVal &&
83+
getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, index)) || {})
84+
}}
85+
onClick={(): void => handleStepClick(index)}
86+
role="presentation"
8887
>
8988
{step.description}
9089
</span>
9190
)}
9291
</div>
9392
{index < steps?.length - 1 && (
94-
<div style={{...styles.lineSeparator,
95-
...((getLineSeparatorStyles && getLineSeparatorStyles(step, index)) || {}),
96-
...((index > currentActiveStepIndexVal - 1) && styles.inactiveStepLineSeparator || {}),
97-
...((index > currentActiveStepIndexVal - 1
93+
<div
94+
className={`${styles.lineSeparator}
95+
${index > currentActiveStepIndexVal - 1 && styles.inactiveStepLineSeparator}`}
96+
style={{
97+
...((getLineSeparatorStyles && getLineSeparatorStyles(step, index)) || {}),
98+
...((index > currentActiveStepIndexVal - 1
9899
&& getInactiveLineSeparatorStyles && getInactiveLineSeparatorStyles(step, index)) || {})
99-
}} />
100+
}}
101+
/>
100102
)}
101103
</div>
102104
</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
}

‎src/stepper-component/styles.ts‎

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

‎src/stepper-component/types.ts‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,16 @@ export interface IStepperProps {
1616
labelPosition?: LABEL_POSITION.LEFT | LABEL_POSITION.RIGHT
1717
}
1818

19+
export type IStyleFunction = (step: IStep, index: number) => object
20+
1921
export interface IStylesOverride {
20-
getLabelDescriptionStyles?(step: IStep, index: number): object,
21-
getLabelTitleStyles?(step: IStep, index: number): object,
22-
getActiveLabelDescriptionStyles?(step: IStep, index: number): object,
23-
getActiveLabelTitleStyles?(step: IStep, index: number): object,
24-
getLineSeparatorStyles?(step: IStep, index: number): object,
25-
getInactiveLineSeparatorStyles?(step: IStep, index: number): object,
26-
getBubbleStyles?(step: IStep, index: number): object,
27-
getActiveBubbleStyles?(step: IStep, index: number): object,
28-
getInActiveBubbleStyles?(step: IStep, index: number): object,
29-
}
22+
getLabelDescriptionStyles?: IStyleFunction,
23+
getLabelTitleStyles?: IStyleFunction,
24+
getActiveLabelDescriptionStyles?: IStyleFunction,
25+
getActiveLabelTitleStyles?: IStyleFunction,
26+
getLineSeparatorStyles?: IStyleFunction,
27+
getInactiveLineSeparatorStyles?: IStyleFunction,
28+
getBubbleStyles?: IStyleFunction,
29+
getActiveBubbleStyles?: IStyleFunction,
30+
getInActiveBubbleStyles?: IStyleFunction,
31+
}

‎src/stories/StepperComponent.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,5 @@ VerticalStepper.args = {
3636
enableStepClick: true,
3737
// onStepClick: (stepIndex: number) => console.log("🚀 ~ file: StepperComponent.stories.tsx:37 ~ stepIndex", stepIndex)
3838
// renderAdornment: (step, index) => {},
39-
// labelPosition: 'left'
39+
// labelPosition: 'right'
4040
};

0 commit comments

Comments
 (0)