Itinerary

It shows all information about customer journey and consists of several components to help you build the whole journey

Itinerary

To implement the Itinerary component into your project you’ll need to add the import:

import Itinerary, {
ItinerarySegment,
ItineraryStatus,
ItineraryBadgeList,
ItinerarySegmentStop,
ItinerarySegmentDetail,
} from "@kiwicom/orbit-components/lib/Itinerary";

After adding import into your project you can use it simply like:

<Itinerary>
<ItinerarySegment spaceAfter="large">
<ItinerarySegmentStop
city="Moscow"
station="Sheremetyevo International Airport (SVO)"
date="Fri, 19.10"
time="14:05"
/>
<ItinerarySegmentDetail duration="2h 30m" summary={<BadgeGroup />}>
<CollapsedContent />
</ItinerarySegmentDetail>
<ItinerarySegmentStop
city="Prague"
station="Václav Havel Airport Prague (PRG)"
date="Fri, 19.10"
time="16:35"
/>
</ItinerarySegment>
</Itinerary>

Props

NameTypeRequiredDefaultDescription
childrenReact.ReactNode:heavy_check_mark:The content of Itinerary component
dataTeststringOptional prop for testing purposes.
spaceAfterenumAdditional margin-bottom after component. See this docs

ItinerarySegment

ItinerarySegment component serves as a wrapper of atomic units ItinerarySegmentStop and `ItinerarySegmentDetail, has status prop for showing important information about the connection between two segments of journey.

Props

NameTypeRequiredDefaultDescription
labelReact.ReactNodeStatus message of ItinerarySegment
childrenReact.ReactNode:heavy_check_mark:The content of ItinerarySegment
dataTeststringOptional prop for testing purposes.
idstringSet id for Itinerary
noElevationbooleanTurn off elevation (box-shadow) for a segment.
spaceAfterenumAdditional margin-bottom after component. See this docs
actionablebooleantrueApplies actionable styles for ItinerarySegment wrapper
bannerReact.NodeAdditional information for ItinerarySegment

ItinerarySegmentStop

ItinerarySegmentStop is an atomic unit of the Itinerary component, shows two locations, date and time, has warning property which changes the icon to <AlertCircle color="warning" /> to attract user attention about some important information about journey.

Props

NameTypeRequiredDefaultDescription
dateReact.Node:heavy_check_mark:The date of ItinerarySegmentStop
timeReact.Node:heavy_check_mark:The time of ItinerarySegmentStop
cancelledTimeReact.NodeThe cancelled time of ItinerarySegmentStop
cancelledDateReact.NodeThe cancelled date of ItinerarySegmentStop
cancelledStationReact.NodeThe cancelled station of ItinerarySegmentStop
cancelledCityReact.NodeThe cancelled city of ItinerarySegmentStop
cityReact.Node:heavy_check_mark:The city of ItinerarySegmentStop
stationReact.Node:heavy_check_mark:The station of ItinerarySegmentStop
hiddenbooleanItinerarySegmentStop which status is hidden
hiddenCityTextReact.NodeHidden cityText which appears above city
iconReact.NodeItinerarySegmentStop custom icon
canceledbooleanShows segment stop as canceled with striked through Text
typeStatusThe color of ItinerarySegmentStop icon
minWidthnumber70sets min-width for first column with date and time

ItineraryStatus

ItineraryStatus is a wrapper for ItinerarySegment or group of segments. Shows the status of the Itinerary or ItinerarySegment

Props

NameTypeRequiredDefaultDescription
typeStatusThe type of ItineraryStatus component
labelReact.NodeThe label of the ItineraryStatus
offsetnumber0The offset for the label
childrenReact.ReactNode:heavy_check_mark:The content of ItineraryStatus component

ItinerarySegmentDetail

ItinerarySegmentDetail serves as connection between two ItinerarySegmentStop components (segments)

Props

NameTypeRequiredDefaultDescription
summaryReact.ReactNode:heavy_check_mark:The content of ItineraryDetail component, when it’s not expanded
durationstring:heavy_check_mark:The duration between two ItinerarySegmentStop components
childrenReact.ReactNode:heavy_check_mark:The content of ItineraryDetail component, shown when it’s expanded
iconReact.ReactNode<Airplane />The icon of ItineraryDetail component

ItinerarySegmentBanner

NameTypeRequiredDefaultDescription
childrenReact.ReactNode:heavy_check_mark:The content of ItineraryDetail component, shown when it’s expanded
onClickReact.ReactNodefor handling onClick callback inItinerarySegmentBanner

Props

Status

Status
"warning"
"critical"
"info"
"success"
"neutral"