chore(docs): add Progress Bar steps example (uber#5176)

vmatthes · Sep 28, 2022 · 4ceb759 · 4ceb759
1 parent 1d6bd31
commit 4ceb759
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 0 deletions.
diff --git a/documentation-site/examples/progress-bar/steps.js b/documentation-site/examples/progress-bar/steps.js
@@ -0,0 +1,41 @@
+// @flow
+import * as React from 'react';
+import {ProgressBar} from 'baseui/progress-bar';
+import {Button, SIZE} from 'baseui/button';
+
+export default function Example() {
+  const STEPS = 5;
+  const stepSize = 100 / STEPS;
+  const [value, setValue] = React.useState(40);
+  return (
+    <div>
+      <ProgressBar value={value} steps={5} />
+      <div style={{display: 'flex', justifyContent: 'center'}}>
+        <Button
+          onClick={() =>
+            setValue((prevValue) => prevValue - stepSize)
+          }
+          size={SIZE.compact}
+          disabled={value === 0 || value === 100}
+          overrides={{
+            BaseButton: {
+              style: {width: '116px', marginRight: '20px'},
+            },
+          }}
+        >
+          Previous Step
+        </Button>
+        <Button
+          onClick={() =>
+            setValue((prevValue) => prevValue + stepSize)
+          }
+          size={SIZE.compact}
+          disabled={value === 100}
+          overrides={{BaseButton: {style: {width: '116px'}}}}
+        >
+          {value >= 80 ? 'Complete' : 'Next Step'}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/documentation-site/examples/progress-bar/steps.tsx b/documentation-site/examples/progress-bar/steps.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {ProgressBar} from 'baseui/progress-bar';
+import {Button, SIZE} from 'baseui/button';
+
+export default function Example() {
+  const STEPS = 5;
+  const stepSize = 100 / STEPS;
+  const [value, setValue] = React.useState(50);
+  return (
+    <div>
+      <ProgressBar value={value} steps={5} />
+      <div style={{display: 'flex', justifyContent: 'center'}}>
+        <Button
+          onClick={() =>
+            setValue((prevValue) => prevValue - stepSize)
+          }
+          size={SIZE.compact}
+          disabled={value === 0 || value === 100}
+          overrides={{
+            BaseButton: {
+              style: {width: '116px', marginRight: '20px'},
+            },
+          }}
+        >
+          Previous Step
+        </Button>
+        <Button
+          onClick={() =>
+            setValue((prevValue) => prevValue + stepSize)
+          }
+          size={SIZE.compact}
+          disabled={value === 100}
+          overrides={{BaseButton: {style: {width: '116px'}}}}
+        >
+          {value >= 80 ? 'Complete' : 'Next Step'}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/documentation-site/pages/components/progress-bar.mdx b/documentation-site/pages/components/progress-bar.mdx
@@ -14,6 +14,7 @@ import Negative from 'examples/progress-bar/negative.js';
 import WithLabel from 'examples/progress-bar/with-label.js';
 import CustomLabel from 'examples/progress-bar/custom-label.js';
 import Customization from 'examples/progress-bar/overrides.js';
+import Steps from 'examples/progress-bar/steps.js';
 import ProgressBarRounded from 'examples/progress-bar/rounded.js';
 
 import { ProgressBar } from 'baseui/progress-bar';
@@ -60,6 +61,14 @@ Indicates a wait time for actions - either within an experience flow or loading
   <Customization />
 </Example>
 
+## Stepped Progress Bar
+
+There is a stepped version of the progress bar. This is useful when an action requires a determinate amount of steps or stages to complete. Each step is a waiting indicator progressing by system action or human interaction.
+
+<Example title="Steps" path="progress-bar/steps.js">
+  <Steps />
+</Example>
+
 ## Progress bar rounded
 
 There also is a rounded version of the progress bar