improve the styling of the completed step badge

Author: byohannes

stories/Stepper/ClassBased.stories.js

@@ -63,7 +63,7 @@ export const BasicStepper = {
             >
               <StepHeader className="step-header">
                 <div className={`step-number-container ${activeStep > index ? 'completed' : activeStep === index ? 'active' : 'inactive'}`}>
-                  {activeStep > index ? '✔️' : index + 1}
+                  {activeStep > index ? '' : index + 1}
                 </div>
                 <div className="step-header-text">
                   {step.header}
@@ -143,7 +143,7 @@ export const VerticalStepper = {
             >
               <StepHeader className="custom-step-header-wrapper">
                 <div className={`custom-step-number-badge ${activeStep > index ? 'completed' : activeStep === index ? 'active' : 'inactive'}`} aria-label={`Step ${index + 1}`}>
-                  {activeStep > index ? '✔️' : index + 1}
+                  {activeStep > index ? '' : index + 1}
                 </div>
                 <div className="custom-step-header-text">
                   {step.header}
@@ -349,7 +349,7 @@ export const StepperDemo = {
             >
               <StepHeader className="step-header">
                 <div className={`step-number-container ${activeStep > index ? 'completed' : activeStep === index ? 'active' : 'inactive'}`}>
-                  {activeStep > index ? '✔️' : index + 1}
+                  {activeStep > index ? '' : index + 1}
                 </div>
                 <div className="step-header-text">
                   {step.header}

stories/Stepper/StepperDemo.css

@@ -67,14 +67,24 @@
   font-weight: bold;
   margin-bottom: 8px;
   box-sizing: border-box;
+  position: relative;
 }
-
 .step-header .step-number-container.completed,
 .step-header .step-number-container.active {
   background-color: #1976d2;
   color: white;
 }
 
+.step-header .step-number-container.completed::after {
+  content: '✓';
+  font-size: 18px;
+  color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .step-header .step-header-text {
   font-size: 14px;
   text-align: center;
@@ -119,6 +129,11 @@
   background-color: #1565c0;
 }
 
+.nav-button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
 .nav-button.submit {
   background-color: #28a745;
 }
@@ -169,4 +184,4 @@
 
 .form-checkbox {
   margin-top: 10px;
-}
+}

stories/Stepper/VerticalStepper.css

@@ -54,6 +54,7 @@
   font-weight: bold;
   margin: 20px;
   box-sizing: border-box;
+  position: relative;
 }
 
 .custom-step-number-badge.completed,
@@ -62,6 +63,16 @@
   color: white;
 }
 
+.custom-step-number-badge.completed::after {
+  content: '✓';
+  font-size: 18px;
+  color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .custom-step-header-text {
   font-size: 16px;
   line-height: 1.2;