Design review
A design review on its way out — checks run, a teammate reviews and the agent answers, then you pick how it ships.
Something the agent made, laid out for sign-off. One column runs the checks; the other holds the
messages — a teammate's verdict, the agent's reply — oldest first. The phase carries it from
review to approved (the Ship button turns on), then shipping, and finally live or
scheduled. Beside the Ship button a menu picks how it ships from your options.
Usage
<!-- include core.css + design-review.css -->
<div class="dm-drv dm-panel">
<div class="dm-drv-h">
<span class="dm-drv-ic"><!-- icon --></span>
<div class="dm-drv-ht"><b>Pricing page v4</b><span class="dm-muted">6 screens</span></div>
<span class="dm-tag dm-b dm-drv-tag">In review</span>
</div>
<div class="dm-drv-b">
<div class="dm-drv-col"><span class="dm-drv-lb">Checks</span><div class="dm-drv-checks"></div></div>
<div class="dm-drv-col"><span class="dm-drv-lb">Review</span><div class="dm-drv-rv"></div></div>
</div>
<div class="dm-drv-f">
<span class="dm-muted dm-drv-st">Waiting on checks</span>
<div class="dm-drv-mg">
<button class="dm-pill dm-accent dm-sm dm-drv-go" disabled>Ship to everyone</button>
<button class="dm-pill dm-accent dm-sm dm-drv-dd" disabled><!-- chev-d --></button>
</div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | What is up for review, like "Pricing page v4". |
subtitle | string | The line under the title. |
icon | IconName | The header mark. Defaults to palette. |
checks | ReviewCheck[] | The Checks column: { label; state: wait | run | ok | bad; note? }. |
messages | ReviewMessage[] | The review so far, oldest first: who, an optional verdict tag, and the text. |
phase | review | approved | shipping | live | scheduled | Where it is. approved turns the Ship button on; live/scheduled replace the buttons with a done line. |
note | string | The line beside the Ship button, like "Waiting on Maya". |
waitingLabel | string | Shown in the review column before anyone has written. |
options | ShipOption[] | The ways it can ship, picked from the menu beside the button. |
option / defaultOption | string | The picked option key, controlled or uncontrolled. |
onOptionChange | (key) => void | The picked ship option changed. |
onShip | (option) => void | The Ship button was pressed, with the chosen option. |
doneLabel | string | Replaces the chosen label on the done line once it is live or scheduled. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The card
sits on a --dm-panel surface; the header mark, the verdict tags and the checks' ok/bad glyphs all
take their colours from the theme tokens (--dm-ok, --dm-warn, --dm-bad, --dm-pb), and the
Ship button follows the accent, so the whole review reads against either theme. Once it is live the
header mark shifts to the ok tint.