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

import { APP } from '../_utils/taxonomy'
import { QrCard } from './index'

<Meta title={`${APP}/QrCard`} />

# **QrCard**

<Canvas>
  <Story name="With title and image">
    <QrCard
      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 James Dupont"
      itemMainTitle="1st class"
      itemMainInfo="Seat n°34"
      aria-label="Seat QR code"
    />
  </Story>
  <Story name="With long description">
    <QrCard
      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 James Dupont"
      itemMainTitle="1st class"
      itemMainInfo="Can you add a case with a long text: Your seat number will be assigned to you 1 hour before departure."
      aria-label="Seat QR code"
    />
  </Story>
</Canvas>


## Specifications

## Usage

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

<QrCard />
```

<ArgsTable of={QrCard} />