Journey Summary
8.0.2
A description of this component is work in progress.
| Namn | Typ | Beskrivning |
|---|---|---|
adjustLeft | boolean | If true, the train image will overflow to the left compared to the rest of the content. |
applyGradient | boolean | If true, a gradient will be applied to fade out the train image. |
arrivalDate | Date | The arrival date of the train. |
arrivalLocation * | string | The name of the arrival location. |
comfort | string | The comfort level of the train. |
consumers | undefined[] | Information about the consumers, such as category. |
currency | unknown | Currency of the price. Default is SEK. |
customAttribute | { attribute: string; value: string |
number } | Custom attributes for testing purposes. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
departureDate | Date | The departure date of the train. |
departureLocation * | string | The name of the departure location. |
disruptionReason | DisruptionReason | The reason for any disruption, which will display a badge with disruption info. If combined with new datetimes, it will show the new datetimes next to the old ones. |
duration | DurationType | The duration of the journey. |
dynamicTrainSize | boolean | If the train should shrink depending on the size of transport information |
flexibility | string | The flexibility level of the train. |
hideTransport | boolean | If true, transport details will be hidden. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
journeyStatus | StatusType | The status of the journey. |
journeyStatusPosition | "top" |
"middle" | The position of the journey status, either "top" or "middle". |
lang | InputLanguage | Language used for internal translations. |
newArrivalDate | Date | The new arrival date if the journey has a disruption. |
newDepartureDate | Date | The new departure date if the journey has a disruption. |
placements | PlacementsType[] | Details of travelers' seating arrangements, including the train carriage ID and assigned seat number. |
points | number | Points value. |
price | number | Price value. |
showDepartureInfoFirst | boolean | If true, the date will be shown before the departure and arrival locations, instead of after. |
showPoints | boolean | Determines whether the points should be displayed. |
showPrice | boolean | Determines whether the price should be displayed. |
showQrCode | boolean | If true, the price will be replaced by a QR code icon. |
showTimeStampsOnly | boolean | If true, only the timestamps for departure and arrival will be shown, e.g., 14.10–16.00. |
showTransportImage | boolean | If true, the train image will be shown. Defaults to true. |
showTravelTimeAndChanges | boolean | If true, the travel time and number of changes will be shown in the JourneyCard. |
specialNeeds | string | Any special needs that the passenger may have, such as a wheelchair. |
strikeThroughDateTime | boolean | If true, applies strike-through styling to the date. Disruption reasons "cancelled" and "hasToBeRebooked" are strike-through by default. |
sx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles. |
timeZone | string | Timezone for the date. |
translation | Partial | Translations for the component. |
transportations * | TransportationType[] | An array of transportation types involved in the journey. |
transportInformations | TransportInformationType[] | An array of onboard amenities and services available during the journey. |
transportStatus | StatusType | Additional status information about the transport, such as "No refreshments". |
variant | "h2" |
"h3" |
"subtitle1" | The variant of the component, such as "h2", "h3", or "subtitle1". |
npm install @sj-ab/component-library.ui.journey-summaryJourney Summary har en anpassad uppläsning för skärmläsare. Vissa av kortets synliga texter döljs med aria-hidden="true" och ersätts med en alternativ och lite mer utförlig text. Informationen i skärmläsartexten ska vara helt likvärdig den synliga informationen, men med förklarande ord och skiljetecken för att den ska bli lättare att förstå.
Notera att textersättningen görs för varje paragraf och inte för hela komponenten samtidigt, så som i till exempel Departure Card. Se exempel nedan:
Uppläsningen kan vid behov anpassas genom att ändra i translations-objektet.
Alla som ändrar i Journey Summary ansvarar för att samtidigt skapa en bra skärmläsartext
Importer av Journey Summary
Repos med Journey Summary
Senaste installerade version av Journey Summary
Äldsta installerade version av Journey Summary
<Typography aria-hidden>
Stockholm C - Göteborg C
</Typography>
<Typography variant="srOnly">
Från Stockholm Central till Göteborg Central
</Typography>