import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { Divider } from "./Divider";
import * as DividerStories from "./Divider.stories";

<Meta of={DividerStories} />

# Divider

A Divider is a horizontal line used to separate content blocks. It is normally horizontally centred to - and occupies the full width of - its container.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Divider } from "@simplybusiness/mobius";
```

## Examples

### Default

<Canvas of={DividerStories.Default} />

## Props

<ArgTypes of={Divider} />

## Component HTML Structure and Class names

The following HTML is rendered for a Divider:

```html
<div class="mobius-divider">
  <div class="mobius-divider__inner"></div>
</div>
```
