Itinerary

Itinerary

import Itinerary, {
ItinerarySegment,
ItineraryStatus,
ItineraryBadgeList,
ItinerarySegmentStop,
ItinerarySegmentDetail,
} from "@kiwicom/orbit-components/lib/Itinerary";
<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.

enum

spaceAfter
"none"
"smallest"
"small"
"normal"
"medium"
"large"
"largest"

ItinerarySegment

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.
actionablebooleantrueApplies actionable styles for ItinerarySegment wrapper
bannerReact.NodeAdditional information for ItinerarySegment
onClickevent => void \| PromiseFunction for handling onClick event.
onExpandevent => void \| PromiseFunction to be triggered when ItinerarySegment is expanded.
onCollapseevent => void \| PromiseFunction to be triggered when ItinerarySegment is collapsed.

enum

spaceAfter
"none"
"smallest"
"small"
"normal"
"medium"
"large"
"largest"

ItinerarySegmentStop

Props

NameTypeRequiredDefaultDescription
dateReact.NodeThe date of ItinerarySegmentStop
timeReact.NodeThe 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

Props

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

ItinerarySegmentDetail

Props

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

ContentItem

NameTypeDescription
titleReact.NodeThe title of the content item
itemsContentDetail[]The items of the content item

ContentDetail

NameTypeDescription
iconReact.Node
nameReact.Node
valueReact.Node

ItinerarySegmentBanner

NameTypeRequiredDefaultDescription
childrenReact.ReactNode:heavy_check_mark:The content of ItinerarySegmentBanner component,
onClickReact.ReactNodefor handling onClick callback inItinerarySegmentBanner

ItinerarySeparator

Props

NameTypeRequiredDefaultDescription
childrenReact.ReactNode:heavy_check_mark:The content of ItinerarySeparator component
typeStatusThe type of ItinerarySeparator component
color"string"The color of ItinerarySeparator component

enum

StatusType
"warning""dashed"
"critical""dotted"
"info""solid"
"success""none"
"neutral""double"