Step List

Step List

Use the step list to narrate work that happened in order: the steps a model took, the checks a job ran, the stages of a request.

The rail is all this component draws: the list, the row, the marker on each row, and the line connecting them.
What a step says is ordinary content, so compose the body from the type, tag, and spacing utilities you would use anywhere else.
That way a step can say anything without the step list growing a class for it.

The list is plain markup, so it works without JavaScript.
The PvStepList Vue component renders exactly these classes from an array of steps, and PvReasoning renders it from its steps prop.

Structure

Status

Set data-status on the pv-step to colour its marker: complete fills it, active tints it, and pending (the default) leaves it neutral.
A step worth calling out can put a sprite icon in its marker instead of the dot; the marker colours the icon for you.

A row that leaves the marker out is something said between steps rather than a step of its own.
It indents to line up with the labels above it, and the rail runs unbroken through it.

Composing a step body

These are the utilities the reasoning UI uses. Nothing here is specific to the step list, so swap any of it for what a step actually needs.

pv-shimmer paints across the whole of its box, so put it on the label text rather than on the row, or it sweeps the empty width beside the words.
A pv-flex label row does that for you: it shrink-wraps its children.

Example
A finished step, a running step, and a row with no marker.

<ol class="pv-step-list" role="list">
  <li class="pv-step" data-status="complete">
    <span class="pv-step-marker" aria-hidden="true"><span class="pv-step-dot"></span></span>
    <div class="pv-step-body pv-flow-4">
      <p class="pv-text-body-md pv-text-medium pv-text-default">Understanding the request</p>
    </div>
  </li>
  <li class="pv-step" data-status="active">
    <span class="pv-step-marker" aria-hidden="true"><svg class="pv-icon pv-icon-12" aria-hidden="true"><use xlink:href="#search"></use></svg></span>
    <div class="pv-step-body pv-flow-4">
      <p class="pv-flex pv-text-body-md pv-text-medium pv-text-default" style="--flex-wrap: wrap">
        <span class="pv-shimmer">Focusing on transparency rate data for</span>
        <span class="pv-tag-highlight">CPT 27447</span>
      </p>
      <p class="pv-text-body-md pv-text-tertiary">Two payers publish a rate for this code</p>
      <ul class="pv-flex" role="list" style="--flex-wrap: wrap; --flex-gap: 4px">
        <li class="pv-tag-secondary" data-style="rounded">Rate transparency</li>
        <li class="pv-tag-secondary pv-text-quaternary" data-style="rounded">2 payers</li>
      </ul>
      <p class="pv-text-body-md pv-text-medium pv-text-brand">&#8594;&#160;3.2x the regional median</p>
    </div>
  </li>
  <li class="pv-step">
    <div class="pv-step-body">
      <p class="pv-text-body-md pv-text-tertiary"><em>That gap is large enough to be worth explaining.</em></p>
    </div>
  </li>
</ol>

Custom properties

Every value the rail draws is a custom property, so a consumer can retheme it without overriding rules.
The most commonly changed ones are below; the full set is in _step-list.scss.