@patternfly/react-core 5.2.0-prerelease.9 → 6.0.0-alpha.10

package/src/demos/Wizard/WizardDemo.md

@@ -4,792 +4,37 @@ section: components
 source: react-demos
 ---
 
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 ## Demos
 
 ### In modal
 
-```js isFullscreen
-import React from 'react';
-import {
-  Card,
-  CardBody,
-  Gallery,
-  GalleryItem,
-  PageSection,
-  Modal,
-  ModalVariant,
-  Wizard,
-  WizardHeader,
-  WizardStep
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-
-class WizardInModalDemo extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <DashboardWrapper hasPageTemplateTitle>
-          <PageSection isWidthLimited>
-            <Gallery hasGutter>
-              {Array.apply(0, Array(10)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-          </PageSection>
-        </DashboardWrapper>
-        <Modal
-          isOpen
-          variant={ModalVariant.large}
-          showClose={false}
-          hasNoBodyWrapper
-          aria-describedby="wiz-modal-demo-description"
-          aria-labelledby="wiz-modal-demo-title"
-        >
-          <Wizard
-            header={
-              <WizardHeader
-                title="Wizard in modal"
-                titleId="wiz-modal-demo-title"
-                description="Simple wizard description"
-                descriptionId="wiz-modal-demo-description"
-                closeButtonAriaLabel="Close wizard"
-              />
-            }
-            height={400}
-          >
-            <WizardStep name="Information" id="wizard-step-1">
-              <p>Step 1 content</p>
-            </WizardStep>
-            <WizardStep
-              name="Configuration"
-              id="wizard-step-2"
-              steps={[
-                <WizardStep name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
-                  <p>Configuration substep A</p>
-                </WizardStep>,
-                <WizardStep name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
-                  <p>Configuration substep B</p>
-                </WizardStep>
-              ]}
-            />
-            <WizardStep name="Additional" id="wizard-step-3">
-              <p>Step 3 content</p>
-            </WizardStep>
-            <WizardStep name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
-              <p>Review step content</p>
-            </WizardStep>
-          </Wizard>
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```js file="../examples/Wizard/InModal.tsx" isFullscreen
 ```
 
 ### In modal, with drawer
 
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerPanelContent,
-  DrawerHead,
-  Modal,
-  ModalVariant,
-  Wizard,
-  WizardHeader,
-  WizardStep
-} from '@patternfly/react-core';
-
-class WizardModalWithDrawerDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: 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 createStepContentWithDrawer = (stepName) => (
-      <Drawer isInline isExpanded={isDrawerExpanded} onExpand={this.onExpand}>
-        <DrawerContent
-          panelContent={
-            <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-              <DrawerHead>
-                <span tabIndex={isDrawerExpanded ? 0 : -1} ref={this.drawerRef}>
-                  Drawer content: {stepName}
-                </span>
-                <DrawerActions>
-                  <DrawerCloseButton onClick={this.onCloseClick} />
-                </DrawerActions>
-              </DrawerHead>
-            </DrawerPanelContent>
-          }
-        >
-          {!isDrawerExpanded && (
-            <Button isInline variant="link" onClick={this.onOpenClick}>
-              Open drawer
-            </Button>
-          )}
-          <div>{stepName} content</div>
-        </DrawerContent>
-      </Drawer>
-    );
-
-    return (
-      <Modal
-        isOpen
-        variant={ModalVariant.large}
-        showClose={false}
-        hasNoBodyWrapper
-        aria-describedby="wiz-modal-demo-description"
-        aria-labelledby="wiz-modal-demo-title"
-      >
-        <Wizard
-          header={
-            <WizardHeader
-              closeButtonAriaLabel="Close wizard"
-              title="Wizard in modal with drawer"
-              titleId="wiz-modal-demo-title"
-              description="Simple wizard description"
-              descriptionId="wiz-modal-demo-description"
-            />
-          }
-          height={400}
-        >
-          <WizardStep body={null} name="Information" id="wizard-step-1">
-            {createStepContentWithDrawer('Information step')}
-          </WizardStep>
-          <WizardStep
-            name="Configuration"
-            id="wizard-step-2"
-            steps={[
-              <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
-                {createStepContentWithDrawer('Configuration substep A')}
-              </WizardStep>,
-              <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
-                {createStepContentWithDrawer('Configuration substep B')}
-              </WizardStep>
-            ]}
-          />
-          <WizardStep body={null} name="Additional" id="wizard-step-3">
-            {createStepContentWithDrawer('Additional step')}
-          </WizardStep>
-          <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
-            {createStepContentWithDrawer('Review step')}
-          </WizardStep>
-        </Wizard>
-      </Modal>
-    );
-  }
-}
+```js file="../examples/Wizard/InModalWithDrawer.tsx" isFullscreen
 ```
 
 ### In modal, with drawer and informational step
 
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerPanelContent,
-  DrawerHead,
-  Modal,
-  ModalVariant,
-  Text,
-  TextContent,
-  Wizard,
-  WizardHeader,
-  WizardStep
-} from '@patternfly/react-core';
-
-class WizardModalWithDrawerInfoStepDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: 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 createStepContentWithDrawer = (stepName) => (
-      <Drawer isInline isExpanded={isDrawerExpanded} onExpand={this.onExpand}>
-        <DrawerContent
-          panelContent={
-            <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-              <DrawerHead>
-                <span tabIndex={isDrawerExpanded ? 0 : -1} ref={this.drawerRef}>
-                  Drawer content: {stepName}
-                </span>
-                <DrawerActions>
-                  <DrawerCloseButton onClick={this.onCloseClick} />
-                </DrawerActions>
-              </DrawerHead>
-            </DrawerPanelContent>
-          }
-        >
-          <TextContent>
-            <Text component={TextVariants.h1}>{stepName} content</Text>
-            <p>
-              Wizard description goes here. If you need more assistance,{' '}
-              <Button isInline variant="link" onClick={this.onOpenClick}>
-                see more information
-              </Button>{' '}
-              in the side drawer.{' '}
-            </p>
-          </TextContent>
-        </DrawerContent>
-      </Drawer>
-    );
-
-    return (
-      <Modal
-        isOpen
-        variant={ModalVariant.large}
-        showClose={false}
-        hasNoBodyWrapper
-        aria-describedby="wiz-modal-demo-description"
-        aria-labelledby="wiz-modal-demo-title"
-      >
-        <Wizard
-          header={
-            <WizardHeader
-              closeButtonAriaLabel="Close wizard"
-              title="Wizard in modal with drawer and info step"
-              titleId="wiz-modal-demo-title"
-              description="Simple wizard description"
-              descriptionId="wiz-modal-demo-description"
-            />
-          }
-          height={400}
-        >
-          <WizardStep body={null} name="Information" id="wizard-step-1">
-            {createStepContentWithDrawer('Information step')}
-          </WizardStep>
-          <WizardStep
-            name="Configuration"
-            id="wizard-step-2"
-            steps={[
-              <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
-                {createStepContentWithDrawer('Configuration substep A')}
-              </WizardStep>,
-              <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
-                {createStepContentWithDrawer('Configuration substep B')}
-              </WizardStep>
-            ]}
-          />
-          <WizardStep body={null} name="Additional" id="wizard-step-3">
-            {createStepContentWithDrawer('Additional step')}
-          </WizardStep>
-          <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
-            {createStepContentWithDrawer('Review step')}
-          </WizardStep>
-        </Wizard>
-      </Modal>
-    );
-  }
-}
+```js file="../examples/Wizard/InModalWithDrawerInformationalStep.tsx" isFullscreen
 ```
 
 ### In page
 
-```js isFullscreen
-import React from 'react';
-import { PageSection, PageSectionTypes, PageSectionVariants, Wizard, WizardStep } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-
-class WizardFullPage extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <React.Fragment>
-        <DashboardWrapper hasPageTemplateTitle>
-          <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard>
-              <WizardStep name="Information" id="wizard-step-1">
-                <p>Step 1 content</p>
-              </WizardStep>
-              <WizardStep
-                name="Configuration"
-                id="wizard-step-2"
-                steps={[
-                  <WizardStep name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
-                    <p>Configuration substep A</p>
-                  </WizardStep>,
-                  <WizardStep name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
-                    <p>Configuration substep B</p>
-                  </WizardStep>
-                ]}
-              />
-              <WizardStep name="Additional" id="wizard-step-3">
-                <p>Step 3 content</p>
-              </WizardStep>
-              <WizardStep name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
-                <p>Review step content</p>
-              </WizardStep>
-            </Wizard>
-          </PageSection>
-        </DashboardWrapper>
-      </React.Fragment>
-    );
-  }
-}
+```js file="../examples/Wizard/InPage.tsx" isFullscreen
 ```
 
 ### In page, with drawer
 
