Lifecycle - Canvas Design System

When to Use

Use when: Displaying a saved workshop's position across the Plan → Facilitate → Reflect journey — workshop cards, saved lists, record detail headers. Pass the status derived by getWorkshopRecord() or getWorkshopList().

Don't use when: You mean the planner's manual doc-bar status (Draft / Ready / Live / Done) — that's a different concept with a different control. For a single state label use Badge via ws_status().

info The status is derived, never stored. Designed means a plan row exists; delivered means a completed coaching_sessions row or an ended live session; synthesized means a synthesis_sessions row. Never write a lifecycle value to the database, and never let a caller set it by hand — read it from the Workshop Record.

Variants

Compact (default)

For card footers and list rows. Completed steps fill with very-light red; pending steps stay outlined neutral. State is carried by fill and weight only — never a second hue, which is what keeps it inside Red Unification.

Designed
Delivered
Synthesized

Designed
Delivered
Synthesized

Designed
Delivered
Synthesized

<?= ws_lifecycle(['status' => $workshop['lifecycle_status']]) ?>

Full, with a context CTA

Larger, for a record's detail header. The CTA should be the single next action for the current stage — run it, synthesize it, or read the synthesis.

Designed
Delivered
Synthesized

Run in Facilitator

Designed
Delivered
Synthesized

Synthesize this workshop

Designed
Delivered
Synthesized

View synthesis

<?= ws_lifecycle([
    'status'  => 'delivered',
    'variant' => 'full',
    'cta'     => ['label' => 'Synthesize this workshop',
                  'href'  => '/synthesize/app.php?plan_id=' . $planId],
]) ?>

States

State	Meaning and treatment
`designed`	A plan exists. Step 1 complete, steps 2 and 3 pending.
`delivered`	The session ran — a completed `coaching_sessions` row with `linked_plan_id`, or an ended live session. Steps 1–2 complete.
`synthesized`	A `synthesis_sessions` row exists for the plan. All three complete.
Per-step	Steps carry `.is-complete` and `.is-current`. Complete steps show a check in the dot; the current step gets the weight emphasis.
Unknown status	Falls back to `designed`. Since the value is derived, an unexpected one means the derivation is wrong — fix it upstream.
No CTA	The full variant renders fine without one. The compact variant ignores `cta` entirely.

Real-World Usage

A saved-workshop card on MyWorkshopr. getWorkshopList() returns rows under the workshops key, each carrying lifecycle_status — pass it straight through rather than recomputing.

Q3 Planning Offsite

8 activities · 3h 20m

Designed
Delivered
Synthesized

<?php
$record = getWorkshopList($userId);          // rows under the `workshops` key
foreach ($record['workshops'] as $w): ?>
    <article class="workshop-card">
        <h3><?= htmlspecialchars($w['title']) ?></h3>
        <?= ws_lifecycle(['status' => $w['lifecycle_status']]) ?>
    </article>
<?php endforeach; ?>

The same strip appears on MyWorkshopr, planner/saved.php, and the Synthesize picker — one component so a workshop's stage reads identically wherever it's seen.

Options

Option	Type	Default	Purpose
`status`	string	`'designed'`	`designed` \| `delivered` \| `synthesized`. Always pass a derived value.
`variant`	string	`'compact'`	`compact` \| `full`. Only `full` emits a modifier class.
`cta`	array	`null`	`['label' => …, 'href' => …]`. Full variant only.
`id`	string	`null`	Element ID
`class`	string	`''`	Additional CSS classes
`attrs`	array	`[]`	Extra HTML attributes

Accessibility

Concern	Behavior
ARIA	Well handled. The strip carries `role="img"` with a composed `aria-label`, so a screen reader announces the state as one phrase instead of reading three disconnected dots and labels.
Structure	Steps are an ordered list, so the sequence is conveyed structurally as well as visually.
Colour independence	Completion is carried by a check mark inside the dot and by font weight, not by fill alone — it survives greyscale and colour-blindness. This is the pattern to copy elsewhere.
Keyboard	The compact variant has nothing focusable, which is right for a status display. In the full variant the CTA is a normal link.
CTA text	The label is the link's accessible name — "Synthesize this workshop" works out of context; "Continue" wouldn't.
Contrast	Completed steps pair `--phase-learn-very-light` with `--phase-learn-dark`; pending steps use `--gray-300` on `--bg-surface`. Both tested.

Tokens

Token	Used for
`--phase-learn` / `--phase-learn-dark`	Completed dot and label
`--phase-learn-light` / `--phase-learn-very-light`	Completed dot fill
`--gray-200` / `--gray-300`	Pending dots and the connector line
`--bg-surface`	Strip background
`--text-muted`	Pending step labels
`--radius-full`	Step dots
`--text-caption` / `--text-small`	Label type scale across variants
`--font-body` / `--font-normal` / `--font-medium` / `--font-semibold`	Face, and the weight step that marks completion
`--space-1` / `--space-1-5` / `--space-2` / `--space-3` / `--space-4`	Step spacing across variants

CSS Classes

Class	Purpose
`.ws-lifecycle`	Root container, carrying `role="img"`
`.ws-lifecycle--full`	Full variant (`compact` is the default and emits no modifier)
`.ws-lifecycle__steps`	The `<ol>`
`.ws-lifecycle__step`	One step; takes `.is-complete` and `.is-current`
`.ws-lifecycle__dot`	Step circle, showing a check when complete
`.ws-lifecycle__label`	Step label
`.ws-lifecycle__cta`	Context action link (full variant)

Files

File	Purpose
`includes/components/helpers.php`	`ws_lifecycle()` helper function
`includes/components/lifecycle.php`	Template — step states and the composed `aria-label`
`includes/components/components.css`	Styles (`.ws-lifecycle` rules)
`includes/workshop-record.php`	`getWorkshopRecord()` and `getWorkshopList()` — where the status is derived
`api/workshop-record.php`	The federated read, if you need the status client-side