README.md

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 to 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

Name	Type	Required	Default	Description
children	React.ReactNode	✔️		The content of Itinerary component
dataTest	string			Optional prop for testing purposes.
spaceAfter	enum			Additional margin-bottom after component. See this docs

ItinerarySegment

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

Props

Name	Type	Required	Default	Description
label	React.ReactNode			Status message of ItinerarySegment
children	React.ReactNode	✔️		The content of ItinerarySegment
dataTest	string			Optional prop for testing purposes.
id	string			Set id for Itinerary
noElevation	boolean			Turn off elevation (box-shadow) for a segment.
spaceAfter	enum			Additional margin-bottom after component. See this docs
actionable	boolean		true	Applies actionable styles for ItinerarySegment wrapper
banner	React.Node			Additional information for ItinerarySegment

ItinerarySegmentStop

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

Props

Name	Type	Required	Default	Description
date	React.Node			The date of ItinerarySegmentStop
time	React.Node			The time of ItinerarySegmentStop
cancelledTime	React.Node			The cancelled time of ItinerarySegmentStop
cancelledDate	React.Node			The cancelled date of ItinerarySegmentStop
cancelledStation	React.Node			The cancelled station of ItinerarySegmentStop
cancelledCity	React.Node			The cancelled city of ItinerarySegmentStop
city	React.Node	✔️		The city of ItinerarySegmentStop
station	React.Node	✔️		The station of ItinerarySegmentStop
hidden	boolean			ItinerarySegmentStop which status is hidden
hiddenCityText	React.Node		Hidden city	Text which appears above city
icon	React.Node			ItinerarySegmentStop custom icon
canceled	boolean			Shows segment stop as canceled with striked through Text
type	Status			The color of ItinerarySegmentStop icon
minWidth	number		70	sets min-width for first column with date and time

ItineraryStatus

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

Props

Name	Type	Required	Default	Description
type	Status			The type of ItineraryStatus component
label	React.Node			The label of the ItineraryStatus
offset	number		0	The offset for the label
actionable	boolean		true	Applies actionable styles for ItineraryStatus
children	React.ReactNode	✔️		The content of ItineraryStatus component

ItinerarySegmentDetail

ItinerarySegmentDetail serves as a connection between two ItinerarySegmentStop components (segments)

Props

Name	Type	Required	Default	Description
summary	React.ReactNode	✔️		The content of ItineraryDetail component, when it's not expanded
duration	string	✔️		The duration between two ItinerarySegmentStop components
children	React.ReactNode	✔️		The content of ItineraryDetail component, shown when it's expanded
icon	React.ReactNode		<Airplane />	The icon of ItineraryDetail component

ItinerarySegmentBanner

Name	Type	Required	Default	Description
children	React.ReactNode	✔️		The content of ItineraryDetail component, shown when it's expanded
onClick	React.ReactNode			for handling onClick callback inItinerarySegmentBanner

ItinerarySeparator

Props

Name	Type	Required	Default	Description
children	React.ReactNode	✔️		The content of ItinerarySeparator component
type	Status			The type of ItinerarySeparator component
color	"string"			The color of ItinerarySeparator component

enum

Status	Type
"warning"	"dashed"
"critical"	"dotted"
"info"	"solid"
"success"	"none"
"neutral"	"double"