API and Development
CallStatusCard, CallStatusDevice, CallStatusQueueClass, CallStatusState from @prepared911/ui/blocks/call-status-card.
The inputs, slots, composed components, and variants are declared in schema.ts. Types are in props.ts.
| Prop | Type | Notes |
|---|---|---|
state | CallStatusState | Required. Picks the wash and the edge. |
label | LocalizedMessage | Required. Names the region. |
statusLabel | LocalizedMessage | Required. Visible text that names the state. |
number | LocalizedMessage | DisplayValue | Required. Truncates with a title. |
queue | { queueClass: CallStatusQueueClass; label: LocalizedMessage | DisplayValue } | The badge. Its intent comes from the class. |
device | { type: CallStatusDevice; label: LocalizedMessage } | The glyph and its hidden name. |
callerName | LocalizedMessage | DisplayValue | Truncates with a title. The line keeps its height when absent. |
timer | { startedAt: Date | number; elapsedLabel: (minutes: number) => LocalizedMessage; now?: Date | number; locale?: string } | The live elapsed timer. |
footer | ReactNode | Actions or checks. The row keeps its height when empty. |
ref | Ref<HTMLElement> | Targets the root section. |
CallStatusState: IncomingEmergency, IncomingNonEmergency, Connected, Held, Idle. CallStatusQueueClass: Emergency, NonEmergency, Other. CallStatusDevice: Mobile, Landline, Voip, Unknown.
CallStatusCard is a block (ADR 0014). It imports only the components and the block schema.ts lists under composes; tests/block-composition.test.ts fails otherwise.
index.tsx: CallStatusCard, the queue badge and the device mark. Hook-free and server-safe; the timer it renders carries its own "use client".state-paint.ts: the one table from CallStatusState to the wash and the edge. Record<CallStatusState, ...> makes a new state fail typecheck until it is mapped.models.ts: the state, queue class and device enums.pnpm test:unit --run src/blocks/call-status-card: the state-to-paint mapping, the queue class rule, the device glyphs and the slots.pnpm test:browser --run src/blocks/call-status-card: the card's height in every state, with every optional part left out, with long values and at 320 CSS px, and the wash and edge paint.pnpm --filter storybook storybook:test --run src/blocks/call-status-card: the stories' play functions.