make nav steps sticky for horizontal stepper

TykTechnologies · Jan 2, 2025 · 3669218 · 3669218
1 parent 0dd66ac
commit 3669218
Show file tree

Hide file tree

Showing 13 changed files with 53 additions and 20 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.12",
+  "version": "4.4.13",
   "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
@@ -18,6 +18,7 @@ const ExampleStepper = () => {
       stepValidator={validateStep}
       stepErrMessage="Please complete all required fields before proceeding."
       onChange={(step) => console.log("Step Changed : ", step)}
+      onSkip={(step) => console.log("SKIP", step)}
     >
       <Stepper.Step id="personal-info" title="Step-1">
         <input type="text" placeholder="Full Name" />

diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js
@@ -14,8 +14,10 @@ const Stepper = ({
   contentHeight,
   nextBtnTxt = "Continue",
   finishBtnTxt = "Finish",
+  skipBtnTxt = "Skip",
   backBtnTxt = "Back",
-  onChange = () => {}
+  onChange = () => {},
+  onSkip = null,
 }) => {
   const [activeStep, setActiveStep] = useState(0);
   const [errors, setErrors] = useState({});
@@ -41,6 +43,7 @@ const Stepper = ({
     validationAttempted,
     setValidationAttempted,
     orientation,
+    onSkip
   };
 
   return (
@@ -68,6 +71,7 @@ const Stepper = ({
             nextBtnTxt={nextBtnTxt}
             finishBtnTxt={finishBtnTxt}
             backBtnTxt={backBtnTxt}
+            skipBtnTxt={skipBtnTxt}
           />
         </div>
       </div>
@@ -100,6 +104,10 @@ Stepper.propTypes = {
   /**
    * Callback triggered on step change.
    */
+  onSkip: PropTypes.func,
+  /**
+   * Callback triggered on step skip.
+   */
   stepValidator: PropTypes.func,
   /**
    * Error message to display when a step is invalid.

diff --git a/src/components/Stepper/js/StepperButtons.js b/src/components/Stepper/js/StepperButtons.js
@@ -1,19 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from '../../Button';
-import { useStepper } from '../StepperContext';
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "../../Button";
+import { useStepper } from "../StepperContext";
 
-const StepperButtons = ({nextBtnTxt, finishBtnTxt, backBtnTxt}) => {
+const StepperButtons = ({
+  nextBtnTxt,
+  finishBtnTxt,
+  backBtnTxt,
+  skipBtnTxt,
+}) => {
   const {
     activeStep,
     steps,
     setActiveStep,
     setErrors,
     onFinish,
     onChange,
+    onSkip,
     stepValidator,
     stepErrMessage,
-    setValidationAttempted
+    setValidationAttempted,
   } = useStepper();
 
   const isLastStep = activeStep === steps.length - 1;
@@ -34,7 +40,7 @@ const StepperButtons = ({nextBtnTxt, finishBtnTxt, backBtnTxt}) => {
     } else {
       setErrors((prev) => ({
         ...prev,
-        [activeStep]: stepErrMessage
+        [activeStep]: stepErrMessage,
       }));
     }
   };
@@ -47,8 +53,19 @@ const StepperButtons = ({nextBtnTxt, finishBtnTxt, backBtnTxt}) => {
     }
   };
 
+  const onSkipStep = () => {
+    onSkip(steps[activeStep]?.props?.id);
+  };
+
   return (
     <div className="stepper-buttons">
+      {onSkip && (
+        <div className="skip-btn">
+          <Button onClick={onSkipStep} theme="secondary-outline">
+            {skipBtnTxt}
+          </Button>
+        </div>
+      )}
       {activeStep > 0 && (
         <Button onClick={goToPreviousStep} theme="secondary">
           {backBtnTxt}
@@ -64,7 +81,7 @@ const StepperButtons = ({nextBtnTxt, finishBtnTxt, backBtnTxt}) => {
 StepperButtons.propTypes = {
   nextBtnTxt: PropTypes.string.isRequired,
   finishBtnTxt: PropTypes.string.isRequired,
-  backBtnTxt: PropTypes.string.isRequired
+  backBtnTxt: PropTypes.string.isRequired,
 };
 
-export default StepperButtons;
+export default StepperButtons;
diff --git a/src/components/Stepper/stepper.css b/src/components/Stepper/stepper.css
@@ -14,7 +14,10 @@
 .step-list-horizontal {
     display: flex;
     padding-bottom: 5px;
-    position: relative;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: white;
 }
 
 .step-list-horizontal::after {
@@ -186,6 +189,10 @@
     padding-top: 20px;
     margin-top: 20px;
     border-top: 1.5px solid var(--color-secondary-dark);
+    gap: 8px;
+    .skip-btn {
+        margin-right: auto;
+    }
 }