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

import { BASIC } from '../_utils/taxonomy'
import { ItemBigData } from './index'

<Meta title={`${BASIC}/Items with Data/Item Big Data`} />


# Item Big Data

<Canvas>
  <Story name="Default">
    <ItemBigData mainTitle="23452,2500000000" />
  </Story>
</Canvas>

### Item Big Data with Info Data

<Canvas>
  <Story name="Item Big Data with Info Data">
    <ItemBigData
      mainTitle="23452,2500000000"
      mainInfo="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis elit ac tortor sollicitudin, nec sodales odio vestibulum. Proin dapibus nibh tortor, bibendum condimentum nunc aliquam et. Integer non turpis ac lacus congue ultrices vitae ut magna. Phasellus a quam a ante luctus cursus. Donec sit amet velit id ex consequat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce faucibus in ipsum eu blandit. Maecenas diam turpis, dictum nec turpis eget, lacinia hendrerit mauris. Sed vitae aliquet tellus. Pellentesque eget lacus sed leo tristique laoreet sed nec lorem. Quisque posuere tristique arcu ut feugiat. Phasellus dignissim dui justo, eu consequat lectus blandit at."
      aria-label="Additional"
    />
  </Story>
</Canvas>

---

## Specifications

### Normal state

- Used to display a specific and important data.
- They’re not clickable.

### Long texts

- **Data**: _it can’t drop line_.
- **Additionnal Info**: there’s no limit on the number of lines.

## Usage

```jsx
import { ItemBigData } from '@blablacar/ui-library/build/itemBigData'
;<ItemBigData
  mainTitle="23452,2500000000"
  mainInfo="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis elit ac tortor sollicitudin, nec sodales odio vestibulum. Proin dapibus nibh tortor, bibendum condimentum nunc aliquam et. Integer non turpis ac lacus congue ultrices vitae ut magna. Phasellus a quam a ante luctus cursus. Donec sit amet velit id ex consequat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce faucibus in ipsum eu blandit. Maecenas diam turpis, dictum nec turpis eget, lacinia hendrerit mauris. Sed vitae aliquet tellus. Pellentesque eget lacus sed leo tristique laoreet sed nec lorem. Quisque posuere tristique arcu ut feugiat. Phasellus dignissim dui justo, eu consequat lectus blandit at."
  aria-label="Additional"
/>
```

<ArgsTable of={ItemBigData} />