@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.
90 lines (68 loc) • 5.03 kB
Markdown
# DestinationCard
To implement DestinationCard component into your project you'll need to add the import:
```jsx
import DestinationCard from "@kiwicom/orbit-components/lib/DestinationCard";
```
After adding import into your project you can use it simply like:
```jsx
<DestinationCard image="dubai_ae" destinationCity="Dubai" />
```
## Props
Table below contains all types of the props available in DestinationCard component.
| Name | Type | Default | Description |
| :--------------------- | :---------------------- | :------ | :--------------------------------------------------------------------------------- |
| dataTest | `string` | | Optional prop for testing purposes. |
| **departureCity** | `Translation` | | The name of departure city. |
| **destinationCity** | `Translation` | | The name of destination city. |
| **destinationCountry** | `Translation` | | The name of destination country. |
| height | `number` | `300` | The height of the DestinationCard. [See Functional specs](#functional-specs) |
| **image** | `string` | | The image name of the destination. [See Functional specs](#functional-specs) |
| inbound | [`Inbound`](#inbound) | | The inbound information about the trip. [See Functional specs](#functional-specs) |
| onClick | `onClick` | | Function for handling onClick event. |
| **outbound** | [`Outbound`](#outbound) | | The outbound information about the trip. [See Functional specs](#functional-specs) |
| **price** | `Translation` | | The price of the trip. |
| tabIndex | `string | number` | `"0"` | Specifies the tab order of an element |
| timeOfStay | `Translation` | | The time of the stay for the trip. [See Functional specs](#functional-specs) |
### Inbound
Table below contains all types of the props available in `inbound` object.
| Name | Type | Description |
| :----------- | :------------ | :--------------------------------------------- |
| **date** | `Translation` | The date of the inbound flight. |
| **duration** | `Translation` | The duration of the inbound flight. |
| **type** | `Translation` | The type of the inbound flight, e.g. `Direct`. |
### Outbound
Table below contains all types of the props available in `outbound` object.
| Name | Type | Description |
| :----------- | :------------ | :----------------------------------------------------------------------------------- |
| **date** | `Translation` | The date of the inbound flight. |
| **duration** | `Translation` | The duration of the inbound flight. |
| text | `Translation` | The text for the outbound, e.g. `One-way`. [See Functional specs](#functional-specs) |
| **type** | `Translation` | The type of the inbound flight, e.g. `Direct`. |
## Functional specs
- The minimum `height` of the DestinationCard needs to be more than 175 (px) due to the hover transition.
- You don't have to pass entire src of the image. Just `dubai_ae`, `paris_fr` etc. is enough.
- `OnClick` is also called on `Enter` and `Space` keypresses.
- If the DestinationCard should be used for one-way trip, don't use `inbound`, only `outbound` prop. The code may look like this:
```jsx
<DestinationCard
departureCity="Prague"
destinationCity="Dubai"
destinationCountry="United Arab Emirates"
image="dubai_ae"
price="5,563 Kč"
outbound={{ text: "One-way", type: "Direct", duration: "6h 10m" }}
/>
```
- If the DestinationCard should be used for return , use `inbound` and `outbound` prop concurrently. You will not use `text` prop `outbound`, but `date`. The code may look like this:
```jsx
<DestinationCard
departureCity="Prague"
destinationCity="Dubai"
destinationCountry="United Arab Emirates"
image="dubai_ae"
price="5,563 Kč"
timeOfStay="10 nights"
outbound={{ date: "Wed 31 Oct", type: "Direct", duration: "6h 10m" }}
inbound={{ date: "Fri 9 Nov", type: "Direct", duration: "6h 50m" }}
/>
```