Numbered Steps Banner Block for React

Edit STEPS at the top of the file: each entry has a title and a state (done, current or next). Mark exactly one step current; the "Step 3 of 4" in the header is text you update with it.

This tracker only reports progress: nothing in it is a tab or a button that moves you, so it is an ordered list with the current step marked aria-current="step" and each step's state written out for screen readers ("Completed: Connect your data"). The Resume link is the one action.

Resume is a link (href="#"): send it to the current step's page. It renders the link it's given with render, with nativeButton={false}.

It ends on its band, and the next block's top rule is its bottom edge, so a closing rule would double it.

Each step is at least 11 rem wide, so on a narrow screen the row scrolls sideways, and on load the current step is brought to the middle, so the Resume button is in view. The row holds a focusable button, so keyboard users can reach it; it needs no extra tab stop. From a tablet up the four steps fit and nothing scrolls.

Yes. The steps run from the inline start, the lines and the circles follow, and the scroll position is worked out from where the step is on screen, so the current step is centred in either direction.