diff --git a/apps/website/src/examples/Stepper.layout.tsx b/apps/website/src/examples/Stepper.layout.tsx new file mode 100644 index 00000000000..d64ca9006dc --- /dev/null +++ b/apps/website/src/examples/Stepper.layout.tsx @@ -0,0 +1,110 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Flex, Input, Label, Stepper, InputGroup, Radio } from '@itwin/itwinui-react'; + +const stepLabels = [{ name: 'User Info' }, { name: 'Color Selection' }, { name: 'Explanation' }]; + +export default () => { + const [currentStep, setCurrentStep] = React.useState(0); + const [disableProgress, setDisableProgress] = React.useState(true); + + React.useEffect(() => { + setDisableProgress(true); + }, [currentStep]); + const stepOne = ( + <> + + { + setDisableProgress(!value); + }} + /> + + + + ); + + const stepTwo = ( + { + setDisableProgress(!value); + }} + > + + + + + + + + ); + + const stepThree = ( + <> + + { + setDisableProgress(!value); + }} + /> + + ); + + const steps = [stepOne, stepTwo, stepThree]; + + return ( + <> + + Color survey + + { + setDisableProgress(true); + setCurrentStep(index); + }} + /> + + + {steps[currentStep]} + + + + + + + + ); +}; diff --git a/apps/website/src/examples/Stepper.localization.tsx b/apps/website/src/examples/Stepper.localization.tsx new file mode 100644 index 00000000000..d305f3c0956 --- /dev/null +++ b/apps/website/src/examples/Stepper.localization.tsx @@ -0,0 +1,60 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Flex, Stepper, StepperLocalization } from '@itwin/itwinui-react'; + +const steps = [ + { name: 'First Step' }, + { name: 'Second Step' }, + { name: 'Third Step' }, + { name: 'Fourth Step' }, + { name: 'Fifth Step' }, + { name: 'Sixth Step' }, + { name: 'Last Step' }, +]; + +const localization: StepperLocalization = { + stepsCountLabel: (currentStep, totalSteps) => `Localized step ${currentStep} of ${totalSteps}:`, +}; + +export default () => { + const [currentStep, setCurrentStep] = React.useState(2); + + return ( + + + { + setCurrentStep(index); + }} + type='long' + localization={localization} + /> + + + + + + + + ); +}; diff --git a/apps/website/src/examples/Stepper.long.tsx b/apps/website/src/examples/Stepper.long.tsx new file mode 100644 index 00000000000..81e677edd07 --- /dev/null +++ b/apps/website/src/examples/Stepper.long.tsx @@ -0,0 +1,55 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Flex, Stepper } from '@itwin/itwinui-react'; + +const steps = [ + { name: 'First Step' }, + { name: 'Second Step' }, + { name: 'Third Step' }, + { name: 'Fourth Step' }, + { name: 'Fifth Step' }, + { name: 'Sixth Step' }, + { name: 'Last Step' }, +]; + +export default () => { + const [currentStep, setCurrentStep] = React.useState(2); + + return ( + + + { + setCurrentStep(index); + }} + type='long' + /> + + + + + + + + ); +}; diff --git a/apps/website/src/examples/Stepper.short.tsx b/apps/website/src/examples/Stepper.short.tsx new file mode 100644 index 00000000000..9913a0bb70e --- /dev/null +++ b/apps/website/src/examples/Stepper.short.tsx @@ -0,0 +1,47 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Flex, Stepper } from '@itwin/itwinui-react'; + +const steps = [{ name: 'Previous Step' }, { name: 'Current Step' }, { name: 'Next Step' }]; + +export default () => { + const [currentStep, setCurrentStep] = React.useState(1); + + return ( + + + { + setCurrentStep(index); + }} + type='default' + /> + + + + + + + + ); +}; diff --git a/apps/website/src/examples/Stepper.tooltip.tsx b/apps/website/src/examples/Stepper.tooltip.tsx new file mode 100644 index 00000000000..624f022ca05 --- /dev/null +++ b/apps/website/src/examples/Stepper.tooltip.tsx @@ -0,0 +1,51 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Flex, Stepper } from '@itwin/itwinui-react'; + +const steps = [ + { name: 'Completed step', description: 'Completed tooltip' }, + { name: 'Current step', description: 'Current tooltip' }, + { name: 'Next step', description: 'Next tooltip' }, + { name: 'Last step', description: 'Last tooltip' }, +]; + +export default () => { + const [currentStep, setCurrentStep] = React.useState(1); + + return ( + + + { + setCurrentStep(index); + }} + /> + + + + + + + + ); +}; diff --git a/apps/website/src/examples/index.tsx b/apps/website/src/examples/index.tsx index dfbf294b385..439af993ff3 100644 --- a/apps/website/src/examples/index.tsx +++ b/apps/website/src/examples/index.tsx @@ -118,6 +118,11 @@ export { default as SliderTooltipCustomExample } from './Slider.tooltipcustom'; export { default as SliderTooltipNoneExample } from './Slider.tooltipnone'; export { default as StepperMainExample } from './Stepper.main'; +export { default as StepperShortExample } from './Stepper.short'; +export { default as StepperLongExample } from './Stepper.long'; +export { default as StepperTooltipExample } from './Stepper.tooltip'; +export { default as StepperLocalizationExample } from './Stepper.localization'; +export { default as StepperLayoutExample } from './Stepper.layout'; export { default as SurfaceMainExample } from './Surface.main'; export { default as SurfaceCustomExample } from './Surface.custom'; diff --git a/apps/website/src/pages/docs/stepper.mdx b/apps/website/src/pages/docs/stepper.mdx index c7576e2aed3..6680a9f3c67 100644 --- a/apps/website/src/pages/docs/stepper.mdx +++ b/apps/website/src/pages/docs/stepper.mdx @@ -9,19 +9,80 @@ group: core import PropsTable from '~/components/PropsTable.astro'; import LiveExample from '~/components/LiveExample.astro'; -import Placeholder from '~/components/Placeholder.astro'; import * as AllExamples from '~/examples';

