update indicators

TykTechnologies · Oct 1, 2024 · 22f26de · 22f26de
1 parent 7cc0299
commit 22f26de
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 15 deletions.
diff --git a/lib/index.css b/lib/index.css
diff --git a/lib/index.css.map b/lib/index.css.map
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/lib/tyk-ui.css b/lib/tyk-ui.css
diff --git a/lib/tyk-ui.css.map b/lib/tyk-ui.css.map
diff --git a/lib/tyk-ui.js b/lib/tyk-ui.js
diff --git a/lib/tyk-ui.js.map b/lib/tyk-ui.js.map
diff --git a/src/components/Stepper/index.css b/src/components/Stepper/index.css
@@ -63,7 +63,6 @@
 
     .error-step {
         border: 1px solid var(--color-danger-dark);
-        border-radius: var(--form-control-border-radius);
-        padding: 5px;
+        color: var(--color-danger-dark);
     }
 }
diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js
@@ -49,9 +49,11 @@ const Stepper = ({
               error={error}
             >
               <StepIndicator
-                index={index}
+                isActive={index === currentStep}
                 currentStep={currentStep}
                 stepsLength={steps.length}
+                error={error}
+                index={index}
               />
             </StepContent>
           ))}

diff --git a/src/components/Stepper/js/StepContent.js b/src/components/Stepper/js/StepContent.js
@@ -16,7 +16,7 @@ const StepContent = ({ step, index, currentStep, children, error }) => {
   return (
     <div className={getStepClassName()}>
       {children}
-      <div className={`step-content ${error && isActive ? "error-step" : ""}`}>
+      <div className={`step-content`}>
         <h3>{step.title}</h3>
         <p>{step.description}</p>
         {index === currentStep && <div>{error}</div>}

diff --git a/src/components/Stepper/js/StepIndicator.js b/src/components/Stepper/js/StepIndicator.js
@@ -1,14 +1,31 @@
 import React from "react";
 import Icon from "../../Icon";
 
-const StepIndicator = ({ index, currentStep, stepsLength }) => {
+const StepIndicator = ({
+  index,
+  currentStep,
+  stepsLength,
+  isActive,
+  error,
+}) => {
   const isStepComplete = index < currentStep;
   const isShowStepLine = index < stepsLength - 1;
+  const isErroredStep = isActive && error;
 
   return (
     <div className="step-indicator">
-      <div className={`step-number`}>
-        {isStepComplete ? <Icon type="check" /> : index + 1}
+      <div
+        className={`step-number ${isStepComplete ? "completed" : ""} ${
+          isActive ? "active" : ""
+        } ${isErroredStep ? "error-step" : ""}`}
+      >
+        {isStepComplete ? (
+          <Icon type="check" />
+        ) : isErroredStep ? (
+          <Icon type="exclamation" />
+        ) : (
+          <span className="step-index">{index + 1}</span>
+        )}
       </div>
       {isShowStepLine && <div className="step-line"></div>}
     </div>