diff --git a/documentation-site/examples/progress-bar/steps.js b/documentation-site/examples/progress-bar/steps.js new file mode 100644 index 0000000000..ea1ca2ada5 --- /dev/null +++ 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 ( +
+ +
+ + +
+
+ ); +} diff --git a/documentation-site/examples/progress-bar/steps.tsx b/documentation-site/examples/progress-bar/steps.tsx new file mode 100644 index 0000000000..1a5e91fd7b --- /dev/null +++ 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 ( +
+ +
+ + +
+
+ ); +} diff --git a/documentation-site/pages/components/progress-bar.mdx b/documentation-site/pages/components/progress-bar.mdx index a147516315..fb2c5fb66a 100644 --- 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 +## 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. + + + + + ## Progress bar rounded There also is a rounded version of the progress bar