@patternfly/react-core 4.267.3 → 4.267.5

package/src/components/Wizard/examples/Wizard.md

@@ -8,11 +8,11 @@ ouia: true
 ---
 
 import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
-DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress } from '@patternfly/react-core';
+DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
-import FinishedStep from './FinishedStep';
-import SampleForm from './SampleForm';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+
 
 If you seek a wizard solution that allows for more composition, see the [React next](/components/wizard/react-next) tab.
 
@@ -20,374 +20,37 @@ If you seek a wizard solution that allows for more composition, see the [React n
 
 ### Basic
 
-```js
-import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
-
-class SimpleWizard extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const steps = [
-      { name: 'First step', component: <p>Step 1 content</p> },
-      { name: 'Second step', component: <p>Step 2 content</p> },
-      { name: 'Third step', component: <p>Step 3 content</p> },
-      { name: 'Fourth step', component: <p>Step 4 content</p> },
-      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
-    ];
-    const title = 'Basic wizard';
-    return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
-  }
-}
+```ts file="./WizardBasic.tsx"
 ```
 
 ### Basic with disabled steps
 
-```js
-import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
-
-class SimpleWizard extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const steps = [
-      { name: 'First step', component: <p>Step 1 content</p> },
-      { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true },
-      { name: 'Third step', component: <p>Step 3 content</p> },
-      { name: 'Fourth step', component: <p>Step 4 content</p>, isDisabled: true },
-      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
-    ];
-    const title = 'Basic wizard';
-    return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
-  }
-}
+```ts file="./WizardBasicWithDisabledSteps.tsx"
 ```
 
 ### Anchors for nav items
 
-```js
-import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
-import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
-
-class WizardWithNavAnchors extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const steps = [
-      {
-        name: (
-          <div>
-            <ExternalLinkAltIcon /> PF3
-          </div>
-        ),
-        component: <p>Step 1: Read about PF3</p>,
-        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v3/', target: '_blank' }
-      },
-      {
-        name: (
-          <div>
-            <ExternalLinkAltIcon /> PF4
-          </div>
-        ),
-        component: <p>Step 2: Read about PF4</p>,
-        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v4/', target: '_blank' }
-      },
-      {
-        name: (
-          <div>
-            <SlackHashIcon /> Join us on slack
-          </div>
-        ),
-        component: (
-          <Button variant="link" component="a" target="_blank" href="https://patternfly.slack.com/">
-            Join the conversation
-          </Button>
-        ),
-        stepNavItemProps: { navItemComponent: 'a', href: 'https://patternfly.slack.com/', target: '_blank' }
-      }
-    ];
-    const title = 'Anchor link wizard';
-    return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
-  }
-}
+```ts file="./WizardAnchorsForNavItems.tsx"
 ```
 
 ### Incrementally enabled steps
 
-```js
-import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
-
-class IncrementallyEnabledStepsWizard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      stepIdReached: 1
-    };
-    this.onNext = ({ id }) => {
-      const [, orderIndex] = id.split('-');
-
-      this.setState({
-        stepIdReached: this.state.stepIdReached < orderIndex ? orderIndex : this.state.stepIdReached
-      });
-    };
-    this.closeWizard = () => {
-      console.log('close wizard');
-    };
-  }
-
-  render() {
-    const { stepIdReached } = this.state;
-
-    const steps = [
-      { id: 'incrementallyEnabled-1', name: 'First step', component: <p>Step 1 content</p> },
-      {
-        id: 'incrementallyEnabled-2',
-        name: 'Second step',
-        component: <p>Step 2 content</p>,
-        canJumpTo: stepIdReached >= 2
-      },
-      {
-        id: 'incrementallyEnabled-3',
-        name: 'Third step',
-        component: <p>Step 3 content</p>,
-        canJumpTo: stepIdReached >= 3
-      },
-      {
-        id: 'incrementallyEnabled-4',
-        name: 'Fourth step',
-        component: <p>Step 4 content</p>,
-        canJumpTo: stepIdReached >= 4
-      },
-      {
-        id: 'incrementallyEnabled-5',
-        name: 'Review',
-        component: <p>Review step content</p>,
-        nextButtonText: 'Finish',
-        canJumpTo: stepIdReached >= 5
-      }
-    ];
-    const title = 'Incrementally enabled wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        onClose={this.closeWizard}
-        steps={steps}
-        onNext={this.onNext}
-        height={400}
-      />
-    );
-  }
-}
+```ts file="./WizardIncrementallyEnabledSteps.tsx"
 ```
 
 ### Expandable steps
 
