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

import Progress from '../Progress';

<Meta title="Components/Progress" component={Progress} />

# Progress API

The API documentation of the Progress React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Progress } from '@useblu/ocean-react';
```

<Canvas>
  <Story
    name="Usage"
    args={{
      onColor: false,
      size: 'md',
    }}
    argTypes={{
      size: {
        name: 'size',
        options: ['sm', 'md', 'lg'],
        control: { type: 'select' },
      },
      onColor: {
        name: 'On Color',
        control: 'boolean',
      },
    }}
  >
    {(props) => <Progress {...props} />}
  </Story>
</Canvas>
