website: Update Stepper documenation

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 (
+    <Flex flexDirection='column' gap='m' style={{ minWidth: 'min(100%, 400px)' }}>
+      <Flex.Item alignSelf='stretch'>
+        <Stepper
+          currentStep={currentStep}
+          steps={steps}
+          onStepClick={(index: number) => {
+            setCurrentStep(index);
+          }}
+          type='long'
+        />
+      </Flex.Item>
+
+      <Flex>
+        <Button
+          disabled={currentStep === 0}
+          onClick={() => {
+            if (currentStep !== 0) setCurrentStep(currentStep - 1);
+          }}
+        >
+          Previous
+        </Button>
+        <Button
+          styleType='cta'
+          disabled={currentStep === steps.length - 1}
+          onClick={() => {
+            if (currentStep < steps.length - 1) setCurrentStep(currentStep + 1);
+          }}
+        >
+          Next
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};

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(2);
+
+  return (
+    <Flex flexDirection='column' gap='m' style={{ minWidth: 'min(100%, 400px)' }}>
+      <Flex.Item alignSelf='stretch'>
+        <Stepper
+          currentStep={currentStep}
+          steps={steps}
+          onStepClick={(index: number) => {
+            setCurrentStep(index);
+          }}
+        />
+      </Flex.Item>
+
+      <Flex>
+        <Button
+          disabled={currentStep === 0}
+          onClick={() => {
+            if (currentStep !== 0) setCurrentStep(currentStep - 1);
+          }}
+        >
+          Previous
+        </Button>
+        <Button
+          styleType='cta'
+          disabled={currentStep === steps.length - 1}
+          onClick={() => {
+            if (currentStep < steps.length - 1) setCurrentStep(currentStep + 1);
+          }}
+        >
+          Next
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};

apps/website/src/examples/index.tsx

@@ -106,6 +106,8 @@ export { default as SideNavigationMainExample } from './SideNavigation.main';
 export { default as SliderMainExample } from './Slider.main';
 
 export { default as StepperMainExample } from './Stepper.main';
+export { default as StepperLongExample } from './Stepper.long';
+export { default as StepperTooltipExample } from './Stepper.tooltip';
 
 export { default as SurfaceMainExample } from './Surface.main';
 export { default as SurfaceCustomExample } from './Surface.custom';

apps/website/src/pages/docs/stepper.mdx

@@ -9,19 +9,46 @@ 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';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='core-stepper' />
-
 <LiveExample src='Stepper.main.tsx'>
   <AllExamples.StepperMainExample client:load />
 </LiveExample>
 
 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
+
+The default "short" stepper example is suggested for processes with four (4) steps or less. Each step is named under the circle. This stepper is suggested if the step names can be summarized with very short labels. For example, instead of “Complete Billing Information”, simply use “Billing.”
+
+The user may click on previous steps to go back. [Tooltips](tooltip) can also be implemented to give more information about a particular step.
+
+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 instead (see below).
+
+### Long Stepper
+
+<LiveExample src='Stepper.long.tsx'>
+  <AllExamples.StepperLongExample client:load />
+</LiveExample>
+
+The long stepper is suggested for processes with five or more steps or with steps that require longer labels (20 characters and over). 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
+
+### Tooltip
+
+Additional (optional) information can be displayed within a tooltip when hovering over a step indicator.
+
+<LiveExample src='Stepper.tooltip.tsx'>
+  <AllExamples.StepperTooltipExample client:load />
+</LiveExample>
+
 ## Props
 
 <PropsTable path={frontmatter.propsPath} />