Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Blocks
  2. Call Card
  3. API and Development

Call Card

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Import CallCard, CallCardHost, CallCardIncidentPlacement, CallCardLineKind, CallCardList from @prepared911/ui/blocks/call-card.
The inputs, composed components, and variants are declared in packages/ui/src/blocks/call-card/schema.ts. Types are in packages/ui/src/blocks/call-card/props.ts.
CallCard
PropTypeNotes
line{ kind: CallCardLineKind; label: LocalizedMessage | DisplayValue }Required. The badge text and its paint.
startedAtDate | numberRequired. The timer counts from it. An invalid instant shows no timer.
elapsedLabel(minutes: number) => LocalizedMessageRequired. The sentence read in place of the ticking digits.
nowDate | numberFreezes the timer at this instant. Without it the timer follows the clock.
localestringBCP 47 locale for the timer's digits.
channel{ icon: Glyph; label: LocalizedMessage }A decorative glyph and the name read in its place.
phoneNumberLocalizedMessage | DisplayValueReads left to right.
addressLocalizedMessage | DisplayValueWraps.
incidentTypeLocalizedMessage | DisplayValueShown as a tag.
incidentPlacementCallCardIncidentPlacementAddress (default) or CallerName.
callerNameLocalizedMessage | DisplayValueWraps.
selectedbooleanaria-current="true" and the selected wash.
onClickMouseEventHandler<HTMLElement>Makes the whole card one button.
hostCallCardHostListItem (default) or Block.
className, refConsumers do not pass className; ref targets the root.
CallCardList
PropTypeNotes
labelLocalizedMessageRequired. The name of the list.
childrenReactNodeThe cards.
className, refConsumers do not pass className; ref targets the ul.
Enums
CallCardLineKind: Emergency, NonEmergency, Other. CallCardIncidentPlacement: Address, CallerName. CallCardHost: ListItem, Block.
Props
NameTypeDefaultDescription
elapsedLabel(minutes: number) => LocalizedMessage—Name of the elapsed time for assistive technology, such as "On the line for 3 minutes". It is read in place with the rest of the card and refreshes once a minute; the seconds are not read. @param minutes - Whole minutes since startedAt
lineCallCardLine—The line the call came in on.
startedAtnumber | Date—The instant the call started, as a Date or epoch milliseconds. An invalid instant shows no timer.
addressCallCardText—Where the call is. Data, so a {@link DisplayValue} is accepted.
callerNameCallCardText—The caller's name. Data, so a {@link DisplayValue} is accepted.
channelCallCardChannel—The channel of the call. Without it the phone number has no leading glyph.
classNamestring—@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
hostCallCardHostCallCardHost.ListItemElement of the root.
incidentPlacementCallCardIncidentPlacementCallCardIncidentPlacement.AddressWhich line carries the incident tag. Use {@link CallCardIncidentPlacement.CallerName} when the address is long.
incidentTypeCallCardText—The kind of incident, shown as a tag. Data, so a {@link DisplayValue} is accepted.
localestring—BCP 47 locale for the timer's digits. Defaults to the runtime locale, so a server-rendered page that must match its client passes it explicitly.
nownumber | Date—Freezes the timer at this instant, as a Date or epoch milliseconds. Without it the timer follows the clock and updates every second while the card's window is visible. Use it for server rendering, tests, and stories.
onClickMouseEventHandler<HTMLElement>—Makes the whole card one button that opens the call. The card then holds no other control.
phoneNumberCallCardText—The phone number or other caller identifier. Data, so a {@link DisplayValue} is accepted. It reads left to right inside right-to-left text.
refRef<HTMLDivElement | HTMLLIElement>—Ref to the root element: the li, or the div for {@link CallCardHost.Block}.
selectedbooleanfalseThe call is the one being worked. Writes aria-current="true" and paints the selected wash.
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Previous
Call Card / Usage
Next
Call Card / Accessibility
On this page
CallCard
CallCardList
Enums
Props
Storybook