Components · Explainer

Explainer steps

The numbered how-it-works run that a policy panel drops in to answer “what happens next.” Steps lays markers on a spine — joined by connectors, each carrying a done / current / upcoming state — as a compact horizontal stepper for progress, or a vertical sequence with descriptions for a flow you're teaching. Below, both explain the same thing: how a rescuer earns team-lead access to PII.

horizontal · compact progress stepper (step 2 current)
  1. Request roleSubmitted Jun 30
  2. Sign agreementData-Access v2
  3. Admin reviewIn the queue
  4. PII unlockedStep-up to view

Each .step is marker · body · connector, evenly stretched. Done markers fill accent and swap the number for a check; the current marker rings accent on a soft fill and carries aria-current="step"; upcoming stay neutral surface-2. State never rides color alone — the check glyph, fill, and title weight all shift.

vertical (steps--vertical) · how team-lead access works
  1. Request the team-lead roleFrom your team page, tap “Manage my team.” The request drops into the admin queue.
  2. Sign the Data-Access AgreementYou're prompted to sign v2. Your signature and its version are written to the auth log.
  3. An admin reviews & approvesA working-team admin confirms your role — you're emailed the moment it clears.
  4. Step-up to view PIIEnter your 6-digit code to unlock addresses and phone numbers. Elevated access re-locks after 15 minutes.

The steps--vertical mode stacks the run and drops each .step__desc beneath its title — the shape a policy ExplainerPanel embeds as its “what to do.” The connector runs the marker rail down to the next marker; completed segments tint accent so progress reads down the spine. The last step carries no line.

steps · current
steps: StepItem[] ( { title, desc?, marker? } ) plus current — the index that splits the run into done (before), current (at), and upcoming (after).
.step__marker
A --control-row-h pill: neutral surface-2 upcoming, accent-soft ring when current, filled accent when done. Shows marker ?? index+1 — pass a check for completed.
.step__line
The connector between markers — a 1px --rule hairline, horizontal (flex:1) or vertical down the rail. Rendered for every step except the last; aria-hidden.
vertical
vertical ( steps--vertical ) switches to a stacked column so descriptions have room — the how-it-works layout. Horizontal is the compact progress ribbon.
a11y
A real <ol> keeps ordered-list semantics; the current <li> carries aria-current="step". State is glyph + fill + weight, never hue alone.

Source · @phauna/ds Steps ( .steps / .step__marker / .step__line ) as embedded in ExplainerPanel.tsx & AuthExplainer.tsx “what to do” · design-system/explainers.