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

import { EDITORIAL } from '../_utils/taxonomy'
import { Breadcrumb, DividerPosition } from './index'

<Meta title={`${EDITORIAL}/Breadcrumb`}  decorators={[withKnobs({ escapeHTML: false })]} />

# **Breadcrumb**

<Canvas>
  <Story name="Default">
    <Breadcrumb
      crumbs={[
        {
          url: 'http://www.goominet.com/unspeakable-vault/',
          name: 'Fhtagn',
        },
        {
          url: 'http://www.goominet.com/unspeakable-vault/vault/1/',
          name: 'Cthulhu',
        },
      ]}
    />
  </Story>
</Canvas>

### With top divider

<Canvas>
  <Story name="With top divider">
    <Breadcrumb
      crumbs={[
        {
          url: 'http://www.goominet.com/unspeakable-vault/',
          name: 'Fhtagn',
        },
        {
          url: 'http://www.goominet.com/unspeakable-vault/vault/1/',
          name: 'Cthulhu',
        },
      ]}
      divider={DividerPosition.TOP}
    />
  </Story>
</Canvas>

### With bottom divider

<Canvas>
  <Story name="With bottom divider">
    <Breadcrumb
      crumbs={[
        {
          url: 'http://www.goominet.com/unspeakable-vault/',
          name: 'Fhtagn',
        },
        {
          url: 'http://www.goominet.com/unspeakable-vault/vault/1/',
          name: 'Cthulhu',
        },
      ]}
      divider={DividerPosition.BOTTOM}
    />
  </Story>
</Canvas>

## Specifications

The breadcrumb component uses structured data. It validates https://search.google.com/test/rich-results

## Usage

```jsx
import { Breadcrumb, DividerPosition } from '@blablacar/ui-library/build/breadcrumb'
<Breadcrumb crumbs={[{ name: string; url: string; }]} divider={DividerPosition} />
```

<ArgsTable of={Breadcrumb} />