Ticket Card
4.4.16
The Ticket Card component lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In the future, this component will be split into two components: Prio Card and Travel Card.
| Namn | Typ | Beskrivning |
|---|---|---|
cardName * | string | The display name of the card. |
cardNameComponent | unknown | Defines the semantic HTML element to be used for the cardName typography of the card. Default is H3 |
clickableCardScreenReaderPrefix | string | Visually hidden prefix text for screen readers. Used only when card is clickable. Should clarify the action, e.g. "Show QR code for". |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslation | DeepPartial | Translation object used for screen reader texts. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
lang | "sv" |
"en" | Language used for internal translations. |
layout | "small" |
"medium" | Fixed size of the card, takes precedence over breakpoints. |
onClick | () => void | Callback when card is clicked, also adds clickable card styling. |
resplusLogo | boolean | Indicates if the ResPlus logo should be displayed. Only applicable for yearCardSilver or yearCardGold variants. |
showQrCode | boolean | Indicates whether a QR code logo should be displayed on the card, suggesting the presence of a scannable QR code. |
showValidityDates | boolean | Determines whether the card's validity period (validityFrom and validityTo) is displayed. Defaults to true. |
status | "CANCELLED" |
"EXHAUSTED" |
"EXPIRED" |
"PARTIALLY_CREDITED" | Status of the card: CANCELLED, EXHAUSTED, EXPIRED, or PARTIALLY_CREDITED |
npm install @sj-ab/component-library.ui.ticket-cardVariant
Prio Card White
Prio Card Gray
Prio Card Black
Movingo
Year Card Silver
Year Card Gold
Examples
Example 1
Example 2
Example 3
Add new status and translation to ticket card
4.4.11Add new showValidityDates prop to TicketCard to allow hiding the validity period
4.4.0Add check for validityTo and validityFrom in TicketCard
4.3.1Update the design of TravelCard
4.3.0Fix display issues for TicketCard: Add null checks and correct color variant exclusion
4.2.4
Importer av Ticket Card
Repos med Ticket Card
Senaste installerade version av Ticket Card
Äldsta installerade version av Ticket Card