@patternfly/react-core 4.223.3 → 4.224.2

package/src/demos/Wizard/WizardDemo.md

@@ -9,7 +9,7 @@ import DashboardWrapper from '../examples/DashboardWrapper';
 
 ## Demos
 
-### In Modal
+### In modal
 
 ```js isFullscreen
 import React from 'react';
@@ -106,7 +106,454 @@ class BasicWizardDemo extends React.Component {
 }
 ```
 
-### In Page
+### In modal, with drawer
+
+```js isFullscreen
+import React from 'react';
+import {
+  Button,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelContent,
+  DrawerHead,
+  Modal,
+  ModalVariant,
+  Wizard
+} 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 informationPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Information panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const configSubstepAPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Configuration substep A content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const configSubstepBPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Configuration substep B content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const additionalPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Additional panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const reviewPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Review panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const drawerToggleButton = (
+      <Button className="pf-u-float-right pf-u-ml-md" isInline variant="link" onClick={this.onOpenClick}>
+        Open drawer
+      </Button>
+    );
+
+    const steps = [
+      {
+        id: 0,
+        name: 'Information',
+        component: <p>Step 1 content</p>,
+        drawerPanelContent: informationPanelContent,
+        drawerToggleButton: drawerToggleButton
+      },
+      {
+        id: 1,
+        name: 'Configuration',
+        steps: [
+          {
+            id: 2,
+            name: 'Substep A',
+            component: <p>Configuration substep A</p>,
+            drawerPanelContent: configSubstepAPanelContent,
+            drawerToggleButton: drawerToggleButton
+          },
+          {
+            id: 3,
+            name: 'Substep B',
+            component: <p>Configuration substep B</p>,
+            drawerPanelContent: configSubstepBPanelContent,
+            drawerToggleButton: drawerToggleButton
+          }
+        ]
+      },
+      {
+        id: 4,
+        name: 'Additional',
+        component: <p>Step 3 content</p>,
+        drawerPanelContent: additionalPanelContent,
+        drawerToggleButton: drawerToggleButton
+      },
+      {
+        id: 5,
+        name: 'Review',
+        component: <p>Review step content</p>,
+        drawerPanelContent: reviewPanelContent,
+        drawerToggleButton: drawerToggleButton,
+        nextButtonText: 'Finish'
+      }
+    ];
+    const title = 'Wizard modal with Drawer';
+
+    const panelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            drawer-panel
+          </span>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    return (
+      <Modal
+        isOpen
+        variant={ModalVariant.large}
+        showClose={false}
+        hasNoBodyWrapper
+        aria-describedby="wiz-modal-demo-description"
+        aria-labelledby="wiz-modal-demo-title"
+      >
+        <Wizard
+          navAriaLabel={`${title} steps`}
+          hasDrawer
+          isDrawerExpanded={isDrawerExpanded}
+          mainAriaLabel={`${title} content`}
+          titleId="wiz-modal-demo-title"
+          descriptionId="wiz-modal-demo-description"
+          title="Simple wizard in modal"
+          description="Simple wizard description"
+          steps={steps}
+          height={400}
+        />
+      </Modal>
+    );
+  }
+}
+```
+
+### In modal, with drawer and informational step
+
+```js isFullscreen
+import React from 'react';
+import {
+  Button,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelContent,
+  DrawerHead,
+  Modal,
+  ModalVariant,
+  Text,
+  TextContent,
+  Wizard
+} 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 informationPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Information panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const configSubstepAPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Configuration substep A content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const configSubstepBPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Configuration substep B content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const additionalPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Additional panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const reviewPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Review panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const drawerToggleButton = (
+      <Button className="pf-u-float-right pf-u-ml-md" isInline variant="link" onClick={this.onOpenClick}>
+        Open drawer
+      </Button>
+    );
+
+    const steps = [
+      {
+        id: 0,
+        name: 'Information',
+        component: (
+          <TextContent>
+            <Text component={TextVariants.h1}>Information step 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>
+        ),
+        drawerPanelContent: informationPanelContent
+      },
+      {
+        id: 1,
+        name: 'Configuration',
+        steps: [
+          {
+            id: 2,
+            name: 'Substep A',
+            component: (
+              <TextContent>
+                <Text component={TextVariants.h1}>Configuration substep A 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>
+            ),
+            drawerPanelContent: configSubstepAPanelContent
+          },
+          {
+            id: 3,
+            name: 'Substep B',
+            component: (
+              <TextContent>
+                <Text component={TextVariants.h1}>Configuration substep B 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>
+            ),
+            drawerPanelContent: configSubstepBPanelContent
+          }
+        ]
+      },
+      {
+        id: 4,
+        name: 'Additional',
+        component: (
+          <TextContent>
+            <Text component={TextVariants.h1}>Additional step 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>
+        ),
+        drawerPanelContent: additionalPanelContent
+      },
+      {
+        id: 5,
+        name: 'Review',
+        component: (
+          <TextContent>
+            <Text component={TextVariants.h1}>Review step 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>
+        ),
+        nextButtonText: 'Finish',
+        drawerPanelContent: reviewPanelContent
+      }
+    ];
+
+    const title = 'Wizard modal with Drawer';
+
+    const panelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            drawer-panel
+          </span>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    return (
+      <Modal
+        isOpen
+        variant={ModalVariant.large}
+        showClose={false}
+        hasNoBodyWrapper
+        aria-describedby="wiz-modal-demo-description"
+        aria-labelledby="wiz-modal-demo-title"
+      >
+        <Wizard
+          navAriaLabel={`${title} steps`}
+          hasDrawer
+          isDrawerExpanded={isDrawerExpanded}
+          mainAriaLabel={`${title} content`}
+          titleId="wiz-modal-demo-title"
+          descriptionId="wiz-modal-demo-description"
+          title="Simple wizard in modal"
+          description="Simple wizard description"
+          steps={steps}
+          height={400}
+        />
+      </Modal>
+    );
+  }
+}
+```
+
+### In page
 
 ```js isFullscreen
 import React from 'react';
@@ -174,3 +621,587 @@ class FullPageWizard extends React.Component {
   }
 }
 ```
