Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade stepper to allow horizontal orientation #397

Merged
merged 7 commits into from
Dec 18, 2024
Merged

Upgrade stepper to allow horizontal orientation #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
71e2b03
update stepper component to render content horizontally
jay-deshmukh Nov 30, 2024
290a99d
minor fix
jay-deshmukh Nov 30, 2024
8c0ca90
4.4.8-alpha1
lghiur Dec 3, 2024
bcaf4a7
make button text dynamic and horizontal content height fixed
jay-deshmukh Dec 9, 2024
33eea58
minor fixes
jay-deshmukh Dec 18, 2024
eed6575
linting
jay-deshmukh Dec 18, 2024
155f2ff
bump npm version
jay-deshmukh Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/index.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/index.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/index.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/index.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/tyk-ui.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/tyk-ui.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/tyk-ui.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/tyk-ui.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
97 changes: 93 additions & 4 deletions src/components/Stepper/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@

```jsx
import React from 'react';
import Stepper from "./index.js"

const ExampleStepper = () => {
const handleFinish = () => {
Expand All @@ -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 />
```
183 changes: 114 additions & 69 deletions src/components/Stepper/Stepper.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
};
Expand All @@ -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
Expand All @@ -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');
});
});
});

});
Loading
Loading