Application Pipeline Success Block for React

Nothing was submitted. The role, the place, the reference and the four stages are typed sample data, and the only things the page does are copy the reference through the browser's clipboard and open or close a stage. To wire it, build STAGES from your hiring flow (each with its fewest and most working days), set AS_OF from the day the application arrived and fill the role and reference from the application.

From one typed day and each stage's range of working days. Every date is the working day (weekends skipped) that many days after AS_OF, counted in UTC and added up stage by stage, so a stage that takes five to ten days after a five-day screen ends between the two days that result. Nothing reads the clock, and the page says the same on every device.

They're read-only Steps in a vertical list, so the list is one list of four items for assistive technology and nothing here moves the process. Each stage's name is a button in a level-3 heading that opens its explanation, and a hidden word after the name says whether it is done, next or later; the markers are filled for done and outlined for next, never shown by color alone. Any number of stages can be open at once.

Yes. It writes the reference to the clipboard and a screen reader hears "Application reference copied" (or that the clipboard refused, which happens on a page not served over HTTPS). The reference itself is left-to-right whatever the page's direction.

The primary is a Shine Button used as a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.

The stages go under the list, with the next one already open, and the primary is pinned to the bottom of the screen and full width, so it stays in reach; from the small breakpoint up it sits in the flow. The place is left out of the list on a phone to keep the page short. The page is aligned to the top, so opening a stage never moves the heading.