import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { APP } from '../../_utils/taxonomy'
import { RideAxis } from './index'

<Meta title={`${APP}/RideAxis`} />

# RideAxis

<Canvas>
  <Story name="Default">
    <RideAxis from="Düsseldorf International Airport, Düsseldorf" to="Cologne Bonn Airport, Köln" />
  </Story>
</Canvas>

## Specifications

> ⚠️ Not an official component from PIXAR

- `Font-size` and `Text Color` are _inherit from parent_
- `From` and `To` properties are optional
- `ArrowIcon` is **always** `color.lightMidnightGreen`

### When should I use it?

When a origin-destination info appears on the layout

## Usage

```jsx
import { RideAxis } from '@blablacar/ui-library/build/_utils/rideAxis'

<RideAxis from="Paris" to="Lille" />
```

<ArgsTable of={RideAxis} />