Story 2248 - pramaan-admin
OnboardingStepper now renders as a vertical timeline
The standalone OnboardingStepper keeps its
currentStage prop and now displays the seven backend
onboarding stages as a vertical timeline with crimson completed/current
states and muted future states.
Before / After
Before: horizontal stepper
✓
Firm created
✓
Invite sent
Admin joined
Members invited
Training / first matter / complete squeezed past five columns
After: vertical timeline
✓
Firm created
26 Jun 2026
✓
Invite sent
26 Jun 2026 · to anjali@sarafthacker.co
Admin joined
27 Jun 2026 · Anjali Saraf joined
Members invited
Training
Storybook Evidence
Mid-onboarding story: completed crimson dots, current crimson ring, future muted states.
Complete story: all stages complete with mock sub-lines visible.
Implementation Notes
| Area | Result |
|---|---|
src/components/onboarding/onboarding-stepper.tsx |
Replaced the horizontal grid with a vertical ordered list and
connector line. Completed dots and connectors use
brand-primary; current uses a crimson ring; future
uses muted surface and ink tokens.
|
src/components/onboarding/presentation.ts |
Added colocated mock presentation metadata for per-stage sub-lines, with the required TODO for real onboarding-event timestamps. |
src/components/onboarding/onboarding-stepper.stories.tsx |
Kept autodocs and added deterministic first-stage, mid-onboarding, and complete states. |
No backend, generated contracts, codegen, board field, or
firm-detail-view.tsx call-site change is part of this
story.