Add dotted border after incomplete steps except last

app/hub/Views/StepProgressBar/StepProgressBar.jsx

@@ -38,7 +38,7 @@ const StepProgressBar = (props) => {
 
 	const renderCurrentStep = (label, value) => (
 		<div className="StepProgressBar__column">
-			<div className="StepProgressBar__label">{label}</div>
+			<div className="StepProgressBar__label currentStep">{label}</div>
 			<div className={`StepProgressBar__Step step-${value} current`} />
 		</div>
 	);
@@ -52,17 +52,31 @@ const StepProgressBar = (props) => {
 
 	const renderProgressBar = () => (
 		stepLabels.map((value, index) => (
-			<div key={value}>
+			<Fragment key={value}>
 				{(index + 1 < currentStep) && (
 					renderCompletedStep(stepLabels[index])
 				)}
 				{(index + 1 === currentStep) && (
-					renderCurrentStep(stepLabels[index], index + 1)
+					<Fragment>
+						{renderCurrentStep(stepLabels[index], index + 1)}
+					</Fragment>
 				)}
 				{(index + 1 > currentStep) && (
-					renderIncompleteStep(stepLabels[index], index + 1)
+					<Fragment>
+						{renderIncompleteStep(stepLabels[index], index + 1)}
+					</Fragment>
+				)}
+				{(index + 1 !== totalSteps) && (
+					<Fragment>
+						{(index + 1 < currentStep) && (
+							<div className="StepProgressBar__line completed" />
+						)}
+						{(index + 1 >= currentStep) && (
+							<div className="StepProgressBar__line incompleted" />
+						)}
+					</Fragment>
 				)}
-			</div>
+			</Fragment>
 		))
 	);
 

app/hub/Views/StepProgressBar/StepProgressBar.scss

@@ -14,6 +14,7 @@
 .StepProgressBarContainer {
 	display: flex;
 	justify-content: space-around;
+	align-items: center;
 }
 .StepProgressBar__Step {
 	height: 34px;
@@ -63,9 +64,33 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	justify-content: center;
+	width: 45px;
 }
 .StepProgressBar__label {
 	margin-bottom: 14px;
+	width: 38px;
 	font-size: 12px;
 	color: $tundora;
+	&.currentStep {
+		font-weight: 700;
+	}
+}
+.StepProgressBar__line {
+	margin-top: 27px;
+	width: 100%;
+	&.completed {
+		border: solid 2px $ghosty-blue;
+	}
+	&.incompleted {
+		padding: 1em;
+		background-image:
+		radial-gradient(circle at 2.5px, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px),
+		radial-gradient(circle, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px),
+		radial-gradient(circle at 2.5px, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px),
+		radial-gradient(circle, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px);
+		background-position: top, right, bottom, left;
+		background-size: 14px 25px, 0px 0px;
+		background-repeat: repeat-x, repeat-y;
+	}
 }