Setup Progress Onboarding Block for React

From the steps. GROUPS lists each band and its tasks, each with the minutes it takes, and START_DONE lists which are done on load. The percent is done over total, the line under the bar adds up the minutes of the tasks not done yet, the counts in the band headers and the Next up marker are all worked out from that one list, so adding a task changes every number with no other edit.

In the demo it marks the Next up step done, rolls the percent, moves the marker to the next step (opening its band if it was shut) and says what changed in a polite status line under the button. When the last step is done the button reads "Open Chalkhurst" and the line says "Opened in this demo". Focus stays on the button throughout, so repeated presses just work.

Each band is a Collapsible: its header is a button that says how many of its steps are done and opens or closes the list. Only the band that holds Next up starts open, which on a phone keeps the first screen short; the others are one press away. Closed steps are not on screen, but the counts in the headers still tell the story.

The ticks, the percent and the Opened message live in the page: nothing is saved or sent. In your app, compute done from what the account actually has, make Continue go to the Next up step's own screen, and keep each band's open state if you want it remembered. The numbers on screen then follow your data.

Yes. Tab reaches the button, then each band's header; Enter or Space opens or closes a band. The steps themselves are plain list items, since they report state rather than take presses; the way to do one is the button, which always works on the step marked Next up.

The percent rolls its digits and the bar fills when the number changes, and the bands slide open; the entrance fade-up runs once. With reduced motion everything changes at once and nothing slides.