adress reviews

TykTechnologies · Sep 30, 2024 · 7cc0299 · 7cc0299
1 parent 009387e
commit 7cc0299
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 20 deletions.
diff --git a/src/components/Stepper/Readme.md b/src/components/Stepper/Readme.md
@@ -1,12 +1,17 @@
-```js
 
-const DefaultStepContent = ({ title }) => (
+
+```jsx
+import React, { useState } from "react";
+import Message from "../Message"
+
+// Default content for each step
+const DefaultStepContent = ({ title, onChange }) => (
   <div>
-    <h4>{title}</h4>
     <p>Hello {title}</p>
   </div>
 );
 
+// Define the steps for the stepper
 const steps = [
   {
     title: 'Step 1',
@@ -25,9 +30,25 @@ const steps = [
   },
 ];
 
-<Stepper 
-  steps={steps} 
-  onFinish={() => console.log("LAST STEP")}
-  onStepChange={(s) => console.log("STEP CHANGED", s)}
-/>
-```
+const StepperExample = () => {
+  const [error, setError] = useState(null);
+  const errorMessage = <Message theme="danger">ERROR</Message>
+
+  return (
+    <Stepper 
+      steps={steps} 
+      onFinish={() => console.log("LAST STEP")}
+      onStepChange={(step) => {
+        console.log("STEP CHANGED", step);
+        if (step.title === "Step 2") {
+          setError("Step 2 error");
+        } else {
+          setError(null);
+        }
+      }}
+      error={error ? errorMessage : null}
+    />
+  );
+};
+
+<StepperExample />
diff --git a/src/components/Stepper/index.css b/src/components/Stepper/index.css
@@ -7,7 +7,6 @@
     .step {
         display: flex;
         margin-bottom: 20px;
-
     }
 
     .step-indicator {
@@ -61,4 +60,10 @@
         justify-content: right;
         margin-top: 20px;
     }
+
+    .error-step {
+        border: 1px solid var(--color-danger-dark);
+        border-radius: var(--form-control-border-radius);
+        padding: 5px;
+    }
 }
diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js
@@ -9,6 +9,7 @@ const Stepper = ({
   onFinish = () => {},
   onStepChange = () => {},
   finishBtnText = "Finish",
+  error,
 }) => {
   const [currentStep, setCurrentStep] = useState(0);
 
@@ -37,14 +38,15 @@ const Stepper = ({
 
   return (
     <div className="tyk-stepper">
-      <div className="Stepper-container">
+      <div className="stepper-container">
         <div className="steps-container">
           {steps.map((step, index) => (
             <StepContent
               key={step.title || index}
               step={step}
               index={index}
               currentStep={currentStep}
+              error={error}
             >
               <StepIndicator
                 index={index}
@@ -58,6 +60,7 @@ const Stepper = ({
           currentStep={currentStep}
           isLastStep={isLastStep}
           isDisableFinish={isDisableFinish}
+          isAllowNext={!error}
           handleBack={handleBack}
           handleNext={handleNext}
           onFinish={onFinish}

diff --git a/src/components/Stepper/js/NavigationButtons.js b/src/components/Stepper/js/NavigationButtons.js
@@ -9,6 +9,7 @@ const NavigationButtons = ({
   handleNext,
   onFinish,
   finishBtnText,
+  isAllowNext
 }) => {
   return (
     <div className="navigation-buttons">
@@ -21,7 +22,7 @@ const NavigationButtons = ({
       <Button
         theme="primary"
         onClick={isLastStep ? onFinish : handleNext}
-        disabled={isDisableFinish && isLastStep}
+        disabled={!isAllowNext || isDisableFinish && isLastStep}
       >
         {isLastStep ? finishBtnText : "Continue"}
       </Button>

diff --git a/src/components/Stepper/js/StepContent.js b/src/components/Stepper/js/StepContent.js
@@ -1,20 +1,27 @@
 import React from "react";
 
-const StepContent = ({ step, index, currentStep, children }) => {
+const StepContent = ({ step, index, currentStep, children, error }) => {
   const isStepComplete = index < currentStep;
+  const isActive = index === currentStep;
+  function getStepClassName() {
+    return [
+      "step",
+      index === currentStep ? "active" : "",
+      isStepComplete ? "completed" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
 
   return (
-    <div
-      className={`step ${index === currentStep ? "active" : ""} ${
-        isStepComplete ? "completed" : ""
-      }`}
-    >
+    <div className={getStepClassName()}>
       {children}
-      <div className="step-content">
+      <div className={`step-content ${error && isActive ? "error-step" : ""}`}>
         <h3>{step.title}</h3>
         <p>{step.description}</p>
+        {index === currentStep && <div>{error}</div>}
         {index === currentStep && (
-          <div className="step-component">{step.component}</div>
+          <div className={`"step-component"`}>{step.component}</div>
         )}
       </div>
     </div>