website: Update Stepper documenation (#1161)

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 = (
+    <>
+      <Label required>Name</Label>
+      <Input
+        key='name'
+        placeholder='Enter name'
+        onChange={({ target: { value } }) => {
+          setDisableProgress(!value);
+        }}
+      />
+      <Label>Occupation</Label>
+      <Input key='occupation' placeholder='Enter occupation' />
+    </>
+  );
+
+  const stepTwo = (
+    <InputGroup
+      key='color'
+      label='Choose your favorite color'
+      required
+      onChange={({ target: { value } }) => {
+        setDisableProgress(!value);
+      }}
+    >
+      <Radio name='color' value='Red' label='Red' />
+      <Radio name='color' value='Orange' label='Orange' />
+      <Radio name='color' value='Yellow' label='Yellow' />
+      <Radio name='color' value='Green' label='Green' />
+      <Radio name='color' value='Blue' label='Blue' />
+      <Radio name='color' value='Purple' label='Purple' />
+    </InputGroup>
+  );
+
+  const stepThree = (
+    <>
+      <Label required>Why is this your favorite color</Label>
+      <Input
+        key='explanation'
+        placeholder='Enter text here...'
+        onChange={({ target: { value } }) => {
+          setDisableProgress(!value);
+        }}
+      />
+    </>
+  );
+
+  const steps = [stepOne, stepTwo, stepThree];
+
+  return (
+    <>
+      <Flex flexDirection='column' gap='m' style={{ minWidth: 'min(100%, 400px)' }}>
+        <Flex as='h2'>Color survey</Flex>
+        <Flex.Item alignSelf='stretch'>
+          <Stepper
+            currentStep={currentStep}
+            steps={stepLabels}
+            onStepClick={(index: number) => {
+              setDisableProgress(true);
+              setCurrentStep(index);
+            }}
+          />
+        </Flex.Item>
+        <Flex.Item alignSelf='flex-start' style={{ width: '100%' }}>
+          {steps[currentStep]}
+        </Flex.Item>
+        <Flex>
+          <Button
+            disabled={currentStep === 0}
+            onClick={() => {
+              if (currentStep !== 0) {
+                setDisableProgress(true);
+                setCurrentStep(currentStep - 1);
+              }
+            }}
+          >
+            Back
+          </Button>
+          <Button
+            styleType='cta'
+            disabled={disableProgress}
+            onClick={() => {
+              if (currentStep < steps.length - 1) {
+                setDisableProgress(true);
+                setCurrentStep(currentStep + 1);
+              }
+            }}
+          >
+            {currentStep === 2 ? 'Register' : 'Next'}
+          </Button>
+        </Flex>
+      </Flex>
+    </>
+  );
+};

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 (
+    <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'
+          localization={localization}
+        />
+      </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.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.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 (
+    <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='default'
+        />
+      </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(1);
+
+  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

@@ -123,6 +123,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';