UI - Add Stepper/ Main page

[jyoti3286]

We do both, COOP and BCOMP (with this item)

Description:

• [x] Need 1 main page to display working area (ie, to contain sub-components/pages) DONE in #2335
• [x] Main page must support multiple sub-components ("pages"), which must display according to stepper (and possibly other component/app states) DONE in #2335
• [x] Stepper must show sequential pages in flow and highlight current page; if possible show only page 1 until business type is entered/known.
• [x] Stepper should show show icons and text as per mockup.
• [x] Stepper must allow linear navigation to any page (once multiple pages exist).
• [x] As part of this, need to create object/structure to store different page sets, icons, labels, etc. for Coop and BComp.
• [x] Also need to update Actions bar component to show next page label according to page set + any special logic needed for navigation.
• [ ] Move stepper to sbc-common-components so other teams can use it (this includes creating its doc pages) prototype stepper was not implemented as a separate component

Dependencies

Requirements See LEAR Design & Requiredments, Part 0 at https://sites.google.com/freshworks.io/bcros/bcomp/incorporation

Ready to Build (DoR):

• [ ] Stakeholders have approved
• [ ] User story completed (full flow of business rules, happy and alternate paths etc.)
• [ ] What are the dependencies
• [ ] Validation rules defined (UI, Data, Role-Action)
• [ ] Is a formal UAT required
• [ ] Acceptance Criteria well defined in tickets (Story level) QA can confirm or deny
• [ ] Reference BA checklist for this story (functional description captured ?)

Acceptance / DoD:

• [ ] PR to remove feature flags created
• [ ] Check Requirements against completed stories
• [ ] Completed stories verified in Dev/Test/Prod
• [ ] Confirm Test cases built and succeeding
• [ ] Confirm successful End-End runs
• [ ] No regression
• [ ] All Linters passed
• [ ] Test coverage and Test ID acceptable by Product owner
• [ ] Ticket merged to master or story branch
• [ ] Add / maintain selectors for QA purposes
• [ ] Add PR numbers - If available
• [ ] All tests passed (Jest, Pytest, Postman)
• [ ] Developer to list Config changes/ Update documents and designs
• [ ] Design / Solution accepted by Product Owner
• [ ] Acceptance criteria has been defined (happy path, known sad paths)
• [ ] Test coverage acceptable
• [ ] Peer Reviewed
• [ ] Accessibility reviewed and acceptable checklist
• [ ] UX Approved
• [ ] PR Accepted
• [ ] Production burn in completed

[severinbeauvais]

Based on my research in #2055 and subsequent discussions, it was decided that we would proceed with the Vuetify stepper and, if possible, update the DOM directly with our desired icons.

The basic approach is incremental development for this, since it is expected that Vuetify will update the stepper component (possibly supported custom icons and/or templates/slots) some time in its Release 2 (which is now).

[sienna-oldaccountdontuse]

@Kaineatthelab I see you moved this to Analysis, how can we help?

[cameron-eyds]

As this ticket is part of the high priority story #1815 i'm moving it into the sprint backlog, for completion of that story. The initial blocker of this ticket was some research on the Stepper UI which @severinbeauvais has completed.

[severinbeauvais]

@Kaineatthelab This ticket is in the Sprint Backlog pipeline but does not have the milestone set as current Sprint 21. Should this ticket be put in S21 and worked on presently?

[severinbeauvais]

@forgeuxGH5 Scott, can you have a look at the "prototype" stepper at https://business-create-dev.pathfinder.gov.bc.ca/businesses/create/ and identify if there's anything missing?

[severinbeauvais]

@forgeuxGH5 Scott, can you have a look at the "prototype" stepper at https://business-create-dev.pathfinder.gov.bc.ca/businesses/create/?nrNumber=NR%209431175 and identify if there's anything missing?

[Kaineatthelab]

@forgeuxGH5 can be closed.