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

import { MAIN } from '../_utils/taxonomy'
import { ItemRadio } from '../itemRadio'
import { ItemRadioGroup } from '../itemRadioGroup'
import { TheVoice } from '../theVoice'
import { Grip } from './index'

<Meta title={`${MAIN}/Maps`} />

# Maps

## Grip

The grip is an icon indicator, located on top of a scrollable list in a map above THE VOICE component, in order to inform users that the list is scrollable.

The grip is only visible and used on mobile version.

<Canvas>
  <Story name="Grip">
    <Grip onSlideUp={action('Slide Up')} onSlideDown={action('Slide Down')}>
      <TheVoice>What is your route?</TheVoice>
      <ItemRadioGroup>
        <ItemRadio labelTitle="Via A10" label="Tolls" name="foo" value="1" />
        <ItemRadio labelTitle="Via N200" label="No tolls" name="foo" value="2" />
      </ItemRadioGroup>
    </Grip>
  </Story>
</Canvas>

### Behavior

The grip is not clickable. @There is not a hotspot on this component. Users can scroll from any spot of the list.

When sliding up, the list stops when all routes suggestions are visible.

When sliding down, only THE VOICE stays fully visible, no matter the number of lines it takes.

The grip is not sticky.


## Specifications

Use it to indicate that a part of the screen is reactive to slide touch events.

```jsx
import Grip from '@blablacar/ui-library/build/grip'
<Grip
  onSlideUp={() => {
    /* ... */
  }}
  onSlideDown={() => {
    /* ... */
  }}
>
  <TheVoice>What is your route?</TheVoice>
</Grip>
```

<ArgsTable of={Grip} />