import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { CircularProgressBar } from './circular-progress-bar.component';
import { FlowPropsTable, ExternalReferenceLink } from '../../../utils';

<Meta
  title="Feedback UI|Circular Progress Bar"
  component={CircularProgressBar}
/>

# Circular Progress Bar

A progress bar represented as a donut chart.

## Default

<Canvas>
  <Story id="feedback-ui-circular-progress-bar--default" />
</Canvas>

## Complete

<Canvas>
  <Story id="feedback-ui-circular-progress-bar--complete" />
</Canvas>

## Large

<Canvas>
  <Story id="feedback-ui-circular-progress-bar--large" />
</Canvas>

## No Animation

<Canvas>
  <Story id="feedback-ui-circular-progress-bar--no-animation" />
</Canvas>

## Supported Layout Props:

Spacing:

<Canvas>
  <Story id="feedback-ui-circular-progress-bar--mixins-margin-only-spacing" />
</Canvas>

## Props

<FlowPropsTable ofComponent={CircularProgressBar} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A64"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/feedback-ui/circular-progress-bar"
  type="github"
/>
