use render prop pattern for stepper buttons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.13",
+  "version": "4.4.14",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

src/components/Stepper/Readme.md

@@ -1,3 +1,79 @@
+## Custom buttons using Render Props method
+```jsx
+import React from "react";
+import Button from "../Button";
+import Confirm from "../Confirm";
+import Stepper from "./index";
+
+const MyStepperComponent = () => {
+  const handleFinish = () => {
+    console.log("Finished!");
+  };
+
+  const validateStep = (stepId) => {
+    return true;
+  };
+
+  return (
+    <Stepper onFinish={handleFinish} stepValidator={validateStep}>
+      <Stepper.Step
+        title="Step 1"
+        description="First step"
+        id="step1"
+      ></Stepper.Step>
+
+      <Stepper.Step
+        title="Step 2"
+        description="Second step"
+        id="step2"
+      ></Stepper.Step>
+
+      <Stepper.Buttons>
+        {({ goToNextStep, goToPreviousStep, isLastStep, activeStep, stepId }) => (
+          <div
+            style={{
+              display: "flex",
+              width: "100%",
+              justifyContent: "flex-end",
+              gap: "8px",
+              marginLeft: 0,
+            }}
+          >
+      {   stepId !== 'step2' &&    <Confirm
+              title="Console log"
+              description="Are u sure u want to console log?"
+            >
+              {(confirm) => (
+                <Button
+                  onClick={confirm((event) => {
+                    console.log("Button clicked", {event, activeStep, stepId});
+                  })}
+                  theme="secondary"
+                >
+                  Skip (Confirm)
+                </Button>
+              )}
+            </Confirm>}
+
+            {activeStep > 0 && (
+              <Button onClick={goToPreviousStep} theme="secondary">
+                Back
+              </Button>
+            )}
+            <Button onClick={goToNextStep} theme="primary">
+              {isLastStep ? "Complete" : "Next"}
+            </Button>
+          </div>
+        )}
+      </Stepper.Buttons>
+    </Stepper>
+  );
+};
+
+<MyStepperComponent />;
+```
+
+## Vertical Stepper
 
 ```jsx
 import React from 'react';
@@ -42,6 +118,7 @@ const ExampleStepper = () => {
 <ExampleStepper />
 ```
 
+## Horizontal Stepper
 ```jsx
 import React from "react";
 import Stepper from "./index.js";
@@ -124,4 +201,4 @@ const ExampleStepper = () => {
 };
 
 <ExampleStepper />
-```
+```

src/components/Stepper/index.js

@@ -2,7 +2,9 @@ import React, { useState, useMemo } from "react";
 import PropTypes from "prop-types";
 import { StepperProvider } from "./StepperContext";
 import StepList from "./js/StepList";
-import StepperButtons from "./js/StepperButtons";
+import { DefaultButtons } from "./js/StepperButtons";
+import Buttons from "./js/Buttons";
+import Step from "./js/Step";
 import "./stepper.css";
 
 const Stepper = ({
@@ -24,11 +26,24 @@ const Stepper = ({
   const [validationAttempted, setValidationAttempted] = useState(false);
   const isHorizontal = orientation === "horizontal";
 
-  const steps = useMemo(() => {
-    return React.Children.toArray(children).filter(
-      (child) => child.type.name === "Step"
-    );
-  }, [children]);
+  const { steps, buttons } = useMemo(() => {
+    const children_array = React.Children.toArray(children);
+    return {
+      steps: children_array.filter(
+        (child) => child.type.displayName === "StepperStep"
+      ),
+      buttons: children_array.find(
+        (child) => child.type.displayName === "StepperButtons"
+      ) || (
+        <DefaultButtons
+          nextBtnTxt={nextBtnTxt}
+          finishBtnTxt={finishBtnTxt}
+          backBtnTxt={backBtnTxt}
+          skipBtnTxt={skipBtnTxt}
+        />
+      ),
+    };
+  }, [children, nextBtnTxt, finishBtnTxt, backBtnTxt, skipBtnTxt]);
 
   const contextValue = {
     activeStep,
@@ -43,7 +58,7 @@ const Stepper = ({
     validationAttempted,
     setValidationAttempted,
     orientation,
-    onSkip
+    onSkip,
   };
 
   return (
@@ -57,33 +72,25 @@ const Stepper = ({
               style={
                 isHorizontal && contentHeight
                   ? {
-                    height: contentHeight,
-                    maxHeight: contentHeight,
-                    overflow: "scroll",
-                  }
+                      height: contentHeight,
+                      maxHeight: contentHeight,
+                      overflow: "scroll",
+                    }
                   : {}
               }
             >
               {isHorizontal && steps[activeStep]}
             </div>
           )}
-          <StepperButtons
-            nextBtnTxt={nextBtnTxt}
-            finishBtnTxt={finishBtnTxt}
-            backBtnTxt={backBtnTxt}
-            skipBtnTxt={skipBtnTxt}
-          />
+          {buttons}
         </div>
       </div>
     </StepperProvider>
   );
 };
 
-export const Step = ({ children }) => {
-  return <>{children}</>;
-};
-
 Stepper.Step = Step;
+Stepper.Buttons = Buttons;
 
 Stepper.propTypes = {
   /**
@@ -131,8 +138,4 @@ Stepper.defaultProps = {
   orientation: "vertical",
 };
 
-Step.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default Stepper;
+export default Stepper;

src/components/Stepper/js/Buttons.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useStepper } from "../StepperContext";
+
+const Buttons = ({ children }) => {
+  const {
+    activeStep,
+    steps,
+    setActiveStep,
+    setErrors,
+    onFinish,
+    onChange,
+    onSkip,
+    stepValidator,
+    stepErrMessage,
+    setValidationAttempted,
+  } = useStepper();
+
+  const isLastStep = activeStep === steps.length - 1;
+
+  const goToNextStep = async () => {
+    setValidationAttempted(true);
+    const isNextStepAllowed = await stepValidator(steps[activeStep]?.props?.id);
+
+    if (isNextStepAllowed) {
+      if (activeStep < steps.length - 1) {
+        setActiveStep((prev) => prev + 1);
+        setErrors((prev) => ({ ...prev, [activeStep]: null }));
+        onChange(steps[activeStep]?.props?.id);
+      } else if (activeStep === steps.length - 1) {
+        onFinish();
+      }
+      setValidationAttempted(false);
+    } else {
+      setErrors((prev) => ({
+        ...prev,
+        [activeStep]: stepErrMessage,
+      }));
+    }
+  };
+
+  const goToPreviousStep = () => {
+    if (activeStep > 0) {
+      setActiveStep((prev) => prev - 1);
+      setValidationAttempted(false);
+      onChange(steps[activeStep]?.props?.id);
+    }
+  };
+
+  const onSkipStep = () => {
+    onSkip(steps[activeStep]?.props?.id);
+  };
+
+  return (
+    <div className="stepper-buttons">
+      {children({
+        goToNextStep,
+        goToPreviousStep,
+        onSkipStep,
+        isLastStep,
+        activeStep,
+        stepId: steps[activeStep]?.props?.id || "",
+      })}
+    </div>
+  );
+};
+
+Buttons.displayName = "StepperButtons";
+Buttons.propTypes = {
+  children: PropTypes.func.isRequired,
+};
+
+export default Buttons;

src/components/Stepper/js/Step.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Step = ({ children }) => {
+  return <>{children}</>;
+};
+
+Step.displayName = "StepperStep";
+
+Step.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  id: PropTypes.string,
+};
+
+export default Step;