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

import { BASIC } from '../_utils/taxonomy'
import { ProximityIcon } from '../icon/proximityIcon'
import { PushInfo } from './index'

<Meta title={`${BASIC}/PushInfo`} />

# **PushInfo**

### Default

<Canvas>
  <Story name="Default">
    <PushInfo
      headline="This is the headline!"
      content="But we can also give you more explanations here"
    />
  </Story>
</Canvas>

### With icon

<Canvas>
  <Story name="With icon">
    <PushInfo
      icon={<ProximityIcon title="" />}
      headline="This is the headline!"
      content="But we can also give you more explanations here"
    />
  </Story>
</Canvas>

## Specifications

Use push infos to tell the user there’s a new info in the actual page.

It should always displayed somewhere at the top of the screen (under the voice, page title, etc.) so that’s the first thing the user sees on the page.
There should not be more than 1 push info on screen.
Long texts Title shouldn’t go in more than 2 lines (limitation not implemented).

## Usage

```jsx
import { PushInfo } from '@blablacar/ui-library/build/pushInfo'
<PushInfo headline="" />
```

<ArgsTable of={PushInfo} />