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

import { BASIC } from '../_utils/taxonomy'
import { BubbleIcon } from '../icon/bubbleIcon'
import { ItemActionLabel } from './index'

<Meta title={`${BASIC}/Items with Action/Item Action Label`} />


# Item Action Label

### Default

<Canvas>
  <Story name="With secondary infos">
    <ItemActionLabel
      labelTitle="Title: primary information"
      subLabel="Subtitle: secondary information"
      action="Complete action"
    />
  </Story>
</Canvas>

<Canvas>
  <Story name="Without secondary infos">
    <ItemActionLabel
      labelTitle="Title: primary information"
      action="Complete action"
    />
  </Story>
</Canvas>

### Link with leftAddon

<Canvas>
  <Story name="Link with leftAddon">
    <ItemActionLabel
      leftAddon={<BubbleIcon />}
      labelTitle="Title: primary information"
      subLabel="Subtitle: secondary information"
      action="Complete action"
      href="#"
    />
  </Story>
</Canvas>

## Specifications

### Normal state

These items launch modals. We use them when the action is not part of the main flow.

### Behaviour

Like all ITEMS, the whole zone of the component is clickable.

### Long texts

There’s no limitation on the number of lines for the `Title` and `Additional info`.

### Responsiveness

The minimum spacing between the `Title` and the `Action` text is `24px`.
As soon as both elements cannot respect this `24px`, the `Action` text goes on the second line.

## Usage

```jsx
import { ItemActionLabel } from '@blablacar/ui-library/build/ItemActionLabel'

<ItemActionLabel
  leftAddon={<BubbleIcon />}
  labelTitle="Primary info"
  subLabel="Secondary info"
  action="Action"
  href="#"
  onClick={() => 'click'}
  onMouseDown={() => 'mousedown'}
/>
```

<ArgsTable of={ItemActionLabel} />