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

import { MultiStepProgress } from './MultiStepProgress';

# Multi Step Progress

This component will render a vertical multistep progress to be used in multi-step forms.

## Props

<ArgsTable of={MultiStepProgress} />

## Usage

Basic usage

```javascript
<MultiStepProgress
  steps={[
    { current: false, done: true, label: 'Investment objective', name: 'investment_objective' },
    {
      current: true,
      done: false,
      label: 'Time and risk',
      name: 'time_and_risk',
      steps: [
        { current: false, done: true, label: 'Investment period', name: 'investment_period' },
        { current: true, done: false, label: 'Frequency', name: 'frequency' },
        { current: false, done: false, label: 'Amount', name: 'amount' },
      ],
    },
    { current: false, done: false, label: 'Allocations', name: 'allocations' },
  ]}
  onStepClick={action('step click')}
  onSubStepClick={action('sub step click')}
/>
```