From 97ed6d8ee4e1f4008d890b41f8556c6b106774d9 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 18 Apr 2023 15:36:08 -0400
Subject: [PATCH 1/5] chore(Wizard): updated demos to use new Wizard

---
 .../react-core/src/demos/Wizard/WizardDemo.md | 508 +++++-------------
 1 file changed, 142 insertions(+), 366 deletions(-)

diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md
index 6fc75a9a179..4e87cfef88c 100644
--- a/packages/react-core/src/demos/Wizard/WizardDemo.md
+++ b/packages/react-core/src/demos/Wizard/WizardDemo.md
@@ -25,18 +25,20 @@ import {
   NavList,
   PageSection,
   Modal,
-  ModalVariant
+  ModalVariant,
+  Wizard,
+  WizardHeader,
+  WizardStep
 } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 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.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -45,28 +47,6 @@ class BasicWizardDemo extends React.Component {
   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>
@@ -91,16 +71,32 @@ class BasicWizardDemo extends React.Component {
           aria-describedby="wiz-modal-demo-description"
           aria-labelledby="wiz-modal-demo-title"
         >
-          <WizardDeprecated
-            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}
+          <Wizard
+            header={<WizardHeader title="Wizard in modal" description="Simple wizard description" />}
             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" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+              <p>Review step content</p>
+            </WizardStep>
+          </Wizard>
         </Modal>
       </React.Fragment>
     );
@@ -114,14 +110,18 @@ class BasicWizardDemo extends React.Component {
 import React from 'react';
 import {
   Button,
+  Drawer,
   DrawerActions,
   DrawerCloseButton,
+  DrawerContent,
   DrawerPanelContent,
   DrawerHead,
   Modal,
-  ModalVariant
+  ModalVariant,
+  Wizard,
+  WizardHeader,
+  WizardStep
 } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 class WizardModalWithDrawerDemo extends React.Component {
   constructor(props) {
@@ -151,131 +151,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 (
@@ -287,19 +186,32 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-describedby="wiz-modal-demo-description"
         aria-labelledby="wiz-modal-demo-title"
       >
-        <WizardDeprecated
-          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}
+        <Wizard
+          header={<WizardHeader title="Wizard in modal with drawer" description="Simple wizard 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 name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+                {createStepContentWithDrawer('Configuration substep A')}
+              </WizardStep>,
+              <WizardStep name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+                {createStepContentWithDrawer('Configuration substep B')}
+              </WizardStep>
+            ]}
+          />
+          <WizardStep name="Additional" id="wizard-step-3">
+            {createStepContentWithDrawer('Additional step')}
+          </WizardStep>
+          <WizardStep name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+            {createStepContentWithDrawer('Review step')}
+          </WizardStep>
+        </Wizard>
       </Modal>
     );
   }
@@ -312,18 +224,22 @@ class WizardModalWithDrawerDemo extends React.Component {
 import React from 'react';
 import {
   Button,
+  Drawer,
   DrawerActions,
   DrawerCloseButton,
+  DrawerContent,
   DrawerPanelContent,
   DrawerHead,
   Modal,
   ModalVariant,
   Text,
-  TextContent
+  TextContent,
+  Wizard,
+  WizardHeader,
+  WizardStep
 } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
-class WizardModalWithDrawerDemo extends React.Component {
+class WizardModalWithDrawerInfoStepDemo extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -351,84 +267,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}>
@@ -437,96 +293,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 (
@@ -538,19 +306,34 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-describedby="wiz-modal-demo-description"
         aria-labelledby="wiz-modal-demo-title"
       >
-        <WizardDeprecated
-          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}
+        <Wizard
+          header={
+            <WizardHeader title="Wizard in modal with drawer and info step" description="Simple wizard 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 name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+                {createStepContentWithDrawer('Configuration substep A')}
+              </WizardStep>,
+              <WizardStep name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+                {createStepContentWithDrawer('Configuration substep B')}
+              </WizardStep>
+            ]}
+          />
+          <WizardStep name="Additional" id="wizard-step-3">
+            {createStepContentWithDrawer('Additional step')}
+          </WizardStep>
+          <WizardStep name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+            {createStepContentWithDrawer('Review step')}
+          </WizardStep>
+        </Wizard>
       </Modal>
     );
   }
