make button text dynamic and horizontal content height fixed

TykTechnologies · Dec 9, 2024 · bcaf4a7 · bcaf4a7
1 parent 8c0ca90
commit bcaf4a7
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 47 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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.8-alpha1",
+  "version": "4.4.8-alpha5",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/components/Stepper/Readme.md b/src/components/Stepper/Readme.md
@@ -41,12 +41,12 @@ const ExampleStepper = () => {
 ```
 
 ```jsx
-import React from 'react';
-import Stepper from "./index.js"
+import React from "react";
+import Stepper from "./index.js";
 
 const ExampleStepper = () => {
   const handleFinish = () => {
-    console.log('All steps completed!');
+    console.log("All steps completed!");
   };
 
   const validateStep = (stepId) => {
@@ -58,23 +58,64 @@ const ExampleStepper = () => {
       onFinish={handleFinish}
       stepValidator={validateStep}
       stepErrMessage="Please complete all required fields before proceeding."
-      orientation = "horizontal"
+      orientation="horizontal"
+      backBtnTxt="Previous"
+      nextBtnTxt="Next"
+      finishBtnTxt="Done"
     >
-      <Stepper.Step id="personal-info" title="Step-1">
-        <input type="text" placeholder="Full Name" />
-      </Stepper.Step>
-
-      <Stepper.Step id="address" title="Step-2">
-        <input type="text" placeholder="Street Address" />
-      </Stepper.Step>
-
-      <Stepper.Step id="review" title="Step-3">
-        <p>Please review your entered information before submitting.</p>
-      </Stepper.Step>
-
-      <Stepper.Step id="review2" title="Step-4">
-        <p>Please review your entered information before submitting.</p>
-      </Stepper.Step>
+        <Stepper.Step id="personal-info" title="Step-1">
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+          <br />
+          <input type="text" placeholder="Full Name" />
+        </Stepper.Step>
+
+        <Stepper.Step id="address" title="Step-2">
+          <input type="text" placeholder="Street Address" />
+        </Stepper.Step>
+
+        <Stepper.Step id="review" title="Step-3">
+          <p>Please review your entered information before submitting.</p>
+        </Stepper.Step>
+
+        <Stepper.Step id="review2" title="Step-4">
+          <p>Please review your entered information before submitting.</p>
+        </Stepper.Step>
     </Stepper>
   );
 };

diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js
@@ -11,10 +11,15 @@ const Stepper = ({
   stepValidator,
   stepErrMessage = "ERROR",
   orientation = "vertical",
+  contentHeight = "200px",
+  nextBtnTxt = "Continue",
+  finishBtnTxt = "Finish",
+  backBtnTxt = "Back",
 }) => {
   const [activeStep, setActiveStep] = useState(0);
   const [errors, setErrors] = useState({});
   const [validationAttempted, setValidationAttempted] = useState(false);
+  const isHorizontal = orientation === "horizontal";
 
   const steps = useMemo(() => {
     return React.Children.toArray(children).filter(
@@ -41,8 +46,27 @@ const Stepper = ({
       <div className={`stepper-container stepper-${orientation}`}>
         <StepList />
         <div className="stepper-content-wrapper">
-          {orientation === "horizontal" && steps[activeStep]}
-          <StepperButtons />
+          {isHorizontal && (
+            <div
+              className="no-scrollbar"
+              style={
+                isHorizontal
+                  ? {
+                      height: contentHeight,
+                      maxHeight: contentHeight,
+                      overflow: "scroll",
+                    }
+                  : {}
+              }
+            >
+              {isHorizontal && steps[activeStep]}
+            </div>
+          )}
+          <StepperButtons
+            nextBtnTxt={nextBtnTxt}
+            finishBtnTxt={finishBtnTxt}
+            backBtnTxt={backBtnTxt}
+          />
         </div>
       </div>
     </StepperProvider>
@@ -75,6 +99,10 @@ Stepper.propTypes = {
    * Error message to display when a step is invalid.
    */
   stepErrMessage: PropTypes.string,
+  /**
+   * height of the content (for horizontal stepper)
+   */
+  contentHeight: PropTypes.string,
   /**
    * Stepper orientation
    */

diff --git a/src/components/Stepper/js/StepperButtons.js b/src/components/Stepper/js/StepperButtons.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Button from '../../Button';
 import { useStepper } from '../StepperContext';
 
-const StepperButtons = () => {
+const StepperButtons = ({nextBtnTxt, finishBtnTxt, backBtnTxt}) => {
   const {
     activeStep,
     steps,
@@ -47,11 +47,11 @@ const StepperButtons = () => {
     <div className="stepper-buttons">
       {activeStep > 0 && (
         <Button onClick={goToPreviousStep} theme="secondary">
-          Back
+          {backBtnTxt}
         </Button>
       )}
       <Button onClick={goToNextStep} theme="primary">
-        {isLastStep ? 'Finish' : 'Continue'}
+        {isLastStep ? finishBtnTxt : nextBtnTxt}
       </Button>
     </div>
   );

diff --git a/src/components/Stepper/stepper.css b/src/components/Stepper/stepper.css
@@ -15,8 +15,7 @@
 
 .step-list-horizontal {
     display: flex;
-    padding-bottom: 20px;
-    margin-bottom: 20px;
+    padding-bottom: 5px;
     position: relative;
 }
 
@@ -179,7 +178,6 @@
 
 .stepper-content-wrapper {
     flex: 1;
-    padding: 20px 0;
     overflow: hidden;
 }
 
@@ -188,22 +186,22 @@
     display: flex;
     justify-content: flex-end;
     padding-top: 20px;
-    margin-top: auto;
-    gap: 10px;
+    margin-top: 20px;
     border-top: 1.5px solid var(--color-secondary-dark);
 }
 
-.stepper-buttons button {
-    padding: 8px 16px;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    font-weight: 500;
-}
-
 
 .error-message {
     color: var(--color-danger-base);
     margin-top: 5px;
     font-size: 14px;
-}
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;     /* Firefox */
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;             /* Chrome, Safari and Opera */
+  }