[Resource referencing] Multi-Step Form with Stepper - V1

[ChaimaaZaoui]

As a user, I want to have a clear understanding of my progress in a multi-step form by visualizing it through a stepper component, and I want to be able to navigate through the form using Next and Previous buttons.

Acceptance criteria

Scenario 1: Navigating a Multi-Step Form with Stepper and Navigation Buttons

Given that I am accessing a Resource referencing process, When I start filling out the fields, Then I should see a stepper component that visually represents the steps of the process and indicates the current step I am on.

Scenario 2: Moving forward

Given that I am on a specific step of the Resource referencing process, When I have completed the required fields on the current step, Then the Nextbutton should be active which allows me to proceed to the next step.

Given that I am on a specific step of the Resource referencing process, When I have not completed the required fields on the current step, Then the Nextbutton remain inactive and non-clickable.

Given that I am on the last step of the Resource referencing process, Then the Nextbutton should be hidden.

Scenario 3: Moving backward

Given that I am on a step other than the first step of the Resource referencing process, When I want to review or modify the information I provided on the previous step, Then I should see a "Previous" button, which allows me to navigate back to the previous step.

When I click the Previous button, Then I should be taken back to the previous step, and my previously entered information should be preserved.

Given that I am on the first step of the Resource referencing process, When I am reviewing or modifying the information provided on the first step, Then the "Previous" button should be hidden, as there is no previous step to navigate back to.

Scenario 4: Internationalisation

Eng previous next"

Fr précédent suivant

DE zurück weiter

Resources

Mockups

Desktop

Environment

• staging URL: https://app.staging.okp4.network/

Additional informations

None.

┆Issue is synchronized with this Wrike task by Unito

[ChaimaaZaoui]

Add the navigation part, with the next and previous button

[ChaimaaZaoui]

In the error management, do you think it's important to have a refresh button, or is it sufficient that the user clicks again on next or previous ? would the navigation bug be gone ?

[loiclaudet]

What type of error are you thinking of? Form errors mainly occur when uploading files. We shouldn't have any errors when clicking on navigation button, as these are disabled until the required fields are filled in.

[ChaimaaZaoui]

I don't know if any errors could be encountered when moving from a page to another even if the mandatory fields are filled. If there won't be any, I can take off the error management scenario. @0xLodz

[loiclaudet]

Stepper Technical Specifications

Overview

The Stepper component uses the useStepper hook to manage the state of the stepper, and it renders a StepperProgress component, the current step, and the navigation buttons.

Each step in the steps array receives a unique id which is then used in the validateStep function of the useStepper hook to identify and update the validation status of the step.

API

type StepId = string
type StepStatus = 'error' | 'disabled' | 'valid' | 'default'

type StepData = {
  id: StepId
  order: number
  status: StepStatus
}

// useStepper hook output (takes the # of steps as input)
type StepperControls = {
  stepsData: StepData[]
  nextStep: () => void
  previousStep: () => void
  updateStep: (stepId: string, status: StepStatus) => void
  activeStepId: StepId
  previousActiveStepId: StepId
}

type StepProps = {
  id: StepId
  onUpdateStep: (stepStatus: StepStatus) => void
}

type Step = ReactElement<StepProps>

// Stepper component props
type StepperProps = {
  steps: Step[]
}

type StepperProgressProps = {
  stepsData: StepData[]
  activeStepId: StepId
  previousActiveStepId: StepId
}

type ProgressBarTransition = 'none' | 'backward' | 'forward'

type ProgressBarProps = {
  active: boolean
  valid: boolean
  transition: ProgressBarTransition
}

[loiclaudet]

@SpicySalm0n how do we make the transition from one step to the next?

[SpicySalm0n]

@0xLodz is it possible to have something like that? (it's not smooth on the video, I don't have 100% control over the Figma animations but the border radius has to be the same) The idea is to have the blue fill from left to right. And for green I think a smooth changing color is enough, what do you think?

https://github.com/okp4/dataverse-portal/assets/115076387/23ab9586-1cfd-470f-b840-18e6ad94bfc5

[loiclaudet]

@SpicySalm0n Sorry for misleading you, my question was mostly about the content of the step. In our case, the whole from, does it contains any transition as well? Thanks for the details and the video about the stepper indicator. This is definitely possible to animate it like the video. I guess if the step is not valid anymore, the animation goes to the other side? Thanks

[SpicySalm0n]

@0xLodz yes for the question!

I was thinking about a fade in, fade out like this:

https://github.com/okp4/dataverse-portal/assets/115076387/76d3a4f0-e621-4092-9925-fea47b70dab3

but we can add movement down for example:

https://github.com/okp4/dataverse-portal/assets/115076387/a1fae805-a2a4-4d99-9923-a9dc936d7aca

but a simple fade in/fade out is ok for me

[SpicySalm0n]

only this part will remain fixed as well as the previous/next step banner

[ChaimaaZaoui]

I think the fade, as in the first video, is good, no need to go with a movement down. Thanks

[lolottetheclash]

First, thank you for all this well-written study, it's a great job! 😉 I just have a few reservations about using children on the stepper. I think it would have been more practical to use an array of steps. This would have made it possible to use UUIDs instead of indexes to create the id of each step, which is safer. I think we can avoid the none display for non-active steps, by simply displaying the active step in another way. Also, using an array of steps would allow each step to have its own onValidate method, which would be called when the next step is clicked, thus avoiding the need for a context. Finally, just to add a little improvement to the "generic" side of the stepper, I would have updated by isStepValid from the StepperProgressProps by stepStatus (or something like that), which would be a union of status. This would make it possible to add nuances if necessary (validated, in error, disabled, etc.).

[MdechampG]

Hey team! Please add your planning poker estimate with Zenhub @0xLodz @amimart @ccamel @ErikssonJoakim @fredericvilcot @lolottetheclash

[loiclaudet]

@MdechampG Could you please confirm these following german translation for Previous and Next buttons are correct?

"previous": "Vorherige",
"next": "Nächste",

Thanks

[MdechampG]

@lmarline you are the best one to confirm :)

[lmarline]

@0xLodz @MdechampG hey, these terms are adjectives used in other situations (followed by others words for example) It would be better to write :

"previous": "zurück" "next": "weiter"

[MdechampG]

@ChaimaaZaoui could you add the internationalisation in the issue ? @0xLodz could you change the german version with zurück and weiter please ?

[ChaimaaZaoui]

Tested