-```js isFullscreen
-import React from 'react';
-import {
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerPanelContent,
-  DrawerHead,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  PageSectionTypes,
-  PageSectionVariants,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent,
-  Text,
-  TextContent,
-  Masthead,
-  PageToggleButton,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  Wizard,
-  WizardStep
-} from '@patternfly/react-core';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-class WizardFullPageWithDrawerDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: false,
-      activeItem: 0
-    };
-
-    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
-      });
-    };
-    this.onNavSelect = (_event, result) => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-  render() {
-    const { activeItem, isDrawerExpanded } = this.state;
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0}>
-            System Panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1}>
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2}>
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3}>
-            Network Services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4}>
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-    const Header = (
-      <Masthead id="basic">
-        <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          </MastheadBrand>
-        </MastheadMain>
-      </Masthead>
-    );
-    const Sidebar = (
-      <PageSidebar>
-        <PageSidebarBody>{PageNav}</PageSidebarBody>
-      </PageSidebar>
-    );
-    const pageId = 'main-content-page-layout-default-nav';
-    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-    const PageBreadcrumb = (
-      <Breadcrumb>
-        <BreadcrumbItem>Section home</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Section landing
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-
-    const createStepContentWithDrawer = (stepName) => (
-      <Drawer isInline isExpanded={isDrawerExpanded} onExpand={this.onExpand}>
-        <DrawerContent
-          panelContent={
-            <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-              <DrawerHead>
-                <span tabIndex={isDrawerExpanded ? 0 : -1} ref={this.drawerRef}>
-                  Drawer content: {stepName}
-                </span>
-                <DrawerActions>
-                  <DrawerCloseButton onClick={this.onCloseClick} />
-                </DrawerActions>
-              </DrawerHead>
-            </DrawerPanelContent>
-          }
-        >
-          {!isDrawerExpanded && (
-            <Button isInline variant="link" onClick={this.onOpenClick}>
-              Open drawer
-            </Button>
-          )}
-          <div>{stepName} content</div>
-        </DrawerContent>
-      </Drawer>
-    );
-
-    return (
-      <React.Fragment>
-        <Page
-          header={Header}
-          sidebar={Sidebar}
-          isManagedSidebar
-          skipToContent={PageSkipToContent}
-          breadcrumb={PageBreadcrumb}
-          mainContainerId={pageId}
-        >
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">A demo of a wizard in a page.</Text>
-            </TextContent>
-          </PageSection>
-          <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard>
-              <WizardStep body={null} name="Information" id="wizard-step-1">
-                {createStepContentWithDrawer('Information step')}
-              </WizardStep>
-              <WizardStep
-                name="Configuration"
-                id="wizard-step-2"
-                steps={[
-                  <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
-                    {createStepContentWithDrawer('Configuration substep A')}
-                  </WizardStep>,
-                  <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
-                    {createStepContentWithDrawer('Configuration substep B')}
-                  </WizardStep>
-                ]}
-              />
-              <WizardStep body={null} name="Additional" id="wizard-step-3">
-                {createStepContentWithDrawer('Additional step')}
-              </WizardStep>
-              <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
-                {createStepContentWithDrawer('Review step')}
-              </WizardStep>
-            </Wizard>
-          </PageSection>
-        </Page>
-      </React.Fragment>
-    );
-  }
-}
+```js file="../examples/Wizard/InPageWithDrawer.tsx" isFullscreen
 ```
 
 ### In page, with drawer and informational step
 
-```js isFullscreen
-import React from 'react';
-import {
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerHead,
-  DrawerPanelContent,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  PageSectionTypes,
-  PageSectionVariants,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent,
-  Text,
-  TextContent,
-  Masthead,
-  PageToggleButton,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  Wizard,
-  WizardStep
-} from '@patternfly/react-core';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: false,
-      activeItem: 0
-    };
-
-    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
-      });
-    };
-    this.onNavSelect = (_event, result) => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-  render() {
-    const { activeItem, isDrawerExpanded } = this.state;
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0}>
-            System Panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1}>
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2}>
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3}>
-            Network Services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4}>
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-    const Header = (
-      <Masthead id="basic">
-        <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          </MastheadBrand>
-        </MastheadMain>
-      </Masthead>
-    );
-    const Sidebar = (
-      <PageSidebar>
-        <PageSidebarBody>{PageNav}</PageSidebarBody>
-      </PageSidebar>
-    );
-    const pageId = 'main-content-page-layout-default-nav';
-    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-    const PageBreadcrumb = (
-      <Breadcrumb>
-        <BreadcrumbItem>Section home</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Section landing
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-
-    const createStepContentWithDrawer = (stepName) => (
-      <Drawer isInline isExpanded={isDrawerExpanded} onExpand={this.onExpand}>
-        <DrawerContent
-          panelContent={
-            <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-              <DrawerHead>
-                <span tabIndex={isDrawerExpanded ? 0 : -1} ref={this.drawerRef}>
-                  Drawer content: {stepName}
-                </span>
-                <DrawerActions>
-                  <DrawerCloseButton onClick={this.onCloseClick} />
-                </DrawerActions>
-              </DrawerHead>
-            </DrawerPanelContent>
-          }
-        >
-          <TextContent>
-            <Text component={TextVariants.h1}>{stepName} content</Text>
-            <p>
-              Wizard description goes here. If you need more assistance,{' '}
-              <Button isInline variant="link" onClick={this.onOpenClick}>
-                see more information
-              </Button>{' '}
-              in the side drawer.{' '}
-            </p>
-          </TextContent>
-        </DrawerContent>
-      </Drawer>
-    );
-
-    return (
-      <React.Fragment>
-        <Page
-          header={Header}
-          sidebar={Sidebar}
-          isManagedSidebar
-          skipToContent={PageSkipToContent}
-          breadcrumb={PageBreadcrumb}
-          mainContainerId={pageId}
-        >
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">A demo of a wizard in a page.</Text>
-            </TextContent>
-          </PageSection>
-          <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard>
-              <WizardStep body={null} name="Information" id="wizard-step-1">
-                {createStepContentWithDrawer('Information step')}
-              </WizardStep>
-              <WizardStep
-                name="Configuration"
-                id="wizard-step-2"
-                steps={[
-                  <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
-                    {createStepContentWithDrawer('Configuration substep A')}
-                  </WizardStep>,
-                  <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
-                    {createStepContentWithDrawer('Configuration substep B')}
-                  </WizardStep>
-                ]}
-              />
-              <WizardStep body={null} name="Additional" id="wizard-step-3">
-                {createStepContentWithDrawer('Additional step')}
-              </WizardStep>
-              <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
-                {createStepContentWithDrawer('Review step')}
-              </WizardStep>
-            </Wizard>
-          </PageSection>
-        </Page>
-      </React.Fragment>
-    );
-  }
-}
+```js file="../examples/Wizard/InPageWithDrawerInformationalStep.tsx" isFullscreen
 ```