Usage
@prepared911/ui/blocks/call-card and its styles.css, plus the styles.css of each component the block composes (Box, Icon, Interactable, Text, Time, VisuallyHidden).
CallCard is one call in a call list, drawn as the call row of the design: a line badge, then a column with the channel glyph and phone number, the elapsed timer, the address with an incident type tag, and the caller's name. It replaces EventCard.
Only line, startedAt, and elapsedLabel are required. Every other part is absent when its prop is, and the rows close up.
line is { kind, label }. kind picks the badge paint: Emergency (destructive solid), NonEmergency (accent solid), or Other (neutral). label is the badge text, such as 911 or 311. The text names the line; the fill only supports it.channel is { icon, label }. The glyph is decorative and the label is read before the phone number. Pass the glyph for the channel: the block imports none.phoneNumber, address, incidentType, and callerName are data. Pass a DisplayValue, or a LocalizedMessage for copy.locale sets the timer's digits. Pass it when the page is server rendered.onClick and the whole card is one button that opens the call: one tab stop, with hover, press, and keyboard focus states. The card holds no other control. Without onClick the card is plain content.
selected marks the call being worked with aria-current="true" and a wash. Only one card in a list should be selected.
The tag sits at the end of the address line. When the address is too long to share the line, pass incidentPlacement={CallCardIncidentPlacement.CallerName}: the address then takes its own line and the tag moves to the end of the caller name line. The block does not measure; the caller decides.
The timer counts from startedAt and shows hh:mm:ss in the monospace role with tabular digits, so its width does not move. It ticks once a second on the window that shows it, pauses while that window is hidden, and catches up when it is visible again. Pass now to freeze it at an instant, for server rendering, tests, and stories.
Assistive technology does not hear the ticking. elapsedLabel takes the whole minutes and returns the sentence that is read with the card, such as "On the line for 3 minutes". It refreshes once a minute and is not a live region.
Address, caller name, and phone number wrap and are never truncated. A value with no break opportunities breaks anywhere, so it stays inside the row.
CallCardList is a named ul; its cards are list items. A card outside a list, such as one in a popover, passes host={CallCardHost.Block} and renders a div.
Layout mirrors. The phone number, address, caller name, and timer are dir="auto" runs: a number reads left to right inside Hebrew text, and an English address keeps its order.