Review Card

Usage

import { Database } from "reicon-react/icons/Database";
import {
  ReviewCard,
  ReviewRow,
  ReviewRows,
} from "@tulipfarm/sprout/review-card";

<ReviewCard
  label="Review row change"
  icon={<Database size={16} />}
  title="Update a row in Supplier deliveries"
  badge={{ label: "Needs approval", variant: "warning" }}
  settled={status !== "pending"}
  actions={
    <>
      <Button onClick={approve}>Approve change</Button>
      <Button variant="ghost" onClick={dismiss}>Dismiss</Button>
    </>
  }
  status={<p role="status">{outcome}</p>}
>
  <ReviewRows>
    <ReviewRow label="Change">Updates an existing row</ReviewRow>
    <ReviewRow label="Table">Supplier deliveries</ReviewRow>
  </ReviewRows>
</ReviewCard>

• icon: a 14 or 16px icon shown in a tile before the title.
• badge: { label, variant }. The variant is "warning", "info","success", "secondary","destructive", "default", or"outline".
• settled: the decision is made. The card folds to its header and footer, and folds again each time settledturns true. It opens again when settled turns false.
• status: footer content that stays visible when folded, such as the outcome, feedback, or a status check.
• actions: decision buttons. They show only while the card is open.
• label: names the card, such as “Review row change”. Without it the title names the card.

Badge variants

Long titles end with an ellipsis; the badge and chevron keep their place.

Approval

An action that waits for approval. While submitting, both buttons are disabled and the chosen one shows a spinner. When settled, the card folds and focus moves to the outcome if the decision was made here.

Drafts

Workflow, agent, and skill drafts share one card. Agent drafts list the change, team, model, actions, and skills; long instructions keep their line breaks. Feedback, technical details, and a status check sit below.

Agent setup

Three decisions, with activation disabled until each consent box is checked. A sponsor conflict shows as an alert.

Workflow steps

ReviewSteps numbers each step. A step’sdetail can hold ReviewValues, code, or notes.

<ReviewSteps
  title="3 steps"
  steps={[
    {
      summary: "notify api: send POST to https://hooks.example.com/suppliers",
      detail: (
        <ReviewValues
          values={[
            { name: "content-type", value: "application/json" },
            { name: "Body", value: body },
          ]}
        />
      ),
    },
    { summary: "pause: wait 3600 seconds" },
  ]}
/>

Without actions

A table proposal whose values expired. It has no actions, only a status check, and scrolls inside a bounded area.

Composition

Accessibility

The card is a section named by label or the title. The title is an h4 holding the button that opens and closes the details, with aria-expanded; the whole header is its click target, and its focus ring outlines the header. Enter and Space toggle it. The icon and chevron are hidden from assistive tech. Rows and values are description lists; steps are an ordered list under an h5, with the numbers hidden so screen readers use the list order.

The details grow and shrink in 180ms and the chevron turns in 120ms; with reduced motion both happen at once.

Theme tokens

The card uses --sprout-surface,--sprout-line, --sprout-canvas for the icon tile,--sprout-hover, --sprout-focus,--sprout-muted, and --sprout-secondary for step numbers. Badges use the Badge tokens.