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

import { BASIC } from '../../_utils/taxonomy'
import { ItemData } from '../../itemData'
import { BaseSection } from '../../layout/section/baseSection'
import { SectionDivider } from '.'

<Meta title={`${BASIC}/Divider/Section Divider`} />

# Section Divider

<Canvas>
  <Story name="Section Divider">
    <BaseSection noHorizontalSpacing>
      <ItemData mainTitle="Some content to divide..." />
      <SectionDivider />
      <ItemData mainTitle="...Rest of the divided content." />
    </BaseSection>
  </Story>
</Canvas>

## Specifications

Use it in order to visually seperate sections of information for easy readability.
Make sure that sections are clearly defined, for instance by using sub-headers.

- ✅ Use when you want to seperate unrelated content
- ✅ Use when you want to seperate a section in a content page

- ⛔️ Do not use to separate a list of items that have the same meaning

### Dev specs

Normal state
Section dividers span the entire length of the layout.They can be paired with subheaders to better identify sections. In this case, Section dividers are placed above subheaders.
Large screen (SPA)
They are centered in a layout.

### Accessibility - Screen reader
Skipped! This visual separator is not relevant for people using a screen reader.

ⓘ The Divider is not read but it split groups of elements by [Sections] (options, data...). Those [Sections] alongside Dividers had to be clearely identified as separated zones of informations.

## Usage

```jsx
import { SectionDivider } from '@blablacar/ui-library/build/divider/SectionDivider'

Some section to divide...
<SectionDivider />
...Rest of the divided section.
```