Merge pull request #77 from amolskh/ProgressBarComponent

Final Fixes - Progress Bar Component

Author: vikasrohit

components/ProgressBar/ProgressBar.jsx

@@ -50,9 +50,10 @@ const ProgressBar = ({completionPercentage, checkPoints}) => {
           <div className="completion-line" style={getLengthScaledStyle(completionPercentage)}>
           </div>
           <div className="progress-circles">
-            <div className="circle"/>
             {checkPoints.map((checkPoint, index) => {
-              return <div className={checkPointStyle(checkPoint.completionPercentage)} style={getCheckPointPositionStyle(checkPoint.completionPercentage)} key={index}/>
+              if(!checkPoint.hideCircle) {
+                return <div className={checkPointStyle(checkPoint.completionPercentage)} style={getCheckPointPositionStyle(checkPoint.completionPercentage)} key={index}/>
+              }
             })}
           </div>
         </div>

components/ProgressBar/ProgressBarExample.jsx

@@ -29,11 +29,33 @@ const progressBarData = {
   ]
 }
 
+const progressBarData2 = {
+  completionPercentage : '56',
+  checkPoints : [
+    {
+      name : 'Checkpoint1',
+      timeline : 'Mar 23, 12:45',
+      completionPercentage : '0',
+      hideCircle: true
+    },
+    {
+      name : 'Review',
+      timeline : '',
+      completionPercentage : '100',
+      hideCircle: true
+    }
+  ]
+}
+
 const ProgressBarExample = () => (
   <div>
     <div className="divStyle">
       <ProgressBar completionPercentage={progressBarData.completionPercentage} checkPoints={progressBarData.checkPoints}/>
     </div>
+    <br/>
+    <div className="divStyle">
+      <ProgressBar completionPercentage={progressBarData2.completionPercentage} checkPoints={progressBarData2.checkPoints}/>
+    </div>
   </div>
 )