Skip to content

Commit deed08d

Browse files
committed
Initial commit
0 parents  commit deed08d

File tree

11 files changed

+451
-0
lines changed

11 files changed

+451
-0
lines changed

README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# react-oari2y
2+
3+
[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/react-oari2y)

package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "react",
3+
"version": "0.0.0",
4+
"private": true,
5+
"dependencies": {
6+
"react": "^18.1.0",
7+
"react-dom": "^18.1.0"
8+
},
9+
"scripts": {
10+
"start": "react-scripts start",
11+
"build": "react-scripts build",
12+
"test": "react-scripts test --env=jsdom",
13+
"eject": "react-scripts eject"
14+
},
15+
"devDependencies": {
16+
"react-scripts": "latest"
17+
}
18+
}

public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div id="root"></div>

src/App.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from 'react';
2+
import './style.css';
3+
4+
import Stepper from './components/stepper/DgStepper';
5+
export default function App() {
6+
return (
7+
<div>
8+
{/* 1 */}
9+
10+
<Stepper status="completed" data="Kontrak Berlangganan" groupTitle />
11+
<Stepper status="completed" data="Review Order" titleCompleted />
12+
<Stepper
13+
status="empty-completed"
14+
data="on [dd-mm-yyyy] - [hh:mm:ss]"
15+
emptyCompleted
16+
/>
17+
<Stepper
18+
status="empty-completed"
19+
data="Due Date: 12 April 2023 (12.09 WIB)"
20+
emptyCompleted
21+
/>
22+
<Stepper
23+
status="empty-completed"
24+
data="Duration: [n] [Second(s)/Minute(s)/Hour(s)/Day(s)"
25+
emptyCompleted
26+
/>
27+
<Stepper
28+
status="empty-completed"
29+
data="Created by Lina Winata Wijaya"
30+
emptyCompleted
31+
/>
32+
33+
{/* 2 */}
34+
35+
<Stepper
36+
status="in-progress"
37+
data="Installation/Activation"
38+
groupTitle={true}
39+
/>
40+
<Stepper
41+
status="in-progress"
42+
data="Shipment and Delivery"
43+
titleInProgress
44+
/>
45+
<Stepper
46+
status="empty-in-progress"
47+
data="on [dd-mm-yyyy] - [hh:mm:ss]"
48+
emptyInProgress
49+
/>
50+
<Stepper
51+
status="empty-in-progress"
52+
data="Due Date: 12 April 2023 (12.09 WIB)"
53+
emptyInProgress
54+
/>
55+
<Stepper
56+
status="empty-in-progress"
57+
data="Duration: [n] [Second(s)/Minute(s)/Hour(s)/Day(s)"
58+
emptyInProgress
59+
/>
60+
<Stepper
61+
status="empty-in-progress"
62+
data="Created by Lina Winata Wijaya"
63+
emptyInProgress
64+
/>
65+
66+
{/* 3 */}
67+
68+
<Stepper status="terminated" data="BAST" groupTitle={true} />
69+
<Stepper status="terminated" data="Upload Berita Acara" titleTerminated />
70+
<Stepper
71+
status="empty-terminated"
72+
data="on [dd-mm-yyyy] - [hh:mm:ss]"
73+
emptyTerminated
74+
/>
75+
<Stepper
76+
status="empty-terminated"
77+
data="Due Date: 12 April 2023 (12.09 WIB)"
78+
emptyTerminated
79+
/>
80+
<Stepper
81+
status="empty-terminated"
82+
data="Duration: [n] [Second(s)/Minute(s)/Hour(s)/Day(s)"
83+
emptyTerminated
84+
/>
85+
<Stepper
86+
status="empty-terminated"
87+
data="Created by Lina Winata Wijaya"
88+
emptyTerminated
89+
/>
90+
</div>
91+
);
92+
}

src/components/badge/badge.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.badge {
2+
display: inline-block;
3+
padding: 5px 10px;
4+
border-radius: 15px;
5+
font-size: 14px;
6+
font-weight: bold;
7+
margin-left: 10px;
8+
}
9+
10+
.green {
11+
background-color: rgb(33, 150, 83);
12+
color: white;
13+
}
14+
15+
.yellow {
16+
background-color: #efa20b;
17+
color: white;
18+
}
19+
20+
.stop {
21+
background-color: #bf2932;
22+
color: white;
23+
}

src/components/badge/badge.jsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import './badge.css';
3+
4+
function Badge(props) {
5+
const { status, text } = props;
6+
7+
let badgeColor = '';
8+
switch (status) {
9+
case 'completed':
10+
badgeColor = 'green';
11+
break;
12+
case 'in-progress':
13+
badgeColor = 'yellow';
14+
break;
15+
case 'terminated':
16+
badgeColor = 'stop';
17+
break;
18+
default:
19+
badgeColor = '';
20+
}
21+
22+
return <div className={`badge ${badgeColor}`}>{text}</div>;
23+
}
24+
25+
export default Badge;

