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

import { EDITORIAL } from '../_utils/taxonomy'
import { Button, ButtonStatus } from '../button'
import { Banner } from './index'

<Meta title={`${EDITORIAL}/Banner`} />


# **Banner**

<Canvas>
  <Story name="Default">
    <Banner
      copy={{
        heading: 'Enjoy a better travel experience with the BlaBlaCar app',
        paragraph:
          'All your rides and tickets in one place, up-to-date info and exclusive mobile-only features.',
      }}
      actions={[
        <Button status={ButtonStatus.SECONDARY}>Google</Button>,
        <Button status={ButtonStatus.SECONDARY}>Apple</Button>,
      ]}
      qrcode={{
        imageUrl:
          'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/1200px-QR_code_for_mobile_English_Wikipedia.svg.png',
        mainTitle: 'Jack Jones',
      }}
    />
  </Story>
</Canvas>

## Specifications

Banner to promote Apps.

- Any `JSX element` for `actions`
- Any `JSX element` for `media`
- If `qrcode` applied use `QrCard` component API

## Usage

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


<>
  <Banner
    copy={{
      heading: 'Enjoy a better travel experience with the BlaBlaCar app',
      paragraph:
        'All your rides and tickets in one place, up-to-date info and exclusive mobile-only features.',
    }}
    actions={[
      <Button status={ButtonStatus.SECONDARY} key="button-play-store">Google</Button>,
      <Button status={ButtonStatus.SECONDARY} key="button-apple-store">Apple</Button>,
    ]}
    qrcode={{
      imageUrl:
        'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/1200px-QR_code_for_mobile_English_Wikipedia.svg.png',
      mainTitle: 'Jack Jones',
    }}
  />
<>
```

<ArgsTable of={Banner} />