Upgrade stepper to allow horizontal orientation (#397)

* update stepper component to render content horizontally

* minor fix

* 4.4.8-alpha1

* make button text dynamic and horizontal content height fixed

* minor fixes

* linting

* bump npm version

---------

Co-authored-by: lghiur <[email protected]>

package.json

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

src/components/Stepper/Readme.md

@@ -1,6 +1,7 @@
 
 ```jsx
 import React from 'react';
+import Stepper from "./index.js"
 
 const ExampleStepper = () => {
   const handleFinish = () => {
@@ -17,19 +18,107 @@ const ExampleStepper = () => {
       stepValidator={validateStep}
       stepErrMessage="Please complete all required fields before proceeding."
     >
-      <Stepper.Step id="personal-info" title="Step-1" description="Enter your name">
+      <Stepper.Step id="personal-info" title="Step-1">
         <input type="text" placeholder="Full Name" />
       </Stepper.Step>
 
-      <Stepper.Step id="address" title="Step-2" description="Provide your address">
+      <Stepper.Step id="address" title="Step-2">
         <input type="text" placeholder="Street Address" />
       </Stepper.Step>
 
-      <Stepper.Step id="review" title="Step-3" description="Review your information">
+      <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>
+  );
+};
+
+<ExampleStepper />
+```
+
+```jsx
+import React from "react";
+import Stepper from "./index.js";
+
+const ExampleStepper = () => {
+  const handleFinish = () => {
+    console.log("All steps completed!");
+  };
+
+  const validateStep = (stepId) => {
+    return true;
+  };
+
+  return (
+    <Stepper
+      onFinish={handleFinish}
+      stepValidator={validateStep}
+      stepErrMessage="Please complete all required fields before proceeding."
+      orientation="horizontal"
+      backBtnTxt="Previous"
+      nextBtnTxt="Next"
+      finishBtnTxt="Done"
+    >
+        <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>
   );
 };
 
-<ExampleStepper />
+<ExampleStepper />
+```

src/components/Stepper/Stepper.test.js

@@ -1,8 +1,13 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import Stepper from './index';
 
-/* eslint-disable-next-line react/prop-types */
-function StepperComponent({ validator, onFinish: mockOnFinish }) {
+
+function StepperComponent({ 
+  validator, 
+  onFinish: mockOnFinish,
+  orientation = 'vertical'
+}) {
   const onFinish = () => {
     console.log('Stepper finished');
   };
@@ -17,6 +22,7 @@ function StepperComponent({ validator, onFinish: mockOnFinish }) {
         onFinish={mockOnFinish || onFinish}
         stepValidator={validator || stepValidator}
         stepErrMessage="Validation failed"
+        orientation={orientation}
       >
         <Stepper.Step id="step1" title="Step 1" description="First step">
           Step 1 content
@@ -32,78 +38,117 @@ function StepperComponent({ validator, onFinish: mockOnFinish }) {
   );
 }
 
-describe('Stepper', () => {
-  it('should render the initial step correctly', () => {
-    cy.mount(<StepperComponent />)
-      .get('.step-container')
-      .should('have.length', 3)
-      .get('.step-number.active')
-      .should('contain', '1')
-      .get('.step-title')
-      .first()
-      .should('have.text', 'Step 1');
-  });
+describe('Stepper Component', () => {
+  describe('Common Functionality', () => {
+    it('should render the initial step correctly', () => {
+      cy.mount(<StepperComponent />)
+        .get('.step-container-vertical')
+        .should('have.length', 3)
+        .get('.step-number.active')
+        .should('contain', '1')
+        .get('.step-title')
+        .first()
+        .should('have.text', 'Step 1');
+    });
 
-  it('should navigate to the next step when Continue is clicked', () => {
-    cy.mount(<StepperComponent />)
-      .get('.stepper-buttons button')
-      .contains('Continue')
-      .click()
-      .get('.step-number.active')
-      .should('contain', '2');
-  });
+    it('should navigate to the next step when Continue is clicked', () => {
+      cy.mount(<StepperComponent />)
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.step-number.active')
+        .should('contain', '2');
+    });
 
-  it('should show error message when validation fails', () => {
-    cy.mount(<StepperComponent />)
-      .get('.stepper-buttons button')
-      .contains('Continue')
-      .click()
-      .get('.stepper-buttons button')
-      .contains('Continue')
-      .click()
-      .get('.error-message')
-      .should('be.visible')
-      .and('have.text', 'Validation failed');
-  });
+    it('should show error message when validation fails', () => {
+      cy.mount(<StepperComponent />)
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.error-message')
+        .should('be.visible')
+        .and('have.text', 'Validation failed');
+    });
+
+    it('should allow navigation back to previous step', () => {
+      cy.mount(<StepperComponent />)
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.stepper-buttons button')
+        .contains('Back')
+        .click()
+        .get('.step-number.active')
+        .should('contain', '1');
+    });
 
-  it('should allow navigation back to previous step', () => {
-    cy.mount(<StepperComponent />)
-      .get('.stepper-buttons button')
-      .contains('Continue')
-      .click()
-      .get('.stepper-buttons button')
-      .contains('Back')
-      .click()
-      .get('.step-number.active')
-      .should('contain', '1');
+    it('should show Finish button on last step and call onFinish', () => {
+      const onFinish = cy.stub().as('onFinish');
+      cy.mount(<StepperComponent validator={() => true} onFinish={onFinish} />)
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.stepper-buttons button')
+        .contains('Finish')
+        .should('be.visible')
+        .click()
+        .get('@onFinish')
+        .should('have.been.called');
+    });
   });
 
-  it('should mark completed steps correctly', () => {
-    cy.mount(<StepperComponent />)
-      .get('.stepper-buttons button')
-      .contains('Continue')
-      .click()
-      .get('.step-number.completed')
-      .should('have.length', 1)
-      .and('contain', '1');
+  describe('Vertical Orientation', () => {
+
+    it('should show green connecting line for completed steps', () => {
+      cy.mount(<StepperComponent orientation="vertical" validator={() => true} />)
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.step-container-vertical.completed')
+        .should('exist');
+    });
   });
 
-  it('should show Finish button on last step', () => {
-    const onFinish = cy.stub().as('onFinish');
-    cy.mount(<StepperComponent validator={() => true} onFinish={onFinish} />)
-      .get('.stepper-buttons button')
-      .contains('Continue')
-      .click()
-      .get('.stepper-buttons button')
-      .contains('Continue')
-      .click()
-      .get('.stepper-buttons button')
-      .contains('Finish')
-      .should('be.visible')
-      .click()
-      .get('button:contains("Finish")')
-      .click()
-      .get('@onFinish')
-      .should('have.been.called');
+  describe('Horizontal Orientation', () => {
+    it('should render in horizontal layout', () => {
+      cy.mount(<StepperComponent orientation="horizontal" />)
+        .get('.step-list-horizontal')
+        .should('exist')
+    });
+
+    it('should show progress line below step numbers', () => {
+      cy.mount(<StepperComponent orientation="horizontal" />)
+        .get('.progress-line-placeholder')
+        .should('exist')
+        .get('.progress-line')
+        .should('not.exist');
+    });
+
+    it('should show completed progress line for finished steps', () => {
+      cy.mount(<StepperComponent orientation="horizontal" validator={() => true} />)
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.progress-line')
+        .should('exist');
+    });
+
+    it('should render active step content in content area', () => {
+      cy.mount(<StepperComponent orientation="horizontal" />)
+        .get('.stepper-content-wrapper')
+        .should('contain', 'Step 1 content')
+        .get('.stepper-buttons button')
+        .contains('Continue')
+        .click()
+        .get('.stepper-content-wrapper')
+        .should('contain', 'Step 2 content');
+    });
   });
-});
+
+});