// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../../.storybook/config-docs';
import { CircularProgressBar } from './index';
import docs from './CIRCULAR_PROGRESS_BAR.mkd';

storiesOf('Core/Feedback UI/CircularProgressBar', module)
  .addDecorator(withInfo(configDocs(docs, CircularProgressBar)))

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