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

import { EDITORIAL } from '../_utils/taxonomy'
import { TripCardSample } from '../tripCardSample'
import { Marquee } from './index'

<Meta title={`${EDITORIAL}/Marquee`} />

# Marquee

<Canvas>
  <Story name="Default">
    <Marquee>
      <TripCardSample departure="Ajaccio" arrival="Amsterdam" priceLabel="from" price="€90" />
      <TripCardSample departure="London" arrival="Manchester" priceLabel="from" price="€10" />
      <TripCardSample departure="London" arrival="Paris" priceLabel="from" price="€50" />
    </Marquee>
  </Story>
</Canvas>

## Specifications
Simple component that loops through the children it is given and has them slide into view one after the other using CSS animations.

## Usage

```jsx
import { Marquee } from '@blablacar/ui-library/build/marquee'
<Marquee className="optional">
  <div>child</div>
  <div>child</div>
</Marquee>
```

<ArgsTable of={Marquee} />