-```js
-import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
-
-class SimpleWizard extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const steps = [
-      {
-        name: 'First step',
-        steps: [
-          { name: 'Substep A', component: <p>Substep A content</p> },
-          { name: 'Substep B', component: <p>Substep B content</p> }
-        ]
-      },
-      { name: 'Second step', component: <p>Step 2 content</p> },
-      {
-        name: 'Third step',
-        steps: [
-          { name: 'Substep C', component: <p>Substep C content</p> },
-          { name: 'Substep D', component: <p>Substep D content</p> }
-        ]
-      },
-      { name: 'Fourth step', component: <p>Step 4 content</p> },
-      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
-    ];
-    const title = 'Expandable wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        steps={steps}
-        height={400}
-        isNavExpandable
-      />
-    );
-  }
-}
+```ts file="./WizardExpandableSteps.tsx"
 ```
 
 ### Finished
 
-```js
-import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
-import FinishedStep from './examples/FinishedStep';
-
-class FinishedStepWizard extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.closeWizard = () => {
-      console.log('close wizard');
-    };
-  }
-
-  render() {
-    const steps = [
-      { name: 'First step', component: <p>Step 1 content</p> },
-      { name: 'Second step', component: <p>Step 2 content</p> },
-      { name: 'Third step', component: <p>Step 3 content</p> },
-      { name: 'Fourth step', component: <p>Step 4 content</p> },
-      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' },
-      { name: 'Finish', component: <FinishedStep onClose={this.closeWizard} />, isFinishedStep: true }
-    ];
-    const title = 'Finished wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        onClose={this.closeWizard}
-        steps={steps}
-        height={400}
-      />
-    );
-  }
-}
+```ts file="./WizardFinished.tsx"
 ```
 
 ### Enabled on form validation
 
