Skip to content

Commit 683ec60

Browse files
author
vikasrohit
committed
Merged PR for Tooltip component
2 parents c65161c + e091146 commit 683ec60

File tree

5 files changed

+217
-1
lines changed

5 files changed

+217
-1
lines changed

‎components/ProgressBar/ProgressBar.jsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
require('./ProgressBar.scss')
2+
3+
import React from 'react'
4+
import classNames from 'classnames'
5+
6+
const ProgressBar = ({completionPercentage,checkPoints}) => {
7+
function getCheckPointPositionStyle(percentage){
8+
const style = {
9+
left:percentage + '%'
10+
}
11+
return style
12+
}
13+
14+
function getCheckPointPositionScaledStyle(percentage){
15+
percentage = Number.parseInt(percentage)*0.8
16+
const style = {
17+
left:percentage + '%'
18+
}
19+
return style
20+
}
21+
22+
function getLengthScaledStyle(percentage){
23+
const style = {
24+
width:percentage + '%'
25+
}
26+
return style
27+
}
28+
29+
function checkPointStyle(checkPointPercentage){
30+
checkPointPercentage = Number.parseInt(checkPointPercentage)
31+
completionPercentage = Number.parseInt(completionPercentage)
32+
const checkPointClass = classNames(
33+
'circle',{ completed : ( checkPointPercentage <= completionPercentage)}
34+
)
35+
return checkPointClass
36+
}
37+
38+
return (
39+
<div className="ProgressBar">
40+
<div className="progress-box">
41+
<div className="checkpoint-line">
42+
{checkPoints.map((checkPoint,index) => {
43+
return <div className="checkpoint-text" style={getCheckPointPositionScaledStyle(checkPoint.completionPercentage)} key={index}>{checkPoint.name}</div>
44+
})}
45+
</div>
46+
<div className="progress-ui">
47+
<div className="progress-line">
48+
</div>
49+
<div className="completion-line" style={getLengthScaledStyle(completionPercentage)}>
50+
</div>
51+
<div className="progress-circles">
52+
<div className="circle"/>
53+
{checkPoints.map((checkPoint,index) => {
54+
return <div className={checkPointStyle(checkPoint.completionPercentage)} style={getCheckPointPositionStyle(checkPoint.completionPercentage)} key={index}/>
55+
})}
56+
</div>
57+
</div>
58+
<div className="time-line">
59+
{checkPoints.map((checkPoint,index) => {
60+
return <div className="time-line-text" style={getCheckPointPositionScaledStyle(checkPoint.completionPercentage)} key={index}>{checkPoint.timeline}</div>
61+
})}
62+
</div>
63+
</div>
64+
</div>
65+
)
66+
}
67+
68+
ProgressBar.propTypes = {
69+
completionPercentage : React.PropTypes.string,
70+
checkPoints : React.PropTypes.array
71+
}
72+
73+
export default ProgressBar

