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

import { FocusVisibleProvider } from '../_utils/focusVisibleProvider'
import { BASIC } from '../_utils/taxonomy'
import { TheWhy } from './index'

<Meta title={`${BASIC}/The Why`} />

# **The Why**

<Canvas>
  <Story name="Default">
    <FocusVisibleProvider>
      <TheWhy
        onClick={action('clicked')}
        title={text('title', 'Why this is a text that is so long ? (new window)')}
      >
        {text('content', 'Why this is a text that is so long ?')}
      </TheWhy>
    </FocusVisibleProvider>
  </Story>
</Canvas>

## Specifications

### Normal state
This component appears when the user is forced to make a new one choice.

It’s here to let him know, if he needs it, why he has to make this choice.

It’s a pattern the user recognizes as the one always answering to “why?” questions. (We’re fair, we don’t hide info)

### Behaviour
The why is clickable element that always launches a benefit screen. It should always be displayed under the question in a one screen one action page or after the related component in another type of page.

### Long texts
The why can’t go on more than 1 line. If too long we display “…” at the end.

## Usage

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

<TheWhy title="Title">Content</TheWhy>
```

<ArgsTable of={TheWhy} />