Welcome Checklist Notification Block for React

Edit STEPS (an id and the label of its button), CHOICES (the pipelines, with the sentence that follows each) and the helpers titleOf and sentenceOf, which say what each step is called and asks for. The ring, the headline, the sentence under it and the "N steps to go" words are all worked out from the list of done ids, never typed twice. Keep the sentences about the same length: every open step is given the same height, so the frame never jumps.

The sentence of the contacts step (the people you import follow the pipeline) and the name and sentence of the last step ("Create your first deal", "ticket" or "role"). The choice is live: change it and the text changes, and when the step is done its row ends in the pipeline's name instead of "Done". It creates nothing; in your app it would set the template your account starts from.

Setup should not be closed with a step open, but a disabled button hides why. So the button keeps its place, looks quiet and stays pressable: pressed early it says what is still open, opens that step and moves focus to its header. When all four are done it becomes the normal primary; pressing it closes the setup on this page, fills the ring and says nothing was created. Undo opens it again.

Everything. Nothing is imported, connected or created: the buttons only change the ticks. In your app make each button open the real place (the import dialog, the inbox connection) and let done come from what your server knows the account has done, so a step ticks itself when the work is finished anywhere.

Yes. Tab reaches each step header, the open step's control and button, and Complete setup; Enter or Space opens a step. The arrow keys do not move between step headers on this base; Tab does. After a step is done, focus moves to the next step's header.

The ring and the headline sit side by side above the frame, then the steps run full width, with the state word hidden for sighted users and kept for screen readers. The open step's button and Complete setup are on the first screen.