import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as Stories from './examples';

<Meta title="Components|ProgressBar" />

# ProgressBar

Display an activity progress bar.

## Props

| Name                      | Type      | Default |
| ------------------------- | --------- | ------- |
| ...ViewProps              | | |
| color                     | ?Color   | '#1976D2' |
| indeterminate             | ?boolean  | false |
| progress                  | ?number  | 0 |
| trackColor                | ?Color | 'transparent' |

### color

Customize the color of the progress bar.

<Preview withSource='none'>
  <Story name="color">
    <Stories.color />
  </Story>
</Preview>

### indeterminate

Whether the progress bar will show indeterminate progress.

<Preview withSource='none'>
  <Story name="indeterminate">
    <Stories.indeterminate />
  </Story>
</Preview>

### progress

The progress value (between 0 and 1).

<Preview withSource='none'>
  <Story name="progress">
    <Stories.progress />
  </Story>
</Preview>

### trackColor

Customize the color of the track bar.

<Preview withSource='none'>
  <Story name="trackColor">
    <Stories.trackColor />
  </Story>
</Preview>

## Notes

Custom sizes can be created using `style`.

```js
<ProgressBar
  style={{ borderRadius: 10, height: 10 }}
  trackColor="#D1E3F6"
/>
```

<Preview withSource='none'>
  <Story name="customSize">
    <Stories.customSize />
  </Story>
</Preview>