+
+### In page, with drawer
+
+```js isFullscreen
+import React from 'react';
+import {
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelContent,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionTypes,
+  PageSectionVariants,
+  PageSidebar,
+  Progress,
+  SkipToContent,
+  Text,
+  TextContent,
+  Title,
+  Wizard,
+  Masthead,
+  PageToggleButton,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand
+} from '@patternfly/react-core';
+import imgBrand from './imgBrand.svg';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+class FullPageWizard 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 = 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={imgBrand} alt="Patternfly logo" />
+          </MastheadBrand>
+        </MastheadMain>
+      </Masthead>
+    );
+    const Sidebar = <PageSidebar nav={PageNav} />;
+    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 informationPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Information panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const configSubstepAPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Configuration substep A content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const configSubstepBPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Configuration substep B content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const additionalPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Additional panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const reviewPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Review panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const drawerToggleButton = (
+      <Button className="pf-u-float-right pf-u-ml-md" isInline variant="link" onClick={this.onOpenClick}>
+        Open drawer
+      </Button>
+    );
+
+    const steps = [
+      {
+        id: 0,
+        name: 'Information',
+        component: <p>Step 1 content</p>,
+        drawerPanelContent: informationPanelContent,
+        drawerToggleButton: drawerToggleButton
+      },
+      {
+        id: 1,
+        name: 'Configuration',
+        steps: [
+          {
+            id: 2,
+            name: 'Substep A',
+            component: <p>Configuration substep A</p>,
+            drawerPanelContent: configSubstepAPanelContent,
+            drawerToggleButton: drawerToggleButton
+          },
+          {
+            id: 3,
+            name: 'Substep B',
+            component: <p>Configuration substep B</p>,
+            drawerPanelContent: configSubstepBPanelContent,
+            drawerToggleButton: drawerToggleButton
+          }
+        ]
+      },
+      {
+        id: 4,
+        name: 'Additional',
+        component: <p>Step 3 content</p>,
+        drawerPanelContent: additionalPanelContent,
+        drawerToggleButton: drawerToggleButton
+      },
+      {
+        id: 5,
+        name: 'Review',
+        component: <p>Review step content</p>,
+        nextButtonText: 'Finish',
+        drawerPanelContent: reviewPanelContent,
+        drawerToggleButton: drawerToggleButton
+      }
+    ];
+    const title = 'Basic wizard';
+
+    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
+              hasDrawer
+              isDrawerExpanded={isDrawerExpanded}
+              navAriaLabel={`${title} steps`}
+              mainAriaLabel={`${title} content`}
+              steps={steps}
+            />
+          </PageSection>
+        </Page>
+      </React.Fragment>
+    );
+  }
+}
+```
+
+### In page, with drawer and informational step
+
+```js isFullscreen
+import React from 'react';
+import {
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelContent,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionTypes,
+  PageSectionVariants,
+  PageSidebar,
+  Progress,
+  SkipToContent,
+  Text,
+  TextContent,
+  Title,
+  Wizard,
+  Masthead,
+  PageToggleButton,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand
+} from '@patternfly/react-core';
+import imgBrand from './imgBrand.svg';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+class FullPageWizard 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 = 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={imgBrand} alt="Patternfly logo" />
+          </MastheadBrand>
+        </MastheadMain>
+      </Masthead>
+    );
+    const Sidebar = <PageSidebar nav={PageNav} />;
+    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 informationPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Information panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const configSubstepAPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Configuration substep A content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const configSubstepBPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Configuration substep B content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const additionalPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Additional panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const reviewPanelContent = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            Review panel content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const drawerToggleButton = (
+      <Button className="pf-u-float-right pf-u-ml-md" isInline variant="link" onClick={this.onOpenClick}>
+        Open drawer
+      </Button>
+    );
+
+    const steps = [
+      {
+        id: 0,
+        name: 'Information',
+        component: (
+          <TextContent>
+            <Text component={TextVariants.h1}>Information step 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>
+        ),
+        drawerPanelContent: informationPanelContent
+      },
+      {
+        id: 1,
+        name: 'Configuration',
+        steps: [
+          {
+            id: 2,
+            name: 'Substep A',
+            component: (
+              <TextContent>
+                <Text component={TextVariants.h1}>Configuration substep A 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>
+            ),
+            drawerPanelContent: configSubstepAPanelContent
+          },
+          {
+            id: 3,
+            name: 'Substep B',
+            component: (
+              <TextContent>
+                <Text component={TextVariants.h1}>Configuration substep B 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>
+            ),
+            drawerPanelContent: configSubstepBPanelContent
+          }
+        ]
+      },
+      {
+        id: 4,
+        name: 'Additional',
+        component: (
+          <TextContent>
+            <Text component={TextVariants.h1}>Additional step 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>
+        ),
+        drawerPanelContent: additionalPanelContent
+      },
+      {
+        id: 5,
+        name: 'Review',
+        component: (
+          <TextContent>
+            <Text component={TextVariants.h1}>Review step 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>
+        ),
+        nextButtonText: 'Finish',
+        drawerPanelContent: reviewPanelContent
+      }
+    ];
+    const title = 'Basic wizard';
+
+    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
+              hasDrawer
+              isDrawerExpanded={isDrawerExpanded}
+              navAriaLabel={`${title} steps`}
+              mainAriaLabel={`${title} content`}
+              steps={steps}
+            />
+          </PageSection>
+        </Page>
+      </React.Fragment>
+    );
+  }
+}
+```