Controls: Next / Finish Buttons (Demographics)

alexrcabral commented 3 years ago

This task defines the next and finish buttons on the demographics page (/userDetails), and the creation of the corresponding "pages" in the modal (no textual content needed in the body of the modal pages as part of this task).

Full Mockup

Screenshot of second page of demographics, asking: Grade, Year of Birth, Gender, and Location. At the bottom of the page is a light blue button labelled Back, followed by a light blue button labelled Next.

The above mockup shows the controls in context of the second page of the demographic info (/userDetails).

Next / Finish

The right hand button should be present on the first and second of the three "pages" of the demographics questions. On the third and final page, this should change to a "Finish" button. This should look identical to the Next button, with only the text copy changed.

When clicked, the Next button should bring the user to the next page of the modal. When clicked, the Finish button should save the information with the account, and close out the page, returning the user to their originating page.

Acceptance criteria:

Given that I'm a user who is filling out information associated with my account, I should encounter the next button on the first page of sign up. When I click this, I should be brought to the second page, which will contain more granular demographic questions and the next button. When I click next, I should be brought to the third page asking about disability information. On this page I should be met with the button saying "Finish" instead of Next. When I click this, it should exit out the modal.

abaranowska1 commented 3 years ago

Tested @rupeshparab In my opinion, I will move the buttons to the left ( they should be centered as it is shown on mockup ) the rest is fine. Selection_441 Selection_440 Selection_439