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

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

@@ -0,0 +1,986 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import {
+FormGroup,
+TextInput,
+Drawer,
+DrawerContent,
+Button,
+Title,
+Flex,
+Checkbox,
+DrawerPanelContent,
+DrawerColorVariant,
+DrawerHead,
+DrawerActions,
+DrawerCloseButton,
+Modal,
+ModalVariant,
+Wizard,
+WizardFooter,
+WizardFooterWrapper,
+WizardToggle,
+WizardStep,
+WizardBody,
+useWizardFooter,
+useWizardContext,
+WizardNavItem,
+WizardNav,
+WizardHeader
+} from '@patternfly/react-core';
+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';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
+const pageData = {
+  "id": "Wizard",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/wizard/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Wizard/examples/Wizard.md",
+  "relPath": "packages/react-core/src/components/Wizard/examples/Wizard.md",
+  "propComponents": [
+    {
+      "name": "Wizard",
+      "description": "Wrapper for all steps and hosts state, including navigation helpers, within context.\nThe WizardContext provided by default gives any child of wizard access to those resources.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Step components",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes spread to the wizard"
+        },
+        {
+          "name": "footer",
+          "type": "Partial<WizardFooterProps> | CustomWizardFooterFunction | React.ReactElement<any>",
+          "description": "Wizard footer"
+        },
+        {
+          "name": "header",
+          "type": "React.ReactNode",
+          "description": "Wizard header"
+        },
+        {
+          "name": "height",
+          "type": "number | string",
+          "description": "Custom height of the wizard"
+        },
+        {
+          "name": "isNoPlainOnGlass",
+          "type": "boolean",
+          "description": "Prevents the wizard from automatically applying plain styling when glass theme is enabled.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Adds plain styling to the wizard.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isProgressive",
+          "type": "boolean",
+          "description": "Progressively shows steps, where all steps following the active step are hidden. Defaults to false.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isVisitRequired",
+          "type": "boolean",
+          "description": "Disables steps that haven't been visited. Defaults to false.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "nav",
+          "type": "Partial<WizardNavProps> | CustomWizardNavFunction | React.ReactElement<any>",
+          "description": "Wizard navigation"
+        },
+        {
+          "name": "navAriaLabel",
+          "type": "string",
+          "description": "Aria-label for the Nav"
+        },
+        {
+          "name": "onClose",
+          "type": "(event: React.MouseEvent<HTMLButtonElement>) => void",
+          "description": "Callback function to close the wizard"
+        },
+        {
+          "name": "onSave",
+          "type": "(event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>",
+          "description": "Callback function to save at the end of the wizard, if not specified uses onClose"
+        },
+        {
+          "name": "onStepChange",
+          "type": "(\n  event: React.MouseEvent<HTMLButtonElement>,\n  currentStep: WizardStepType,\n  prevStep: WizardStepType,\n  scope: WizardStepChangeScope\n) => void | Promise<void>",
+          "description": "Callback function when navigating between steps"
+        },
+        {
+          "name": "shouldFocusContent",
+          "type": "boolean",
+          "description": "Flag indicating whether the wizard content should be focused after the onNext or onBack callbacks\nare called.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "startIndex",
+          "type": "number",
+          "description": "The initial index the wizard is to start on (1 or higher). Defaults to 1.",
+          "defaultValue": "1"
+        },
+        {
+          "name": "width",
+          "type": "number | string",
+          "description": "Custom width of the wizard"
+        }
+      ]
+    },
+    {
+      "name": "WizardFooter",
+      "description": "Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.",
+      "props": [
+        {
+          "name": "activeStep",
+          "type": "WizardBasicStep | WizardParentStep | WizardSubStep",
+          "description": "The active step",
+          "required": true
+        },
+        {
+          "name": "backButtonProps",
+          "type": "Omit<WizardFooterButtonProps, 'isDisabled'>",
+          "description": "Additional props for the Back button."
+        },
+        {
+          "name": "backButtonText",
+          "type": "React.ReactNode",
+          "description": "Custom text for the Back button"
+        },
+        {
+          "name": "cancelButtonProps",
+          "type": "Omit<ButtonProps, 'children' | 'variant' | 'onClick'>",
+          "description": "Additional props for the Cancel button."
+        },
+        {
+          "name": "cancelButtonText",
+          "type": "React.ReactNode",
+          "description": "Custom text for the Cancel link"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes spread to the wizard footer"
+        },
+        {
+          "name": "isBackDisabled",
+          "type": "boolean",
+          "description": "Flag to disable the back button"
+        },
+        {
+          "name": "isBackHidden",
+          "type": "boolean",
+          "description": "Flag to hide the back button"
+        },
+        {
+          "name": "isCancelHidden",
+          "type": "boolean",
+          "description": "Flag to hide the cancel button"
+        },
+        {
+          "name": "isNextDisabled",
+          "type": "boolean",
+          "description": "Flag to disable the next button"
+        },
+        {
+          "name": "nextButtonProps",
+          "type": "Omit<WizardFooterButtonProps, 'isDisabled' | 'type'>",
+          "description": "Additional props for the Next button."
+        },
+        {
+          "name": "nextButtonText",
+          "type": "React.ReactNode",
+          "description": "Custom text for the Next button. The current step's nextButtonText takes precedence."
+        },
+        {
+          "name": "onBack",
+          "type": "(event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>",
+          "description": "Back button callback",
+          "required": true
+        },
+        {
+          "name": "onClose",
+          "type": "(event: React.MouseEvent<HTMLButtonElement>) => void",
+          "description": "Cancel link callback",
+          "required": true
+        },
+        {
+          "name": "onNext",
+          "type": "(event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>",
+          "description": "Next button callback",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "WizardFooterWrapper",
+      "description": "Applies default wizard footer styling any number of child elements.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "WizardToggle",
+      "description": "Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.",
+      "props": [
+        {
+          "name": "activeStep",
+          "type": "WizardBasicStep | WizardParentStep | WizardSubStep",
+          "description": "The current step",
+          "required": true
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "The expandable dropdown button's aria-label",
+          "defaultValue": "'Wizard toggle'"
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactElement<any>",
+          "description": "Wizard footer",
+          "required": true
+        },
+        {
+          "name": "isNavExpanded",
+          "type": "boolean",
+          "description": "Flag to determine whether the dropdown navigation is expanded"
+        },
+        {
+          "name": "nav",
+          "type": "React.ReactElement<WizardNavProps>",
+          "description": "Wizard navigation",
+          "required": true
+        },
+        {
+          "name": "steps",
+          "type": "WizardStepType[]",
+          "description": "List of steps and/or sub-steps",
+          "required": true
+        },
+        {
+          "name": "toggleNavExpanded",
+          "type": "(event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void",
+          "description": "Callback to expand or collapse the dropdown navigation"
+        }
+      ]
+    },
+    {
+      "name": "WizardStep",
+      "description": "The primary child component for Wizard. Step props are used for the list of steps managed in context.",
+      "props": [
+        {
+          "name": "body",
+          "type": "Omit<Omit<WizardBodyProps, 'children'>, 'children'>",
+          "description": "Props for WizardBody that wraps content by default."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode | undefined",
+          "description": "Optional for when the step is used as a parent to sub-steps"
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactElement<any> | Partial<WizardFooterProps>",
+          "description": "Replaces the step's footer. The step's footer takes precedence over the wizard's footer."
+        },
+        {
+          "name": "id",
+          "type": "string | number",
+          "description": "Unique identifier",
+          "required": true
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag to disable the step's navigation item"
+        },
+        {
+          "name": "isExpandable",
+          "type": "boolean",
+          "description": "Flag to determine whether parent steps can expand or not. Defaults to false."
+        },
+        {
+          "name": "isHidden",
+          "type": "boolean",
+          "description": "Flag to determine whether the step is hidden"
+        },
+        {
+          "name": "name",
+          "type": "React.ReactNode",
+          "description": "Name of the step's navigation item",
+          "required": true
+        },
+        {
+          "name": "navItem",
+          "type": "Partial<WizardNavItemProps> | CustomWizardNavItemFunction | React.ReactElement<any>",
+          "description": "Replaces the step's navigation item or its properties."
+        },
+        {
+          "name": "status",
+          "type": "'default' | 'error' | 'success' | 'warning'",
+          "description": "Used to determine icon next to the step's navigation item"
+        },
+        {
+          "name": "steps",
+          "type": "React.ReactElement<WizardStepProps>[]",
+          "description": "Optional list of sub-steps"
+        }
+      ]
+    },
+    {
+      "name": "WizardBody",
+      "description": "Used as a wrapper for WizardStep content, where the wrapping element is customizable.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible name to the wrapper element when the content overflows and renders\na scrollbar."
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Adds an accessible name to the wrapper element by passing the the id of one or more elements.\nThe aria-labelledby will only be applied when the content overflows and renders a scrollbar."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered in the Wizard body",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes spread to the wizard body"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType",
+          "description": "Component used as the wrapping content container",
+          "defaultValue": "'div'"
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Flag to remove the default body padding",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "WizardHeader",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes spread to the wizard header"
+        },
+        {
+          "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": "isCloseHidden",
+          "type": "boolean",
+          "description": "Flag indicating whether the close button should be in the header"
+        },
+        {
+          "name": "onClose",
+          "type": "(event: React.MouseEvent<HTMLButtonElement>) => 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": "WizardNav",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Aria-label applied to the navigation element"
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Sets the aria-labelledby attribute on the navigation element"
+        },
+        {
+          "name": "children",
+          "type": "any",
+          "description": "children should be WizardNavItem components"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes spread to the wizard nav"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Whether the navigation is expanded",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isInnerList",
+          "type": "boolean",
+          "description": "True to return the inner list without the wrapping navigation element",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "WizardNavItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Can nest a WizardNav component for substeps",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes spread to the wizard nav item"
+        },
+        {
+          "name": "component",
+          "type": "'button' | 'a'",
+          "description": "Component used to render WizardNavItem",
+          "defaultValue": "'button'"
+        },
+        {
+          "name": "content",
+          "type": "React.ReactNode",
+          "description": "The content to display in the navigation item",
+          "defaultValue": "''"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "An optional url to use for when using an anchor component"
+        },
+        {
+          "name": "id",
+          "type": "string | number",
+          "description": "The id for the navigation item"
+        },
+        {
+          "name": "isCurrent",
+          "type": "boolean",
+          "description": "Whether the navigation item is the currently active item",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Whether the navigation item is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isExpandable",
+          "type": "boolean",
+          "description": "Flag indicating that this NavItem has child steps and is expandable",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isVisited",
+          "type": "boolean",
+          "description": "Whether the navigation item has been visited",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onClick",
+          "type": "(event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, index: number) => any",
+          "description": "Callback for when the navigation item is clicked"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": ""
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "",
+          "defaultValue": "true"
+        },
+        {
+          "name": "status",
+          "type": "'default' | 'error' | 'success' | 'warning'",
+          "description": "Used to determine the icon displayed next to content. Default has no icon.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "stepIndex",
+          "type": "number",
+          "description": "The step index passed into the onNavItemClick callback",
+          "required": true
+        },
+        {
+          "name": "target",
+          "type": "React.HTMLAttributeAnchorTarget",
+          "description": "Where to display the linked URL when using an anchor component"
+        }
+      ]
+    },
+    {
+      "name": "WizardContextProps",
+      "description": "",
+      "props": [
+        {
+          "name": "activeStep",
+          "type": "WizardStepType",
+          "description": "Current step",
+          "required": true
+        },
+        {
+          "name": "close",
+          "type": "() => void",
+          "description": "Close the wizard",
+          "required": true
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactElement<any>",
+          "description": "Footer element",
+          "required": true
+        },
+        {
+          "name": "getStep",
+          "type": "(stepId: number | string) => WizardStepType",
+          "description": "Get step by ID",
+          "required": true
+        },
+        {
+          "name": "goToNextStep",
+          "type": "() => void | Promise<void>",
+          "description": "Navigate to the next step",
+          "required": true
+        },
+        {
+          "name": "goToPrevStep",
+          "type": "() => void | Promise<void>",
+          "description": "Navigate to the previous step",
+          "required": true
+        },
+        {
+          "name": "goToStepById",
+          "type": "(id: number | string) => void",
+          "description": "Navigate to step by ID",
+          "required": true
+        },
+        {
+          "name": "goToStepByIndex",
+          "type": "(index: number) => void",
+          "description": "Navigate to step by index",
+          "required": true
+        },
+        {
+          "name": "goToStepByName",
+          "type": "(name: string) => void",
+          "description": "Navigate to step by name",
+          "required": true
+        },
+        {
+          "name": "mainWrapperRef",
+          "type": "React.RefObject<HTMLElement | null>",
+          "description": "Ref for main wizard content element.",
+          "required": true
+        },
+        {
+          "name": "setFooter",
+          "type": "(footer: React.ReactElement<any> | Partial<WizardFooterProps>) => void",
+          "description": "Update the footer with any react element",
+          "required": true
+        },
+        {
+          "name": "setStep",
+          "type": "(step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) => void",
+          "description": "Set step by ID",
+          "required": true
+        },
+        {
+          "name": "shouldFocusContent",
+          "type": "boolean",
+          "description": "Flag indicating whether the wizard content should be focused after the onNext or onBack callbacks\nare called.",
+          "required": true
+        },
+        {
+          "name": "steps",
+          "type": "WizardStepType[]",
+          "description": "List of steps",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "WizardBasicStep",
+      "description": "Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents.",
+      "props": [
+        {
+          "name": "component",
+          "type": "React.ReactElement<any>",
+          "description": "Content shown when the step's navigation item is selected. When treated as a parent step, only sub-step content will be shown."
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactElement<any> | Partial<WizardFooterProps>",
+          "description": "Replaces the step's footer. The step's footer takes precedence over the wizard's footer."
+        },
+        {
+          "name": "id",
+          "type": "string | number",
+          "description": "Unique identifier",
+          "required": true
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "description": "Order index of step (starts at 1)",
+          "required": true
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag to disable the step's navigation item"
+        },
+        {
+          "name": "isHidden",
+          "type": "boolean",
+          "description": "Flag to determine whether the step is hidden"
+        },
+        {
+          "name": "isVisited",
+          "type": "boolean",
+          "description": "Flag to represent whether the step has been visited (navigated to)"
+        },
+        {
+          "name": "name",
+          "type": "React.ReactNode",
+          "description": "Name of the step's navigation item",
+          "required": true
+        },
+        {
+          "name": "navItem",
+          "type": "WizardNavItemType",
+          "description": "Replaces the step's navigation item or its properties."
+        },
+        {
+          "name": "status",
+          "type": "'default' | 'error' | 'success' | 'warning'",
+          "description": "Used to determine icon next to the step's navItem"
+        }
+      ]
+    },
+    {
+      "name": "WizardParentStep",
+      "description": "Type used to define parent steps.",
+      "props": [
+        {
+          "name": "isExpandable",
+          "type": "boolean",
+          "description": "Flag to determine whether the step can expand or not."
+        },
+        {
+          "name": "subStepIds",
+          "type": "(string | number)[]",
+          "description": "Nested step IDs",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "WizardSubStep",
+      "description": "Type used to define sub-steps.",
+      "props": [
+        {
+          "name": "parentId",
+          "type": "string | number",
+          "description": "Unique identifier of the parent step",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-wizard"
+  ],
+  "examples": [
+    "Basic",
+    "Plain",
+    "Focus content on next/back",
+    "Basic with disabled steps",
+    "Anchors for nav items",
+    "Incrementally enabled steps",
+    "Expandable steps",
+    "Progress after submission",
+    "Enabled on form validation",
+    "Validate on button press",
+    "Progressive steps",
+    "Get current step",
+    "Within modal",
+    "Step drawer content",
+    "Custom navigation",
+    "Header",
+    "Custom footer",
+    "Custom navigation item",
+    "Toggle step visibility",
+    "Step status"
+  ]
+};
+pageData.liveContext = {
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+  FormGroup,
+  TextInput,
+  Drawer,
+  DrawerContent,
+  Button,
+  Title,
+  Flex,
+  Checkbox,
+  DrawerPanelContent,
+  DrawerColorVariant,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Modal,
+  ModalVariant,
+  Wizard,
+  WizardFooter,
+  WizardFooterWrapper,
+  WizardToggle,
+  WizardStep,
+  WizardBody,
+  useWizardFooter,
+  useWizardContext,
+  WizardNavItem,
+  WizardNav,
+  WizardHeader,
+  RhMicronsExternalLinkIcon,
+  SlackHashIcon,
+  CogsIcon,
+  styles,
+  layout
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardBasic: React.FunctionComponent = () => (\n  <Wizard height={400} title=\"Basic wizard\">\n    <WizardStep name=\"Step 1\" id=\"basic-first-step\">\n      <p>\n        The content of this step overflows and creates a scrollbar, which causes a tabindex of \"0\", a role of \"region\",\n        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 lacinia\n        vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim ex porttitor\n        odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis eget finibus\n        ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id nec turpis. Morbi\n        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 orci\n        fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante. Vestibulum\n        sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam lectus a urna.\n        Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut sit amet commodo\n        orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed luctus elit nibh.\n        Quisque et felis diam. Integer ac metus dolor.\n      </p>\n    </WizardStep>\n    <WizardStep name=\"Step 2\" id=\"basic-second-step\">\n      Step 2 content\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"basic-review-step\" footer={{ nextButtonText: 'Finish' }}>\n      Review step content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Plain': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardPlain: React.FunctionComponent = () => (\n  <Wizard height={400} title=\"Plain wizard\" isPlain>\n    <WizardStep name=\"Step 1\" id=\"plain-first-step\">\n      <p>Step 1 content</p>\n    </WizardStep>\n    <WizardStep name=\"Step 2\" id=\"plain-second-step\">\n      <p>Step 2 content</p>\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"plain-review-step\" footer={{ nextButtonText: 'Finish' }}>\n      <p>Review step content</p>\n    </WizardStep>\n  </Wizard>\n);\n","title":"Plain","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Focus content on next/back': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardFocusOnNextBack: React.FunctionComponent = () => (\n  <Wizard shouldFocusContent title=\"Wizard that focuses content on next or back click\">\n    <WizardStep name=\"Step 1\" id=\"wizard-focus-first-step\">\n      Step 1 content\n    </WizardStep>\n    <WizardStep name=\"Step 2\" id=\"wizard-focus-second-step\">\n      Step 2 content\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"wizard-focus-review-step\" footer={{ nextButtonText: 'Finish' }}>\n      Review step content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Focus content on next/back","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To focus the main content element of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`Wizard`}
+        </code>
+        {`, pass in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`shouldFocusContent`}
+        </code>
+        {` property. It is recommended that this is passed in so that users can navigate through a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`WizardStep`}
+        </code>
+        {` content in order.`}
+      </p>
+    </Example>,
+  'Basic with disabled steps': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardBasicDisabledSteps: React.FunctionComponent = () => (\n  <Wizard height={400} title=\"Basic disabled wizard\">\n    <WizardStep name=\"Step 1\" id=\"bdisabled-first-step\">\n      Step 1 content\n    </WizardStep>\n    <WizardStep name=\"Step 2\" id=\"bdisabled-second-step\" isDisabled>\n      Step 2 content\n    </WizardStep>\n    <WizardStep name=\"Step 3\" id=\"bdisabled-third-step\">\n      Step 3 content\n    </WizardStep>\n    <WizardStep name=\"Step 4\" id=\"bdisabled-fourth-step\" isDisabled>\n      Step 4 content\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"bdisabled-review-step\" footer={{ nextButtonText: 'Finish' }}>\n      Review step content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Basic with disabled steps","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Anchors for nav items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Button, Wizard, WizardStep } from '@patternfly/react-core';\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  <Wizard height={400} title=\"Anchor link wizard\">\n    <WizardStep\n      name={\n        <>\n          <RhMicronsExternalLinkIcon /> PF3\n        </>\n      }\n      id=\"navanchors-pf3-step\"\n      navItem={{ component: 'a', href: 'https://www.patternfly.org/v3', target: '_blank' }}\n    >\n      Step 1: Read about PF3\n    </WizardStep>\n    <WizardStep\n      name={\n        <>\n          <RhMicronsExternalLinkIcon /> PF4\n        </>\n      }\n      id=\"navanchors-pf4-step\"\n      navItem={{ component: 'a', href: 'https://www.patternfly.org/v4', target: '_blank' }}\n    >\n      Step 2: Read about PF4\n    </WizardStep>\n    <WizardStep\n      name={\n        <>\n          <SlackHashIcon /> Join us on slack\n        </>\n      }\n      id=\"navanchors-slack-step\"\n      navItem={{ component: 'a', href: 'https://patternfly.slack.com', target: '_blank' }}\n    >\n      <Button variant=\"link\" component=\"a\" target=\"_blank\" href=\"https://patternfly.slack.com\">\n        Join the conversation\n      </Button>\n    </WizardStep>\n  </Wizard>\n);\n","title":"Anchors for nav items","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Incrementally enabled steps': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardStepVisitRequired: React.FunctionComponent = () => (\n  <Wizard height={400} title=\"Incrementally enabled steps wizard\" isVisitRequired>\n    <WizardStep name=\"Step 1\" id=\"req-visit-first-step\">\n      Step 1 content\n    </WizardStep>\n    <WizardStep name=\"Step 2\" id=\"req-visit-second-step\">\n      Step 2 content\n    </WizardStep>\n    <WizardStep name=\"Step 3\" id=\"req-visit-third-step\">\n      Step 3 content\n    </WizardStep>\n    <WizardStep name=\"Step 4\" id=\"req-visit-fourth-step\">\n      Step 4 content\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"req-visit-review-step\" footer={{ nextButtonText: 'Finish' }}>\n      Review step content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Incrementally enabled steps","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Expandable steps': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardExpandableSteps: React.FunctionComponent = () => (\n  <Wizard height={400} title=\"Expandable steps wizard\" nav={{ isExpanded: true }}>\n    <WizardStep\n      name=\"Step 1\"\n      id=\"expand-steps-1\"\n      isExpandable\n      steps={[\n        <WizardStep name=\"Substep A\" id=\"expand-steps-sub-a\" key=\"expand-steps-sub-a\">\n          Substep A content\n        </WizardStep>,\n        <WizardStep name=\"Substep B\" id=\"expand-steps-sub-b\" key=\"expand-steps-sub-b\">\n          Substep B content\n        </WizardStep>\n      ]}\n    />\n    <WizardStep name=\"Step 2\" id=\"expand-steps-2\">\n      Step 2 content\n    </WizardStep>\n    <WizardStep\n      name=\"Step 3\"\n      id=\"expand-steps-3\"\n      isExpandable\n      steps={[\n        <WizardStep name=\"Substep C\" id=\"expand-steps-sub-c\" key=\"expand-steps-sub-c\">\n          Substep C content\n        </WizardStep>,\n        <WizardStep name=\"Substep D\" id=\"expand-steps-sub-d\" key=\"expand-steps-sub-d\">\n          Substep D content\n        </WizardStep>\n      ]}\n    />\n    <WizardStep name=\"Step 4\" id=\"expand-steps-4\">\n      Step 4 content\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"expand-steps-review\" footer={{ nextButtonText: 'Finish' }}>\n      Review step content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Expandable steps","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Progress after submission': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useCallback, useEffect, useState } from 'react';\nimport {\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Progress,\n  Button,\n  Wizard,\n  WizardStep\n} from '@patternfly/react-core';\nimport CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';\nimport layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';\n\ninterface ValidationProgressProps {\n  onClose(): void;\n}\n\nconst ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {\n  const [percentValidated, setPercentValidated] = useState(0);\n\n  const tick = useCallback(() => {\n    if (percentValidated < 100) {\n      setPercentValidated((prevValue) => prevValue + 20);\n    }\n  }, [percentValidated]);\n\n  useEffect(() => {\n    const interval = setInterval(() => tick(), 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [tick]);\n\n  return (\n    <div className={layout.bullseye}>\n      <EmptyState\n        headingLevel=\"h4\"\n        titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}\n        icon={CogsIcon}\n        variant=\"lg\"\n      >\n        <EmptyStateBody>\n          <Progress value={percentValidated} measureLocation=\"outside\" aria-label=\"Wizard 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={percentValidated !== 100} onClick={onClose}>\n              Log to console\n            </Button>\n          </EmptyStateActions>\n        </EmptyStateFooter>\n      </EmptyState>\n    </div>\n  );\n};\n\nexport const WizardWithSubmitProgress: React.FunctionComponent = () => {\n  const [isSubmitted, setIsSubmitted] = useState(false);\n\n  // eslint-disable-next-line no-console\n  const onClose = () => console.log('Some close action occurs here.');\n\n  if (isSubmitted) {\n    return <ValidationProgress onClose={onClose} />;\n  }\n\n  return (\n    <Wizard height={400} title=\"Submit progress wizard\" onClose={onClose}>\n      <WizardStep name=\"Step 1\" id=\"submit-progress-step-1\">\n        Step 1 content\n      </WizardStep>\n      <WizardStep name=\"Step 2\" id=\"submit-progress-step-2\">\n        Step 2 content\n      </WizardStep>\n      <WizardStep\n        name=\"Review\"\n        id=\"submit-progress-review\"\n        footer={{ nextButtonText: 'Finish', onNext: () => setIsSubmitted(true) }}\n      >\n        Review step content\n      </WizardStep>\n    </Wizard>\n  );\n};\n","title":"Progress after submission","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Enabled on form validation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Form,\n  FormGroup,\n  FormHelperText,\n  HelperText,\n  HelperTextItem,\n  TextInput,\n  Wizard,\n  WizardStep\n} from '@patternfly/react-core';\n\ninterface SampleFormProps {\n  value: string;\n  isValid: boolean;\n  setValue: (value: string) => void;\n  setIsValid: (isValid: boolean) => void;\n}\n\nconst SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {\n  const validated = isValid ? 'default' : 'error';\n\n  const handleTextInputChange = (_event, value: string) => {\n    const isValid = /^\\d+$/.test(value);\n\n    setValue(value);\n    setIsValid(isValid);\n  };\n\n  return (\n    <Form>\n      <FormGroup label=\"Age:\" type=\"number\" fieldId=\"age\">\n        <TextInput\n          validated={validated}\n          value={value}\n          id=\"age\"\n          aria-describedby=\"age-helper\"\n          onChange={handleTextInputChange}\n        />\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem variant={validated}>\n              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}\n            </HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n\nexport const WizardEnabledOnFormValidation: React.FunctionComponent = () => {\n  const [ageValue, setAgeValue] = useState('Thirty');\n  const [isSubAFormValid, setIsSubAFormValid] = useState(false);\n\n  const onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);\n\n  return (\n    <Wizard isVisitRequired height={400} title=\"Enabled on form validation wizard\" onSave={onSave}>\n      <WizardStep name=\"Information\" id=\"form-valid-info\">\n        Information content\n      </WizardStep>\n      <WizardStep\n        name=\"Configuration\"\n        id=\"form-valid-config\"\n        steps={[\n          <WizardStep\n            name=\"Substep A with validation\"\n            id=\"form-valid-sub-a\"\n            key=\"form-valid-sub-a\"\n            footer={{ isNextDisabled: !isSubAFormValid }}\n          >\n            <SampleForm\n              value={ageValue}\n              setValue={setAgeValue}\n              isValid={isSubAFormValid}\n              setIsValid={setIsSubAFormValid}\n            />\n          </WizardStep>,\n          <WizardStep name=\"Substep B\" id=\"form-valid-sub-b\" key=\"form-valid-sub-b\">\n            Substep B content\n          </WizardStep>\n        ]}\n      />\n      <WizardStep name=\"Additional\" id=\"form-valid-additional\">\n        Additional step content\n      </WizardStep>\n      <WizardStep name=\"Review\" id=\"form-valid-review\" footer={{ nextButtonText: 'Submit form' }}></WizardStep>\n    </Wizard>\n  );\n};\n","title":"Enabled on form validation","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Validate on button press': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useCallback, useEffect, useState } from 'react';\nimport {\n  Button,\n  ActionList,\n  ActionListGroup,\n  ActionListItem,\n  Alert,\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Progress,\n  Form,\n  FormGroup,\n  TextInput,\n  HelperText,\n  HelperTextItem,\n  FormHelperText,\n  Wizard,\n  WizardStep,\n  WizardFooterWrapper,\n  useWizardContext\n} from '@patternfly/react-core';\nimport CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';\nimport layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';\n\ninterface ValidationProgressProps {\n  onClose(): void;\n}\n\nconst ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {\n  const [percentValidated, setPercentValidated] = useState(0);\n\n  const tick = useCallback(() => {\n    if (percentValidated < 100) {\n      setPercentValidated((prevValue) => prevValue + 20);\n    }\n  }, [percentValidated]);\n\n  useEffect(() => {\n    const interval = setInterval(() => tick(), 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [tick]);\n\n  return (\n    <div className={layout.bullseye}>\n      <EmptyState\n        headingLevel=\"h4\"\n        titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}\n        icon={CogsIcon}\n        variant=\"lg\"\n      >\n        <EmptyStateBody>\n          <Progress value={percentValidated} measureLocation=\"outside\" aria-label=\"Wizard 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={percentValidated !== 100} onClick={onClose}>\n              Log to console\n            </Button>\n          </EmptyStateActions>\n        </EmptyStateFooter>\n      </EmptyState>\n    </div>\n  );\n};\n\ninterface LastStepFooterProps {\n  isValid: boolean;\n  setIsSubmitted(isSubmitted: boolean): void;\n  setHasErrorOnSubmit(isSubmitted: boolean): void;\n}\n\nconst LastStepFooter: React.FunctionComponent<LastStepFooterProps> = ({\n  isValid,\n  setIsSubmitted,\n  setHasErrorOnSubmit\n}) => {\n  const { goToNextStep, goToPrevStep } = useWizardContext();\n\n  const onValidate = () => {\n    setIsSubmitted(true);\n\n    if (!isValid) {\n      setIsSubmitted(false);\n      setHasErrorOnSubmit(true);\n    } else {\n      goToNextStep();\n    }\n  };\n\n  return (\n    <WizardFooterWrapper>\n      <ActionList>\n        <ActionListGroup>\n          <ActionListItem>\n            <Button variant=\"secondary\" onClick={goToPrevStep}>\n              Back\n            </Button>\n          </ActionListItem>\n          <ActionListItem>\n            <Button onClick={onValidate}>Validate</Button>\n          </ActionListItem>\n        </ActionListGroup>\n      </ActionList>\n    </WizardFooterWrapper>\n  );\n};\n\ninterface SampleFormProps {\n  value: string;\n  isValid: boolean;\n  setValue: (value: string) => void;\n  setIsValid: (isValid: boolean) => void;\n}\n\nconst SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {\n  const validated = isValid ? 'default' : 'error';\n\n  const handleTextInputChange = (_event, value: string) => {\n    const isValid = /^\\d+$/.test(value);\n\n    setValue(value);\n    setIsValid(isValid);\n  };\n\n  return (\n    <Form>\n      <FormGroup label=\"Age:\" type=\"number\" fieldId=\"age\">\n        <TextInput\n          validated={validated}\n          value={value}\n          id=\"age\"\n          aria-describedby=\"age-helper\"\n          onChange={handleTextInputChange}\n        />\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem variant={validated}>\n              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}\n            </HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n\nexport const WizardValidateOnButtonPress: React.FunctionComponent = () => {\n  const [ageValue, setAgeValue] = useState('Thirty');\n  const [isSubmitted, setIsSubmitted] = useState(false);\n  const [isFirstStepValid, setIsFirstStepValid] = useState(false);\n  const [hasErrorOnSubmit, setHasErrorOnSubmit] = useState(false);\n\n  // eslint-disable-next-line no-console\n  const onClose = () => console.log('Some close action occurs here.');\n\n  if (isSubmitted && isFirstStepValid) {\n    return <ValidationProgress onClose={onClose} />;\n  }\n\n  return (\n    <Wizard title=\"Validate on button press wizard\" onClose={onClose} height={400}>\n      <WizardStep name=\"Step 1\" id=\"validate-btn-step-1\">\n        Step 1 content\n      </WizardStep>\n      <WizardStep name=\"Step 2\" id=\"validate-btn-step-2\">\n        Step 2 content\n      </WizardStep>\n      <WizardStep\n        name=\"Final Step\"\n        id=\"validate-btn-finish-step\"\n        footer={\n          <LastStepFooter\n            isValid={isFirstStepValid}\n            setIsSubmitted={setIsSubmitted}\n            setHasErrorOnSubmit={setHasErrorOnSubmit}\n          />\n        }\n      >\n        {hasErrorOnSubmit && (\n          <div style={{ padding: '15px 0' }}>\n            <Alert isInline variant=\"danger\" title=\"Validation failed, please try again.\" />\n          </div>\n        )}\n        <SampleForm\n          value={ageValue}\n          setValue={(value) => setAgeValue(value)}\n          isValid={!hasErrorOnSubmit || isFirstStepValid}\n          setIsValid={setIsFirstStepValid}\n        />\n      </WizardStep>\n    </Wizard>\n  );\n};\n","title":"Validate on button press","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Progressive steps': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardProgressiveSteps: React.FunctionComponent = () => (\n  <Wizard height={400} title=\"Progressive steps wizard\" isProgressive>\n    <WizardStep id=\"progressive-step-1\" name=\"Get started\">\n      Get started content\n    </WizardStep>\n    <WizardStep id=\"progressive-step-2\" name=\"Update options\">\n      Update options content\n    </WizardStep>\n    <WizardStep\n      id=\"progressive-step-3\"\n      name=\"Quick options\"\n      steps={[\n        <WizardStep key=\"progressive-substep-1\" id=\"progressive-substep-1\" name=\"Substep 1\">\n          Substep 1 content\n        </WizardStep>,\n        <WizardStep key=\"progressive-substep-2\" id=\"progressive-substep-2\" name=\"Substep 2\">\n          Substep 2 content\n        </WizardStep>,\n        <WizardStep key=\"progressive-substep-3\" id=\"progressive-substep-3\" name=\"Substep 3\">\n          Substep 3 content\n        </WizardStep>\n      ]}\n    />\n    <WizardStep id=\"progressive-step-4\" name=\"Review\" footer={{ nextButtonText: 'Finish' }}>\n      Review content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Progressive steps","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Get current step': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Wizard,\n  WizardStep,\n  WizardStepType\n} from '@patternfly/react-core';\n\nconst CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepType | undefined }) => (\n  <DescriptionList isHorizontal isCompact aria-label={`${currentStep?.name} prop data`}>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Index</DescriptionListTerm>\n      <DescriptionListDescription>{currentStep?.index}</DescriptionListDescription>\n    </DescriptionListGroup>\n\n    <DescriptionListGroup>\n      <DescriptionListTerm>ID</DescriptionListTerm>\n      <DescriptionListDescription>{currentStep?.id}</DescriptionListDescription>\n    </DescriptionListGroup>\n\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>{currentStep?.name}</DescriptionListDescription>\n    </DescriptionListGroup>\n\n    <DescriptionListGroup>\n      <DescriptionListTerm>Visited</DescriptionListTerm>\n      <DescriptionListDescription>{currentStep?.isVisited ? 'true' : 'false'}</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n\nexport const GetCurrentStepWizard: React.FunctionComponent = () => {\n  const [currentStep, setCurrentStep] = useState<WizardStepType>();\n\n  const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>\n    setCurrentStep(currentStep);\n\n  return (\n    <Wizard height={400} title=\"Get current step wizard\" onStepChange={onStepChange}>\n      <WizardStep name=\"Step 1\" id=\"get-current-step-1\">\n        {currentStep ? <CurrentStepDescriptionList currentStep={currentStep} /> : 'Step 1 content'}\n      </WizardStep>\n      <WizardStep\n        name=\"Step 2\"\n        id=\"get-current-step-2\"\n        isDisabled\n        steps={[\n          <WizardStep name=\"Substep 1\" id=\"get-current-substep-1\" key=\"get-current-substep-1\">\n            <CurrentStepDescriptionList currentStep={currentStep} />\n          </WizardStep>,\n          <WizardStep name=\"Substep 2\" id=\"get-current-substep-2\" key=\"get-current-substep-2\">\n            <CurrentStepDescriptionList currentStep={currentStep} />\n          </WizardStep>\n        ]}\n      />\n      <WizardStep\n        name=\"Step 3\"\n        id=\"get-current-step-3\"\n        steps={[\n          <WizardStep name=\"Substep 3\" id=\"get-current-substep-3\" key=\"get-current-substep-3\">\n            <CurrentStepDescriptionList currentStep={currentStep} />\n          </WizardStep>,\n          <WizardStep name=\"Substep 4\" id=\"get-current-substep-4\" key=\"get-current-substep-4\">\n            <CurrentStepDescriptionList currentStep={currentStep} />\n          </WizardStep>\n        ]}\n      />\n      <WizardStep\n        name=\"Step 4\"\n        id=\"get-current-step-4\"\n        steps={[\n          <WizardStep name=\"Substep 5\" id=\"get-current-substep-5\" key=\"get-current-substep-5\" isHidden>\n            <CurrentStepDescriptionList currentStep={currentStep} />\n          </WizardStep>,\n          <WizardStep name=\"Substep 6\" id=\"get-current-substep-6\" key=\"get-current-substep-6\">\n            <CurrentStepDescriptionList currentStep={currentStep} />\n          </WizardStep>\n        ]}\n      />\n      <WizardStep name=\"Review\" id=\"get-current-review-step\" footer={{ nextButtonText: 'Finish' }}>\n        <CurrentStepDescriptionList currentStep={currentStep} />\n      </WizardStep>\n    </Wizard>\n  );\n};\n","title":"Get current step","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Within modal': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';\n\nexport const WizardWithinModal: React.FunctionComponent = () => {\n  const [isModelOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsModalOpen(true)}>Show Modal</Button>\n\n      <Modal\n        isOpen={isModelOpen}\n        aria-label=\"Wizard modal\"\n        onEscapePress={() => setIsModalOpen(false)}\n        variant={ModalVariant.medium}\n      >\n        <Wizard\n          height={400}\n          onClose={() => setIsModalOpen(false)}\n          title=\"In modal wizard\"\n          header={\n            <WizardHeader\n              onClose={() => setIsModalOpen(false)}\n              title=\"Wizard in modal\"\n              description=\"Simple wizard description\"\n            />\n          }\n        >\n          <WizardStep name=\"Step 1\" id=\"in-modal-step-1\">\n            Step 1 content\n          </WizardStep>\n          <WizardStep name=\"Step 2\" id=\"in-modal-step-2\">\n            Step 2 content\n          </WizardStep>\n          <WizardStep\n            name=\"Review\"\n            id=\"in-modal-review-step\"\n            footer={{ nextButtonText: 'Finish', onNext: () => setIsModalOpen(false) }}\n          >\n            Review step content\n          </WizardStep>\n        </Wizard>\n      </Modal>\n    </>\n  );\n};\n","title":"Within modal","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Step drawer content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerPanelContent,\n  DrawerColorVariant,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Flex,\n  Button,\n  useWizardContext,\n  Wizard,\n  WizardStep\n} from '@patternfly/react-core';\nimport styles from '@patternfly/react-styles/css/components/Wizard/wizard';\n\nconst StepContentWithDrawer: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const { activeStep } = useWizardContext();\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onWizardExpand = () => drawerRef.current && drawerRef.current.focus();\n\n  return (\n    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>\n      <DrawerContent\n        panelContent={\n          <DrawerPanelContent widths={{ default: 'width_50' }} colorVariant={DrawerColorVariant.secondary}>\n            <DrawerHead>\n              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>\n                Drawer content: <strong>{activeStep?.name}</strong>\n              </span>\n              <DrawerActions>\n                <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />\n              </DrawerActions>\n            </DrawerHead>\n          </DrawerPanelContent>\n        }\n      >\n        <Flex\n          className={styles.wizardMainBody}\n          direction={{ default: 'column' }}\n          spaceItems={{ default: 'spaceItemsLg' }}\n          height=\"100%\"\n        >\n          {!isDrawerExpanded && (\n            <Button isInline variant=\"link\" onClick={() => setIsDrawerExpanded((prevExpanded) => !prevExpanded)}>\n              Open drawer\n            </Button>\n          )}\n          <div>{activeStep?.name} content</div>\n        </Flex>\n      </DrawerContent>\n    </Drawer>\n  );\n};\n\nexport const WizardStepDrawerContent: React.FunctionComponent = () => (\n  <Wizard height={400} title=\"With drawer wizard\">\n    <WizardStep body={{ hasNoPadding: true }} name=\"Step 1\" id=\"with-drawer-step-1\">\n      <StepContentWithDrawer />\n    </WizardStep>\n    <WizardStep\n      name=\"Step 2\"\n      id=\"with-drawer-step-2\"\n      steps={[\n        <WizardStep\n          body={{ hasNoPadding: true }}\n          key=\"with-drawer-substep-1\"\n          name=\"Substep 1\"\n          id=\"with-drawer-substep-1\"\n        >\n          <StepContentWithDrawer />\n        </WizardStep>,\n        <WizardStep\n          body={{ hasNoPadding: true }}\n          key=\"with-drawer-substep-2\"\n          name=\"Substep 2\"\n          id=\"with-drawer-substep-2\"\n        >\n          <StepContentWithDrawer />\n        </WizardStep>\n      ]}\n    >\n      <StepContentWithDrawer />\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"with-drawer-review-step\" footer={{ nextButtonText: 'Finish' }}>\n      Review step content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Step drawer content","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom navigation': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Wizard,\n  WizardStep,\n  WizardStepType,\n  CustomWizardNavFunction,\n  WizardNav,\n  WizardNavItem\n} from '@patternfly/react-core';\n\nexport const WizardWithCustomNav: React.FunctionComponent = () => {\n  const nav: CustomWizardNavFunction = (\n    isExpanded: boolean,\n    steps: WizardStepType[],\n    activeStep: WizardStepType,\n    goToStepByIndex: (index: number) => void\n  ) => (\n    <WizardNav isExpanded={isExpanded}>\n      {steps.map((step) => (\n        <WizardNavItem\n          key={step.id}\n          id={step.id}\n          content={step.name}\n          isCurrent={activeStep.id === step.id}\n          isDisabled={step.isDisabled}\n          stepIndex={step.index}\n          onClick={() => goToStepByIndex(step.index)}\n        />\n      ))}\n    </WizardNav>\n  );\n\n  return (\n    <Wizard height={400} nav={nav}>\n      <WizardStep name=\"Step 1\" id=\"custom-nav-first-step\">\n        Did you say...custom nav?\n      </WizardStep>\n      <WizardStep name=\"Step 2\" id=\"custom-nav-second-step\">\n        Oh, you didn't?\n      </WizardStep>\n      <WizardStep name=\"Review\" id=\"custom-nav-review-step\" footer={{ nextButtonText: 'Wrap it up' }}>\n        Well, this is awkward.\n      </WizardStep>\n    </Wizard>\n  );\n};\n","title":"Custom navigation","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Header': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';\n\nexport const WizardWithHeader: React.FunctionComponent = () => (\n  <Wizard\n    height={400}\n    title=\"Header wizard\"\n    header={\n      <WizardHeader\n        title=\"You're a wizard, Harry\"\n        description=\"To be clear, all those not named Harry are not wizards.\"\n        closeButtonAriaLabel=\"Close header\"\n      />\n    }\n  >\n    <WizardStep name=\"Step 1\" id=\"header-first-step\">\n      Step 1 content\n    </WizardStep>\n    <WizardStep name=\"Step 2\" id=\"header-second-step\">\n      Step 2 content\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"header-review-step\" footer={{ nextButtonText: 'Finish' }}>\n      Review step content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Header","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  ActionList,\n  ActionListGroup,\n  ActionListItem,\n  Button,\n  Flex,\n  FlexItem,\n  Spinner,\n  useWizardContext,\n  Wizard,\n  WizardFooter,\n  WizardFooterWrapper,\n  WizardStep\n} from '@patternfly/react-core';\n\nconst CustomWizardFooter = () => {\n  const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();\n\n  return (\n    <WizardFooter\n      activeStep={activeStep}\n      onNext={goToNextStep}\n      onBack={goToPrevStep}\n      onClose={close}\n      isBackDisabled={activeStep.index === 1}\n    />\n  );\n};\n\nconst CustomStepTwoFooter = () => {\n  const { goToNextStep, goToPrevStep, close } = useWizardContext();\n  const [isLoading, setIsLoading] = useState(false);\n\n  async function onNext() {\n    setIsLoading(true);\n    await new Promise((resolve) => setTimeout(resolve, 2000));\n    setIsLoading(false);\n\n    goToNextStep();\n  }\n\n  return (\n    <WizardFooterWrapper>\n      <ActionList>\n        <ActionListGroup>\n          <ActionListItem>\n            <Button variant=\"secondary\" onClick={goToPrevStep} isDisabled={isLoading}>\n              Back\n            </Button>\n          </ActionListItem>\n          <ActionListItem>\n            <Button variant=\"primary\" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>\n              Async Next\n            </Button>\n          </ActionListItem>\n        </ActionListGroup>\n        <ActionListGroup>\n          <ActionListItem>\n            <Button variant=\"link\" onClick={close} isDisabled={isLoading}>\n              Cancel\n            </Button>\n          </ActionListItem>\n        </ActionListGroup>\n      </ActionList>\n    </WizardFooterWrapper>\n  );\n};\n\ninterface ReviewStepContentProps {\n  isSubmitting: boolean | undefined;\n}\n\nconst ReviewStepContent: React.FunctionComponent<ReviewStepContentProps> = ({ isSubmitting }) => {\n  if (isSubmitting === undefined) {\n    return <FlexItem alignSelf={{ default: 'alignSelfFlexStart' }}>Review step content</FlexItem>;\n  }\n\n  if (isSubmitting) {\n    return (\n      <>\n        <div>Calculating wizard score...</div>\n        <Spinner />\n      </>\n    );\n  }\n\n  return <>50 points to Gryffindor!</>;\n};\n\nexport const WizardWithCustomFooter: React.FunctionComponent = () => {\n  const [isSubmitting, setIsSubmitting] = useState<boolean>();\n\n  async function onSubmit(): Promise<void> {\n    setIsSubmitting(true);\n\n    await new Promise((resolve) => setTimeout(resolve, 5000));\n\n    setIsSubmitting(false);\n  }\n\n  return (\n    <Wizard height={400} title=\"Custom footer wizard\" footer={<CustomWizardFooter />}>\n      <WizardStep name=\"Step 1\" id=\"custom-footer-first-step\">\n        Step 1 content\n      </WizardStep>\n      <WizardStep id=\"custom-footer-second-step\" name=\"Step 2\" footer={<CustomStepTwoFooter />}>\n        Step 2 content with a custom async footer\n      </WizardStep>\n      <WizardStep\n        id=\"custom-footer-review-step\"\n        name=\"Review\"\n        footer={{\n          nextButtonText: 'Submit',\n          onNext: onSubmit,\n          isNextDisabled: isSubmitting,\n          isBackDisabled: isSubmitting\n        }}\n      >\n        <Flex\n          direction={{ default: 'column' }}\n          alignItems={{ default: 'alignItemsCenter' }}\n          spaceItems={{ default: 'spaceItemsLg' }}\n        >\n          <ReviewStepContent isSubmitting={isSubmitting} />\n        </Flex>\n      </WizardStep>\n    </Wizard>\n  );\n};\n","title":"Custom footer","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom navigation item': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardWithCustomNavItem: React.FunctionComponent = () => (\n  <Wizard height={400} title=\"Custom navigation item wizard\">\n    <WizardStep name=\"Step 1\" id=\"custom-nav-item-first-step\">\n      Step 1 content\n    </WizardStep>\n    <WizardStep\n      id=\"custom-nav-item-second-step\"\n      name=\"Step 2\"\n      navItem={{\n        content: <span>Custom item</span>\n      }}\n    >\n      Step 2 content with a custom navigation item\n    </WizardStep>\n    <WizardStep name=\"Review\" id=\"custom-nav-item-review-step\" footer={{ nextButtonText: 'Finish' }}>\n      Review step content\n    </WizardStep>\n  </Wizard>\n);\n","title":"Custom navigation item","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Toggle step visibility': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createContext, useContext, useState } from 'react';\nimport { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';\n\ninterface SomeContextProps {\n  isToggleStepChecked: boolean;\n  setIsToggleStepChecked(isHidden: boolean): void;\n}\ntype SomeContextRenderProps = Pick<SomeContextProps, 'isToggleStepChecked'>;\ninterface SomeContextProviderProps {\n  children: (context: SomeContextRenderProps) => React.ReactElement<any>;\n}\n\nconst SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);\n\nconst SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = ({ children }) => {\n  const [isToggleStepChecked, setIsToggleStepChecked] = useState(false);\n\n  return (\n    <SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}>\n      {children({ isToggleStepChecked })}\n    </SomeContext.Provider>\n  );\n};\n\nconst StepContentWithAction: React.FunctionComponent = () => {\n  const { isToggleStepChecked, setIsToggleStepChecked } = useContext(SomeContext);\n\n  return (\n    <Checkbox\n      label=\"Toggle visibility of the next step\"\n      isChecked={isToggleStepChecked}\n      onChange={(_event, checked) => setIsToggleStepChecked(checked)}\n      id=\"toggle-hide-step-checkbox\"\n      name=\"Toggle Hide Step Checkbox\"\n    />\n  );\n};\n\nexport const WizardToggleStepVisibility: React.FunctionComponent = () => (\n  <SomeContextProvider>\n    {({ isToggleStepChecked }) => (\n      <Wizard height={400} title=\"Toggle step visibility wizard\">\n        <WizardStep name=\"Hidden action step\" id=\"toggle-visible-step-1\">\n          <StepContentWithAction />\n        </WizardStep>\n        <WizardStep name=\"Step 2\" id=\"toggle-visible-step-2\" isHidden={isToggleStepChecked}>\n          Step 2 content\n        </WizardStep>\n        <WizardStep name=\"Review\" id=\"toggle-visible-review-step\" footer={{ nextButtonText: 'Finish' }}>\n          Review step content\n        </WizardStep>\n      </Wizard>\n    )}\n  </SomeContextProvider>\n);\n","title":"Toggle step visibility","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Step status': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createContext, useContext, useState } from 'react';\nimport { Radio, Wizard, WizardStep } from '@patternfly/react-core';\n\ninterface SomeContextProps {\n  errorMessage: string | undefined;\n  setErrorMessage(error: string | undefined): void;\n  successMessage: string | undefined;\n  setSuccessMessage(error: string | undefined): void;\n  warningMessage: string | undefined;\n  setWarningMessage(error: string | undefined): void;\n}\ntype SomeContextRenderProps = Pick<SomeContextProps, 'successMessage', 'errorMessage', 'warningMessage'>;\ninterface SomeContextProviderProps {\n  children: (context: SomeContextRenderProps) => React.ReactElement<any>;\n}\n\nconst SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);\n\nconst SomeContextProvider = ({ children }: SomeContextProviderProps) => {\n  const [errorMessage, setErrorMessage] = useState<string>();\n  const [successMessage, setSuccessMessage] = useState<string>();\n  const [warningMessage, setWarningMessage] = useState<string>();\n\n  return (\n    <SomeContext.Provider\n      value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage, warningMessage, setWarningMessage }}\n    >\n      {children({ errorMessage, successMessage, warningMessage })}\n    </SomeContext.Provider>\n  );\n};\n\nconst StepContentWithAction = () => {\n  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage, warningMessage, setWarningMessage } =\n    useContext(SomeContext);\n\n  return (\n    <>\n      <Radio\n        label=\"Give step 1 an error status\"\n        isChecked={!!errorMessage}\n        onChange={(_event, checked) => {\n          setErrorMessage(checked ? 'Some error message' : undefined);\n          setSuccessMessage(checked ? undefined : successMessage);\n          setWarningMessage(checked ? undefined : warningMessage);\n        }}\n        id=\"toggle-error-checkbox\"\n        name=\"Toggle Status\"\n      />\n      <Radio\n        label=\"Give step 1 a success status\"\n        isChecked={!!successMessage}\n        onChange={(_event, checked) => {\n          setSuccessMessage(checked ? 'Some success message' : undefined);\n          setErrorMessage(checked ? undefined : errorMessage);\n          setWarningMessage(checked ? undefined : warningMessage);\n        }}\n        id=\"toggle-success-checkbox\"\n        name=\"Toggle Status\"\n      />\n      <Radio\n        label=\"Give step 1 a warning status\"\n        isChecked={!!warningMessage}\n        onChange={(_event, checked) => {\n          setWarningMessage(checked ? 'Some warning message' : undefined);\n          setErrorMessage(checked ? undefined : errorMessage);\n          setSuccessMessage(checked ? undefined : successMessage);\n        }}\n        id=\"toggle-warning-checkbox\"\n        name=\"Toggle Status\"\n      />\n    </>\n  );\n};\n\nexport const WizardStepStatus: React.FunctionComponent = () => (\n  <SomeContextProvider>\n    {({ errorMessage, successMessage, warningMessage }) => {\n      let status = 'default';\n      if (errorMessage) {\n        status = 'error';\n      } else if (successMessage) {\n        status = 'success';\n      } else if (warningMessage) {\n        status = 'warning';\n      }\n      return (\n        <Wizard height={400} title=\"Step status wizard\">\n          <WizardStep status={status} id=\"status-step-1\" name=\"Step 1\">\n            Step 1 content\n          </WizardStep>\n          <WizardStep name=\"Status step\" id=\"error-status-step-2\">\n            <StepContentWithAction />\n          </WizardStep>\n          <WizardStep name=\"Review\" id=\"status-review-step\" footer={{ nextButtonText: 'Finish' }}>\n            Review step content\n          </WizardStep>\n        </Wizard>\n      );\n    }}\n  </SomeContextProvider>\n);\n","title":"Step status","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Plain"])}
+    {React.createElement(pageData.examples["Focus content on next/back"])}
+    {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["Progress after submission"])}
+    {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["Within modal"])}
+    {React.createElement(pageData.examples["Step drawer content"])}
+    {React.createElement(pageData.examples["Custom navigation"])}
+    {React.createElement(pageData.examples["Header"])}
+    {React.createElement(pageData.examples["Custom footer"])}
+    {React.createElement(pageData.examples["Custom navigation item"])}
+    {React.createElement(pageData.examples["Toggle step visibility"])}
+    {React.createElement(pageData.examples["Step status"])}
+    <AutoLinkHeader {...{"id":"hooks","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Hooks`}
+    </AutoLinkHeader>
+    <AutoLinkHeader {...{"id":"usewizardcontext","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`useWizardContext`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Used to access any property of `}
+      <PatternflyThemeLink {...{"to":"#wizardcontextprops","className":""}}>
+        {`WizardContext`}
+      </PatternflyThemeLink>
+      {`:`}
+    </p>
+    <Example {...{"code":"import { useWizardContext } from '@patternfly/react-core';\n\nconst StepContent = () => {\n  const { activeStep } = useWizardContext();\n  return <>This is the current step: {activeStep}</>;\n}","lang":"noLive","className":""}}>
+    </Example>
+    <AutoLinkHeader {...{"id":"usewizardfooter","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`useWizardFooter`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Used to set a unique footer for the wizard on any given step.`}
+    </p>
+    <Example {...{"code":"import { useWizardFooter } from '@patternfly/react-core';\n\nconst StepContent = () => {\n  useWizardFooter(<>Some footer</>);\n  return <>Step content</>;\n}","lang":"noLive","className":""}}>
+    </Example>
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsWizardReactDocs';
+Component.pageData = pageData;
+
+export default Component;