Skip to content

feat(@dpc-sdp/ripple-ui-forms): adds ability to control form step progression [SD-1587] #1358

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

Open
dylankelly wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat(@dpc-sdp/ripple-ui-forms): adds ability to control form step progression [SD-1587] #1358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4dddcd9
feat(ripple-ui-forms): adds ability to control form step progression
dylankelly Mar 1, 2026
e35a4e6
chore(ripple-ui-forms): fix type linting
dylankelly Mar 2, 2026
a269fdb
feat(ripple-ui-forms): adds ability to disable step buttons
dylankelly Mar 2, 2026
50ebc15
fix(ripple-ui-core): update component exports
dylankelly Mar 10, 2026
33028b6
Merge branch 'main' into feature/steps-control
lambry Mar 30, 2026
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: 2 additions & 0 deletions packages/ripple-ui-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
"exports": {
".": "./dist/rpl-lib.es.js",
"./nuxt": "./src/nuxt/index.ts",
"./components": "./src/components.ts",
"./components/*": "./src/components/*",
"./vue": "./dist/rpl-vue.es.js",
"./webcomponents": "./dist/web-components/rpl-wc.es.js",
"./style": "./dist/global.css",
Expand Down
1 change: 1 addition & 0 deletions packages/ripple-ui-core/src/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export { default as RplPrimaryCampaign } from './components/campaign-banner/RplP
export { default as RplPrimaryNav } from './components/primary-nav/RplPrimaryNav.vue'
export { default as RplProfile } from './components/profile/RplProfile.vue'
export { default as RplPromoCard } from './components/card/RplPromoCard.vue'
export { default as RplProgress } from './components/progress/RplProgress.vue'
export { default as RplRelatedLinks } from './components/related-links/RplRelatedLinks.vue'
export { default as RplResultListing } from './components/result-listing/RplResultListing.vue'
export { default as RplResultListingItem } from './components/result-listing/RplResultListingItem.vue'
Expand Down
237 changes: 237 additions & 0 deletions packages/ripple-ui-forms/src/components/RplForm/RplForm.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,166 @@
import RplForm from './RplForm.vue'
import { schema } from './fixtures/sample'

const multiStepSchema: any[] = [
{
$step: true,
id: 'step-one',
key: 'step-one',
name: 'step-one',
title: 'Step one',
nextButton: 'Next',
schema: [
{
$formkit: 'RplFormText',
id: 'first_name',
name: 'first_name',
label: 'First name',
validation: [['required']],
value: ''
}
]
},
{
$step: true,
id: 'step-two',
key: 'step-two',
name: 'step-two',
title: 'Step two',
nextButton: 'Review',
prevButton: 'Back',
schema: [
{
$formkit: 'RplFormText',
id: 'email',
name: 'email',
label: 'Email',
value: ''
}
]
},
{
$step: true,
id: 'review',
key: 'review',
name: 'review',
title: 'Review',
nextButton: 'Submit',
prevButton: 'Back',
schema: [
{
$formkit: 'RplFormReview',
key: 'review_component'
}
]
}
]

const multiStepSchemaNoPrevButton: any[] = [
{
$step: true,
id: 'step-one',
key: 'step-one',
name: 'step-one',
title: 'Step one',
nextButton: 'Next',
schema: [
{
$formkit: 'RplFormText',
id: 'first_name',
name: 'first_name',
label: 'First name',
value: ''
}
]
},
{
$step: true,
id: 'step-two',
key: 'step-two',
name: 'step-two',
title: 'Step two',
nextButton: 'Continue',
prevButton: false,
schema: [
{
$formkit: 'RplFormText',
id: 'email',
name: 'email',
label: 'Email',
value: ''
}
]
},
{
$step: true,
id: 'review',
key: 'review',
name: 'review',
title: 'Review',
nextButton: 'Submit',
prevButton: 'Back',
schema: [
{
$formkit: 'RplFormReview',
key: 'review_component'
}
]
}
]

const multiStepSchemaNoNextButton: any[] = [
{
$step: true,
id: 'step-one',
key: 'step-one',
name: 'step-one',
title: 'Step one',
nextButton: 'Next',
schema: [
{
$formkit: 'RplFormText',
id: 'first_name_no_next',
name: 'first_name_no_next',
label: 'First name',
value: ''
}
]
},
{
$step: true,
id: 'step-two',
key: 'step-two',
name: 'step-two',
title: 'Step two',
nextButton: false,
prevButton: 'Back',
schema: [
{
$formkit: 'RplFormText',
id: 'email_no_next',
name: 'email_no_next',
label: 'Email',
value: ''
}
]
},
{
$step: true,
id: 'review',
key: 'review',
name: 'review',
title: 'Review',
nextButton: 'Submit',
prevButton: 'Back',
schema: [
{
$formkit: 'RplFormReview',
key: 'review_component'
}
]
}
]

describe('<RplForm />', () => {
it('renders', () => {
// see: https://test-utils.vuejs.org/guide/
Expand Down Expand Up @@ -37,4 +197,81 @@ describe('<RplForm />', () => {
cy.get('button[type="submit"]').should('be.disabled')
cy.get('button[type="reset"]').should('be.disabled')
})

it('validates and navigates between multi-step form steps', () => {
cy.mount(RplForm, {
props: {
id: 'test-multi-step-form',
schema: multiStepSchema
}
})

cy.contains('Step 1 of 3').should('be.visible')
cy.contains('h3', 'Step one').should('be.visible')

cy.contains('button', 'Next').click()
cy.contains('There is a problem').should('be.visible')
cy.contains('Step 1 of 3').should('be.visible')

cy.get('[name="first_name"]').type('Taylor')
cy.contains('button', 'Next').click()

cy.contains('Step 2 of 3').should('be.visible')
cy.contains('h3', 'Step two').should('be.visible')

cy.contains('button', 'Back').click()
cy.contains('Step 1 of 3').should('be.visible')
cy.contains('h3', 'Step one').should('be.visible')
})

it('renders review step content in multi-step form', () => {
cy.viewport('macbook-13')
cy.mount(RplForm, {
props: {
id: 'test-multi-step-review-form',
schema: multiStepSchema
}
})

cy.get('[name="first_name"]').type('Taylor')
cy.contains('button', 'Next').click()
cy.get('[name="email"]').type('taylor@example.com')
cy.contains('button', 'Review').click()

cy.contains('Step 3 of 3').should('be.visible')
cy.contains('h3', 'Review').should('be.visible')
cy.contains('Step one').should('be.visible')
cy.contains('Step two').should('be.visible')
cy.contains('Change').should('be.visible')
})

it('hides previous step button when prevButton is disabled', () => {
cy.viewport('macbook-13')
cy.mount(RplForm, {
props: {
id: 'test-multi-step-no-prev-button',
schema: multiStepSchemaNoPrevButton
}
})

cy.contains('button', 'Next').click()
cy.contains('Step 2 of 3').should('be.visible')
cy.get('.rpl-form__step-prev').should('not.be.visible')
cy.contains('button', 'Continue').should('be.visible')
})

it('hides next step button when nextButton is disabled', () => {
cy.viewport('macbook-13')
cy.mount(RplForm, {
props: {
id: 'test-multi-step-no-next-button',
schema: multiStepSchemaNoNextButton
}
})

cy.contains('button', 'Next').click()
cy.contains('Step 2 of 3').should('be.visible')
cy.get('.rpl-form__step-next').should('not.be.visible')
cy.contains('button', 'Back').should('be.visible')
})
})
2 changes: 1 addition & 1 deletion packages/ripple-ui-forms/src/components/RplForm/RplForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,7 @@ const handleStepChange = async ({

// Get the current steps errors when it's invalid, and we're trying to proceed
if (!currentStep.isValid && forwards) {
cachedErrors.value = getErrorMessages(getNode(currentStep.id))
cachedErrors.value = getErrorMessages(currentStep.node)
Comment thread
dylankelly marked this conversation as resolved.
}

if (isStepValid) {
Expand Down
Loading
Loading