+ ProgressBar
+ Examples
+ Determinant
+
+
+
+
+
+
+ Determinant Progress represents a known amount of time or completeness for a task. A percent
prop
+ needs to be passed to render a determinate progress.
+
-storiesOf('ProgressBar', module)
- .addParameters({
- readme: {
- content: ProgressBarReadme,
- },
- })
- .add('Determinant', () => )
- .add('Indeterminant', () => );
+ Indeterminant
+
+
+
+
+
+
+ Indeterminant Progress represents an unknown amount of time for a task to complete. Component will render an
+ indeterminant progress when missing a percent
prop.
+
+
+ Properties & Methods
+
+
+ Sets the fill length from 0 to 100.
+
+
+
+));
diff --git a/packages/storybook/stories/ProgressCircle.story.tsx b/packages/storybook/stories/ProgressCircle.story.tsx
index 6fbc9809c..eee414ee8 100644
--- a/packages/storybook/stories/ProgressCircle.story.tsx
+++ b/packages/storybook/stories/ProgressCircle.story.tsx
@@ -1,34 +1,42 @@
-import { ProgressCircle } from '@bigcommerce/big-design';
-import { boolean, number, select } from '@storybook/addon-knobs';
+import { H1, H2, H3, Panel, ProgressCircle } from '@bigcommerce/big-design';
import { storiesOf } from '@storybook/react';
import React from 'react';
-import ProgressCircleReadme from '../../big-design/src/components/ProgressCircle/README.md';
+import { CodePreview, PropTable } from '../components';
-const percentKnob = {
- name: 'percentage',
- value: 50,
- options: {
- range: true,
- min: 0,
- max: 100,
- step: 1,
- },
-};
+storiesOf('ProgressCircle', module).add('Overview', () => (
+