Skip to content

Commit 01cf538

Browse files
byohannesbyohannes
committed
Resolve PR comment and implement the stepper component to match material UI design requirement and improve demos
1 parent e31ef42 commit 01cf538

File tree

8 files changed

+598
-595
lines changed

8 files changed

+598
-595
lines changed

‎example/src/components/StepperDemo.tsx‎

Lines changed: 78 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,12 @@ import {
77
} from '@capgeminiuk/dcx-react-library';
88
import './stepper.scss';
99

10-
const StepperDemo: React.FC = () => {
10+
const StepperDemo = () => {
1111
const [activeStepHorizontal, setActiveStepHorizontal] = useState(0);
1212
const [activeStepVertical, setActiveStepVertical] = useState(0);
1313
const [activeStepCustomSeparator, setActiveStepCustomSeparator] = useState(0);
1414
const [activeStepItems, setActiveStepItems] = useState(0);
1515

16-
const handleStepChange = (
17-
setter: React.Dispatch<React.SetStateAction<number>>,
18-
step: number
19-
) => {
20-
setter(step);
21-
};
22-
2316
const steps = [
2417
{
2518
header: 'Campaign Settings',
@@ -285,8 +278,8 @@ const StepperDemo: React.FC = () => {
285278

286279
const renderStepper = (
287280
activeStep: number,
288-
setter: React.Dispatch<React.SetStateAction<number>>,
289-
items: any[],
281+
setActiveStep: React.Dispatch<React.SetStateAction<number>>,
282+
steps: { header: string; content: React.ReactNode }[],
290283
orientation: 'horizontal' | 'vertical',
291284
customSeparator: JSX.Element | undefined = undefined
292285
) => (
@@ -295,36 +288,90 @@ const StepperDemo: React.FC = () => {
295288
selectedStep={activeStep}
296289
separator={customSeparator || <hr className="separator" />}
297290
>
298-
{items.map((item, index) => (
291+
{steps.map((step, index) => (
299292
<Step
300293
key={index}
301294
className={`step ${activeStep === index ? 'active' : ''}`}
295+
style={{ display: orientation === 'horizontal' ? 'inline-flex' : 'flex' }}
302296
>
303-
<StepHeader className="step-header">
304-
<div className="step-number" aria-label={`Step ${index + 1}`}>
305-
{activeStep > index ? '✔️' : index + 1}
297+
<StepHeader onClick={() => setActiveStep(index)} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
298+
<div style={{
299+
width: '30px',
300+
height: '30px',
301+
borderRadius: '50%',
302+
backgroundColor: activeStep >= index ? '#1976d2' : '#D1D0CE',
303+
color: 'white',
304+
display: 'flex',
305+
alignItems: 'center',
306+
justifyContent: 'center',
307+
marginRight: '10px',
308+
fontSize: '14px',
309+
fontWeight: 'bold'
310+
}}>
311+
{activeStep > index ? '✓' : index + 1}
306312
</div>
307-
{item.header}
313+
<div style={{ fontSize: '16px', fontWeight: 'bold', color: '#333' }}>{step.header}</div>
308314
</StepHeader>
309-
<StepContent className="step-content">
310-
<div>{item.content}</div>
311-
<div className="button-container">
315+
<StepContent>
316+
<div>{step.content}</div>
317+
<div className="button-container" style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
312318
{index > 0 && (
313319
<button
314-
onClick={() => handleStepChange(setter, index - 1)}
320+
onClick={() => setActiveStep(index - 1)}
315321
aria-label="Previous Step"
322+
style={{
323+
padding: '10px 20px',
324+
fontSize: '14px',
325+
backgroundColor: '#1976d2',
326+
color: 'white',
327+
border: 'none',
328+
borderRadius: '4px',
329+
cursor: 'pointer',
330+
margin: '0 5px',
331+
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
332+
}}
316333
>
317334
Prev
318335
</button>
319336
)}
320-
{index < items.length - 1 && (
337+
{index < steps.length - 1 && (
321338
<button
322-
onClick={() => handleStepChange(setter, index + 1)}
339+
onClick={() => setActiveStep(index + 1)}
323340
aria-label="Next Step"
341+
style={{
342+
padding: '10px 20px',
343+
fontSize: '14px',
344+
backgroundColor: '#1976d2',
345+
color: 'white',
346+
border: 'none',
347+
borderRadius: '4px',
348+
cursor: 'pointer',
349+
margin: '0 5px',
350+
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
351+
}}
324352
>
325353
Next
326354
</button>
327355
)}
356+
{index === steps.length - 1 && (
357+
<button
358+
onClick={() => alert('Form Submitted')}
359+
aria-label="Submit Form"
360+
style={{
361+
padding: '10px 20px',
362+
fontSize: '14px',
363+
backgroundColor: '#28a745',
364+
color: 'white',
365+
border: 'none',
366+
borderRadius: '4px',
367+
cursor: 'pointer',
368+
margin: '0 5px',
369+
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
370+
}}
371+
>
372+
Submit
373+
</button>
374+
)}
328375
</div>
329376
</StepContent>
330377
</Step>
@@ -333,22 +380,12 @@ const StepperDemo: React.FC = () => {
333380
);
334381

335382
return (
336-
<div className="stepper-demo">
383+
<div style={{ padding: '20px', backgroundColor: '#f9f9f9', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)' }}>
337384
<h1>Horizontal Stepper</h1>
338-
{renderStepper(
339-
activeStepHorizontal,
340-
setActiveStepHorizontal,
341-
steps,
342-
'horizontal'
343-
)}
385+
{renderStepper(activeStepHorizontal, setActiveStepHorizontal, steps, 'horizontal')}
344386

345387
<h1>Vertical Stepper</h1>
346-
{renderStepper(
347-
activeStepVertical,
348-
setActiveStepVertical,
349-
steps,
350-
'vertical'
351-
)}
388+
{renderStepper(activeStepVertical, setActiveStepVertical, steps, 'vertical')}
352389

353390
<h1>Stepper with Custom Separator</h1>
354391
{renderStepper(
@@ -360,9 +397,14 @@ const StepperDemo: React.FC = () => {
360397
)}
361398

362399
<h1>Order Process Stepper</h1>
363-
{renderStepper(activeStepItems, setActiveStepItems, items, 'horizontal')}
400+
{renderStepper(
401+
activeStepItems,
402+
setActiveStepItems,
403+
items,
404+
'horizontal'
405+
)}
364406
</div>
365407
);
366408
};
367409

368-
export default StepperDemo;
410+
export default StepperDemo;

‎example/src/components/stepper.scss‎

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,99 @@
1-
.stepper-demo {
2-
padding: 20px;
1+
.dcx-stepper {
2+
width: 100%;
3+
margin-bottom: 40px;
34
}
45

5-
.dcx-horizontal-stepper {
6+
.dcx-horizontal-stepper .dcx-header-container {
67
display: flex;
78
flex-direction: row;
8-
align-items: start;
9+
align-items: flex-start;
910
justify-content: space-between;
1011
flex-wrap: nowrap;
1112
}
1213

13-
.dcx-vertical-stepper {
14+
.dcx-vertical-stepper .dcx-header-container {
1415
display: flex;
1516
flex-direction: column;
1617
align-items: flex-start;
1718
}
1819

19-
.step {
20+
.dcx-header-wrapper {
2021
display: flex;
21-
flex-direction: column;
22-
align-items: flex-start;
23-
padding: 10px;
24-
margin-right: 20px;
22+
align-items: center;
23+
margin-bottom: 10px;
2524
}
2625

27-
.step-header {
26+
.dcx-step-header {
27+
cursor: pointer;
2828
display: flex;
2929
align-items: center;
3030
font-weight: bold;
31-
margin-bottom: 10px;
31+
font-size: 16px;
32+
color: #333;
3233
}
3334

34-
.step-number {
35-
width: 25px;
36-
height: 25px;
37-
color: white;
35+
.dcx-step-header .step-number {
36+
width: 30px;
37+
height: 30px;
3838
border-radius: 50%;
39-
background-color: rgba(0, 0, 0, 0.54);
39+
background-color: #d1d0ce;
40+
color: white;
4041
display: flex;
4142
align-items: center;
4243
justify-content: center;
4344
margin-right: 10px;
45+
font-size: 14px;
46+
font-weight: bold;
4447
}
4548

46-
.step-content {
47-
display: flex;
48-
flex-direction: column;
49-
gap: 10px;
49+
.dcx-step-header .step-number.active {
50+
background-color: #1976d2;
5051
}
5152

52-
.separator,
53-
.custom-separator {
54-
margin: 0 10px;
55-
border: 0;
56-
height: 1px;
57-
background: #ccc;
53+
.dcx-step-content {
54+
display: none;
5855
}
5956

60-
.button-container {
61-
display: flex;
62-
justify-content: space-between;
63-
margin-top: 15px;
64-
width: 100%;
57+
.dcx-step-content.dcx-visible-content {
58+
display: block;
59+
}
60+
61+
.dcx-content-container {
62+
margin-top: 20px;
6563
}
6664

67-
.button-container button {
68-
padding: 8px 16px;
69-
background-color: #007bff;
65+
.step-button {
66+
padding: 10px 20px;
67+
font-size: 14px;
68+
background-color: #1976d2;
7069
color: white;
7170
border: none;
7271
border-radius: 4px;
7372
cursor: pointer;
73+
margin: 0 5px;
74+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
75+
transition: background-color 0.3s ease;
7476
}
7577

76-
.button-container button:hover {
78+
.step-button:hover {
7779
background-color: #0056b3;
7880
}
7981

82+
.step-button.submit {
83+
background-color: #28a745;
84+
}
85+
86+
.step-button.submit:hover {
87+
background-color: #218838;
88+
}
89+
90+
.custom-separator {
91+
margin: 0 10px;
92+
border: 0;
93+
height: 1px;
94+
background: #ccc;
95+
}
96+
8097
.form-label {
8198
display: flex;
8299
flex-direction: column;
@@ -96,10 +113,9 @@
96113
margin-top: 10px;
97114
}
98115

99-
.step-separator {
100-
border: 0;
101-
height: 1px;
102-
background: #ccc;
103-
margin: 20px 0;
116+
.custom-separator {
104117
width: 100%;
118+
border: 0;
119+
border-top: 1px solid #ccc;
120+
margin: 10px 0;
105121
}

0 commit comments

Comments
 (0)