{frontmatter.description}

- - In defined, multi-step user interactions, it is useful to inform the user of the number of steps involved in the process, and the current step within that sequence. A UI 'Stepper' guides the user through the steps and provides some interaction to return to previous steps. A standard example of a Stepper would be an e-Commerce checkout process, but there are many others where the user must perform sequential steps. +## Variants + +There are two different styles of stepper, depending on the amount of steps required to complete the process. + +### Short Stepper + + + + + +In the default "short" stepper, each step is named under a circle. + +Designers should confirm the display is acceptable due to the number of steps and labels at various resolutions. If text wrapping occurs or the stepper's visual quality decreases significantly when the window is re-sized, use the [long stepper](#long-stepper) instead. + +### Long Stepper + + + + + +In the long stepper, there are no labels underneath the step indicators to save space. Instead, the label for the step currently in progress appears under the diagram along with ‘Step X of X’. This allocates more space for longer step names, as well as allowing more step indicators to be contained within the diagram. + +## Usage + +### Short vs Long Stepper + +- Use a short stepper if a process has less than five steps and if the label for each step can be summarized with 1-2 words. + +- Use a long stepper if a process has five steps or more or if the label for each step are long (20 characters or over) and/or cannot be summarized + +- A long stepper may be used for a process corresponding to the short stepper’s criteria if desired. However, using a short stepper for a process that would require a long stepper is not recommended. + +### Tooltip + + + + + +Additional (optional) information can be displayed within a [tooltip](tooltip) when hovering over a step indicator. + +### Localization + + + + + +The ‘Step X of X’ label that appears in the default long stepper can be replaced with a localized string. + +### Layout + + + + + +We recommend the following layout: + +1. **Title**: Displayed above the stepper so the user acknowledges what the process is about. + +2. **Stepper** + +3. **Content** + +4. [**Buttons**](button): A [call-to-action button](button#call-to-action) for progress & one or two [default](button#default) buttons for canceling and/or going back one step. If the user has not completed a required task, the call-to-action button may be disabled. If the stepper is in a full screen page, the buttons can be placed within a sticky footer. + ## Props