import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'
import Stepper from './'

<Meta
  title="Components/Wayfinding/Stepper"
  component={Stepper}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A12113',
    },
  }}
/>

# Stepper

<Canvas>
  <Story name="default">
    <Stepper
      currentIndex={number('currentIndex', 0)}
      isClickable={boolean('isClickable', false)}
      onChange={action('onChange')}
      onStepClick={action('onStepClick')}
      onComplete={action('onComplete')}
      steps={[
        {
          title: 'Content',
        },
        {
          title: 'Trigger',
        },
        {
          title: 'Review',
        },
      ]}
    />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Messages

<br />
<br />

### Props

<ArgsTable of={Stepper} />
