Website
Evidence
Expandable traces, source stages, scores and timing summaries.
Usage
When to reach for it
Ships from@misoto22/design/website
import { EvidenceStatus } from '@misoto22/design/website'Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
a recorded trace
A recorded sample trace separates stage status, source facts and optional detail. Labels and measurements are supplied by the host rather than inferred from decorative progress.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
ActivityTrace
Tool and job traces share one presentation; the caller supplies truthful, localized labels.
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | ActivityTraceItem[] | — | |
| labelrequired | string | — | |
| waiting | boolean | — | |
| waitingLabel | string | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
EvidencePanel
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrowrequired | ReactNode | — | |
| staterequired | EvidenceState | — | |
| stateLabelrequired | string | — | |
| titlerequired | string | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceSelection
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | |
| onSelectrequired | (id: string) => void | — | |
| optionsrequired | { id: string; label: string }[] | — | |
| selectedIdrequired | string | null | — |
Also accepts everything in Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceFacts
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | DescriptionListItem[] | — | |
| description | ReactNode | — | |
| title | ReactNode | — |
Also accepts everything in Omit<HTMLAttributes<HTMLDivElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceDisclosure
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceQuery
| Prop | Type | Default | Description |
|---|---|---|---|
| fingerprintrequired | string | — | |
| labelrequired | string | — | |
| queryrequired | string | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceStages
Takes no props of its own.
EvidenceStage
| Prop | Type | Default | Description |
|---|---|---|---|
| descriptionrequired | ReactNode | — | |
| numberrequired | string | — | |
| staterequired | 'idle' | 'active' | 'done' | — | |
| stateLabelrequired | string | — | |
| timerequired | ReactNode | — | |
| titlerequired | ReactNode | — |
Also accepts everything in Omit<HTMLAttributes<HTMLLIElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceScores
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | EvidenceScore[] | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
SignalFigure
A decorative signature supplied by the host, kept out of the evidence's accessibility tree.
| Prop | Type | Default | Description |
|---|---|---|---|
| barsrequired | { height: number; opacity: number }[] | — | |
| captionrequired | ReactNode | — | |
| detailrequired | ReactNode | — | |
| running | boolean | — | |
| settled | boolean | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceMeter
| Prop | Type | Default | Description |
|---|---|---|---|
| detailrequired | ReactNode | — | |
| labelrequired | string | — | |
| valueTextrequired | ReactNode | — | |
| value | number | null | Leave unset while the total is unknown. |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceDurations
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | EvidenceDuration[] | — | |
| labelrequired | string | — | |
| totalrequired | number | null | — | |
| totalTextrequired | string | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
EvidenceSummary
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | DescriptionListItem[] | — |
Also accepts everything in HTMLAttributes<HTMLDListElement>. Those are forwarded to the underlying element and are not listed row by row.
Types
export type EvidenceState = 'idle' | 'running' | 'done' | 'failed' | 'restored'