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

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

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

# Items with Action

<Canvas>
  <Story name="With secondary infos">
    <ItemAction
      action="Title"
      subLabel="Subtitle: secondary information"
      leftAddon={<BubbleIcon />}
      highlight={false}
    />
  </Story>
</Canvas>

<Canvas>
  <Story name="Without secondary infos">
    <ItemAction
      action="Title"
      leftAddon={<BubbleIcon />}
      highlight={false}
    />
  </Story>
</Canvas>

## Specifications

### Normal state

These items always activate subactions and modals (or sometimes native elements like a bottom sheet). We use them when the action is not part of the main flow it appears in (Contact the DRVR is a subaction of the booking flow, there’s a beginning and an end to it to then go back to the main flow)

“In product” and “out of product” subactions are represented with items actions.
If an “in product” subaction launches a modal that contains “out of product” actions we use items navigate (e.g. share on Facebook).

They look like items choice but for designers needs the objective is different.

### Behaviour

We could display several items action on the same line.

### Long texts

There’s no limitation on the number of lines for the main info or the title.
When long text icons and chevrons are centred in height.

## Usage

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

<ItemAction
  action="Action"
  subLabel="Secondary info"
  onClick={() => 'click'}
  onBlur={() => 'blur'}
  onFocus={() => 'focus')}
  onMouseDown={() => 'mousedown'}
/>
```

<ArgsTable of={ItemAction} />

## When should I use it?

Use it when the member needs to take an action before returning to the same page.
Never used for final decisions.

- ✅ Clickable. Launches a modal or native element such as a bottom sheet when tapped.
- ℹ️ Unlimited number of lines of text.
- 🖊 Topline: Max. 20 characters in EN, max. 30 in other languages (including spaces)
- 🖊 Subtitle: Max. 60 characters in EN, max. 90 in other languages (including spaces)