Workflow

ProjectUpdate and ProjectHealth

Written status updates for a project: on track, at risk or off track, who wrote it and when, what changed and what comes next.

import { ProjectUpdate, ProjectHealth } from '@alea/ui';

Examples

Project updates

A short written update with its health; the health on its own, for rows and headers.

On trackAt riskOff trackNo update

Mobile app 2.0

At risk

Bruno Díazyesterday

The beta is out to 200 people. Sign in on Android still fails for about 3% of them, so the launch moves one week.

Next: fix the Android sign in, then a second beta round on Thursday.

Accessibility pass

On track

Ana Rivas4 days ago

Every page passes AA in the four themes; AAA is done for the docs and two components are left.

Configurations

Every value of every property, side by side. Numbers match the legend below.

none

onTrack

atRisk

offTrack

Healthhealth
Sizesize

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-bg…
--alea-status-danger…
--alea-status-success…
--alea-status-warning…
--alea-text…
--alea-text-muted…

Type

--alea-font-size-sm…
--alea-font-size-xs…
--alea-font-weight-medium…

Props

`ProjectUpdate` props

A written status update: health, who wrote it and when, what changed and what's next.

Prop	Type	Default	Description
`author`required	`{ name: string; src?: string \| undefined; }`	-	Who wrote it.
`children`required	`ReactNode`	-	The update itself: a few lines, lists, links.
`health`required	`"none" \| "onTrack" \| "atRisk" \| "offTrack"`	-	How the project is doing with this update.
`time`required	`Date`	-	When it was written.
`className`	`string`	-	Extra class names for the root element.
`footer`	`ReactNode`	-	Reactions, a reply button or a link to the project.
`headingLevel`	`2 \| 3 \| 4`	`3`	The heading level for the title. Default 3.
`project`	`ReactNode`	-	The project, when the update is shown outside it; the heading reads "Project update" otherwise.

`ProjectHealth` props

How a project is doing, as a colored mark and its words: on track, at risk, off track.

Prop	Type	Default	Description
`health`required	`"none" \| "onTrack" \| "atRisk" \| "offTrack"`	-	onTrack, atRisk, offTrack or none (no update yet).
`className`	`string`	-	Extra class names for the root element.
`size`	`"sm" \| "md"`	`'md'`	sm for rows and tables, md (default) for headers.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

`ProjectUpdate`

Variants: healthnoneonTrackatRiskoffTrack
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-update.alea-update-head.alea-update-title.alea-update-by.alea-update-author.alea-update-body.alea-update-foot

`ProjectHealth`

Variants: healthnoneonTrackatRiskoffTrack
sizesmmd
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-health
Data attributes: data-size=smdata-health=nonedata-health=onTrackdata-health=atRiskdata-health=offTrack

An update is an article named by its heading: the project, or Project update.
Health is a mark and its words, so it never depends on color.
The time is a time element with the exact date; the text shows how long ago.

Keyboard

Key	Does
`Tab`	Moves to the links and actions in the update

Do and don't

Lead with what changed since the last update, then what is next.
Say why a project is at risk and what would get it back on track.

Don't

Don't mark a project at risk without a line on why.

In Figma

ProjectUpdate with Health, and ProjectHealth with its four values.