@patternfly/react-core 5.0.0-alpha.9 → 5.0.0-alpha.91

package/src/demos/Wizard/WizardDemo.md

@@ -1,6 +1,7 @@
 ---
 id: Wizard
 section: components
+source: react-demos
 ---
 
 import imgBrand from './imgBrand.svg';
@@ -18,54 +19,21 @@ import {
   CardBody,
   Gallery,
   GalleryItem,
-  Nav,
-  NavItem,
-  NavList,
   PageSection,
-  Wizard,
   Modal,
-  ModalVariant
+  ModalVariant,
+  Wizard,
+  WizardHeader,
+  WizardStep
 } from '@patternfly/react-core';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
-class BasicWizardDemo extends React.Component {
+class WizardInModalDemo extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onNavSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
   }
-  render() {
-    const { activeItem } = this.state;
 
-    const steps = [
-      { id: 0, name: 'Information', component: <p>Step 1 content</p> },
-      {
-        id: 1,
-        name: 'Configuration',
-        steps: [
-          {
-            id: 2,
-            name: 'Substep A',
-            component: <p>Configuration substep A</p>
-          },
-          {
-            id: 3,
-            name: 'Substep B',
-            component: <p>Configuration substep B</p>
-          }
-        ],
-        component: <p>Step 2 content</p>
-      },
-      { id: 4, name: 'Additional', component: <p>Step 3 content</p> },
-      { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
-    ];
-    const title = 'Basic wizard';
+  render() {
     return (
       <React.Fragment>
         <DashboardWrapper hasPageTemplateTitle>
@@ -90,15 +58,39 @@ class BasicWizardDemo extends React.Component {
           aria-labelledby="wiz-modal-demo-title"
         >
           <Wizard
-            navAriaLabel={`${title} steps`}
-            mainAriaLabel={`${title} content`}
-            titleId="wiz-modal-demo-title"
-            descriptionId="wiz-modal-demo-description"
-            title="Simple wizard in modal"
-            description="Simple wizard description"
-            steps={steps}
+            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>
     );
@@ -112,13 +104,17 @@ class BasicWizardDemo extends React.Component {
 import React from 'react';
 import {
   Button,
+  Drawer,
   DrawerActions,
   DrawerCloseButton,
+  DrawerContent,
   DrawerPanelContent,
   DrawerHead,
   Modal,
   ModalVariant,
-  Wizard
+  Wizard,
+  WizardHeader,
+  WizardStep
 } from '@patternfly/react-core';
 
 class WizardModalWithDrawerDemo extends React.Component {
@@ -149,131 +145,30 @@ class WizardModalWithDrawerDemo extends React.Component {
   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
+    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>
           }
-        ]
-      },
-      {
-        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>
+        >
+          {!isDrawerExpanded && (
+            <Button isInline variant="link" onClick={this.onOpenClick}>
+              Open drawer
+            </Button>
+          )}
+          <div>{stepName} content</div>
+        </DrawerContent>
+      </Drawer>
     );
 
     return (
@@ -286,18 +181,39 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-labelledby="wiz-modal-demo-title"
       >
         <Wizard
-          navAriaLabel={`${title} steps`}
-          hasDrawer
-          isDrawerExpanded={isDrawerExpanded}
-          onExpandDrawer={this.onExpand}
-          mainAriaLabel={`${title} content`}
-          titleId="wiz-modal-demo-title"
-          descriptionId="wiz-modal-demo-description"
-          title="Simple wizard in modal"
-          description="Simple wizard description"
-          steps={steps}
+          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>
     );
   }
@@ -310,18 +226,22 @@ class WizardModalWithDrawerDemo extends React.Component {
 import React from 'react';
 import {
   Button,
+  Drawer,
   DrawerActions,
   DrawerCloseButton,
+  DrawerContent,
   DrawerPanelContent,
   DrawerHead,
   Modal,
   ModalVariant,
   Text,
   TextContent,
-  Wizard
+  Wizard,
+  WizardHeader,
+  WizardStep
 } from '@patternfly/react-core';
 
-class WizardModalWithDrawerDemo extends React.Component {
+class WizardModalWithDrawerInfoStepDemo extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -349,84 +269,24 @@ class WizardModalWithDrawerDemo extends React.Component {
   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: (
+    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}>Information step content</Text>
+            <Text component={TextVariants.h1}>{stepName} content</Text>
             <p>
               Wizard description goes here. If you need more assistance,{' '}
               <Button isInline variant="link" onClick={this.onOpenClick}>
@@ -435,96 +295,8 @@ class WizardModalWithDrawerDemo extends React.Component {
               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>
+        </DrawerContent>
+      </Drawer>
     );
 
     return (
@@ -537,18 +309,39 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-labelledby="wiz-modal-demo-title"
       >
         <Wizard
-          navAriaLabel={`${title} steps`}
-          hasDrawer
-          isDrawerExpanded={isDrawerExpanded}
-          onExpandDrawer={this.onExpand}
-          mainAriaLabel={`${title} content`}
-          titleId="wiz-modal-demo-title"
-          descriptionId="wiz-modal-demo-description"
-          title="Simple wizard in modal"
-          description="Simple wizard description"
-          steps={steps}
+          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>
     );
   }
@@ -559,63 +352,41 @@ class WizardModalWithDrawerDemo extends React.Component {
 
 ```js isFullscreen
 import React from 'react';
-import {
-  Nav,
-  NavItem,
-  NavList,
-  PageSection,
-  PageSectionTypes,
-  PageSectionVariants,
-  Wizard
-} from '@patternfly/react-core';
-import imgBrand from './imgBrand.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import { PageSection, PageSectionTypes, PageSectionVariants, Wizard, WizardStep } from '@patternfly/react-core';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
-class FullPageWizard extends React.Component {
+class WizardFullPage extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onNavSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
   }
   render() {
-    const { activeItem } = this.state;
-
-    const steps = [
-      { id: 0, name: 'Information', component: <p>Step 1 content</p> },
-      {
-        id: 1,
-        name: 'Configuration',
-        steps: [
-          {
-            id: 2,
-            name: 'Substep A',
-            component: <p>Configuration substep A</p>
-          },
-          {
-            id: 3,
-            name: 'Substep B',
-            component: <p>Configuration substep B</p>
-          }
-        ],
-        component: <p>Step 2 content</p>
-      },
-      { id: 4, name: 'Additional', component: <p>Step 3 content</p> },
-      { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
-    ];
-    const title = 'Basic wizard';
-
     return (
       <React.Fragment>
         <DashboardWrapper hasPageTemplateTitle>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} />
+            <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>
@@ -633,10 +404,12 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   Button,
+  Drawer,
   DrawerActions,
   DrawerCloseButton,
-  DrawerHead,
+  DrawerContent,
   DrawerPanelContent,
+  DrawerHead,
   Nav,
   NavItem,
   NavList,
@@ -645,22 +418,22 @@ import {
   PageSectionTypes,
   PageSectionVariants,
   PageSidebar,
-  Progress,
+  PageSidebarBody,
   SkipToContent,
   Text,
   TextContent,
-  Title,
-  Wizard,
   Masthead,
   PageToggleButton,
   MastheadToggle,
   MastheadMain,
-  MastheadBrand
+  MastheadBrand,
+  Wizard,
+  WizardStep
 } 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 {
+class WizardFullPageWithDrawerDemo extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -685,7 +458,7 @@ class FullPageWizard extends React.Component {
         isDrawerExpanded: false
       });
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -728,7 +501,11 @@ class FullPageWizard extends React.Component {
         </MastheadMain>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    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 = (
@@ -742,122 +519,31 @@ class FullPageWizard extends React.Component {
       </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
+    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>
           }
-        ]
-      },
-      {
-        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';
+        >
+          {!isDrawerExpanded && (
+            <Button isInline variant="link" onClick={this.onOpenClick}>
+              Open drawer
+            </Button>
+          )}
+          <div>{stepName} content</div>
+        </DrawerContent>
+      </Drawer>
+    );
 
     return (
       <React.Fragment>
@@ -876,14 +562,29 @@ class FullPageWizard extends React.Component {
             </TextContent>
           </PageSection>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard
-              hasDrawer
-              isDrawerExpanded={isDrawerExpanded}
-              onExpandDrawer={this.onExpand}
-              navAriaLabel={`${title} steps`}
-              mainAriaLabel={`${title} content`}
-              steps={steps}
-            />
+            <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>
@@ -901,8 +602,10 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   Button,
+  Drawer,
   DrawerActions,
   DrawerCloseButton,
+  DrawerContent,
   DrawerHead,
   DrawerPanelContent,
   Nav,
@@ -913,22 +616,22 @@ import {
   PageSectionTypes,
   PageSectionVariants,
   PageSidebar,
-  Progress,
+  PageSidebarBody,
   SkipToContent,
   Text,
   TextContent,
-  Title,
-  Wizard,
   Masthead,
   PageToggleButton,
   MastheadToggle,
   MastheadMain,
-  MastheadBrand
+  MastheadBrand,
+  Wizard,
+  WizardStep
 } 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 {
+class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -953,7 +656,7 @@ class FullPageWizard extends React.Component {
         isDrawerExpanded: false
       });
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -996,7 +699,11 @@ class FullPageWizard extends React.Component {
         </MastheadMain>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    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 = (
@@ -1010,84 +717,24 @@ class FullPageWizard extends React.Component {
       </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: (
+    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}>Information step content</Text>
+            <Text component={TextVariants.h1}>{stepName} content</Text>
             <p>
               Wizard description goes here. If you need more assistance,{' '}
               <Button isInline variant="link" onClick={this.onOpenClick}>
@@ -1096,86 +743,9 @@ class FullPageWizard extends React.Component {
               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';
+        </DrawerContent>
+      </Drawer>
+    );
 
     return (
       <React.Fragment>
@@ -1194,14 +764,29 @@ class FullPageWizard extends React.Component {
             </TextContent>
           </PageSection>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard
-              hasDrawer
-              isDrawerExpanded={isDrawerExpanded}
-              onExpandDrawer={this.onExpand}
-              navAriaLabel={`${title} steps`}
-              mainAriaLabel={`${title} content`}
-              steps={steps}
-            />
+            <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>