src/components/stepper/DgStepper.jsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react';
2+
import './dg-stepper.css';
3+
4+
import Badge from '../badge/badge';
5+
6+
const Stepper = ({
7+
status,
8+
data,
9+
groupTitle,
10+
titleCompleted,
11+
titleInProgress,
12+
titleTerminated,
13+
emptyCompleted,
14+
emptyInProgress,
15+
emptyTerminated,
16+
}) => {
17+
return (
18+
<>
19+
{console.log(`step ${status}`)}
20+
<div className={`step ${status}`}>
21+
<div className="v-stepper">
22+
{titleCompleted ? (
23+
<div className="circle-title"></div>
24+
) : titleInProgress ? (
25+
<div className="circle-title"></div>
26+
) : titleTerminated ? (
27+
<div className="circle-title"></div>
28+
) : (
29+
<div className="circle"></div>
30+
)}
31+
<div className="line"></div>
32+
</div>
33+
34+
{groupTitle ? (
35+
<div className="content group-title">{data}</div>
36+
) : titleCompleted ? (
37+
<div className="inline">
38+
<div className="content completed-title">{data}</div>
39+
<Badge status="completed" text="Completed" />
40+
</div>
41+
) : titleInProgress ? (
42+
<div className="inline">
43+
<div className="content in-progress-title">{data}</div>
44+
<Badge status="in-progress" text="In Progress" />
45+
</div>
46+
) : titleTerminated ? (
47+
<div className="inline">
48+
<div className="content terminated-title">{data}</div>
49+
<Badge status="terminated" text="Terminated" />
50+
</div>
51+
) : emptyCompleted ? (
52+
<div className="content text-completed">{data}</div>
53+
) : emptyInProgress ? (
54+
<div className="content text-in-progress">{data}</div>
55+
) : emptyTerminated ? (
56+
<div className="content text-terminated">{data}</div>
57+
) : (
58+
<div className="content">{data}</div>
59+
)}
60+
</div>
61+
</>
62+
);
63+
};
64+
65+
export default Stepper;

src/components/stepper/dg-stepper.css

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
/* Positioning */
2+
.content {
3+
margin-left: 20px;
4+
display: inline-block;
5+
}
6+
7+
.inline {
8+
display: inline-block;
9+
}
10+
11+
/* Title Style */
12+
.group-title {
13+
font-size: 16px;
14+
font-style: italic;
15+
font-weight: 700;
16+
line-height: 29px;
17+
}
18+
19+
.completed-title {
20+
color: rgb(33, 150, 83);
21+
font-size: 16px;
22+
font-weight: 700;
23+
line-height: 29px;
24+
}
25+
26+
.in-progress-title {
27+
color: rgb(239, 162, 11);
28+
font-size: 16px;
29+
font-weight: 700;
30+
line-height: 29px;
31+
}
32+
33+
.terminated-title {
34+
color: rgb(191, 41, 50);
35+
font-size: 16px;
36+
font-weight: 700;
37+
line-height: 29px;
38+
}
39+
40+
/* Step Base */
41+
42+
.step {
43+
padding: 10px;
44+
display: flex;
45+
flex-direction: row;
46+
justify-content: flex-start;
47+
}
48+
49+
.v-stepper {
50+
position: relative;
51+
}
52+
53+
/* Circle */
54+
.circle {
55+
background-color: white;
56+
border: 3px solid gray;
57+
border-radius: 100%;
58+
width: 20px; /* +6 for border */
59+
height: 20px;
60+
display: inline-block;
61+
}
62+
63+
.circle-title {
64+
background-color: white;
65+
border: 3px solid gray;
66+
border-radius: 100%;
67+
width: 15px; /* +6 for border */
68+
height: 16px;
69+
margin-left: 3px;
70+
margin-top: 2px;
71+
}
72+
73+
.line {
74+
top: 23px;
75+
left: 11px;
76+
height: 100%;
77+
position: absolute;
78+
border-left: 5px solid gray;
79+
}
80+
81+
.step.completed .circle,
82+
.step.completed .circle-title {
83+
visibility: visible;
84+
background-color: rgb(33, 150, 83);
85+
border-color: rgb(33, 150, 83);
86+
}
87+
88+
.step.completed .line {
89+
border-left: 5px solid rgb(33, 150, 83);
90+
}
91+
92+
.step.in-progress .circle,
93+
.step.in-progress .circle-title {
94+
visibility: visible;
95+
background-color: rgb(239, 162, 11);
96+
border-color: rgb(239, 162, 11);
97+
}
98+
99+
.step.in-progress .line {
100+
border-left: 5px solid rgb(239, 162, 11);
101+
}
102+
103+
.step.terminated .circle,
104+
.step.terminated .circle-title {
105+
visibility: visible;
106+
background-color: rgb(191, 41, 50);
107+
border-color: rgb(191, 41, 50);
108+
}
109+
110+
.step.terminated .line {
111+
border-left: 5px solid rgb(191, 41, 50);
112+
}
113+
114+
.step.empty-completed .line {
115+
border-left: 5px solid rgb(33, 150, 83);
116+
top: 0;
117+
height: 180%;
118+
}
119+
120+
.step.empty-in-progress .line {
121+
border-left: 5px solid rgb(239, 162, 11);
122+
top: 0;
123+
height: 180%;
124+
}
125+
126+
.step.empty-terminated .line {
127+
border-left: 5px solid rgb(191, 41, 50);
128+
top: 0;
129+
height: 180%;
130+
}
131+
132+
.step.empty-completed .circle,
133+
.step.empty-in-progress .circle,
134+
.step.empty-terminated .circle {
135+
visibility: hidden;
136+
}
137+
138+
.step.empty .line {
139+
top: 0;
140+
height: 150%;
141+
}
142+
143+
.step:last-child .line {
144+
border-left: 3px solid white;
145+
z-index: -1; /* behind the circle to completely hide */
146+
}
147+
148+
/* text Stepper*/
149+
.text-completed {
150+
color: rgb(33, 150, 83);
151+
}
152+
153+
.text-in-progress {
154+
color: rgb(239, 162, 11);
155+
}
156+
157+
.text-terminated {
158+
color: rgb(191, 41, 50);
159+
}

0 commit comments

Comments
 (0)