-```js
-import React from 'react';
-import { Button, Wizard, Form, FormGroup, TextInput } from '@patternfly/react-core';
-import SampleForm from './examples/SampleForm';
-
-class ValidationWizard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isFormValid: false,
-      formValue: 'Thirty',
-      allStepsValid: false,
-      stepIdReached: 1
-    };
-
-    this.closeWizard = () => {
-      console.log('close wizard');
-    };
-
-    this.onFormChange = (isValid, value) => {
-      this.setState(
-        {
-          isFormValid: isValid,
-          formValue: value
-        },
-        this.areAllStepsValid
-      );
-    };
-
-    this.areAllStepsValid = () => {
-      this.setState({
-        allStepsValid: this.state.isFormValid
-      });
-    };
-
-    this.onNext = ({ id, name }, { prevId, prevName }) => {
-      console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
-      const [, orderIndex] = id.split('-');
-
-      this.setState({
-        stepIdReached: this.state.stepIdReached < orderIndex ? orderIndex : this.state.stepIdReached
-      });
-      this.areAllStepsValid();
-    };
-
-    this.onBack = ({ id, name }, { prevId, prevName }) => {
-      console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
-      this.areAllStepsValid();
-    };
-
-    this.onGoToStep = ({ id, name }, { prevId, prevName }) => {
-      console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
-    };
-
-    this.onSave = () => {
-      console.log('Saved and closed the wizard');
-      this.setState({
-        isOpen: false
-      });
-    };
-  }
-
-  render() {
-    const { isFormValid, formValue, allStepsValid, stepIdReached } = this.state;
-
-    const steps = [
-      { id: 'validated-1', name: 'Information', component: <p>Step 1 content</p> },
-      {
-        name: 'Configuration',
-        steps: [
-          {
-            id: 'validated-2',
-            name: 'Substep A with validation',
-            component: <SampleForm formValue={formValue} isFormValid={isFormValid} onChange={this.onFormChange} />,
-            enableNext: isFormValid,
-            canJumpTo: stepIdReached >= 2
-          },
-          { id: 'validated-3', name: 'Substep B', component: <p>Substep B</p>, canJumpTo: stepIdReached >= 3 }
-        ]
-      },
-      {
-        id: 'validated-4',
-        name: 'Additional',
-        component: <p>Step 3 content</p>,
-        enableNext: allStepsValid,
-        canJumpTo: stepIdReached >= 4
-      },
-      {
-        id: 'validated-5',
-        name: 'Review',
-        component: <p>Step 4 content</p>,
-        nextButtonText: 'Close',
-        canJumpTo: stepIdReached >= 5
-      }
-    ];
-    const title = 'Enabled on form validation wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        onClose={this.closeWizard}
-        onSave={this.onSave}
-        steps={steps}
-        onNext={this.onNext}
-        onBack={this.onBack}
-        onGoToStep={this.onGoToStep}
-        height={400}
-      />
-    );
-  }
-}
+```ts file="./WizardEnabledOnFormValidation.tsx"
 ```
 
 ### Validate on button press
@@ -407,104 +70,7 @@ interface WizardContext {
 }
 ```
 
-```js
-import React from 'react';
-import { Button, Wizard, WizardFooter, WizardContextConsumer, Alert } from '@patternfly/react-core';
-import SampleForm from './examples/SampleForm';
-import FinishedStep from './examples/FinishedStep';
-
-class ValidateButtonPressWizard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      stepsValid: 0
-    };
-
-    this.closeWizard = () => {
-      console.log('close wizard');
-    };
-
-    this.validateLastStep = onNext => {
-      const { stepsValid } = this.state;
-      if (stepsValid !== 1) {
-        this.setState({
-          stepsValid: 1
-        });
-      } else {
-        onNext();
-      }
-    };
-  }
-
-  render() {
-    const { stepsValid } = this.state;
-
-    const steps = [
-      { name: 'First step', component: <p>Step 1 content</p> },
-      { name: 'Second step', component: <p>Step 2 content</p> },
-      {
-        name: 'Final Step',
-        component: (
-          <>
-            {stepsValid === 1 && (
-              <div style={{ padding: '15px 0' }}>
-                <Alert variant="warning" title="Validation failed, please try again" />
-              </div>
-            )}
-            <SampleForm formValue="Validating on button press" isFormValid={stepsValid !== 1} />
-          </>
-        )
-      },
-      { name: 'Finish', component: <FinishedStep onClose={this.closeWizard} />, isFinishedStep: true }
-    ];
-
-    const CustomFooter = (
-      <WizardFooter>
-        <WizardContextConsumer>
-          {({ activeStep, goToStepByName, goToStepById, onNext, onBack, onClose }) => {
-            if (activeStep.name !== 'Final Step') {
-              return (
-                <>
-                  <Button variant="primary" type="submit" onClick={onNext}>
-                    Forward
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    onClick={onBack}
-                    className={activeStep.name === 'Step 1' ? 'pf-m-disabled' : ''}
-                  >
-                    Backward
-                  </Button>
-                  <Button variant="link" onClick={onClose}>
-                    Cancel
-                  </Button>
-                </>
-              );
-            }
-            // Final step buttons
-            return (
-              <>
-                <Button onClick={() => this.validateLastStep(onNext)}>Validate</Button>
-                <Button onClick={() => goToStepByName('Step 1')}>Go to Beginning</Button>
-              </>
-            );
-          }}
-        </WizardContextConsumer>
-      </WizardFooter>
-    );
-    const title = 'Validate on button press wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        onClose={this.closeWizard}
-        footer={CustomFooter}
-        steps={steps}
-        height={400}
-      />
-    );
-  }
-}
+```ts file="./WizardValidateOnButtonPress.tsx"
 ```
 
 ### Progressive steps
@@ -512,8 +78,6 @@ class ValidateButtonPressWizard extends React.Component {
 ```js
 import React from 'react';
 import { Button, Radio, Wizard, WizardFooter, WizardContextConsumer, Alert } from '@patternfly/react-core';
