diff --git a/packages/docs/pages/progress-circle.tsx b/packages/docs/pages/progress-circle.tsx
index 0a1316767..06aab0832 100644
--- a/packages/docs/pages/progress-circle.tsx
+++ b/packages/docs/pages/progress-circle.tsx
@@ -1,55 +1,99 @@
import { H1, Panel, ProgressCircle, Text } from '@bigcommerce/big-design';
-import React from 'react';
+import React, { Fragment } from 'react';
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
import { ProgressCirclePropTable } from '../PropTables';
const ProgressCirclePage = () => {
- const items = [
- {
- id: 'examples',
- title: 'Examples',
- render: () => (
- <>
-
-
- 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.
-
-
-
- {/* jsx-to-string:start */}
-
- {/* jsx-to-string:end */}
-
-
-
-
- Indeterminant Progress represents an unknown amount of time for a task to complete. Component will render
- an indeterminant progress when missing a percent prop.
-
-
-
- {/* jsx-to-string:start */}
-
- {/* jsx-to-string:end */}
-
-
-
- ),
- },
- {
- id: 'props',
- title: 'Props',
- render: () => ,
- },
- ];
-
return (
<>
ProgressCircle
-
+
+
+ Progress indicators give the user system visibility when a front end action triggers a need from the back end.
+
+ When to use:
+
+ Progress indicators can be combined with additional status feedback.
+ Use when there is a greater than one second waiting time.
+
+
+ Loader
+
+
+ Use when there is indeterminant progress, where there is an unknown amount of time for a task to complete.
+
+
+
+ Circular progress
+
+
+ Use when there is determinant progress, where there is a known amount of time for a task to complete.
+
+
+
+
+
+ (
+
+
+ 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.
+
+
+
+ {/* jsx-to-string:start */}
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'indeterminant',
+ title: 'Indeterminant',
+ render: () => (
+
+
+ Indeterminant Progress represents an unknown amount of time for a task to complete. Component will
+ render an indeterminant progress when missing a percent prop.
+
+
+
+ {/* jsx-to-string:start */}
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ ]}
+ />
+
+
+
+
+
+
+
+ Status feedback should be clear and direct. Limit verbiage and information.,
+ <>If progress is determinate, use a percentage to reflect the completeness of the action.,
+ ]}
+ discouraged={[
+ <>Don’t use if an action is not triggering a back end action.,
+ <>Don’t use to indicate the completeness of a user-dependent task.,
+ ]}
+ />
+
);
};