@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

package/patternfly-docs/generated/components/wizard/react-deprecated.js

@@ -1,788 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, useEffect, useRef, useState } from 'react';
-import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
-DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, ModalVariant, Alert, EmptyState, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated';
-import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
-import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
-import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
-const pageData = {
-  "id": "Wizard",
-  "section": "components",
-  "subsection": "",
-  "deprecated": true,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react-deprecated",
-  "tabName": null,
-  "slug": "/components/wizard/react-deprecated",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md",
-  "relPath": "packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md",
-  "propComponents": [
-    {
-      "name": "Wizard",
-      "description": "",
-      "props": [
-        {
-          "name": "appendTo",
-          "type": "HTMLElement | (() => HTMLElement)",
-          "description": "The parent container to append the modal to. Defaults to document.body",
-          "defaultValue": "null"
-        },
-        {
-          "name": "backButtonText",
-          "type": "React.ReactNode",
-          "description": "(Unused if footer is controlled) The Back button text",
-          "defaultValue": "'Back'"
-        },
-        {
-          "name": "cancelButtonText",
-          "type": "React.ReactNode",
-          "description": "(Unused if footer is controlled) The Cancel button text",
-          "defaultValue": "'Cancel'"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes spread to the Wizard",
-          "defaultValue": "''"
-        },
-        {
-          "name": "closeButtonAriaLabel",
-          "type": "string",
-          "description": "(Unused if footer is controlled) aria-label for the close button",
-          "defaultValue": "'Close'"
-        },
-        {
-          "name": "description",
-          "type": "React.ReactNode",
-          "description": "The wizard description",
-          "defaultValue": "''"
-        },
-        {
-          "name": "descriptionComponent",
-          "type": "'div' | 'p'",
-          "description": "Component type of the description",
-          "defaultValue": "'p'"
-        },
-        {
-          "name": "descriptionId",
-          "type": "string",
-          "description": "An optional id for the description"
-        },
-        {
-          "name": "footer",
-          "type": "React.ReactNode",
-          "description": "(Use to control the footer) Passing in a footer component lets you control the buttons yourself",
-          "defaultValue": "null"
-        },
-        {
-          "name": "hasDrawer",
-          "type": "boolean",
-          "description": "Flag indicating the wizard has a drawer for at least one of the wizard steps",
-          "defaultValue": "false"
-        },
-        {
-          "name": "hasNoBodyPadding",
-          "type": "boolean",
-          "description": "Can remove the default padding around the main body content by setting this to true",
-          "defaultValue": "false"
-        },
-        {
-          "name": "height",
-          "type": "number | string",
-          "description": "Custom height of the wizard",
-          "defaultValue": "null"
-        },
-        {
-          "name": "hideClose",
-          "type": "boolean",
-          "description": "Flag indicating whether the close button should be in the header",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isDrawerExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the wizard drawer is expanded",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isNavExpandable",
-          "type": "boolean",
-          "description": "Flag indicating nav items with sub steps are expandable",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isOpen",
-          "type": "boolean",
-          "description": "Flag indicating Wizard modal is open. Wizard will be placed into a modal if this prop is provided",
-          "defaultValue": "undefined"
-        },
-        {
-          "name": "mainAriaLabel",
-          "type": "string",
-          "description": "Adds an accessible name to the wizard body when the body content overflows and renders\na scrollbar.",
-          "defaultValue": "null"
-        },
-        {
-          "name": "mainAriaLabelledBy",
-          "type": "string",
-          "description": "Adds an accessible name to the wizard body by passing the the id of one or more elements.\nThe aria-labelledby will only be applied when the body content overflows and renders a scrollbar.",
-          "defaultValue": "null"
-        },
-        {
-          "name": "navAriaLabel",
-          "type": "string",
-          "description": "Aria-label for the Nav",
-          "defaultValue": "null"
-        },
-        {
-          "name": "navAriaLabelledBy",
-          "type": "string",
-          "description": "Sets aria-labelledby on nav element",
-          "defaultValue": "null"
-        },
-        {
-          "name": "nextButtonText",
-          "type": "React.ReactNode",
-          "description": "(Unused if footer is controlled) The Next button text",
-          "defaultValue": "'Next'"
-        },
-        {
-          "name": "onBack",
-          "type": "(\n  newStep: { id?: string | number; name: React.ReactNode },\n  prevStep: { prevId?: string | number; prevName: React.ReactNode }\n) => void",
-          "description": "(Unused if footer is controlled) Callback function after Back button is clicked",
-          "defaultValue": "null"
-        },
-        {
-          "name": "onClose",
-          "type": "() => void",
-          "description": "Callback function to close the wizard",
-          "defaultValue": "() => undefined as any"
-        },
-        {
-          "name": "onCurrentStepChanged",
-          "type": "(step: WizardStep) => void",
-          "description": "Callback function to signal the current step in the wizard"
-        },
-        {
-          "name": "onExpandDrawer",
-          "type": "() => void",
-          "description": "Callback function for when the drawer is toggled. Can be used to set browser focus in the drawer.",
-          "defaultValue": "() => undefined as any"
-        },
-        {
-          "name": "onGoToStep",
-          "type": "(\n  newStep: { id?: string | number; name: React.ReactNode },\n  prevStep: { prevId?: string | number; prevName: React.ReactNode }\n) => void",
-          "description": "Callback function when a step in the nav is clicked",
-          "defaultValue": "null"
-        },
-        {
-          "name": "onNext",
-          "type": "(\n  newStep: { id?: string | number; name: React.ReactNode },\n  prevStep: { prevId?: string | number; prevName: React.ReactNode }\n) => void",
-          "description": "(Unused if footer is controlled) Callback function after Next button is clicked",
-          "defaultValue": "null"
-        },
-        {
-          "name": "onSave",
-          "type": "() => void",
-          "description": "(Unused if footer is controlled) Callback function to save at the end of the wizard, if not specified uses onClose"
-        },
-        {
-          "name": "startAtStep",
-          "type": "number",
-          "description": "The current step the wizard is on (1 or higher)",
-          "defaultValue": "1"
-        },
-        {
-          "name": "steps",
-          "type": "WizardStep[]",
-          "description": "The wizard steps configuration object",
-          "required": true
-        },
-        {
-          "name": "title",
-          "type": "string",
-          "description": "The wizard title to display if header is desired",
-          "defaultValue": "null"
-        },
-        {
-          "name": "titleId",
-          "type": "string",
-          "description": "An optional id for the title"
-        },
-        {
-          "name": "width",
-          "type": "number | string",
-          "description": "Custom width of the wizard",
-          "defaultValue": "null"
-        }
-      ]
-    },
-    {
-      "name": "WizardNav",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Aria-label applied to the nav element"
-        },
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Sets the aria-labelledby attribute on the nav element"
-        },
-        {
-          "name": "children",
-          "type": "any",
-          "description": "children should be WizardNavItem components"
-        },
-        {
-          "name": "isOpen",
-          "type": "boolean",
-          "description": "Whether the nav is expanded",
-          "defaultValue": "false"
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": ""
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": "",
-          "defaultValue": "true"
-        },
-        {
-          "name": "returnList",
-          "type": "boolean",
-          "description": "True to return the inner list without the wrapping nav element",
-          "defaultValue": "false"
-        }
-      ]
-    },
-    {
-      "name": "WizardNavItem",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Can nest a WizardNav component for substeps",
-          "defaultValue": "null"
-        },
-        {
-          "name": "content",
-          "type": "React.ReactNode",
-          "description": "The content to display in the nav item",
-          "defaultValue": "''"
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "description": "An optional url to use for when using an anchor component",
-          "defaultValue": "null"
-        },
-        {
-          "name": "id",
-          "type": "string | number",
-          "description": "The id for the nav item"
-        },
-        {
-          "name": "isCurrent",
-          "type": "boolean",
-          "description": "Whether the nav item is the currently active item",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Whether the nav item is disabled",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isExpandable",
-          "type": "boolean",
-          "description": "Flag indicating that this NavItem has child steps and is expandable",
-          "defaultValue": "false"
-        },
-        {
-          "name": "navItemComponent",
-          "type": "'button' | 'a'",
-          "description": "Component used to render WizardNavItem",
-          "defaultValue": "'button'"
-        },
-        {
-          "name": "onNavItemClick",
-          "type": "(step: number) => any",
-          "description": "Callback for when the nav item is clicked",
-          "defaultValue": "() => undefined"
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": ""
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": "",
-          "defaultValue": "true"
-        },
-        {
-          "name": "step",
-          "type": "number",
-          "description": "The step passed into the onNavItemClick callback",
-          "required": true
-        }
-      ]
-    },
-    {
-      "name": "WizardHeader",
-      "description": "",
-      "props": [
-        {
-          "name": "closeButtonAriaLabel",
-          "type": "string",
-          "description": "Aria-label applied to the X (Close) button"
-        },
-        {
-          "name": "description",
-          "type": "React.ReactNode",
-          "description": "Description of the wizard"
-        },
-        {
-          "name": "descriptionComponent",
-          "type": "'div' | 'p'",
-          "description": "Component type of the description",
-          "defaultValue": "'div'"
-        },
-        {
-          "name": "descriptionId",
-          "type": "string",
-          "description": "id for the description"
-        },
-        {
-          "name": "hideClose",
-          "type": "boolean",
-          "description": "Flag indicating whether the close button should be in the header"
-        },
-        {
-          "name": "onClose",
-          "type": "() => void",
-          "description": "Callback function called when the X (Close) button is clicked",
-          "defaultValue": "() => undefined"
-        },
-        {
-          "name": "title",
-          "type": "string",
-          "description": "Title of the wizard",
-          "required": true
-        },
-        {
-          "name": "titleId",
-          "type": "string",
-          "description": "id for the title"
-        }
-      ]
-    },
-    {
-      "name": "WizardBody",
-      "description": "",
-      "props": [
-        {
-          "name": "activeStep",
-          "type": "WizardStep",
-          "description": "The currently active WizardStep",
-          "required": true
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds an accessible name to the wizard body when the body content overflows and renders\na scrollbar."
-        },
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Adds an accessible name to the wizard body by passing the the id of one or more elements.\nThe aria-labelledby will only be applied when the body content overflows and renders a scrollbar.",
-          "required": true
-        },
-        {
-          "name": "children",
-          "type": "any",
-          "description": "Anything that can be rendered in the Wizard body",
-          "required": true
-        },
-        {
-          "name": "hasDrawer",
-          "type": "boolean",
-          "description": ""
-        },
-        {
-          "name": "hasNoBodyPadding",
-          "type": "boolean",
-          "description": "Set to true to remove the default body padding",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isDrawerExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the wizard drawer is expanded"
-        },
-        {
-          "name": "mainComponent",
-          "type": "React.ElementType",
-          "description": "Component used as the primary content container",
-          "defaultValue": "'div'"
-        },
-        {
-          "name": "onExpandDrawer",
-          "type": "() => void",
-          "description": "Callback function for when the drawer is toggled"
-        }
-      ]
-    },
-    {
-      "name": "WizardFooter",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "any",
-          "description": "Buttons in the footer",
-          "required": true
-        }
-      ]
-    },
-    {
-      "name": "WizardToggle",
-      "description": "",
-      "props": [
-        {
-          "name": "activeStep",
-          "type": "WizardStep",
-          "description": "The currently active WizardStep",
-          "required": true
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "The button's aria-label",
-          "defaultValue": "'Wizard Toggle'"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "The WizardFooter"
-        },
-        {
-          "name": "hasDrawer",
-          "type": "boolean",
-          "description": "Flag indicating the wizard has a drawer for at least one of the wizard steps"
-        },
-        {
-          "name": "hasNoBodyPadding",
-          "type": "boolean",
-          "description": "Set to true to remove body padding",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isDrawerExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the wizard drawer is expanded"
-        },
-        {
-          "name": "isInPage",
-          "type": "boolean",
-          "description": "If the wizard is in-page",
-          "defaultValue": "true"
-        },
-        {
-          "name": "isNavOpen",
-          "type": "boolean",
-          "description": "If the nav is open",
-          "required": true
-        },
-        {
-          "name": "mainAriaLabel",
-          "type": "string",
-          "description": "Adds an accessible name to the wizard body when the body content overflows and renders\na scrollbar.",
-          "defaultValue": "null"
-        },
-        {
-          "name": "mainAriaLabelledBy",
-          "type": "string",
-          "description": "Adds an accessible name to the wizard body by passing the the id of one or more elements.\nThe aria-labelledby will only be applied when the body content overflows and renders a scrollbar.",
-          "defaultValue": "null"
-        },
-        {
-          "name": "nav",
-          "type": "(isWizardNavOpen: boolean) => React.ReactElement<any>",
-          "description": "Function that returns the WizardNav component",
-          "required": true
-        },
-        {
-          "name": "onExpandDrawer",
-          "type": "() => void",
-          "description": "Callback function for when the drawer is toggled"
-        },
-        {
-          "name": "onNavToggle",
-          "type": "(isOpen: boolean) => void",
-          "description": "Callback function for when the nav is toggled",
-          "required": true
-        },
-        {
-          "name": "steps",
-          "type": "WizardStep[]",
-          "description": "The wizard steps",
-          "required": true
-        }
-      ]
-    },
-    {
-      "name": "WizardStep",
-      "description": "",
-      "props": [
-        {
-          "name": "canJumpTo",
-          "type": "boolean",
-          "description": "Enables or disables the step in the navigation. Enabled by default."
-        },
-        {
-          "name": "component",
-          "type": "any",
-          "description": "The component to render in the main body"
-        },
-        {
-          "name": "drawerPanelContent",
-          "type": "any",
-          "description": "The content to render in the drawer panel (use when hasDrawer prop is set on the wizard)."
-        },
-        {
-          "name": "drawerToggleButton",
-          "type": "React.ReactNode",
-          "description": "Custom drawer toggle button that opens the drawer."
-        },
-        {
-          "name": "enableNext",
-          "type": "boolean",
-          "description": "(Unused if footer is controlled) The condition needed to enable the Next button"
-        },
-        {
-          "name": "hideBackButton",
-          "type": "boolean",
-          "description": "(Unused if footer is controlled) True to hide the Back button"
-        },
-        {
-          "name": "hideCancelButton",
-          "type": "boolean",
-          "description": "(Unused if footer is controlled) True to hide the Cancel button"
-        },
-        {
-          "name": "id",
-          "type": "string | number",
-          "description": "Optional identifier"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Flag to disable the step in the navigation"
-        },
-        {
-          "name": "isFinishedStep",
-          "type": "boolean",
-          "description": "Setting to true hides the side nav and footer"
-        },
-        {
-          "name": "name",
-          "type": "React.ReactNode",
-          "description": "The name of the step",
-          "required": true
-        },
-        {
-          "name": "nextButtonText",
-          "type": "React.ReactNode",
-          "description": "(Unused if footer is controlled) Can change the Next button text. If nextButtonText is also set for the Wizard, this step specific one overrides it."
-        },
-        {
-          "name": "stepNavItemProps",
-          "type": "React.HTMLProps<HTMLButtonElement | HTMLAnchorElement> | WizardNavItemProps",
-          "description": "Props to pass to the WizardNavItem"
-        },
-        {
-          "name": "steps",
-          "type": "WizardStep[]",
-          "description": "Sub steps"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-wizard"
-  ],
-  "examples": [
-    "Basic",
-    "Basic with disabled steps",
-    "Anchors for nav items",
-    "Incrementally enabled steps",
-    "Expandable steps",
-    "Finished",
-    "Enabled on form validation",
-    "Validate on button press",
-    "Progressive steps",
-    "Get current step",
-    "Wizard in modal",
-    "Wizard with drawer"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-  Button,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerColorVariant,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelContent,
-  DrawerSection,
-  ModalVariant,
-  Alert,
-  EmptyState,
-  EmptyStateFooter,
-  EmptyStateBody,
-  EmptyStateActions,
-  Title,
-  Progress,
-  Form,
-  FormGroup,
-  TextInput,
-  WizardDeprecated,
-  WizardFooterDeprecated,
-  WizardContextConsumerDeprecated,
-  RhMicronsExternalLinkIcon,
-  SlackHashIcon,
-  CogsIcon
-};
-pageData.examples = {
-  'Basic': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const WizardBasic: React.FunctionComponent = () => {\n  const steps = [\n    {\n      name: 'First step',\n      component: (\n        <>\n          <p>\n            The content of this step overflows and creates a scrollbar, which causes a tabindex of \"0\", a role of\n            \"region\", and an aria-label or aria-labelledby to be applied.\n          </p>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis\n            lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim\n            ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis\n            eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id\n            nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.\n          </p>\n          <p>\n            Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices\n            orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante.\n            Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam\n            lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut\n            sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed\n            luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.\n          </p>\n        </>\n      )\n    },\n    { name: 'Second step', component: <p>Step 2 content</p> },\n    { name: 'Third step', component: <p>Step 3 content</p> },\n    { name: 'Fourth step', component: <p>Step 4 content</p> },\n    { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }\n  ];\n  const title = 'Basic wizard example';\n  return (\n    <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />\n  );\n};\n","title":"Basic","lang":"js","className":""}}>
-      
-    </Example>,
-  'Basic with disabled steps': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const WizardBasicWithDisabledSteps: React.FunctionComponent = () => {\n  const steps = [\n    { name: 'First step', component: <p>Step 1 content</p> },\n    { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true },\n    { name: 'Third step', component: <p>Step 3 content</p> },\n    { name: 'Fourth step', component: <p>Step 4 content</p>, isDisabled: true },\n    { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }\n  ];\n  const title = 'Basic wizard with disabled steps example';\n  return (\n    <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />\n  );\n};\n","title":"Basic with disabled steps","lang":"js","className":""}}>
-      
-    </Example>,
-  'Anchors for nav items': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button } from '@patternfly/react-core';\nimport { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';\nimport RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';\nimport SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';\n\nexport const WizardWithNavAnchors: React.FunctionComponent = () => {\n  const steps = [\n    {\n      name: (\n        <div>\n          <RhMicronsExternalLinkIcon /> PF3\n        </div>\n      ),\n      component: <p>Step 1: Read about PF3</p>,\n      stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v3/', target: '_blank' }\n    },\n    {\n      name: (\n        <div>\n          <RhMicronsExternalLinkIcon /> PF4\n        </div>\n      ),\n      component: <p>Step 2: Read about PF4</p>,\n      stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v4/', target: '_blank' }\n    },\n    {\n      name: (\n        <div>\n          <SlackHashIcon /> Join us on slack\n        </div>\n      ),\n      component: (\n        <Button variant=\"link\" component=\"a\" target=\"_blank\" href=\"https://patternfly.slack.com/\">\n          Join the conversation\n        </Button>\n      ),\n      stepNavItemProps: { navItemComponent: 'a', href: 'https://patternfly.slack.com/', target: '_blank' }\n    }\n  ];\n  const title = 'Anchor link wizard example';\n  return (\n    <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />\n  );\n};\n","title":"Anchors for nav items","lang":"js","className":""}}>
-      
-    </Example>,
-  'Incrementally enabled steps': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';\n\nexport const WizardIncrementallyEnabledSteps: React.FunctionComponent = () => {\n  const [stepIdReached, setStepIdReached] = useState(1);\n\n  const onNext = ({ id }: WizardStep) => {\n    if (id) {\n      if (typeof id === 'string') {\n        const [, orderIndex] = id.split('-');\n        id = parseInt(orderIndex);\n      }\n      setStepIdReached(stepIdReached < id ? id : stepIdReached);\n    }\n  };\n\n  const closeWizard = () => {\n    // eslint-disable-next-line no-console\n    console.log('close wizard');\n  };\n\n  const steps = [\n    { id: 'incrementallyEnabled-1', name: 'First step', component: <p>Step 1 content</p> },\n    {\n      id: 'incrementallyEnabled-2',\n      name: 'Second step',\n      component: <p>Step 2 content</p>,\n      canJumpTo: stepIdReached >= 2\n    },\n    {\n      id: 'incrementallyEnabled-3',\n      name: 'Third step',\n      component: <p>Step 3 content</p>,\n      canJumpTo: stepIdReached >= 3\n    },\n    {\n      id: 'incrementallyEnabled-4',\n      name: 'Fourth step',\n      component: <p>Step 4 content</p>,\n      canJumpTo: stepIdReached >= 4\n    },\n    {\n      id: 'incrementallyEnabled-5',\n      name: 'Review',\n      component: <p>Review step content</p>,\n      nextButtonText: 'Finish',\n      canJumpTo: stepIdReached >= 5\n    }\n  ];\n  const title = 'Incrementally enabled wizard example';\n  return (\n    <WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      steps={steps}\n      onNext={onNext}\n      height={400}\n    />\n  );\n};\n","title":"Incrementally enabled steps","lang":"js","className":""}}>
-      
-    </Example>,
-  'Expandable steps': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const WizardExpandableSteps: React.FunctionComponent = () => {\n  const steps = [\n    {\n      name: 'First step',\n      steps: [\n        { name: 'Substep A', component: <p>Substep A content</p> },\n        { name: 'Substep B', component: <p>Substep B content</p> }\n      ]\n    },\n    { name: 'Second step', component: <p>Step 2 content</p> },\n    {\n      name: 'Third step',\n      steps: [\n        { name: 'Substep C', component: <p>Substep C content</p> },\n        { name: 'Substep D', component: <p>Substep D content</p> }\n      ]\n    },\n    { name: 'Fourth step', component: <p>Step 4 content</p> },\n    { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }\n  ];\n  const title = 'Expandable wizard example';\n  return (\n    <WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      steps={steps}\n      height={400}\n      isNavExpandable\n    />\n  );\n};\n","title":"Expandable steps","lang":"js","className":""}}>
-      
-    </Example>,
-  'Finished': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport {\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Progress,\n  Button\n} from '@patternfly/react-core';\nimport { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';\n// eslint-disable-next-line patternfly-react/import-tokens-icons\nimport { CogsIcon } from '@patternfly/react-icons';\nimport layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';\n\ninterface finishedProps {\n  onClose: () => void;\n}\n\nconst FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedProps) => {\n  const [percent, setPercent] = useState(0);\n\n  const tick = () => {\n    setPercent((prevPercent) => {\n      if (prevPercent < 100) {\n        return prevPercent + 20;\n      } else {\n        return prevPercent;\n      }\n    });\n  };\n\n  useEffect(() => {\n    const interval = setInterval(() => tick(), 1000);\n\n    if (percent >= 100) {\n      clearInterval(interval);\n    }\n\n    return () => clearInterval(interval);\n  }, [percent]);\n\n  return (\n    <div className={layout.bullseye}>\n      <EmptyState\n        headingLevel=\"h4\"\n        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}\n        icon={CogsIcon}\n        variant=\"lg\"\n      >\n        <EmptyStateBody>\n          <Progress value={percent} measureLocation=\"outside\" aria-label=\"validation-progress\" />\n        </EmptyStateBody>\n        <EmptyStateBody>\n          Description can be used to further elaborate on the validation step, or give the user a better idea of how\n          long the process will take.\n        </EmptyStateBody>\n        <EmptyStateFooter>\n          <EmptyStateActions>\n            <Button isDisabled={percent !== 100} onClick={props.onClose}>\n              Log to console\n            </Button>\n          </EmptyStateActions>\n        </EmptyStateFooter>\n      </EmptyState>\n    </div>\n  );\n};\n\nexport const WizardFinished: React.FunctionComponent = () => {\n  const closeWizard = () => {\n    // eslint-disable-next-line no-console\n    console.log('close wizard');\n  };\n\n  const steps = [\n    { name: 'First step', component: <p>Step 1 content</p> },\n    { name: 'Second step', component: <p>Step 2 content</p> },\n    { name: 'Third step', component: <p>Step 3 content</p> },\n    { name: 'Fourth step', component: <p>Step 4 content</p> },\n    { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' },\n    { name: 'Finish', component: <FinishedStep onClose={closeWizard} />, isFinishedStep: true }\n  ];\n  const title = 'Finished wizard example';\n  return (\n    <WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      steps={steps}\n      height={400}\n    />\n  );\n};\n","title":"Finished","lang":"js","className":""}}>
-      
-    </Example>,
-  'Enabled on form validation': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { Form, FormGroup, TextInput } from '@patternfly/react-core';\nimport { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';\ninterface PrevStepInfo {\n  prevId?: string | number;\n  prevName: React.ReactNode;\n}\n\ninterface sampleFormProps {\n  formValue: string;\n  isFormValid: boolean;\n  onChange?: (isValid: boolean, value: string) => void;\n}\n\nconst SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {\n  const [value, setValue] = useState(props.formValue);\n  const [isValid, setIsValid] = useState(props.isFormValid);\n\n  const handleTextInputChange = (_event, value: string) => {\n    const valid = /^\\d+$/.test(value);\n    setValue(value);\n    setIsValid(valid);\n    props.onChange && props.onChange(valid, value);\n  };\n\n  const validated = isValid ? 'default' : 'error';\n\n  return (\n    <Form>\n      <FormGroup\n        label=\"Age:\"\n        type=\"number\"\n        helperText=\"Write your age in numbers.\"\n        helperTextInvalid=\"Age has to be a number\"\n        fieldId=\"age\"\n        validated={validated}\n      >\n        <TextInput\n          validated={validated}\n          value={value}\n          id=\"age-input\"\n          aria-describedby=\"age-helper\"\n          onChange={handleTextInputChange}\n        />\n      </FormGroup>\n    </Form>\n  );\n};\n\nexport const WizardFormValidation: React.FunctionComponent = () => {\n  const [isFormValid, setIsFormValid] = useState(false);\n  const [formValue, setFormValue] = useState('Thirty');\n  const [allStepsValid, setAllStepsValid] = useState(false);\n  const [stepIdReached, setStepIdReached] = useState(1);\n\n  useEffect(() => {\n    setAllStepsValid(isFormValid);\n  }, [isFormValid, stepIdReached]);\n\n  const closeWizard = () => {\n    // eslint-disable-next-line no-console\n    console.log('close wizard');\n  };\n\n  const onFormChange = (isValid: boolean, value: string) => {\n    setIsFormValid(isValid);\n    setFormValue(value);\n  };\n\n  const areAllStepsValid = () => {\n    setAllStepsValid(isFormValid);\n  };\n\n  const onNext = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) => {\n    // eslint-disable-next-line no-console\n    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);\n    if (id) {\n      if (typeof id === 'string') {\n        const [, orderIndex] = id.split('-');\n        id = parseInt(orderIndex);\n      }\n      setStepIdReached(stepIdReached < id ? id : stepIdReached);\n    }\n  };\n\n  const onBack = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) => {\n    // eslint-disable-next-line no-console\n    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);\n    areAllStepsValid();\n  };\n\n  const onGoToStep = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) => {\n    // eslint-disable-next-line no-console\n    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);\n  };\n\n  const steps = [\n    { id: 'validated-1', name: 'Information', component: <p>Step 1 content</p> },\n    {\n      name: 'Configuration',\n      steps: [\n        {\n          id: 'validated-2',\n          name: 'Substep A with validation',\n          component: <SampleForm formValue={formValue} isFormValid={isFormValid} onChange={onFormChange} />,\n          enableNext: isFormValid,\n          canJumpTo: stepIdReached >= 2\n        },\n        { id: 'validated-3', name: 'Substep B', component: <p>Substep B</p>, canJumpTo: stepIdReached >= 3 }\n      ]\n    },\n    {\n      id: 'validated-4',\n      name: 'Additional',\n      component: <p>Step 3 content</p>,\n      enableNext: allStepsValid,\n      canJumpTo: stepIdReached >= 4\n    },\n    {\n      id: 'validated-5',\n      name: 'Review',\n      component: <p>Step 4 content</p>,\n      nextButtonText: 'Finish',\n      canJumpTo: stepIdReached >= 5\n    }\n  ];\n  const title = 'Wizard enabled on form validation example';\n  return (\n    <WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      steps={steps}\n      onNext={onNext}\n      onBack={onBack}\n      onGoToStep={onGoToStep}\n      height={400}\n    />\n  );\n};\n","title":"Enabled on form validation","lang":"js","className":""}}>
-      
-    </Example>,
-  'Validate on button press': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport {\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Form,\n  FormGroup,\n  TextInput,\n  Progress,\n  Button,\n  Alert\n} from '@patternfly/react-core';\nimport {\n  Wizard as WizardDeprecated,\n  WizardFooter as WizardFooterDeprecated,\n  WizardContextConsumer as WizardContextConsumerDeprecated\n} from '@patternfly/react-core/deprecated';\nimport layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';\n\n// eslint-disable-next-line patternfly-react/import-tokens-icons\nimport { CogsIcon } from '@patternfly/react-icons';\n\ninterface finishedProps {\n  onClose: () => void;\n}\n\nconst FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedProps) => {\n  const [percent, setPercent] = useState(0);\n\n  const tick = () => {\n    setPercent((prevPercent) => {\n      if (prevPercent < 100) {\n        return prevPercent + 20;\n      } else {\n        return prevPercent;\n      }\n    });\n  };\n\n  useEffect(() => {\n    const interval = setInterval(() => tick(), 1000);\n\n    if (percent >= 100) {\n      clearInterval(interval);\n    }\n\n    return () => clearInterval(interval);\n  }, [percent]);\n\n  return (\n    <div className={layout.bullseye}>\n      <EmptyState\n        headingLevel=\"h4\"\n        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}\n        icon={CogsIcon}\n        variant=\"lg\"\n      >\n        <EmptyStateBody>\n          <Progress value={percent} measureLocation=\"outside\" aria-label=\"validation-progress\" />\n        </EmptyStateBody>\n        <EmptyStateBody>\n          Description can be used to further elaborate on the validation step, or give the user a better idea of how\n          long the process will take.\n        </EmptyStateBody>\n        <EmptyStateFooter>\n          <EmptyStateActions>\n            <Button isDisabled={percent !== 100} onClick={props.onClose}>\n              Log to console\n            </Button>\n          </EmptyStateActions>\n        </EmptyStateFooter>\n      </EmptyState>\n    </div>\n  );\n};\n\ninterface sampleFormProps {\n  formValue: string;\n  isFormValid: boolean;\n  onChange?: (isValid: boolean, value: string) => void;\n}\n\nconst SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {\n  const [value, setValue] = useState(props.formValue);\n  const [isValid, setIsValid] = useState(props.isFormValid);\n\n  const handleTextInputChange = (_event, value: string) => {\n    const valid = /^\\d+$/.test(value);\n    setValue(value);\n    setIsValid(valid);\n    props.onChange && props.onChange(valid, value);\n  };\n\n  const validated = isValid ? 'default' : 'error';\n\n  return (\n    <Form>\n      <FormGroup\n        label=\"Age:\"\n        type=\"number\"\n        helperText=\"Write your age in numbers.\"\n        helperTextInvalid=\"Age has to be a number\"\n        fieldId=\"age\"\n        validated={validated}\n      >\n        <TextInput\n          validated={validated}\n          value={value}\n          id=\"age\"\n          aria-describedby=\"age-helper\"\n          onChange={handleTextInputChange}\n        />\n      </FormGroup>\n    </Form>\n  );\n};\n\nexport const WizardValidateButtonPress: React.FunctionComponent = () => {\n  const [isFormValid, setIsFormValid] = useState(false);\n  const [formValue, setFormValue] = useState('Validating on button press');\n  const [stepsValid, setStepsValid] = useState(0);\n  const [errorText, setErrorText] = useState(false);\n\n  const closeWizard = () => {\n    // eslint-disable-next-line no-console\n    console.log('close wizard');\n  };\n\n  const onFormChange = (isValid: boolean, value: string) => {\n    setIsFormValid(isValid);\n    setFormValue(value);\n  };\n\n  const validateLastStep: (onNext: () => void) => void = (onNext) => {\n    if (stepsValid !== 1 && !isFormValid) {\n      setErrorText(true);\n    } else {\n      setStepsValid(1);\n      setErrorText(false);\n      onNext();\n    }\n  };\n\n  const steps = [\n    { name: 'First step', component: <p>Step 1 content</p> },\n    { name: 'Second step', component: <p>Step 2 content</p> },\n    {\n      name: 'Final Step',\n      component: (\n        <>\n          {errorText && (\n            <div style={{ padding: '15px 0' }}>\n              <Alert variant=\"warning\" title=\"Validation failed, please try again\" />\n            </div>\n          )}\n          <SampleForm formValue={formValue} isFormValid={stepsValid !== 1} onChange={onFormChange} />\n        </>\n      )\n    },\n    { name: 'Finish', component: <FinishedStep onClose={closeWizard} />, isFinishedStep: true }\n  ];\n\n  const CustomFooter = (\n    <WizardFooterDeprecated>\n      <WizardContextConsumerDeprecated>\n        {({ activeStep, goToStepByName, onNext, onBack, onClose }) => {\n          if (activeStep.name !== 'Final Step') {\n            return (\n              <>\n                <Button variant=\"primary\" type=\"submit\" onClick={onNext}>\n                  Forward\n                </Button>\n                <Button\n                  variant=\"secondary\"\n                  onClick={onBack}\n                  className={activeStep.name === 'First step' ? 'pf-m-disabled' : ''}\n                >\n                  Backward\n                </Button>\n                <Button variant=\"link\" onClick={onClose}>\n                  Cancel\n                </Button>\n              </>\n            );\n          }\n          // Final step buttons\n          return (\n            <>\n              <Button onClick={() => validateLastStep(onNext)}>Validate</Button>\n              <Button onClick={() => goToStepByName('First step')}>Go to Beginning</Button>\n            </>\n          );\n        }}\n      </WizardContextConsumerDeprecated>\n    </WizardFooterDeprecated>\n  );\n\n  const title = 'Validate on button press wizard example';\n  return (\n    <WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      footer={CustomFooter}\n      steps={steps}\n      height={400}\n    />\n  );\n};\n","title":"Validate on button press","lang":"js","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This example demonstrates how to use the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`WizardContextConsumer`}
-        </code>
-        {` to consume the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`WizardContext`}
-        </code>
-        {`. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`WizardContext`}
-        </code>
-        {` can be used to imperatively move to a specific wizard step.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The definition of the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`WizardContext`}
-        </code>
-        {` is as follows:`}
-      </p>
-      
-      <Example {...{"code":"interface WizardContext {\n  goToStepById: (stepId: number | string) => void;\n  goToStepByName: (stepName: string) => void;\n  onNext: () => void;\n  onBack: () => void;\n  onClose: () => void;\n  activeStep: WizardStep;\n}","className":""}}>
-        
-      </Example>
-    </Example>,
-  'Progressive steps': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Radio, Alert } from '@patternfly/react-core';\nimport {\n  Wizard as WizardDeprecated,\n  WizardFooter as WizardFooterDeprecated,\n  WizardContextConsumer as WizardContextConsumerDeprecated\n} from '@patternfly/react-core/deprecated';\n\nclass ProgressiveWizard extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCreateStep: false,\n      showUpdateStep: false,\n      showOptionsStep: false,\n      showReviewStep: false,\n      getStartedStepRadio: 'Create',\n      createStepRadio: 'Quick',\n      updateStepRadio: 'Quick'\n    };\n    this.closeWizard = () => {\n      console.log('close wizard');\n    };\n    this.onGoToStep = ({ id, name }, { prevId, prevName }) => {\n      // Remove steps after the currently clicked step\n      if (name === 'Get started') {\n        this.setState({\n          showReviewStep: false,\n          showOptionsStep: false,\n          showCreateStep: false,\n          showUpdateStep: false\n        });\n      } else if (name === 'Create options' || name === 'Update options') {\n        this.setState({\n          showReviewStep: false,\n          showOptionsStep: false\n        });\n      } else if (name.indexOf('Substep') > -1) {\n        this.setState({\n          showReviewStep: false\n        });\n      }\n    };\n    this.getNextStep = (activeStep, callback) => {\n      if (activeStep.name === 'Get started') {\n        if (this.state.getStartedStepRadio === 'Create') {\n          this.setState(\n            {\n              showCreateStep: true,\n              showUpdateStep: false,\n              showOptionsStep: false,\n              showReviewStep: false\n            },\n            () => {\n              callback();\n            }\n          );\n        } else {\n          this.setState(\n            {\n              showCreateStep: false,\n              showUpdateStep: true,\n              showOptionsStep: false,\n              showReviewStep: false\n            },\n            () => {\n              callback();\n            }\n          );\n        }\n      } else if (activeStep.name === 'Create options' || activeStep.name === 'Update options') {\n        this.setState(\n          {\n            showOptionsStep: true,\n            showReviewStep: false\n          },\n          () => {\n            callback();\n          }\n        );\n      } else if (activeStep.name === 'Substep 3') {\n        this.setState(\n          {\n            showReviewStep: true\n          },\n          () => {\n            callback();\n          }\n        );\n      } else {\n        callback();\n      }\n    };\n    this.getPreviousStep = (activeStep, callback) => {\n      if (activeStep.name === 'Review') {\n        this.setState(\n          {\n            showReviewStep: false\n          },\n          () => {\n            callback();\n          }\n        );\n      } else if (activeStep.name === 'Substep 1') {\n        this.setState(\n          {\n            showOptionsStep: false\n          },\n          () => {\n            callback();\n          }\n        );\n      } else if (activeStep.name === 'Create options') {\n        this.setState(\n          {\n            showCreateStep: false\n          },\n          () => {\n            callback();\n          }\n        );\n      } else if (activeStep.name === 'Update options') {\n        this.setState(\n          {\n            showUpdateStep: false\n          },\n          () => {\n            callback();\n          }\n        );\n      } else {\n        callback();\n      }\n    };\n  }\n  render() {\n    const {\n      stepsValid,\n      getStartedStepRadio,\n      createStepRadio,\n      updateStepRadio,\n      showCreateStep,\n      showUpdateStep,\n      showOptionsStep,\n      showReviewStep\n    } = this.state;\n    const getStartedStep = {\n      name: 'Get started',\n      component: (\n        <div>\n          <Radio\n            value=\"Create\"\n            isChecked={getStartedStepRadio === 'Create'}\n            onChange={(event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}\n            label=\"Create a new thing\"\n            name=\"radio-step-start\"\n            id=\"radio-step-start-1\"\n          />{' '}\n          <Radio\n            value=\"Update\"\n            isChecked={getStartedStepRadio === 'Update'}\n            onChange={(event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}\n            label=\"Update an existing thing\"\n            name=\"radio-step-start\"\n            id=\"radio-step-start-2\"\n          />\n        </div>\n      )\n    };\n    const createStep = {\n      name: 'Create options',\n      component: (\n        <div>\n          <Radio\n            value=\"Quick\"\n            isChecked={createStepRadio === 'Quick'}\n            onChange={(event) => this.setState({ createStepRadio: event.currentTarget.value })}\n            label=\"Quick create\"\n            name=\"radio-step-create\"\n            id=\"radio-step-create-1\"\n          />{' '}\n          <Radio\n            value=\"Custom\"\n            isChecked={createStepRadio === 'Custom'}\n            onChange={(event) => this.setState({ createStepRadio: event.currentTarget.value })}\n            label=\"Custom create\"\n            name=\"radio-step-create\"\n            id=\"radio-step-create-2\"\n          />\n        </div>\n      )\n    };\n    const updateStep = {\n      name: 'Update options',\n      component: (\n        <div>\n          <Radio\n            value=\"Quick\"\n            isChecked={updateStepRadio === 'Quick'}\n            onChange={(event) => this.setState({ updateStepRadio: event.currentTarget.value })}\n            label=\"Quick update\"\n            name=\"radio-step-update\"\n            id=\"radio-step-update-1\"\n          />{' '}\n          <Radio\n            value=\"Custom\"\n            isChecked={updateStepRadio === 'Custom'}\n            onChange={(event) => this.setState({ updateStepRadio: event.currentTarget.value })}\n            label=\"Custom update\"\n            name=\"radio-step-update\"\n            id=\"radio-step-update-2\"\n          />\n        </div>\n      )\n    };\n    const optionsStep = {\n      name: showCreateStep ? `${createStepRadio} Options` : `${updateStepRadio} Options`,\n      steps: [\n        {\n          name: 'Substep 1',\n          component: 'Substep 1'\n        },\n        {\n          name: 'Substep 2',\n          component: 'Substep 2'\n        },\n        {\n          name: 'Substep 3',\n          component: 'Substep 3'\n        }\n      ]\n    };\n    const reviewStep = {\n      name: 'Review',\n      component: (\n        <div>\n          <div>First choice: {getStartedStepRadio}</div>\n          <div>Second choice: {showCreateStep ? createStepRadio : updateStepRadio}</div>\n        </div>\n      )\n    };\n    const steps = [\n      getStartedStep,\n      ...(showCreateStep ? [createStep] : []),\n      ...(showUpdateStep ? [updateStep] : []),\n      ...(showOptionsStep ? [optionsStep] : []),\n      ...(showReviewStep ? [reviewStep] : [])\n    ];\n    const CustomFooter = (\n      <WizardFooterDeprecated>\n        <WizardContextConsumerDeprecated>\n          {({ activeStep, goToStepByName, goToStepById, onNext, onBack, onClose }) => {\n            return (\n              <>\n                <Button\n                  variant=\"secondary\"\n                  onClick={() => this.getPreviousStep(activeStep, onBack)}\n                  className={activeStep.name === 'Get started' ? 'pf-m-disabled' : ''}\n                >\n                  Back\n                </Button>\n                <Button variant=\"primary\" type=\"submit\" onClick={() => this.getNextStep(activeStep, onNext)}>\n                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}\n                </Button>\n                <Button variant=\"link\" onClick={onClose}>\n                  Cancel\n                </Button>\n              </>\n            );\n          }}\n        </WizardContextConsumerDeprecated>\n      </WizardFooterDeprecated>\n    );\n    const title = 'Progressive wizard';\n    return (\n      <WizardDeprecated\n        navAriaLabel={`${title} steps`}\n        mainAriaLabel={`${title} content`}\n        onClose={this.closeWizard}\n        footer={CustomFooter}\n        onGoToStep={this.onGoToStep}\n        steps={steps}\n        height={400}\n      />\n    );\n  }\n}","title":"Progressive steps","lang":"js","className":""}}>
-      
-    </Example>,
-  'Get current step': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';\n\nexport const WizardGetCurrentStep: React.FunctionComponent = () => {\n  const onCurrentStepChanged = ({ id }: WizardStep) => {\n    // eslint-disable-next-line no-console\n    console.log(id);\n  };\n  const closeWizard = () => {\n    // eslint-disable-next-line no-console\n    console.log('close wizard');\n  };\n\n  const steps = [\n    { id: 1, name: 'First step', component: <p>Step 1 content</p> },\n    { id: 2, name: 'Second step', component: <p>Step 2 content</p> },\n    { id: 3, name: 'Third step', component: <p>Step 3 content</p> },\n    { id: 4, name: 'Fourth step', component: <p>Step 4 content</p> },\n    { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }\n  ];\n  const title = 'Get current step wizard example';\n  return (\n    <WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      description=\"Simple Wizard Description\"\n      steps={steps}\n      height={400}\n      onCurrentStepChanged={onCurrentStepChanged}\n    />\n  );\n};\n","title":"Get current step","lang":"js","className":""}}>
-      
-    </Example>,
-  'Wizard in modal': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const WizardInModal: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsOpen(!isOpen);\n  };\n\n  const handleWizardToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const steps = [\n    { name: 'First step', component: <p>Step 1 content</p> },\n    { name: 'Second step', component: <p>Step 2 content</p> },\n    { name: 'Third step', component: <p>Step 3 content</p> },\n    { name: 'Fourth step', component: <p>Step 4 content</p> },\n    { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }\n  ];\n\n  const title = 'Wizard in modal example';\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show Modal\n      </Button>\n      <WizardDeprecated\n        title={title}\n        description=\"Simple Wizard Description\"\n        descriptionComponent=\"div\"\n        steps={steps}\n        onClose={handleWizardToggle}\n        isOpen={isOpen}\n      />\n    </Fragment>\n  );\n};\n","title":"Wizard in modal","lang":"js","className":""}}>
-      
-    </Example>,
-  'Wizard with drawer': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Button,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerHead,\n  DrawerPanelContent,\n  DrawerColorVariant\n} from '@patternfly/react-core';\nimport { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const WizardWithDrawer: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpandDrawer = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onOpenClick = () => {\n    setIsDrawerExpanded(true);\n  };\n\n  const onCloseClick = () => {\n    setIsDrawerExpanded(false);\n  };\n\n  const panel1Content = (\n    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>\n      <DrawerHead>\n        <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>\n          drawer-panel-1 content\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const panel2Content = (\n    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>\n      <DrawerHead>\n        <span tabIndex={0} ref={drawerRef}>\n          drawer-panel-2 content\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const panel3Content = (\n    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>\n      <DrawerHead>\n        <span tabIndex={0} ref={drawerRef}>\n          drawer-panel-3 content\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerToggleButton = (\n    <Button isInline variant=\"link\" onClick={onOpenClick}>\n      Open Drawer\n    </Button>\n  );\n\n  const steps = [\n    {\n      name: 'Information',\n      component: <p>Information step content</p>,\n      drawerPanelContent: panel1Content,\n      drawerToggleButton\n    },\n    {\n      name: 'Configuration',\n      steps: [\n        {\n          name: 'Substep A',\n          component: <p>Substep A content</p>,\n          drawerPanelContent: panel2Content,\n          drawerToggleButton\n        },\n        {\n          name: 'Substep B',\n          component: <p>Substep B content</p>,\n          drawerPanelContent: panel2Content,\n          drawerToggleButton\n        },\n        {\n          name: 'Substep C',\n          component: <p>Substep C content</p>,\n          drawerPanelContent: panel2Content,\n          drawerToggleButton\n        }\n      ]\n    },\n    {\n      name: 'Additional',\n      component: <p>Additional step content</p>,\n      drawerPanelContent: panel3Content,\n      drawerToggleButton\n    },\n    {\n      name: 'Review',\n      component: <p>Review step content</p>,\n      nextButtonText: 'Finish'\n    }\n  ];\n\n  const title = 'Wizard with drawer example';\n\n  return (\n    <Fragment>\n      <WizardDeprecated\n        height={400}\n        isDrawerExpanded={isDrawerExpanded}\n        onExpandDrawer={onExpandDrawer}\n        hasDrawer\n        navAriaLabel={`${title} steps`}\n        steps={steps}\n      />\n    </Fragment>\n  );\n};\n","title":"Wizard with drawer","lang":"js","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`If you seek a wizard solution that allows for more composition, see the `}
-      <PatternflyThemeLink {...{"to":"/components/wizard","className":""}}>
-        {`React`}
-      </PatternflyThemeLink>
-      {` tab.`}
-    </p>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Basic"])}
-    {React.createElement(pageData.examples["Basic with disabled steps"])}
-    {React.createElement(pageData.examples["Anchors for nav items"])}
-    {React.createElement(pageData.examples["Incrementally enabled steps"])}
-    {React.createElement(pageData.examples["Expandable steps"])}
-    {React.createElement(pageData.examples["Finished"])}
-    {React.createElement(pageData.examples["Enabled on form validation"])}
-    {React.createElement(pageData.examples["Validate on button press"])}
-    {React.createElement(pageData.examples["Progressive steps"])}
-    {React.createElement(pageData.examples["Get current step"])}
-    {React.createElement(pageData.examples["Wizard in modal"])}
-    {React.createElement(pageData.examples["Wizard with drawer"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsWizardReactDeprecatedDocs';
-Component.pageData = pageData;
-
-export default Component;