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

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

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

# **Paragraph**

<Canvas>
  <Story name="Simple usage">
    <Paragraph>
      Some text with a link, please go on <a href="http://blablacar.com">blablacar.com</a>
    </Paragraph>
  </Story>
</Canvas>

<Canvas>
  <Story name="Long text">
    <Paragraph isExpandable expandLabel="Expand">
      {`${'Long text (above max char) '.repeat(20)} end.`}
    </Paragraph>
  </Story>
</Canvas>

# **Paragraph short text**

<Canvas>
  <Story name="Short text">
    <Paragraph>Short text (below max char)</Paragraph>
  </Story>
</Canvas>

# **Paragraph long unbreakable text**

<Canvas>
  <Story name="Long unbreakable text">
    <Paragraph isExpandable expandLabel="Expand">
      {`http://${'long_url_without_spaces'.repeat(20)}.com`}
    </Paragraph>
  </Story>
</Canvas>

## Specifications

...

## Usage

```jsx
import { Paragraph } from '@blablacar/ui-library/build/paragraph'

<Paragraph isExpandable={true} expandLabel="Expand">
  Some text.
</Paragraph>
```

<ArgsTable of={Paragraph} />