@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
220 lines (218 loc) • 12.1 kB
JavaScript
"use client";
import * as React from "react";
import ItinerarySegmentBanner from "./ItinerarySegment/ItinerarySegmentBanner";
import ItineraryBadgeList, { ItineraryBadgeListItem } from "./ItineraryBadgeList";
import ItinerarySegment from "./ItinerarySegment";
import ItinerarySeparator from "./ItinerarySeparator";
import ItineraryStatus from "./ItineraryStatus";
import ItinerarySegmentStop from "./ItinerarySegment/ItinerarySegmentStop";
import ItinerarySegmentDetail from "./ItinerarySegment/ItinerarySegmentDetail";
import { ItineraryProvider } from "./context";
import { spaceAfterClasses } from "../common/tailwind";
/**
* @orbit-doc-start
* README
* ----------
* # Itinerary
*
* To implement the Itinerary component into your project you'll need to add the import:
*
* ```jsx
* 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:
*
* ```jsx
* <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` | :heavy_check_mark: | | The content of Itinerary component |
* | dataTest | `string` | | | Optional prop for testing purposes. |
* | spaceAfter | `enum` | | | Additional `margin-bottom` after component. |
*
* ### enum
*
* | spaceAfter |
* | :----------- |
* | `"none"` |
* | `"smallest"` |
* | `"small"` |
* | `"normal"` |
* | `"medium"` |
* | `"large"` |
* | `"largest"` |
*
* ## 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` | :heavy_check_mark: | | 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. |
* | actionable | `boolean` | | `true` | Applies actionable styles for ItinerarySegment wrapper |
* | banner | `React.Node` | | | Additional information for `ItinerarySegment` |
* | onClick | `event => void \| Promise` | | | Function for handling `onClick` event. |
* | onExpand | `event => void \| Promise` | | | Function to be triggered when `ItinerarySegment` is expanded. |
* | onCollapse | `event => void \| Promise` | | | Function to be triggered when `ItinerarySegment` is collapsed. |
*
* ### enum
*
* | spaceAfter |
* | :----------- |
* | `"none"` |
* | `"smallest"` |
* | `"small"` |
* | `"normal"` |
* | `"medium"` |
* | `"large"` |
* | `"largest"` |
*
* ## 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` | :heavy_check_mark: | | The city of `ItinerarySegmentStop` |
* | station | `React.Node` | :heavy_check_mark: | | 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`](#enum) | | | 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](#enum) of the `Itinerary` or `ItinerarySegment`
*
* ### Props
*
* | Name | Type | Required | Default | Description |
* | ---------- | ----------------- | ------------------ | ------- | --------------------------------------------- |
* | type | [`Status`](#enum) | | | 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` | :heavy_check_mark: | | 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` | :heavy_check_mark: | | The content of ItinerarySegmentDetail component, when it's not expanded |
* | duration | `string` | :heavy_check_mark: | | The duration between two ItinerarySegmentStop components |
* | content | `ContentItem[]` | | | The content of ItinerarySegmentDetail component, shown when it's expanded |
* | icon | `React.ReactNode` | | `<Airplane />` | The icon of ItinerarySegmentDetail component |
*
* ### ContentItem
*
* The table below contains the types of props of objects of type `ContentItem`.
*
* | Name | Type | Description |
* | :---- | :---------------- | :---------------------------- |
* | title | `React.Node` | The title of the content item |
* | items | `ContentDetail[]` | The items of the content item |
*
* ### ContentDetail
*
* The table below contains the types of props of objects of type `ContentDetail`.
*
* | Name | Type | Description |
* | :---- | :----------- | :---------- |
* | icon | `React.Node` | |
* | name | `React.Node` | |
* | value | `React.Node` | |
*
* ## ItinerarySegmentBanner
*
* | Name | Type | Required | Default | Description |
* | -------- | ----------------- | ------------------ | ------- | ---------------------------------------------------------- |
* | children | `React.ReactNode` | :heavy_check_mark: | | The content of ItinerarySegmentBanner component, |
* | onClick | `React.ReactNode` | | | for handling `onClick` callback in`ItinerarySegmentBanner` |
*
* ## ItinerarySeparator
*
* ### Props
*
* | Name | Type | Required | Default | Description |
* | :------- | :---------------- | :----------------- | :------ | :-------------------------------------------- |
* | children | `React.ReactNode` | :heavy_check_mark: | | The content of `ItinerarySeparator` component |
* | type | [`Status`](#enum) | | | 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"` |
*
*
* @orbit-doc-end
*/
const Itinerary = ({
children,
dataTest,
spaceAfter,
id
}) => {
return /*#__PURE__*/React.createElement("div", {
className: spaceAfter && spaceAfterClasses[spaceAfter],
"data-test": dataTest,
id: id
}, /*#__PURE__*/React.createElement(ItineraryProvider, null, children));
};
export { ItinerarySegment, ItinerarySegmentBanner, ItinerarySegmentDetail, ItinerarySegmentStop, ItinerarySeparator, ItineraryBadgeList, ItineraryBadgeListItem, ItineraryStatus };
export default Itinerary;