@@ -561,14 +344,7 @@ class WizardModalWithDrawerDemo extends React.Component {
 
 ```js isFullscreen
 import React from 'react';
-import {
-  Nav,
-  NavItem,
-  NavList,
-  PageSection,
-  PageSectionTypes,
-  PageSectionVariants
-} from '@patternfly/react-core';
+import { Nav, NavItem, NavList, PageSection, PageSectionTypes, PageSectionVariants } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
@@ -580,7 +356,7 @@ class FullPageWizard extends React.Component {
     this.state = {
       activeItem: 0
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -687,7 +463,7 @@ class FullPageWizard extends React.Component {
         isDrawerExpanded: false
       });
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -955,7 +731,7 @@ class FullPageWizard extends React.Component {
         isDrawerExpanded: false
       });
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });

From 74366a75cc684608146a2fa7a8d47d0ba38b6002 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 18 Apr 2023 16:08:34 -0400
Subject: [PATCH 2/5] Updated non-modal demos

---
 .../react-core/src/demos/Wizard/WizardDemo.md | 476 ++++++------------
 1 file changed, 145 insertions(+), 331 deletions(-)

diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md
index 4e87cfef88c..77ec6137f35 100644
--- a/packages/react-core/src/demos/Wizard/WizardDemo.md
+++ b/packages/react-core/src/demos/Wizard/WizardDemo.md
@@ -197,18 +197,18 @@ class WizardModalWithDrawerDemo extends React.Component {
             name="Configuration"
             id="wizard-step-2"
             steps={[
-              <WizardStep name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+              <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
                 {createStepContentWithDrawer('Configuration substep A')}
               </WizardStep>,
-              <WizardStep name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+              <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
                 {createStepContentWithDrawer('Configuration substep B')}
               </WizardStep>
             ]}
           />
-          <WizardStep name="Additional" id="wizard-step-3">
+          <WizardStep body={null} name="Additional" id="wizard-step-3">
             {createStepContentWithDrawer('Additional step')}
           </WizardStep>
-          <WizardStep name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          <WizardStep body={null} name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
             {createStepContentWithDrawer('Review step')}
           </WizardStep>
         </Wizard>
@@ -319,18 +319,18 @@ class WizardModalWithDrawerInfoStepDemo extends React.Component {
             name="Configuration"
             id="wizard-step-2"
             steps={[
-              <WizardStep name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+              <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
                 {createStepContentWithDrawer('Configuration substep A')}
               </WizardStep>,
-              <WizardStep name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+              <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
                 {createStepContentWithDrawer('Configuration substep B')}
               </WizardStep>
             ]}
           />
-          <WizardStep name="Additional" id="wizard-step-3">
+          <WizardStep body={null} name="Additional" id="wizard-step-3">
             {createStepContentWithDrawer('Additional step')}
           </WizardStep>
-          <WizardStep name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          <WizardStep body={null} name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
             {createStepContentWithDrawer('Review step')}
           </WizardStep>
         </Wizard>
@@ -344,13 +344,21 @@ class WizardModalWithDrawerInfoStepDemo extends React.Component {
 
 ```js isFullscreen
 import React from 'react';
-import { Nav, NavItem, NavList, PageSection, PageSectionTypes, PageSectionVariants } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
+import {
+  Nav,
+  NavItem,
+  NavList,
+  PageSection,
+  PageSectionTypes,
+  PageSectionVariants,
+  Wizard,
+  WizardStep
+} from '@patternfly/react-core';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 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 = {
@@ -365,35 +373,33 @@ class FullPageWizard extends React.Component {
   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}>
-            <WizardDeprecated 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" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+                <p>Review step content</p>
+              </WizardStep>
+            </Wizard>
           </PageSection>
         </DashboardWrapper>
       </React.Fragment>
@@ -411,10 +417,12 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   Button,
+  Drawer,
   DrawerActions,
   DrawerCloseButton,
-  DrawerHead,
+  DrawerContent,
   DrawerPanelContent,
+  DrawerHead,
   Nav,
   NavItem,
   NavList,
@@ -432,13 +440,14 @@ import {
   PageToggleButton,
   MastheadToggle,
   MastheadMain,
-  MastheadBrand
+  MastheadBrand,
+  Wizard,
+  WizardStep
 } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 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 = {
@@ -520,122 +529,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>
@@ -654,14 +572,29 @@ class FullPageWizard extends React.Component {
             </TextContent>
           </PageSection>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <WizardDeprecated
-              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" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+                {createStepContentWithDrawer('Review step')}
+              </WizardStep>
+            </Wizard>
           </PageSection>
         </Page>
       </React.Fragment>
@@ -679,8 +612,10 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   Button,
+  Drawer,
   DrawerActions,
   DrawerCloseButton,
+  DrawerContent,
   DrawerHead,
   DrawerPanelContent,
   Nav,
@@ -700,13 +635,14 @@ import {
   PageToggleButton,
   MastheadToggle,
   MastheadMain,
-  MastheadBrand
+  MastheadBrand,
+  Wizard,
+  WizardStep
 } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 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 = {
@@ -788,84 +724,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}>
@@ -874,86 +750,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>
@@ -972,14 +771,29 @@ class FullPageWizard extends React.Component {
             </TextContent>
           </PageSection>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <WizardDeprecated
-              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" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+                {createStepContentWithDrawer('Review step')}
+              </WizardStep>
+            </Wizard>
           </PageSection>
         </Page>
       </React.Fragment>

From f2ecd99e3a0dc8a9b3929c54a32e17ce96e78a70 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 19 Apr 2023 09:34:43 -0400
Subject: [PATCH 3/5] Updated integration tests

---
 .../cypress/integration/wizard.spec.ts        |  46 ++--
 .../integration/wizarddeprecated.spec.ts      |  43 ++++
 .../demo-app-ts/src/Demos.ts                  |   5 +
 .../demos/WizardDemo/WizardDemo.tsx           | 239 ++++++++++--------
 .../WizardDeprecatedDemo.tsx                  | 142 +++++++++++
 .../demo-app-ts/src/components/demos/index.ts |   8 +-
 6 files changed, 354 insertions(+), 129 deletions(-)
 create mode 100644 packages/react-integration/cypress/integration/wizarddeprecated.spec.ts
 create mode 100644 packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx

diff --git a/packages/react-integration/cypress/integration/wizard.spec.ts b/packages/react-integration/cypress/integration/wizard.spec.ts
index 027dbf5603d..6454874f1af 100644
--- a/packages/react-integration/cypress/integration/wizard.spec.ts
+++ b/packages/react-integration/cypress/integration/wizard.spec.ts
@@ -6,7 +6,7 @@ describe('Wizard Demo Test', () => {
   it('Verify wizard in modal launches in a dialog and has a custom width', () => {
     cy.get('#launchWiz').click();
     cy.get('#modalWizId.pf-c-wizard').should('exist');
-    cy.get('.pf-c-modal-box').should('have.attr', 'style', 'width: 710px;');
+    cy.get('#modalWizId.pf-c-wizard').should('have.attr', 'style', 'width: 710px;');
     cy.focused().click();
   });
 
@@ -21,27 +21,31 @@ describe('Wizard Demo Test', () => {
     cy.get('#inPageWizId.pf-c-wizard').should('exist');
   });
 
-  it('Verify wizard step content is focusable only if content overflows', () => {
-    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').should('not.have.attr', 'tabindex');
-    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').click();
-    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').should('not.have.focus');
-    cy.get('#wizard-focusable-overflow button.pf-c-wizard__nav-link')
-      .last()
-      .click();
-    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').should('have.attr', 'tabindex');
-    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').click();
-    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').should('have.focus');
+  it('Verify in-page wizard step content is focusable and has role only if content overflows', () => {
+    cy.get('#inPageWizWithOverflow .pf-c-wizard__main').should('not.have.attr', 'tabindex');
+    cy.get('#inPageWizWithOverflow .pf-c-wizard__main').should('not.have.attr', 'role');
+    cy.get('#inPageWizWithOverflow .pf-c-wizard__main').click();
+    cy.get('#inPageWizWithOverflow .pf-c-wizard__main').should('not.have.focus');
+    cy.get('#inPageWizWithOverflow button.pf-c-wizard__nav-link').last().click();
+    cy.get('#inPageWizWithOverflow .pf-c-wizard__main').should('have.attr', 'tabindex');
+    cy.get('#inPageWizWithOverflow .pf-c-wizard__main').should('have.attr', 'role').and('eq', 'region');
+    cy.get('#inPageWizWithOverflow .pf-c-wizard__main').click();
+    cy.get('#inPageWizWithOverflow .pf-c-wizard__main').should('have.focus');
   });
 
-  it('Verify role attribute is applied correctly', () => {
-    cy.get('#wizard-correct-role .pf-c-wizard__main').should('not.have.attr', 'role');
-    cy.get('#wizard-correct-role button.pf-c-wizard__nav-link')
-      .last()
-      .click();
-    cy.get('#wizard-correct-role .pf-c-wizard__main').should('have.attr', 'role');
-    cy.get('#wizard-correct-role .pf-c-wizard__main button').click();
-    // Within a modal, wizard body uses the <main> element and should not have a role applied
-    cy.get('#wizard-correct-role .pf-c-wizard__main').should('not.have.attr', 'role');
-    cy.get('#wizard-correct-role .pf-c-wizard__close').click();
+  it('Verify modal wizard step content with main element is focusable only if content overflows', () => {
+    cy.get('#launchWizOverflow').click();
+    cy.get('#inModalWizWithOverflow.pf-c-wizard').should('exist');
+    cy.get('#inModalWizWithOverflow .pf-c-wizard__main').should('not.have.attr', 'tabindex');
+    cy.get('#inModalWizWithOverflow .pf-c-wizard__main').should('not.have.attr', 'role');
+    cy.get('#inModalWizWithOverflow .pf-c-wizard__main').click();
+    cy.get('#inModalWizWithOverflow .pf-c-wizard__main').should('not.have.focus');
+    cy.get('#inModalWizWithOverflow button.pf-c-wizard__nav-link').last().click();
+    cy.get('#inModalWizWithOverflow main.pf-c-wizard__main').should('exist');
+    cy.get('#inModalWizWithOverflow main.pf-c-wizard__main').should('have.attr', 'tabindex');
+    // When WizardBody component is not a div, it should not have a role applied
+    cy.get('#inModalWizWithOverflow main.pf-c-wizard__main').should('not.have.attr', 'role');
+    cy.get('#inModalWizWithOverflow main.pf-c-wizard__main').click();
+    cy.get('#inModalWizWithOverflow main.pf-c-wizard__main').should('have.focus');
   });
 });
diff --git a/packages/react-integration/cypress/integration/wizarddeprecated.spec.ts b/packages/react-integration/cypress/integration/wizarddeprecated.spec.ts
new file mode 100644
index 00000000000..c32a1d91c86
--- /dev/null
+++ b/packages/react-integration/cypress/integration/wizarddeprecated.spec.ts
@@ -0,0 +1,43 @@
+describe('Wizard Deprecated Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/wizard-deprecated-demo-nav-link');
+  });
+
+  it('Verify wizard in modal launches in a dialog and has a custom width', () => {
+    cy.get('#launchWiz').click();
+    cy.get('#modalWizId.pf-c-wizard').should('exist');
+    cy.get('.pf-c-modal-box').should('have.attr', 'style', 'width: 710px;');
+    cy.focused().click();
+  });
+
+  it('Verify wizard in modal sends focus to the new content', () => {
+    cy.get('#launchWiz').click();
+    cy.get('#modalWizId.pf-c-wizard').should('exist');
+    cy.focused().should('have.class', 'pf-c-wizard__close');
+    cy.focused().click();
+  });
+
+  it('Verify in page wizard displays on page render', () => {
+    cy.get('#inPageWizId.pf-c-wizard').should('exist');
+  });
+
+  it('Verify wizard step content is focusable only if content overflows', () => {
+    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').should('not.have.attr', 'tabindex');
+    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').click();
+    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').should('not.have.focus');
+    cy.get('#wizard-focusable-overflow button.pf-c-wizard__nav-link').last().click();
+    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').should('have.attr', 'tabindex');
+    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').click();
+    cy.get('#wizard-focusable-overflow .pf-c-wizard__main').should('have.focus');
+  });
+
+  it('Verify role attribute is applied correctly', () => {
+    cy.get('#wizard-correct-role .pf-c-wizard__main').should('not.have.attr', 'role');
+    cy.get('#wizard-correct-role button.pf-c-wizard__nav-link').last().click();
+    cy.get('#wizard-correct-role .pf-c-wizard__main').should('have.attr', 'role');
+    cy.get('#wizard-correct-role .pf-c-wizard__main button').click();
+    // Within a modal, wizard body uses the <main> element and should not have a role applied
+    cy.get('#wizard-correct-role .pf-c-wizard__main').should('not.have.attr', 'role');
+    cy.get('#wizard-correct-role .pf-c-wizard__close').click();
+  });
+});
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index 3e9b9d9ad96..638f4410a72 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -511,6 +511,11 @@ export const Demos: DemoInterface[] = [
     id: 'wizard-demo',
     name: 'Wizard Demo',
     componentType: Examples.WizardDemo
+  },
+  {
+    id: 'wizard-deprecated-demo',
+    name: 'Wizard Deprecated Demo',
+    componentType: Examples.WizardDeprecatedDemo
   }
 ];
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
index 35c8c31ebc3..7211e39f757 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@patternfly/react-core';
-import { Wizard, WizardStep } from '@patternfly/react-core/deprecated'
 import React from 'react';
+import { Button, Modal, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 
 interface WizardDemoState {
   isOpen: boolean;
@@ -28,114 +29,144 @@ export class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
   }
 
   render() {
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p> },
-      {
-        name: 'B',
-        steps: [
-          {
-            name: 'B-1',
-            component: <p>Step 2</p>,
-            enableNext: true
-          },
-          {
-            name: 'B-2',
-            component: <p>Step 3</p>,
-            enableNext: false,
-            canJumpTo: false
-          }
-        ]
-      },
-      { name: 'C', component: <p>Step 4</p> },
-      { name: 'D', component: <p>Step 5</p> }
-    ];
-    const stepsWithAnchorLinks: WizardStep[] = [
-      {
-        name: 'Read about PF3',
-        component: <p>Step 1</p>,
-        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v3/', target: '_blank' }
-      },
-      {
-        name: 'Read about PF4',
-        component: <p>Step 2</p>,
-        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v4/', target: '_blank' }
-      },
-      {
-        name: 'Review',
-        component: <p>Step 3</p>,
-        stepNavItemProps: { navItemComponent: 'button', href: 'hhttps://www.patternfly.org/v4/' }
-      }
-    ];
+    const { isOpen, isOpenWithRole } = this.state;
 
-    const stepsOnOverflow: WizardStep[] = [
-      {
-        name: 'Step without overflow',
-        component: <p>Step 1</p>
-      },
-      {
-        name: 'Step with overflow',
-        component: (
-          <div style={{ height: '800px' }}>
-            <p>Step 2</p>
-            <button onClick={this.handleRoleWizardToggle}>Open wizard in modal</button>
-          </div>
-        )
-      }
-    ];
     return (
       <React.Fragment>
         <Button id="launchWiz" variant="primary" onClick={this.handleModalToggle}>
           Show Modal
         </Button>
-        <Wizard
-          title="Simple Wizard"
-          description="Simple Wizard Description"
-          steps={steps}
-          startAtStep={1}
-          id="modalWizId"
-          onClose={this.handleModalToggle}
-          isOpen={this.state.isOpen}
-          width={710}
-        />
-        <Wizard
-          title="Wizard title"
-          description="Description here"
-          id="inPageWizId"
-          hideClose
-          steps={steps}
-          startAtStep={1}
-          height={500}
-          isNavExpandable
-        />
-        <Wizard
-          title="Wizard with anchor"
-          description="This wizard uses anchor tags for the nav item elements"
-          id="inPageWizWithAnchorsId"
-          hideClose
-          steps={stepsWithAnchorLinks}
-          startAtStep={1}
-          height={500}
-        />
-        <Wizard
-          title="Wizard with focusable content on overflow"
-          description="This wizard has content that is focusable only when the content causes an overflow"
-          id="wizard-focusable-overflow"
-          steps={stepsOnOverflow}
-          startAtStep={1}
-          height={500}
-          mainAriaLabel="Step content"
-        />
-        <Wizard
-          title="Wizard with role"
-          description="This wizard has a body that has a role of region only when content overflows and when the wizard is not in a modal."
-          id="wizard-correct-role"
-          steps={stepsOnOverflow}
-          startAtStep={1}
-          height={500}
-          mainAriaLabel="Step content"
-          onClose={this.handleRoleWizardToggle}
-          {...(this.state.isOpenWithRole && { isOpen: true })}
-        />
+        <Modal isOpen={isOpen} showClose={false} hasNoBodyWrapper onEscapePress={this.handleModalToggle}>
+          <Wizard
+            id="modalWizId"
+            width={710}
+            onClose={this.handleModalToggle}
+            header={
+              <WizardHeader
+                onClose={this.handleModalToggle}
+                title="Simple Modal Wizard"
+                description="Simple Wizard Description"
+              />
+            }
+          >
+            <WizardStep name="A" id="wizard-step-a">
+              <p>Step 1</p>
+            </WizardStep>
+            <WizardStep
+              name="B"
+              id="wizard-step-b"
+              steps={[
+                <WizardStep name="B-1" id="wizard-step-b1" key="wizard-step-b1">
+                  <p>Step 2</p>
+                </WizardStep>,
+                <WizardStep name="B-2" id="wizard-step-b2" key="wizard-step-b2">
+                  <p>Step 3</p>
+                </WizardStep>
+              ]}
+            />
+            <WizardStep name="C" id="wizard-step-c">
+              <p>Step 4</p>
+            </WizardStep>
+            <WizardStep name="D" id="wizard-step-d">
+              <p>Step 5</p>
+            </WizardStep>
+          </Wizard>
+        </Modal>
+        <Wizard id="inPageWizId" height={500}>
+          <WizardStep name="A" id="wizard-step-a">
+            <p>Step 1</p>
+          </WizardStep>
+          <WizardStep
+            name="B"
+            id="wizard-step-b"
+            steps={[
+              <WizardStep name="B-1" id="wizard-step-b1" key="wizard-step-b1">
+                <p>Step 2</p>
+              </WizardStep>,
+              <WizardStep name="B-2" id="wizard-step-b2" key="wizard-step-b2">
+                <p>Step 3</p>
+              </WizardStep>
+            ]}
+          />
+          <WizardStep name="C" id="wizard-step-c">
+            <p>Step 4</p>
+          </WizardStep>
+          <WizardStep name="D" id="wizard-step-d">
+            <p>Step 5</p>
+          </WizardStep>
+        </Wizard>
+        <Wizard id="inPageWizWithAnchorsId" height={500}>
+          <WizardStep
+            name={
+              <>
+                <ExternalLinkAltIcon /> Read about PF3
+              </>
+            }
+            id="wizard-anchor-pf3"
+            navItem={{ component: 'a', href: 'https://www.patternfly.org/v3', target: '_blank' }}
+          >
+            <p>Step 1</p>
+          </WizardStep>
+          <WizardStep
+            name={
+              <>
+                <ExternalLinkAltIcon /> Read about PF4
+              </>
+            }
+            id="wizard-anchor-pf4"
+            navItem={{ component: 'a', href: 'https://www.patternfly.org/v4', target: '_blank' }}
+          >
+            <p>Step 2</p>
+          </WizardStep>
+          <WizardStep
+            name={
+              <>
+                <SlackHashIcon /> Join us on Slack
+              </>
+            }
+            id="wizard-anchor-slack"
+            navItem={{ component: 'a', href: 'https://patternfly.slack.com', target: '_blank' }}
+          >
+            <p>Step 3</p>
+          </WizardStep>
+        </Wizard>
+        <Wizard id="inPageWizWithOverflow" height={500}>
+          <WizardStep name="Step without overflow" id="wizard-overflow-without">
+            <p>Step 1</p>
+          </WizardStep>
+          <WizardStep name="Step with overflow" id="wizard-overflow-with">
+            <div style={{ height: '800px' }}>
+              <p>Step 2</p>
+            </div>
+          </WizardStep>
+        </Wizard>
+        <Button id="launchWizOverflow" variant="primary" onClick={this.handleRoleWizardToggle}>
+          Show Modal with Overflow
+        </Button>
+        <Modal isOpen={isOpenWithRole} showClose={false} hasNoBodyWrapper onEscapePress={this.handleRoleWizardToggle}>
+          <Wizard
+            id="inModalWizWithOverflow"
+            height={400}
+            width={710}
+            onClose={this.handleRoleWizardToggle}
+            header={
+              <WizardHeader
+                onClose={this.handleRoleWizardToggle}
+                title="Modal Wizard with Overflow"
+                description="Simple Wizard Description"
+              />
+            }
+          >
+            <WizardStep body={{ component: 'main' }} name="Step without overflow" id="wizard-overflow-without">
+              <p>Step 1</p>
+            </WizardStep>
+            <WizardStep body={{ component: 'main' }} name="Step with overflow" id="wizard-overflow-with">
+              <div style={{ height: '800px' }}>
+                <p>Step 2</p>
+              </div>
+            </WizardStep>
+          </Wizard>
+        </Modal>
       </React.Fragment>
     );
   }
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx
new file mode 100644
index 00000000000..a090bfca972
--- /dev/null
+++ b/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx
@@ -0,0 +1,142 @@
+import { Button } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/deprecated';
+import React from 'react';
+
+interface WizardDeprecatedDemoState {
+  isOpen: boolean;
+  isOpenWithRole: boolean;
+}
+
+export class WizardDeprecatedDemo extends React.Component<React.HTMLProps<HTMLDivElement>, WizardDeprecatedDemoState> {
+  static displayName = 'WizardDemo';
+  state = {
+    isOpen: false,
+    isOpenWithRole: false
+  };
+
+  handleModalToggle = () => {
+    this.setState(({ isOpen }) => ({
+      isOpen: !isOpen
+    }));
+  };
+
+  handleRoleWizardToggle = () => {
+    this.setState(({ isOpenWithRole }) => ({ isOpenWithRole: !isOpenWithRole }));
+  };
+  componentDidMount() {
+    window.scrollTo(0, 0);
+  }
+
+  render() {
+    const steps: WizardStep[] = [
+      { name: 'A', component: <p>Step 1</p> },
+      {
+        name: 'B',
+        steps: [
+          {
+            name: 'B-1',
+            component: <p>Step 2</p>,
+            enableNext: true
+          },
+          {
+            name: 'B-2',
+            component: <p>Step 3</p>,
+            enableNext: false,
+            canJumpTo: false
+          }
+        ]
+      },
+      { name: 'C', component: <p>Step 4</p> },
+      { name: 'D', component: <p>Step 5</p> }
+    ];
+    const stepsWithAnchorLinks: WizardStep[] = [
+      {
+        name: 'Read about PF3',
+        component: <p>Step 1</p>,
+        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v3/', target: '_blank' }
+      },
+      {
+        name: 'Read about PF4',
+        component: <p>Step 2</p>,
+        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v4/', target: '_blank' }
+      },
+      {
+        name: 'Review',
+        component: <p>Step 3</p>,
+        stepNavItemProps: { navItemComponent: 'button', href: 'hhttps://www.patternfly.org/v4/' }
+      }
+    ];
+
+    const stepsOnOverflow: WizardStep[] = [
+      {
+        name: 'Step without overflow',
+        component: <p>Step 1</p>
+      },
+      {
+        name: 'Step with overflow',
+        component: (
+          <div style={{ height: '800px' }}>
+            <p>Step 2</p>
+            <button onClick={this.handleRoleWizardToggle}>Open wizard in modal</button>
+          </div>
+        )
+      }
+    ];
+    return (
+      <React.Fragment>
+        <Button id="launchWiz" variant="primary" onClick={this.handleModalToggle}>
+          Show Modal
+        </Button>
+        <Wizard
+          title="Simple Wizard"
+          description="Simple Wizard Description"
+          steps={steps}
+          startAtStep={1}
+          id="modalWizId"
+          onClose={this.handleModalToggle}
+          isOpen={this.state.isOpen}
+          width={710}
+        />
+        <Wizard
+          title="Wizard title"
+          description="Description here"
+          id="inPageWizId"
+          hideClose
+          steps={steps}
+          startAtStep={1}
+          height={500}
+          isNavExpandable
+        />
+        <Wizard
+          title="Wizard with anchor"
+          description="This wizard uses anchor tags for the nav item elements"
+          id="inPageWizWithAnchorsId"
+          hideClose
+          steps={stepsWithAnchorLinks}
+          startAtStep={1}
+          height={500}
+        />
+        <Wizard
+          title="Wizard with focusable content on overflow"
+          description="This wizard has content that is focusable only when the content causes an overflow"
+          id="wizard-focusable-overflow"
+          steps={stepsOnOverflow}
+          startAtStep={1}
+          height={500}
+          mainAriaLabel="Step content"
+        />
+        <Wizard
+          title="Wizard with role"
+          description="This wizard has a body that has a role of region only when content overflows and when the wizard is not in a modal."
+          id="wizard-correct-role"
+          steps={stepsOnOverflow}
+          startAtStep={1}
+          height={500}
+          mainAriaLabel="Step content"
+          onClose={this.handleRoleWizardToggle}
+          {...(this.state.isOpenWithRole && { isOpen: true })}
+        />
+      </React.Fragment>
+    );
+  }
+}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index 56c861ff4f1..2eadd9a9609 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -19,10 +19,9 @@ export * from './ClipboardCopyDemo/ClipboardCopyDemo';
 export * from './DataListDemo/DataListDemo';
 export * from './DataListDemo/DataListDraggableDemo';
 export * from './DataListDemo/DataListCompactDemo';
-export * from './ToolbarDemo/ToolbarDemo';
+export * from './DatePickerDemo/DatePickerDemo';
 export * from './DescriptionListDemo/DescriptionListDemo';
 export * from './DescriptionListDemo/DescriptionListBreakpointsDemo';
-export * from './ToolbarDemo/ToolbarVisibilityDemo';
 export * from './DrawerDemo/DrawerDemo';
 export * from './DrawerDemo/DrawerResizeDemo';
 export * from './DropdownDeprecatedDemo/DropdownDeprecatedDemo';
@@ -35,6 +34,7 @@ export * from './ExpandableSectionDemo/ExpandableSectionTruncateDemo';
 export * from './FileUploadDemo/FileUploadDemo';
 export * from './FormDemo/FormDemo';
 export * from './InputGroupDemo/InputGroupDemo';
+export * from './JumpLinksDemo/JumpLinksDemo';
 export * from './LabelDemo/LabelDemo';
 export * from './LabelGroupDemo/LabelGroupEditableDemo';
 export * from './LabelGroupDemo/LabelGroupVerticalDemo';
@@ -94,8 +94,8 @@ export * from './TextAreaDemo/TextAreaDemo';
 export * from './TextInputDemo/TextInputDemo';
 export * from './ToggleGroupDemo/ToggleGroupDemo';
 export * from './ToolbarDemo/ToolbarDemo';
+export * from './ToolbarDemo/ToolbarVisibilityDemo';
 export * from './TooltipDemo/TooltipDemo';
 export * from './TreeViewDemo/TreeViewDemo';
 export * from './WizardDemo/WizardDemo';
-export * from './JumpLinksDemo/JumpLinksDemo';
-export * from './DatePickerDemo/DatePickerDemo';
+export * from './WizardDeprecatedDemo/WizardDeprecatedDemo';

From 6111614ceb766345efc12e7fde2b0c365ec9865f Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 19 Apr 2023 11:40:46 -0400
Subject: [PATCH 4/5] Fixed a11y errors

---
 .../react-core/src/demos/Wizard/WizardDemo.md | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md
index 77ec6137f35..fb368717cdb 100644
--- a/packages/react-core/src/demos/Wizard/WizardDemo.md
+++ b/packages/react-core/src/demos/Wizard/WizardDemo.md
@@ -72,7 +72,15 @@ class WizardInModalDemo extends React.Component {
           aria-labelledby="wiz-modal-demo-title"
         >
           <Wizard
-            header={<WizardHeader title="Wizard in modal" description="Simple wizard description" />}
+            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">
@@ -187,7 +195,15 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-labelledby="wiz-modal-demo-title"
       >
         <Wizard
-          header={<WizardHeader title="Wizard in modal with drawer" description="Simple wizard description" />}
+          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">
@@ -308,7 +324,13 @@ class WizardModalWithDrawerInfoStepDemo extends React.Component {
       >
         <Wizard
           header={
-            <WizardHeader title="Wizard in modal with drawer and info step" description="Simple wizard description" />
+            <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}
         >

From 955d20933a54bd57e072da26bd71157d374b588f Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 20 Apr 2023 09:25:40 -0400
Subject: [PATCH 5/5] Fixed errors and unused imports

---
 .../react-core/src/demos/Wizard/WizardDemo.md | 55 +++----------------
 1 file changed, 8 insertions(+), 47 deletions(-)

diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md
index fb368717cdb..1aa820fdc87 100644
--- a/packages/react-core/src/demos/Wizard/WizardDemo.md
+++ b/packages/react-core/src/demos/Wizard/WizardDemo.md
@@ -7,7 +7,6 @@ source: react-demos
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -20,9 +19,6 @@ import {
   CardBody,
   Gallery,
   GalleryItem,
-  Nav,
-  NavItem,
-  NavList,
   PageSection,
   Modal,
   ModalVariant,
@@ -35,19 +31,9 @@ import DashboardWrapper from '@patternfly/react-core/src/demos/examples/Dashboar
 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 title = 'Basic wizard';
+  render() {
     return (
       <React.Fragment>
         <DashboardWrapper hasPageTemplateTitle>
@@ -101,7 +87,7 @@ class WizardInModalDemo extends React.Component {
             <WizardStep name="Additional" id="wizard-step-3">
               <p>Step 3 content</p>
             </WizardStep>
-            <WizardStep name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+            <WizardStep name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
               <p>Review step content</p>
             </WizardStep>
           </Wizard>
@@ -224,7 +210,7 @@ class WizardModalWithDrawerDemo extends React.Component {
           <WizardStep body={null} name="Additional" id="wizard-step-3">
             {createStepContentWithDrawer('Additional step')}
           </WizardStep>
-          <WizardStep body={null} name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
             {createStepContentWithDrawer('Review step')}
           </WizardStep>
         </Wizard>
@@ -352,7 +338,7 @@ class WizardModalWithDrawerInfoStepDemo extends React.Component {
           <WizardStep body={null} name="Additional" id="wizard-step-3">
             {createStepContentWithDrawer('Additional step')}
           </WizardStep>
-          <WizardStep body={null} name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
             {createStepContentWithDrawer('Review step')}
           </WizardStep>
         </Wizard>
@@ -366,35 +352,14 @@ class WizardModalWithDrawerInfoStepDemo extends React.Component {
 
 ```js isFullscreen
 import React from 'react';
-import {
-  Nav,
-  NavItem,
-  NavList,
-  PageSection,
-  PageSectionTypes,
-  PageSectionVariants,
-  Wizard,
-  WizardStep
-} 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 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;
-
     return (
       <React.Fragment>
         <DashboardWrapper hasPageTemplateTitle>
@@ -418,7 +383,7 @@ class WizardFullPage extends React.Component {
               <WizardStep name="Additional" id="wizard-step-3">
                 <p>Step 3 content</p>
               </WizardStep>
-              <WizardStep name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+              <WizardStep name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
                 <p>Review step content</p>
               </WizardStep>
             </Wizard>
@@ -453,11 +418,9 @@ import {
   PageSectionTypes,
   PageSectionVariants,
   PageSidebar,
-  Progress,
   SkipToContent,
   Text,
   TextContent,
-  Title,
   Masthead,
   PageToggleButton,
   MastheadToggle,
@@ -613,7 +576,7 @@ class WizardFullPageWithDrawerDemo extends React.Component {
               <WizardStep body={null} name="Additional" id="wizard-step-3">
                 {createStepContentWithDrawer('Additional step')}
               </WizardStep>
-              <WizardStep body={null} name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+              <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
                 {createStepContentWithDrawer('Review step')}
               </WizardStep>
             </Wizard>
@@ -648,11 +611,9 @@ import {
   PageSectionTypes,
   PageSectionVariants,
   PageSidebar,
-  Progress,
   SkipToContent,
   Text,
   TextContent,
-  Title,
   Masthead,
   PageToggleButton,
   MastheadToggle,
@@ -812,7 +773,7 @@ class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
               <WizardStep body={null} name="Additional" id="wizard-step-3">
                 {createStepContentWithDrawer('Additional step')}
               </WizardStep>
-              <WizardStep body={null} name="Review" d="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+              <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
                 {createStepContentWithDrawer('Review step')}
               </WizardStep>
             </Wizard>