refactoring

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

Hide file tree

Showing 5 changed files with 156 additions and 100 deletions.
diff --git a/src/components/Stepper/index.css b/src/components/Stepper/index.css
@@ -1,68 +1,64 @@
-.wizard-container {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 20px;
-}
+.tyk-stepper {
+    .steps-container {
+        display: flex;
+        flex-direction: column;
+    }
 
-.steps-container {
-    display: flex;
-    flex-direction: column;
-}
+    .step {
+        display: flex;
+        margin-bottom: 20px;
 
-.step {
-    display: flex;
-    margin-bottom: 20px;
+    }
 
-}
+    .step-indicator {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 20px;
+    }
 
-.step-indicator {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-right: 20px;
-}
+    .step-number {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 10px;
+        border: 1px solid var(--color-secondary-dark);
+    }
 
-.step-number {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-    border: 1px solid var(--color-secondary-dark);
-}
+    .step-line {
+        width: 1px;
+        flex-grow: 1;
+        background-color: var(--color-secondary-dark);
+    }
 
-.step-line {
-    width: 1px;
-    flex-grow: 1;
-    background-color: var(--color-secondary-dark);
-}
+    .step.completed .step-number {
+        color: var(--color-success-base);
+        border-color: var(--color-success-base);
+    }
 
-.step.completed .step-number {
-    color: var(--color-success-base);
-    border-color: var(--color-success-base);
-}
+    .step-content {
+        flex-grow: 1;
+    }
 
-.step-content {
-    flex-grow: 1;
-}
+    .step-content h3 {
+        margin: 0 0 5px 0;
+    }
 
-.step-content h3 {
-    margin: 0 0 5px 0;
-}
+    .step-content p {
+        margin: 0 0 10px 0;
+    }
 
-.step-content p {
-    margin: 0 0 10px 0;
-}
+    .step-component {
+        margin-top: 10px;
+        padding: 15px;
+    }
 
-.step-component {
-    margin-top: 10px;
-    padding: 15px;
-}
-
-.navigation-buttons {
-    display: flex;
-    justify-content: right;
-    margin-top: 20px;
+    .navigation-buttons {
+        display: flex;
+        justify-content: right;
+        margin-top: 20px;
+    }
 }
diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
-import Button from "../Button";
-import Icon from "../Icon";
+import StepIndicator from "./js/StepIndicator";
+import StepContent from "./js/StepContent";
+import NavigationButtons from "./js/NavigationButtons";
 
 const Stepper = ({
   steps,
@@ -35,51 +36,36 @@ const Stepper = ({
   const isLastStep = currentStep === steps.length - 1;
 
   return (
-    <div className="Stepper-container">
-      <div className="steps-container">
-        {steps.map((step, index) => {
-          const isStepComplete = index < currentStep;
-          return (
-            <div
-              key={index}
-              className={`step ${index === currentStep ? "active" : ""} ${
-                isStepComplete ? "completed" : ""
-              }`}
+    <div className="tyk-stepper">
+      <div className="Stepper-container">
+        <div className="steps-container">
+          {steps.map((step, index) => (
+            <StepContent
+              key={step.title || index}
+              step={step}
+              index={index}
+              currentStep={currentStep}
             >
-              <div className="step-indicator">
-                <div className={`step-number`}>
-                  {isStepComplete ? <Icon type="check" /> : index + 1}
-                </div>
-                {index < steps.length - 1 && <div className="step-line"></div>}
-              </div>
-              <div className="step-content">
-                <h3>{step.title}</h3>
-                <p>{step.description}</p>
-                {index === currentStep && (
-                  <div className="step-component">{step.component}</div>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      <div className="navigation-buttons">
-        {currentStep >= 1 && (
-          <Button theme="secondary" onClick={handleBack}>
-            Back
-          </Button>
-        )}
-        &nbsp;
-        <Button
-          theme="primary"
-          onClick={isLastStep ? onFinish : handleNext}
-          disabled={isDisableFinish && isLastStep}
-        >
-          {isLastStep ? finishBtnText : "Continue"}
-        </Button>
+              <StepIndicator
+                index={index}
+                currentStep={currentStep}
+                stepsLength={steps.length}
+              />
+            </StepContent>
+          ))}
+        </div>
+        <NavigationButtons
+          currentStep={currentStep}
+          isLastStep={isLastStep}
+          isDisableFinish={isDisableFinish}
+          handleBack={handleBack}
+          handleNext={handleNext}
+          onFinish={onFinish}
+          finishBtnText={finishBtnText}
+        />
       </div>
     </div>
   );
 };
 
-export default Stepper;
+export default Stepper;
diff --git a/src/components/Stepper/js/NavigationButtons.js b/src/components/Stepper/js/NavigationButtons.js
@@ -0,0 +1,32 @@
+import React from "react";
+import Button from "../../Button";
+
+const NavigationButtons = ({
+  currentStep,
+  isLastStep,
+  isDisableFinish,
+  handleBack,
+  handleNext,
+  onFinish,
+  finishBtnText,
+}) => {
+  return (
+    <div className="navigation-buttons">
+      {currentStep >= 1 && (
+        <Button theme="secondary" onClick={handleBack}>
+          Back
+        </Button>
+      )}
+      &nbsp;
+      <Button
+        theme="primary"
+        onClick={isLastStep ? onFinish : handleNext}
+        disabled={isDisableFinish && isLastStep}
+      >
+        {isLastStep ? finishBtnText : "Continue"}
+      </Button>
+    </div>
+  );
+};
+
+export default NavigationButtons;
diff --git a/src/components/Stepper/js/StepContent.js b/src/components/Stepper/js/StepContent.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+const StepContent = ({ step, index, currentStep, children }) => {
+  const isStepComplete = index < currentStep;
+
+  return (
+    <div
+      className={`step ${index === currentStep ? "active" : ""} ${
+        isStepComplete ? "completed" : ""
+      }`}
+    >
+      {children}
+      <div className="step-content">
+        <h3>{step.title}</h3>
+        <p>{step.description}</p>
+        {index === currentStep && (
+          <div className="step-component">{step.component}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StepContent;
diff --git a/src/components/Stepper/js/StepIndicator.js b/src/components/Stepper/js/StepIndicator.js
@@ -0,0 +1,18 @@
+import React from "react";
+import Icon from "../../Icon";
+
+const StepIndicator = ({ index, currentStep, stepsLength }) => {
+  const isStepComplete = index < currentStep;
+  const isShowStepLine = index < stepsLength - 1;
+
+  return (
+    <div className="step-indicator">
+      <div className={`step-number`}>
+        {isStepComplete ? <Icon type="check" /> : index + 1}
+      </div>
+      {isShowStepLine && <div className="step-line"></div>}
+    </div>
+  );
+};
+
+export default StepIndicator;