‎components/ProgressBar/ProgressBar.scss‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
@import 'topcoder/tc-includes';
2+
3+
$accent: #59A7FF;
4+
$gray: #47474F;
5+
$gray-30: #C3C3C8;
6+
$light-gray: #DCDCE0;
7+
8+
.ProgressBar {
9+
.progress-box {
10+
position: absolute;
11+
width: 400px;
12+
margin: auto;
13+
14+
.checkpoint-line {
15+
display: block;
16+
margin-bottom: 5px;
17+
height: 20px;
18+
19+
.checkpoint-text {
20+
position: absolute;
21+
float: left;
22+
font-family: "Roboto", Arial, Helvetica, sans-serif;
23+
font-weight: 500;
24+
font-size: 13px;
25+
line-height: 15px;
26+
color: $white
27+
}
28+
}
29+
.progress-ui {
30+
width: 80%;
31+
position: relative;
32+
height: 8px;
33+
34+
.progress-line {
35+
top:0px;
36+
position: absolute;
37+
height: 4px;
38+
width: 100%;
39+
background-color: $light-gray;
40+
display: inline-block;
41+
}
42+
43+
.completion-line {
44+
top:0px;
45+
left:0px;
46+
position: absolute;
47+
height: 4px;
48+
background-color: $accent;
49+
display: inline-block;
50+
border-right: 4px solid $gray;
51+
}
52+
53+
.progress-circles {
54+
width: 100%;
55+
top:-5px;
56+
display: block;
57+
position: absolute;
58+
59+
.circle {
60+
position: absolute;
61+
float: left;
62+
background: $light-gray;
63+
border: 3px solid $gray;
64+
width: 13px;
65+
height: 13px;
66+
border-radius: 50%;
67+
}
68+
.completed {
69+
background: $accent;
70+
}
71+
}
72+
}
73+
74+
.time-line {
75+
display: block;
76+
margin-bottom: 5px;
77+
height: 20px;
78+
width: 100%;
79+
80+
.time-line-text {
81+
position: absolute;
82+
float: left;
83+
font-family: "Roboto", Arial, Helvetica, sans-serif;
84+
font-size: 11px;
85+
line-height: 15px;
86+
color: $gray-30;
87+
}
88+
}
89+
}
90+
}

‎components/ProgressBar/ProgressBarExample.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
require('./ProgressBarExample.scss')
2+
3+
import React from 'react'
4+
import ProgressBar from './ProgressBar'
5+
6+
const progressBarData = {
7+
completionPercentage : '56',
8+
checkPoints : [
9+
{
10+
name : 'Checkpoint1',
11+
timeline : 'Mar 23, 12:45',
12+
completionPercentage : '0'
13+
},
14+
{
15+
name : 'Review',
16+
timeline : 'Apr 2, 16:30',
17+
completionPercentage : '35'
18+
},
19+
{
20+
name : 'Winners',
21+
timeline : 'Apr 12, 18:00',
22+
completionPercentage : '75'
23+
},
24+
{
25+
name : 'End',
26+
timeline : 'Apr 13, 18:00',
27+
completionPercentage : '100'
28+
}
29+
]
30+
}
31+
32+
const ProgressBarExample = () => (
33+
<div>
34+
<div className="divStyle">
35+
<ProgressBar completionPercentage={progressBarData.completionPercentage} checkPoints={progressBarData.checkPoints}/>
36+
</div>
37+
</div>
38+
)
39+
40+
module.exports = ProgressBarExample

‎components/ProgressBar/ProgressBarExample.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.divStyle {
2+
background-color:#47474F;
3+
4+
width:420px;
5+
height: 90px;
6+
}

‎components/Router/Router.jsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ import NavbarExample from '../Navbar/NavbarExample.jsx'
2727
import TCFooterExamples from '../TCFooter/TCFooterExamples.jsx'
2828
import SubTrackDetailsExample from '../SubTrackDetails/SubTrackDetailsExample.jsx'
2929
import PrizeExamples from '../Prize/PrizeExamples.jsx'
30+
<<<<<<< HEAD
3031
import TooltipExamples from '../Tooltip/TooltipExamples.jsx'
32+
=======
33+
import ProgressBarExample from '../ProgressBar/ProgressBarExample.jsx'
34+
>>>>>>> e0911466826b4ddeb7983645e99390e6da1abc15
3135

3236
const Component = () => (
3337
<Provider store={store}>
@@ -79,7 +83,10 @@ const Component = () => (
7983

8084
<Route path="/TooltipExamples" component={TooltipExamples} />
8185

82-
<Route path="/PrizeExamples" component={PrizeExamples}/>
86+
87+
<Route path="/PrizeExamples" component={PrizeExamples}/>
88+
89+
<Route path="/ProgressBarExample" component={ProgressBarExample}/>
8390
</Route>
8491
</Router>
8592
</Provider>

0 commit comments

Comments
 (0)