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

<Meta of={ProgressStories} />

# Progress

Progress bars allow users to see how far along a task or workflow is. For
example, what step they are on in a multi-step form.

## Install

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

## Usage

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

## Primary

<Canvas of={ProgressStories.Primary} />

## Secondary

<Canvas of={ProgressStories.Secondary} />

## No Visible Label

<Canvas of={ProgressStories.NoVisibleLabel} />

## Custom value format

export const customValueFormatter = (value, minValue, maxValue) =>
  `Step ${value} of ${maxValue}`;

<Canvas of={ProgressStories.CustomValueFormat} />

## Props

<ArgTypes of={Progress} />

## Component HTML Structure and Class names

The following HTML is rendered for a Progress:

```html
<div
  id="123"
  aria-labelledby="456"
  aria-valuenow="2"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuetext="20%"
  role="progressbar"
  class="mobius-progress --is-primary"
>
  <label class="mobius-progress__label" id="456">Primary</label>
  <div class="mobius-progress__track">
    <div class="mobius-progress__bar"></div>
  </div>
  <label class="mobius-label">20%</label>
</div>
```
