Added config to hide circles

Author: amolskh

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

@@ -35,12 +35,14 @@ const progressBarData2 = {
     {
       name : 'Checkpoint1',
       timeline : 'Mar 23, 12:45',
-      completionPercentage : '0'
+      completionPercentage : '0',
+      hideCircle: true
     },
     {
       name : 'Review',
       timeline : '',
-      completionPercentage : '100'
+      completionPercentage : '100',
+      hideCircle: true
     }
   ]
 }