// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withDocs } from '../../../../.storybook/with-docs';
import { CircularProgressBar } from './index';
import docs from './CIRCULAR_PROGRESS_BAR.mkd';

storiesOf('Core/Feedback UI/CircularProgressBar', module)
  .add(
    'default',
    withDocs(docs)(() => (
      <CircularProgressBar initialAnimation percentage={50} />
    )),
  )
  .add(
    'complete',
    withDocs(docs)(() => (
      <CircularProgressBar initialAnimation percentage={100} />
    )),
  )
  .add(
    'large',
    withDocs(docs)(() => (
      <CircularProgressBar initialAnimation percentage={50} size="60px" />
    )),
  )
  .add(
    'no animation',
    withDocs(docs)(() => <CircularProgressBar percentage={50} />),
  )
  .add(
    'error colors',
    withDocs(docs)(() => (
      <CircularProgressBar
        initialAnimation
        percentage={100}
        color="error-fg"
        bgColor="error-bg"
      />
    )),
  );