-import SampleForm from './examples/SampleForm';
-import FinishedStep from './examples/FinishedStep';
 
 class ProgressiveWizard extends React.Component {
   constructor(props) {
@@ -642,7 +206,6 @@ class ProgressiveWizard extends React.Component {
       }
     };
   }
-
   render() {
     const {
       stepsValid,
@@ -654,7 +217,6 @@ class ProgressiveWizard extends React.Component {
       showOptionsStep,
       showReviewStep
     } = this.state;
-
     const getStartedStep = {
       name: 'Get started',
       component: (
@@ -678,7 +240,6 @@ class ProgressiveWizard extends React.Component {
         </div>
       )
     };
-
     const createStep = {
       name: 'Create options',
       component: (
@@ -702,7 +263,6 @@ class ProgressiveWizard extends React.Component {
         </div>
       )
     };
-
     const updateStep = {
       name: 'Update options',
       component: (
@@ -726,7 +286,6 @@ class ProgressiveWizard extends React.Component {
         </div>
       )
     };
-
     const optionsStep = {
       name: showCreateStep ? `${createStepRadio} Options` : `${updateStepRadio} Options`,
       steps: [
@@ -744,7 +303,6 @@ class ProgressiveWizard extends React.Component {
         }
       ]
     };
-
     const reviewStep = {
       name: 'Review',
       component: (
@@ -754,7 +312,6 @@ class ProgressiveWizard extends React.Component {
         </div>
       )
     };
-
     const steps = [
       getStartedStep,
       ...(showCreateStep ? [createStep] : []),
@@ -762,7 +319,6 @@ class ProgressiveWizard extends React.Component {
       ...(showOptionsStep ? [optionsStep] : []),
       ...(showReviewStep ? [reviewStep] : [])
     ];
-
     const CustomFooter = (
       <WizardFooter>
         <WizardContextConsumer>
@@ -806,248 +362,15 @@ class ProgressiveWizard extends React.Component {
 
 ### Get current step
 
-```js
-import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
-
-class GetCurrentStepWizard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      step: 1
-    };
-    this.onCurrentStepChanged = ({ id }) => {
-      this.setState({
-        step: id
-      });
-    };
-    this.closeWizard = () => {
-      console.log('close wizard');
-    };
-  }
-
-  render() {
-    const steps = [
-      { id: 1, name: 'First step', component: <p>Step 1 content</p> },
-      { id: 2, name: 'Second step', component: <p>Step 2 content</p> },
-      { id: 3, name: 'Third step', component: <p>Step 3 content</p> },
-      { id: 4, name: 'Fourth step', component: <p>Step 4 content</p> },
-      { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
-    ];
-    const title = 'Get current step wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        onClose={this.closeWizard}
-        description="Simple Wizard Description"
-        steps={steps}
-        height={400}
-        onCurrentStepChanged={this.onCurrentStepChanged}
-      />
-    );
-  }
-}
+```ts file="./WizardGetCurrentStep.tsx"
 ```
 
 ### Wizard in modal
 
-```js
-import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
-
-class WizardInModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isOpen }) => ({
-        isOpen: !isOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-
-    const steps = [
-      { name: 'First step', component: <p>Step 1 content</p> },
-      { name: 'Second step', component: <p>Step 2 content</p> },
-      { name: 'Third step', component: <p>Step 3 content</p> },
-      { name: 'Fourth step', component: <p>Step 4 content</p> },
-      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
-    ];
-    const title = 'Wizard in modal';
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show Modal
-        </Button>
-        <Wizard
-          title={title}
-          description="Simple Wizard Description"
-          descriptionComponent="div"
-          steps={steps}
-          onClose={this.handleModalToggle}
-          isOpen={isOpen}
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./WizardInModal.tsx"
 ```
 
 ### Wizard with drawer
 
-```js
-import React from 'react';
-import {
-  Button,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerHead,
-  DrawerPanelContent,
-  Text,
-  TextContent,
-  Wizard
-} from '@patternfly/react-core';
-
-class WizardWithDrawer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      isDrawerExpanded: false,
-      sectionGray: false,
-      panelGray: true,
-      contentGray: false
-    };
-
-    this.drawerRef = React.createRef();
-
-    this.onExpand = () => {
-      this.drawerRef.current && this.drawerRef.current.focus();
-    };
-
-    this.onOpenClick = () => {
-      this.setState({
-        isDrawerExpanded: true
-      });
-    };
-
-    this.onCloseClick = () => {
-      this.setState({
-        isDrawerExpanded: false
-      });
-    };
-  }
-
-  render() {
-    const { isDrawerExpanded } = this.state;
-
-    const panel1Content = (
-      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-        <DrawerHead>
-          <span tabIndex={isDrawerExpanded ? 0 : -1} ref={this.drawerRef}>
-            drawer-panel-1 content
-          </span>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick} />
-          </DrawerActions>
-        </DrawerHead>
-      </DrawerPanelContent>
-    );
-
-    const panel2Content = (
-      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-        <DrawerHead>
-          <span tabIndex={0} ref={this.drawerRef}>
-            drawer-panel-2 content
-          </span>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick} />
-          </DrawerActions>
-        </DrawerHead>
-      </DrawerPanelContent>
-    );
-
-    const panel3Content = (
-      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-        <DrawerHead>
-          <span tabIndex={0} ref={this.drawerRef}>
-            drawer-panel-3 content
-          </span>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick} />
-          </DrawerActions>
-        </DrawerHead>
-      </DrawerPanelContent>
-    );
-
-    const drawerToggleButton = (
-      <Button isInline variant="link" onClick={this.onOpenClick}>
-        Open Drawer
-      </Button>
-    );
-
-    const steps = [
-      {
-        name: 'Information',
-        component: <p>Information step content</p>,
-        drawerPanelContent: panel1Content,
-        drawerToggleButton: drawerToggleButton
-      },
-      {
-        name: 'Configuration',
-        steps: [
-          {
-            name: 'Substep A',
-            component: <p>Substep A content</p>,
-            drawerPanelContent: panel2Content,
-            drawerToggleButton: drawerToggleButton
-          },
-          {
-            name: 'Substep B',
-            component: <p>Substep B content</p>,
-            drawerPanelContent: panel2Content,
-            drawerToggleButton: drawerToggleButton
-          },
-          {
-            name: 'Substep C',
-            component: <p>Substep C content</p>,
-            drawerPanelContent: panel2Content,
-            drawerToggleButton: drawerToggleButton
-          }
-        ]
-      },
-      {
-        name: 'Additional',
-        component: <p>Additional step content</p>,
-        drawerPanelContent: panel3Content,
-        drawerToggleButton: drawerToggleButton
-      },
-      {
-        name: 'Review',
-        component: <p>Review step content</p>,
-        nextButtonText: 'Finish'
-      }
-    ];
-
-    const title = 'Wizard with drawer';
-
-    return (
-      <React.Fragment>
-        <Wizard
-          height={400}
-          isDrawerExpanded={isDrawerExpanded}
-          hasDrawer
-          navAriaLabel={`${title} steps`}
-          steps={steps}
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./WizardWithDrawer.tsx"
 ```