From d6e2097fa6ce7117d0d8d05aa15962dd3d63d0b6 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Mon, 18 Jul 2022 12:15:17 -0400
Subject: [PATCH 1/8] feat(WizardComposable): Created composable spinoff of
 wizard w/ enhancements

---
 .../src/components/Wizard/examples/Wizard.md  |   2 +
 .../WizardComposabeContext.tsx                |  95 ++++++++
 .../WizardComposable/WizardComposable.tsx     | 179 +++++++++++++++
 .../WizardComposable/WizardComposableBody.tsx |  35 +++
 .../WizardComposableFooter.tsx                |  59 +++++
 .../WizardComposable/WizardComposableStep.tsx |  37 ++++
 .../WizardComposableToggle.tsx                | 206 ++++++++++++++++++
 .../WizardComposable/examples/WizardBasic.tsx |  22 ++
 .../examples/WizardComposable.md              |  40 ++++
 .../examples/WizardCustomNav.tsx              |  46 ++++
 .../examples/WizardKitchenSink.tsx            | 155 +++++++++++++
 .../hooks/useWizardFooter.tsx                 |  22 ++
 .../src/components/WizardComposable/index.ts  |   8 +
 .../src/components/WizardComposable/types.ts  |  86 ++++++++
 .../src/components/WizardComposable/utils.ts  |  45 ++++
 packages/react-core/src/components/index.ts   |   1 +
 .../patternfly-docs/patternfly-docs.source.js |   2 +
 17 files changed, 1040 insertions(+)
 create mode 100644 packages/react-core/src/components/WizardComposable/WizardComposabeContext.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/WizardComposable.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/WizardComposableBody.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/WizardComposableFooter.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/WizardComposableStep.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/WizardComposableToggle.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/examples/WizardBasic.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/examples/WizardComposable.md
 create mode 100644 packages/react-core/src/components/WizardComposable/examples/WizardCustomNav.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/examples/WizardKitchenSink.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/hooks/useWizardFooter.tsx
 create mode 100644 packages/react-core/src/components/WizardComposable/index.ts
 create mode 100644 packages/react-core/src/components/WizardComposable/types.ts
 create mode 100644 packages/react-core/src/components/WizardComposable/utils.ts

diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md
index 860736de28a..9e7dfdb1a4d 100644
--- a/packages/react-core/src/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/components/Wizard/examples/Wizard.md
@@ -13,6 +13,8 @@ import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-ico
 import FinishedStep from './FinishedStep';
 import SampleForm from './SampleForm';
 
+If you seek a Wizard solution that allows for more composition, see the [React composition](/components/wizard/react-composition) tab.
+
 ## Examples
 
 ### Basic
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposabeContext.tsx b/packages/react-core/src/components/WizardComposable/WizardComposabeContext.tsx
new file mode 100644
index 00000000000..1f0b7a18680
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/WizardComposabeContext.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Step, SubStep } from './types';
+import { getActiveStep } from './utils';
+
+export interface WizardComposableContextProps {
+  steps: (Step | SubStep)[];
+  activeStep: Step | SubStep;
+  footer: React.ReactElement;
+  onNext(): void;
+  onBack(): void;
+  onClose(): void;
+  goToStepById(id: number | string): void;
+  goToStepByName(name: string): void;
+  goToStepByIndex(index: number): void;
+  setFooter(footer: React.ReactElement): void;
+}
+
+export const WizardComposableContext = React.createContext({} as WizardComposableContextProps);
+
+interface WizardComposableContextRenderProps {
+  steps: (Step | SubStep)[];
+  activeStep: Step | SubStep;
+  footer: React.ReactElement;
+  onNext(): void;
+  onBack(): void;
+  onClose(): void;
+}
+
+interface WizardComposableContextProviderProps {
+  steps: (Step | SubStep)[];
+  currentStepIndex: number;
+  footer: React.ReactElement;
+  children: React.ReactElement | ((props: WizardComposableContextRenderProps) => React.ReactElement);
+  onNext(): void;
+  onBack(): void;
+  onClose(): void;
+  goToStepById(id: number | string): void;
+  goToStepByName(name: string): void;
+  goToStepByIndex(index: number): void;
+}
+
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
+export const WizardComposableContextProvider: React.FunctionComponent<WizardComposableContextProviderProps> = ({
+  steps: initialSteps,
+  footer: initialFooter,
+  currentStepIndex,
+  children,
+  onNext,
+  onBack,
+  onClose,
+  goToStepById,
+  goToStepByName,
+  goToStepByIndex
+}) => {
+  const [steps, setSteps] = React.useState(initialSteps);
+  const [footer, setFooter] = React.useState(initialFooter);
+  const activeStep = getActiveStep(steps, currentStepIndex);
+
+  // When the active step changes and the newly active step isn't visited, set the visited flag to true.
+  React.useEffect(() => {
+    if (!activeStep.visited) {
+      setSteps(prevSteps =>
+        prevSteps.map(step => {
+          if (step.id === activeStep.id) {
+            return { ...step, visited: true };
+          }
+
+          return step;
+        })
+      );
+    }
+  }, [activeStep.id, activeStep.visited]);
+
+  return (
+    <WizardComposableContext.Provider
+      value={{
+        steps,
+        activeStep,
+        footer,
+        onNext,
+        onBack,
+        onClose,
+        goToStepById,
+        goToStepByName,
+        goToStepByIndex,
+        setFooter
+      }}
+    >
+      {typeof children === 'function' ? children({ activeStep, steps, footer, onNext, onBack, onClose }) : children}
+    </WizardComposableContext.Provider>
+  );
+};
+
+export const WizardComposableContextConsumer = WizardComposableContext.Consumer;
+export const useWizardContext = () => React.useContext(WizardComposableContext);
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposable.tsx b/packages/react-core/src/components/WizardComposable/WizardComposable.tsx
new file mode 100644
index 00000000000..8b464f6b455
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/WizardComposable.tsx
@@ -0,0 +1,179 @@
+import React from 'react';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import {
+  DefaultWizardFooterProps,
+  DefaultWizardNavProps,
+  isCustomWizardFooter,
+  isWizardParentStep,
+  WizardNavStepFunction,
+  CustomWizardNavFunction
+} from './types';
+import { buildSteps, normalizeNavStep } from './utils';
+import { useWizardContext, WizardComposableContextProvider } from './WizardComposabeContext';
+import { WizardComposableStepProps } from './WizardComposableStep';
+import { WizardComposableFooter } from './WizardComposableFooter';
+import { WizardComposableToggle } from './WizardComposableToggle';
+
+export interface WizardComposableProps extends React.HTMLProps<HTMLDivElement> {
+  /** Step, footer, or header child components */
+  children: React.ReactElement<WizardComposableStepProps> | React.ReactElement<WizardComposableStepProps>[];
+  /** Wizard header */
+  header?: React.ReactNode;
+  /** Wizard footer */
+  footer?: DefaultWizardFooterProps | React.ReactElement;
+  /** Default wizard nav props or a custom WizardNav (with callback) */
+  nav?: DefaultWizardNavProps | CustomWizardNavFunction;
+  /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
+  startIndex?: number;
+  /** Additional classes spread to the Wizard */
+  className?: string;
+  /** Custom width of the wizard */
+  width?: number | string;
+  /** Custom height of the wizard */
+  height?: number | string;
+  /** Callback function when a step in the nav is clicked */
+  onNavByIndex?: WizardNavStepFunction;
+  /** Callback function after Next button is clicked */
+  onNext?: WizardNavStepFunction;
+  /** Callback function after Back button is clicked */
+  onBack?: WizardNavStepFunction;
+  /** Callback function to save at the end of the wizard, if not specified uses onClose */
+  onSave?(): void;
+  /** Callback function to close the wizard */
+  onClose?(): void;
+}
+
+export const WizardComposable = (props: WizardComposableProps) => {
+  const { startIndex = 1, children, footer, onNavByIndex, onNext, onBack, onSave, onClose, ...internalProps } = props;
+  const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
+  const steps = buildSteps(children);
+
+  const goToStepByIndex = (index: number) => {
+    const lastStepIndex = steps.length;
+
+    if (index < 1) {
+      index = 1;
+    } else if (index > lastStepIndex) {
+      index = lastStepIndex;
+    }
+
+    const currStep = steps[index - 1];
+    const prevStep = steps[currentStepIndex - 1];
+    setCurrentStepIndex(index);
+
+    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+  };
+
+  const goToNextStep = () => {
+    // Save when on the last step, otherwise close
+    if (currentStepIndex >= steps.length) {
+      if (onSave) {
+        return onSave();
+      }
+
+      return onClose?.();
+    } else {
+      let currStep = steps[currentStepIndex];
+      let newStepIndex = currentStepIndex + 1;
+      const prevStep = steps[currentStepIndex - 1];
+
+      // Skip parent step and focus on the first sub-step if they exist
+      if (isWizardParentStep(currStep)) {
+        newStepIndex += 1;
+        currStep = steps[currentStepIndex + 1];
+      }
+
+      setCurrentStepIndex(newStepIndex);
+      return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    }
+  };
+
+  const goToPrevStep = () => {
+    if (steps.length < currentStepIndex) {
+      // Previous step was removed, just update the currentStep state
+      setCurrentStepIndex(steps.length);
+    } else {
+      let currStep = steps[currentStepIndex - 2];
+      let newStepIndex = currentStepIndex - 1;
+      const prevStep = steps[currentStepIndex - 1];
+
+      // // Skip parent step and focus on the step prior
+      if (isWizardParentStep(currStep)) {
+        newStepIndex -= 1;
+        currStep = steps[currentStepIndex - 3];
+      }
+
+      setCurrentStepIndex(newStepIndex);
+      return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    }
+  };
+
+  const goToStepById = (id: number | string) => {
+    const stepIndex = steps.findIndex(step => step.id === id) + 1;
+    stepIndex > 0 && setCurrentStepIndex(stepIndex);
+  };
+
+  const goToStepByName = (name: string) => {
+    const stepIndex = steps.findIndex(step => step.name === name) + 1;
+    stepIndex > 0 && setCurrentStepIndex(stepIndex);
+  };
+
+  return (
+    <WizardComposableContextProvider
+      steps={steps}
+      currentStepIndex={currentStepIndex}
+      footer={isCustomWizardFooter(footer) && footer}
+      onNext={goToNextStep}
+      onBack={goToPrevStep}
+      onClose={onClose}
+      goToStepById={goToStepById}
+      goToStepByName={goToStepByName}
+      goToStepByIndex={goToStepByIndex}
+    >
+      <WizardComposableInternal {...internalProps}>{children}</WizardComposableInternal>
+    </WizardComposableContextProvider>
+  );
+};
+
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
+const WizardComposableInternal = ({ height, width, className, header, nav, ...restProps }: WizardComposableProps) => {
+  const { activeStep, steps, footer, onNext, onBack, onClose, goToStepByIndex } = useWizardContext();
+
+  const wizardFooter = isCustomWizardFooter(footer) ? (
+    footer
+  ) : (
+    <WizardComposableFooter
+      activeStep={activeStep}
+      onNext={onNext}
+      onBack={onBack}
+      onClose={onClose}
+      disableBackButton={activeStep.id === steps[0].id}
+      {...footer}
+    />
+  );
+
+  return (
+    <div
+      className={css(styles.wizard, className)}
+      style={{
+        ...(height ? { height } : {}),
+        ...(width ? { width } : {})
+      }}
+      {...restProps}
+    >
+      {header}
+      <WizardComposableToggle
+        steps={steps}
+        activeStep={activeStep}
+        footer={wizardFooter}
+        nav={nav}
+        goToStepByIndex={goToStepByIndex}
+      />
+    </div>
+  );
+};
+
+WizardComposable.displayName = 'WizardComposable';
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposableBody.tsx b/packages/react-core/src/components/WizardComposable/WizardComposableBody.tsx
new file mode 100644
index 00000000000..b44c4570316
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/WizardComposableBody.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+
+export interface WizardComposableBodyProps {
+  children?: React.ReactNode | React.ReactNode[];
+  /** Set to true to remove the default body padding */
+  hasNoBodyPadding?: boolean;
+  /** An aria-label to use for the wrapper element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute for the wrapper element */
+  'aria-labelledby'?: string;
+  /** Component used as the wrapping content container */
+  wrapperElement?: React.ElementType;
+}
+
+export const WizardComposableBody = ({
+  children,
+  hasNoBodyPadding = false,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  wrapperElement: Wrapper = 'div'
+}: WizardComposableBodyProps) => (
+  <Wrapper
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledBy}
+    className={css(styles.wizardMain)}
+    {...(Wrapper === 'div' && { role: 'main' })}
+  >
+    <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+  </Wrapper>
+);
+
+WizardComposableBody.displayName = 'WizardComposableBody';
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposableFooter.tsx b/packages/react-core/src/components/WizardComposable/WizardComposableFooter.tsx
new file mode 100644
index 00000000000..3a9543c10f0
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/WizardComposableFooter.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import { Button, ButtonVariant } from '../Button';
+import { Step, SubStep, WizardNavStepFunction } from './types';
+
+export interface WizardComposableFooterProps {
+  /** The currently active WizardStep */
+  activeStep: Step | SubStep;
+  /** Next button callback */
+  onNext(): WizardNavStepFunction | void;
+  /** Back button callback */
+  onBack(): WizardNavStepFunction | void;
+  /** Cancel link callback */
+  onClose(): void;
+  /** Custom text for the Next button. The activeStep's nextButtonText takes precedence. */
+  nextButtonText?: React.ReactNode;
+  /** Custom text for the Back button */
+  backButtonText?: React.ReactNode;
+  /** Custom text for the Cancel link */
+  cancelButtonText?: React.ReactNode;
+  /** Optional flag to disable the first step's back button */
+  disableBackButton?: boolean;
+}
+
+export const WizardComposableFooter = ({
+  onNext,
+  onBack,
+  onClose,
+  activeStep,
+  disableBackButton,
+  nextButtonText = 'Next',
+  backButtonText = 'Back',
+  cancelButtonText = 'Cancel'
+}: WizardComposableFooterProps) => (
+  <footer className={css(styles.wizardFooter)}>
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={activeStep.disableNext}>
+      {activeStep.nextButtonText || nextButtonText}
+    </Button>
+
+    {!activeStep.hideBackButton && (
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={disableBackButton}>
+        {backButtonText}
+      </Button>
+    )}
+
+    {!activeStep.hideCancelButton && (
+      <div className={styles.wizardFooterCancel}>
+        <Button variant={ButtonVariant.link} onClick={onClose}>
+          {cancelButtonText}
+        </Button>
+      </div>
+    )}
+  </footer>
+);
+
+WizardComposableFooter.displayName = 'WizardComposableFooter';
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposableStep.tsx b/packages/react-core/src/components/WizardComposable/WizardComposableStep.tsx
new file mode 100644
index 00000000000..bbec3569f1b
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/WizardComposableStep.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Step } from './types';
+import { WizardComposableBody, WizardComposableBodyProps } from './WizardComposableBody';
+
+export type WizardComposableStepProps = Omit<Step, 'parentId'> &
+  WizardComposableBodyProps & {
+    /** Optional for when the Step is used as a parent to sub-steps */
+    children?: React.ReactNode;
+    /** Flag indicating whether to use a WizardBody to wrap step contents or not */
+    includeStepBody?: boolean;
+    /** Optional list of sub-steps */
+    steps?: React.ReactElement<WizardComposableStepProps>[];
+  };
+
+export const WizardComposableStep = ({
+  hasNoBodyPadding = false,
+  wrapperElement = 'div',
+  includeStepBody = true,
+  'aria-label': ariaLabel = 'Wizard body',
+  'aria-labelledby': ariaLabelledBy,
+  children
+}: WizardComposableStepProps) =>
+  includeStepBody ? (
+    <WizardComposableBody
+      wrapperElement={wrapperElement}
+      hasNoBodyPadding={hasNoBodyPadding}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+    >
+      {children}
+    </WizardComposableBody>
+  ) : (
+    <>{children}</>
+  );
+
+WizardComposableStep.displayName = 'WizardComposableStep';
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposableToggle.tsx b/packages/react-core/src/components/WizardComposable/WizardComposableToggle.tsx
new file mode 100644
index 00000000000..79cb93714a9
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/WizardComposableToggle.tsx
@@ -0,0 +1,206 @@
+import React from 'react';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+
+import { KeyTypes } from '../../helpers/constants';
+import { WizardNav, WizardNavItem } from '../Wizard';
+import {
+  Step,
+  SubStep,
+  isWizardSubStep,
+  isCustomWizardNav,
+  CustomWizardNavFunction,
+  DefaultWizardNavProps,
+  isWizardBasicStep,
+  isWizardParentStep
+} from './types';
+
+export interface WizardComposableToggleProps {
+  /** List of steps and/or sub-steps */
+  steps: (Step | SubStep)[];
+  /** The currently active WizardStep */
+  activeStep: Step | SubStep;
+  /** The WizardFooter */
+  footer: React.ReactElement;
+  /** Custom WizardNav or callback used to create a default WizardNav */
+  nav: DefaultWizardNavProps | CustomWizardNavFunction;
+  /** Navigate using the step index */
+  goToStepByIndex(index: number): void;
+  /** The button's aria-label */
+  'aria-label'?: string;
+  /** Flag to unmount inactive steps instead of hiding. Defaults to true */
+  unmountInactiveSteps?: boolean;
+}
+
+export const WizardComposableToggle = ({
+  steps,
+  activeStep,
+  footer,
+  nav,
+  goToStepByIndex,
+  unmountInactiveSteps = true,
+  'aria-label': ariaLabel = 'Wizard toggle'
+}: WizardComposableToggleProps) => {
+  const [isNavOpen, setIsNavOpen] = React.useState(false);
+  const isActiveSubStep = isWizardSubStep(activeStep);
+
+  const handleKeyClicks = React.useCallback(
+    (event: KeyboardEvent): void => {
+      if (isNavOpen && event.key === KeyTypes.Escape) {
+        setIsNavOpen(!isNavOpen);
+      }
+    },
+    [isNavOpen]
+  );
+
+  // Open/close collapsable nav on keydown event
+  React.useEffect(() => {
+    const target = typeof document !== 'undefined' ? document.body : null;
+    target?.addEventListener('keydown', handleKeyClicks, false);
+
+    return () => {
+      target?.removeEventListener('keydown', handleKeyClicks, false);
+    };
+  }, [handleKeyClicks]);
+
+  // Only render the active step when unmountInactiveSteps is true
+  const bodyContent = unmountInactiveSteps
+    ? activeStep.component
+    : steps.map(step => {
+        if (activeStep.name === step.name) {
+          return step.component;
+        }
+
+        return (
+          <div key={step.id} style={{ display: 'none' }}>
+            {step.component}
+          </div>
+        );
+      });
+
+  const wizardNav = isCustomWizardNav(nav)
+    ? nav(isNavOpen, steps, activeStep, goToStepByIndex)
+    : React.useMemo(() => {
+        const props = {
+          isOpen: isNavOpen,
+          'aria-label': nav?.ariaLabel || 'Wizard nav',
+          ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
+        };
+
+        return (
+          <WizardNav {...props}>
+            {steps.map((step, index) => {
+              const stepIndex = index + 1;
+              const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
+
+              if (isWizardParentStep(step)) {
+                let firstSubStepIndex;
+                let hasActiveChild = false;
+
+                const subNavItems = step.subStepIds?.map((subStepId, index) => {
+                  const subStep = steps.find(step => step.id === subStepId);
+                  const subStepIndex = steps.indexOf(subStep) + 1;
+
+                  if (index === 0) {
+                    firstSubStepIndex = subStepIndex;
+                  }
+
+                  if (activeStep.id === subStep.id) {
+                    hasActiveChild = true;
+                  }
+
+                  return subStep.navItem ? (
+                    <React.Fragment key={subStep.id}>{subStep.navItem}</React.Fragment>
+                  ) : (
+                    <WizardNavItem
+                      key={subStep.id}
+                      id={subStep.id}
+                      content={subStep.name}
+                      isCurrent={activeStep.id === subStep.id}
+                      isDisabled={subStep.isDisabled || (nav?.forceStepVisit && !subStep.visited)}
+                      step={subStepIndex}
+                      onNavItemClick={goToStepByIndex}
+                    />
+                  );
+                });
+
+                const hasEnabledChildren = React.Children.toArray(subNavItems).some(
+                  child => React.isValidElement(child) && !child.props.isDisabled
+                );
+
+                return (
+                  stepNavItem || (
+                    <WizardNavItem
+                      key={step.id}
+                      id={step.id}
+                      content={step.name}
+                      isExpandable={nav?.isExpandable}
+                      isCurrent={hasActiveChild}
+                      isDisabled={!hasEnabledChildren}
+                      step={firstSubStepIndex}
+                      onNavItemClick={goToStepByIndex}
+                    >
+                      <WizardNav {...props} returnList>
+                        {subNavItems}
+                      </WizardNav>
+                    </WizardNavItem>
+                  )
+                );
+              }
+
+              if (isWizardBasicStep(step)) {
+                return (
+                  stepNavItem || (
+                    <WizardNavItem
+                      key={step.id}
+                      id={step.id}
+                      content={step.name}
+                      isCurrent={activeStep.id === step.id}
+                      isDisabled={step.isDisabled || (nav?.forceStepVisit && !step.visited)}
+                      step={stepIndex}
+                      onNavItemClick={goToStepByIndex}
+                    />
+                  )
+                );
+              }
+            })}
+          </WizardNav>
+        );
+      }, [activeStep.id, goToStepByIndex, isNavOpen, nav, steps]);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsNavOpen(prevIsOpen => !prevIsOpen)}
+        className={css(styles.wizardToggle, isNavOpen && 'pf-m-expanded')}
+        aria-label={ariaLabel}
+        aria-expanded={isNavOpen}
+      >
+        <span className={css(styles.wizardToggleList)}>
+          <span className={css(styles.wizardToggleListItem)}>
+            {activeStep.name}
+            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+          </span>
+          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep.name}</span>}
+        </span>
+
+        <span className={css(styles.wizardToggleIcon)}>
+          <CaretDownIcon aria-hidden="true" />
+        </span>
+      </button>
+      <div className={css(styles.wizardOuterWrap)}>
+        <div className={css(styles.wizardInnerWrap)}>
+          {wizardNav}
+          {bodyContent}
+        </div>
+
+        {footer}
+      </div>
+    </>
+  );
+};
+
+WizardComposableToggle.displayName = 'WizardComposableToggle';
diff --git a/packages/react-core/src/components/WizardComposable/examples/WizardBasic.tsx b/packages/react-core/src/components/WizardComposable/examples/WizardBasic.tsx
new file mode 100644
index 00000000000..1b17427c9a7
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/examples/WizardBasic.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { WizardComposable, WizardComposableStep } from '@patternfly/react-core';
+
+export const WizardBasic: React.FunctionComponent = () => (
+  <WizardComposable height={400}>
+    <WizardComposableStep name="First step" id="first-step">
+      <p>Step 1 content</p>
+    </WizardComposableStep>
+    <WizardComposableStep name="Second step" id="second-step">
+      <p>Step 2 content</p>
+    </WizardComposableStep>
+    <WizardComposableStep name="Third step" id="third-step">
+      <p>Step 3 content</p>
+    </WizardComposableStep>
+    <WizardComposableStep name="Fourth step" id="fourth-step">
+      <p>Step 4 content</p>{' '}
+    </WizardComposableStep>
+    <WizardComposableStep name="Review" id="fifth-step" nextButtonText="Finish">
+      <p>Review step content</p>
+    </WizardComposableStep>
+  </WizardComposable>
+);
diff --git a/packages/react-core/src/components/WizardComposable/examples/WizardComposable.md b/packages/react-core/src/components/WizardComposable/examples/WizardComposable.md
new file mode 100644
index 00000000000..e94a8359a5e
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/examples/WizardComposable.md
@@ -0,0 +1,40 @@
+---
+id: Wizard
+section: components
+cssPrefix: pf-c-wizard
+propComponents:
+  [
+    'WizardComposable',
+    'WizardComposableFooter',
+    'WizardComposableToggle',
+    'WizardComposableStep',
+    'WizardComposableBody',
+  ]
+---
+
+import { Button, WizardComposable, WizardComposableFooter, WizardComposableStep, WizardComposableBody, useWizardFooter, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
+
+PatternFly has two implementations of a `Wizard`, where the latest `WizardComposable`. Its temporary name speaks to the improvements made to the composition of the Wizard and its ansillary components.
+
+The documentation for the older `Wizard` implementation can be found under the [React legacy](/components/wizard/react-legacy) tab.
+
+## Examples
+
+### Basic
+
+```ts file="./WizardBasic.tsx"
+```
+
+### Custom Nav
+
+```ts file="./WizardCustomNav.tsx"
+```
+
+### Kitchen Sink
+
+```ts file="./WizardKitchenSink.tsx"
+```
diff --git a/packages/react-core/src/components/WizardComposable/examples/WizardCustomNav.tsx b/packages/react-core/src/components/WizardComposable/examples/WizardCustomNav.tsx
new file mode 100644
index 00000000000..87c000fda0b
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/examples/WizardCustomNav.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Step,
+  SubStep,
+  WizardComposable,
+  WizardComposableStep,
+  WizardNav,
+  WizardNavItem
+} from '@patternfly/react-core';
+
+export const WizardCustomNav: React.FunctionComponent = () => {
+  const nav = (
+    isOpen: boolean,
+    steps: (Step | SubStep)[],
+    activeStep: Step | SubStep,
+    goToStepByIndex: (index: number) => void
+  ) => (
+    <WizardNav isOpen={isOpen}>
+      {steps.map((step, index) => (
+        <WizardNavItem
+          key={step.id}
+          id={step.id}
+          content={step.name}
+          isCurrent={activeStep.id === step.id}
+          isDisabled={step.isDisabled}
+          step={index + 1}
+          onNavItemClick={goToStepByIndex}
+        />
+      ))}
+    </WizardNav>
+  );
+
+  return (
+    <WizardComposable height={400} nav={nav}>
+      <WizardComposableStep name="First step" id="first-step">
+        <p>Did you say...custom nav?</p>
+      </WizardComposableStep>
+      <WizardComposableStep name="Second step" id="second-step">
+        <p>Step 2 content</p>
+      </WizardComposableStep>
+      <WizardComposableStep name="Review" id="fifth-step" nextButtonText="Wrap it up">
+        <p>Review step content</p>
+      </WizardComposableStep>
+    </WizardComposable>
+  );
+};
diff --git a/packages/react-core/src/components/WizardComposable/examples/WizardKitchenSink.tsx b/packages/react-core/src/components/WizardComposable/examples/WizardKitchenSink.tsx
new file mode 100644
index 00000000000..f87763d5168
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/examples/WizardKitchenSink.tsx
@@ -0,0 +1,155 @@
+import React from 'react';
+
+import {
+  WizardComposable,
+  WizardComposableStep,
+  WizardHeader,
+  FormGroup,
+  TextInput,
+  Drawer,
+  DrawerContent,
+  Button,
+  Flex,
+  DrawerPanelContent,
+  DrawerColorVariant,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  WizardComposableBody,
+  WizardComposableFooter,
+  useWizardContext,
+  WizardNavItem,
+  Step,
+  useWizardFooter
+} from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+const CustomWizardFooter = () => {
+  const { activeStep, onNext, onBack, onClose } = useWizardContext();
+  return <WizardComposableFooter activeStep={activeStep} onNext={onNext} onBack={onBack} onClose={onClose} />;
+};
+
+const CustomNavItem = () => {
+  const { steps, activeStep, goToStepByIndex } = useWizardContext();
+  const step = (steps.find(step => step.id === 'third-step') || {}) as Step;
+
+  return (
+    <WizardNavItem
+      id={step.id}
+      content={step.name}
+      isCurrent={activeStep.id === step.id}
+      step={steps.indexOf(step) + 1}
+      isDisabled={step.isDisabled || !step.visited}
+      onNavItemClick={goToStepByIndex}
+    />
+  );
+};
+
+const StepContentWithDrawer = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+
+  return (
+    <Drawer isInline isExpanded={isDrawerExpanded}>
+      <DrawerContent
+        panelContent={
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+            <DrawerHead>
+              <span tabIndex={isDrawerExpanded ? 0 : -1}>drawer content</span>
+              <DrawerActions>
+                <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />
+              </DrawerActions>
+            </DrawerHead>
+          </DrawerPanelContent>
+        }
+      >
+        <WizardComposableBody>
+          <Flex direction={{ default: 'column' }}>
+            {!isDrawerExpanded && (
+              <Button isInline variant="link" onClick={() => setIsDrawerExpanded(prevExpanded => !prevExpanded)}>
+                Open drawer
+              </Button>
+            )}
+
+            <FormGroup fieldId="some-text-input" label="Text input label">
+              <TextInput aria-label="Some Text Input Label" />
+            </FormGroup>
+          </Flex>
+        </WizardComposableBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+const StepWithCustomFooter = () => {
+  const { onNext: goToNextStep, onBack, onClose } = useWizardContext();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  async function onNext(goToStep: () => void) {
+    setIsLoading(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsLoading(false);
+
+    goToStep();
+  }
+
+  const footer = React.useMemo(
+    () => (
+      <div className={css(styles.wizardFooter)}>
+        <Button
+          variant="primary"
+          type="submit"
+          onClick={() => onNext(goToNextStep)}
+          isLoading={isLoading}
+          isDisabled={isLoading}
+        >
+          Async Next
+        </Button>
+        <Button variant="secondary" onClick={onBack}>
+          Back
+        </Button>
+        <Button variant="link" onClick={onClose}>
+          Cancel
+        </Button>
+      </div>
+    ),
+    [isLoading, onBack, onClose, goToNextStep]
+  );
+  useWizardFooter(footer);
+
+  return <>Step 3 content w/ custom async footer</>;
+};
+
+export const WizardKitchenSink: React.FunctionComponent = () => (
+  <WizardComposable
+    height={400}
+    header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
+    footer={<CustomWizardFooter />}
+    nav={{ forceStepVisit: true, isExpandable: true }}
+  >
+    <WizardComposableStep id="first-step" name="First step" includeStepBody={false}>
+      <StepContentWithDrawer />
+    </WizardComposableStep>
+    <WizardComposableStep
+      id="second-step"
+      name="Second step"
+      steps={[
+        <WizardComposableStep id="sub-step-one" key="substep-one" name="Substep 1">
+          Substep 1 content
+        </WizardComposableStep>,
+        <WizardComposableStep id="sub-step-two" key="substep-two" name="Substep 2">
+          Substep 2 content
+        </WizardComposableStep>
+      ]}
+    />
+    <WizardComposableStep id="third-step" name="Third step" navItem={<CustomNavItem />}>
+      <StepWithCustomFooter />
+    </WizardComposableStep>
+    <WizardComposableStep id="fourth-step" name="Fourth step">
+      Step 4 content
+    </WizardComposableStep>
+    <WizardComposableStep id="review-step" name="Review" nextButtonText="Submit" disableNext>
+      Review step content
+    </WizardComposableStep>
+  </WizardComposable>
+);
diff --git a/packages/react-core/src/components/WizardComposable/hooks/useWizardFooter.tsx b/packages/react-core/src/components/WizardComposable/hooks/useWizardFooter.tsx
new file mode 100644
index 00000000000..00420bed143
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/hooks/useWizardFooter.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useWizardContext } from '../WizardComposabeContext';
+
+/**
+ * Set a unique footer for the wizard. stepId is only required if inactive steps are hidden instead of unmounted.
+ * @param footer
+ * @param stepId
+ */
+export const useWizardFooter = (footer: React.ReactElement, stepId?: string | number) => {
+  const { activeStep, setFooter } = useWizardContext();
+
+  React.useEffect(() => {
+    if (!stepId || activeStep.id === stepId) {
+      setFooter(footer);
+
+      // Reset the footer on unmount.
+      return () => {
+        setFooter(null);
+      };
+    }
+  }, [activeStep, footer, setFooter, stepId]);
+};
diff --git a/packages/react-core/src/components/WizardComposable/index.ts b/packages/react-core/src/components/WizardComposable/index.ts
new file mode 100644
index 00000000000..878e324cc31
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/index.ts
@@ -0,0 +1,8 @@
+export * from './WizardComposable';
+export * from './WizardComposabeContext';
+export * from './WizardComposableBody';
+export * from './WizardComposableFooter';
+export * from './WizardComposableToggle';
+export * from './WizardComposableStep';
+export { useWizardFooter } from './hooks/useWizardFooter';
+export * from './types';
diff --git a/packages/react-core/src/components/WizardComposable/types.ts b/packages/react-core/src/components/WizardComposable/types.ts
new file mode 100644
index 00000000000..e76569f0935
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/types.ts
@@ -0,0 +1,86 @@
+import React from 'react';
+import { WizardNavItemProps, WizardNavProps } from '../Wizard';
+
+export interface Step {
+  /** Name of the step's nav item */
+  name: React.ReactNode;
+  /** Unique identifier */
+  id: string;
+  /** Flag to disable the step's nav item */
+  isDisabled?: boolean;
+  /** Flag to represent whether the step has been visited (navigated to) */
+  visited?: boolean;
+  /** Content shown when the step's nav item is selected. When treated as a parent step, only sub-step content will be shown. */
+  component?: React.ReactElement;
+  /** Nested step IDs */
+  subStepIds?: string[];
+  /** (Unused if nav is controlled) Custom WizardNavItem */
+  navItem?: React.ReactElement<WizardNavItemProps>;
+  /** (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. */
+  nextButtonText?: React.ReactNode;
+  /** (Unused if footer is controlled) The condition needed to disable the Next button */
+  disableNext?: boolean;
+  /** (Unused if footer is controlled) True to hide the Cancel button */
+  hideCancelButton?: boolean;
+  /** (Unused if footer is controlled) True to hide the Back button */
+  hideBackButton?: boolean;
+}
+
+export interface SubStep extends Omit<Step, 'subStepIds'> {
+  /** Unique identifier of the parent step */
+  parentId?: string | number;
+}
+
+export type WizardNavStepData = Pick<Step | SubStep, 'id' | 'name'>;
+export type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
+
+export interface DefaultWizardNavProps {
+  /** Flag indicating nav items with sub steps are expandable */
+  isExpandable?: boolean;
+  /** Aria-label for the Nav */
+  ariaLabel?: string;
+  /** Sets aria-labelledby on nav element */
+  ariaLabelledBy?: string;
+  /** Disable step nav items until they are visited */
+  forceStepVisit?: boolean;
+}
+
+export interface DefaultWizardFooterProps {
+  /** The Next button text */
+  nextButtonText?: React.ReactNode;
+  /** The Back button text */
+  backButtonText?: React.ReactNode;
+  /** The Cancel button text */
+  cancelButtonText?: React.ReactNode;
+}
+
+export type CustomWizardNavFunction = (
+  isOpen: boolean,
+  steps: (Step | SubStep)[],
+  activeStep: Step | SubStep,
+  goToStepByIndex: (index: number) => void
+) => React.ReactElement<WizardNavProps>;
+
+export function isCustomWizardNav(
+  nav: DefaultWizardNavProps | CustomWizardNavFunction
+): nav is CustomWizardNavFunction {
+  return typeof nav === 'function';
+}
+
+export function isCustomWizardFooter(
+  footer: DefaultWizardFooterProps | React.ReactElement
+): footer is React.ReactElement {
+  return React.isValidElement(footer);
+}
+
+export function isWizardBasicStep(step: Step | SubStep): step is Step {
+  return (step as Step).subStepIds === undefined && !isWizardSubStep(step);
+}
+
+export function isWizardSubStep(step: Step | SubStep): step is SubStep {
+  return (step as SubStep).parentId !== undefined;
+}
+
+export function isWizardParentStep(step: Step | SubStep): step is Step {
+  return (step as Step).subStepIds !== undefined;
+}
diff --git a/packages/react-core/src/components/WizardComposable/utils.ts b/packages/react-core/src/components/WizardComposable/utils.ts
new file mode 100644
index 00000000000..4661afc0887
--- /dev/null
+++ b/packages/react-core/src/components/WizardComposable/utils.ts
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { Step, SubStep, WizardNavStepData } from './types';
+import { WizardComposableStep, WizardComposableStepProps } from './WizardComposableStep';
+
+/**
+ * Accumulate list of step & sub-step props pulled from child components
+ * @param children
+ * @returns (Step | SubStep)[]
+ */
+export const buildSteps = (
+  children: React.ReactElement<WizardComposableStepProps> | React.ReactElement<WizardComposableStepProps>[]
+) =>
+  React.Children.toArray(children).reduce((acc: (Step | SubStep)[], child) => {
+    if (React.isValidElement(child) && typeof child.type !== 'string') {
+      if (child.type === WizardComposableStep) {
+        // Omit "children" and use the whole "child" (WizardStep) for the component prop. Sub-steps will do the same.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { steps: subSteps, id, children, ...stepProps } = child.props as WizardComposableStepProps;
+
+        acc.push({
+          id,
+          component: child,
+          ...stepProps,
+          ...(subSteps && {
+            subStepIds: subSteps?.map(subStep => {
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              const { children, ...subStepProps } = subStep.props;
+              acc.push({ ...subStepProps, component: subStep, parentId: id });
+
+              return subStep.props.id;
+            })
+          })
+        });
+      } else {
+        throw new Error('Wizard only accepts children of type WizardComposableStep');
+      }
+    }
+
+    return acc;
+  }, []);
+
+export const normalizeNavStep = ({ id, name }: WizardNavStepData) => ({ id, name });
+export const getActiveStep = (steps: (Step | SubStep)[], currentStepIndex: number) =>
+  steps.find((_, index) => index + 1 === currentStepIndex);
diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts
index aa48375a5d4..eef0b8f9fbe 100644
--- a/packages/react-core/src/components/index.ts
+++ b/packages/react-core/src/components/index.ts
@@ -80,6 +80,7 @@ export * from './Tooltip';
 export * from './NumberInput';
 export * from './TreeView';
 export * from './Wizard';
+export * from './WizardComposable';
 export * from './DragDrop';
 export * from './TextInputGroup';
 export * from './Panel';
diff --git a/packages/react-docs/patternfly-docs/patternfly-docs.source.js b/packages/react-docs/patternfly-docs/patternfly-docs.source.js
index 29e3bc703a5..d20f81350fc 100644
--- a/packages/react-docs/patternfly-docs/patternfly-docs.source.js
+++ b/packages/react-docs/patternfly-docs/patternfly-docs.source.js
@@ -41,6 +41,8 @@ module.exports = (baseSourceMD, sourceProps) => {
   sourceMD(path.join(reactCorePath, '/components/**/examples/*.md'), 'react');
   sourceMD(path.join(reactCorePath, '/next/components/**/examples/*.md'), 'react-next');
   sourceMD(path.join(reactCorePath, '/**/demos/**/*.md'), 'react-demos');
+  sourceMD(path.join(reactCorePath, '/**/Wizard/examples/*.md'), 'react-legacy');
+  sourceMD(path.join(reactCorePath, '/**/WizardComposable/examples/*.md'), 'react-composable');
 
   // React-table MD
   sourceMD(path.join(reactTablePath, '/**/TableComposable/examples/*.md'), 'react-composable');

From 9f3ed9833ee31c9edaf3e2a65a334751e583250e Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Thu, 18 Aug 2022 14:53:09 -0400
Subject: [PATCH 2/8] rename all composable wizard components, move to other
 directory, create path alias, export as separate module

---
 packages/react-core/package.json              |   1 -
 .../src/components/Wizard/examples/Wizard.md  |  25 +-
 .../WizardComposable/WizardComposableStep.tsx |  37 ---
 .../WizardComposable/examples/WizardBasic.tsx |  22 --
 .../examples/WizardComposable.md              |  40 ---
 .../src/components/WizardComposable/index.ts  |   8 -
 packages/react-core/src/components/index.ts   |   1 -
 .../components/Wizard/Wizard.tsx}             |  49 +--
 .../components/Wizard/WizardBody.tsx}         |  19 +-
 .../components/Wizard/WizardContext.tsx}      |  24 +-
 .../components/Wizard/WizardFooter.tsx}       |  22 +-
 .../src/next/components/Wizard/WizardStep.tsx |  23 ++
 .../components/Wizard/WizardToggle.tsx}       |  32 +-
 .../Wizard/__tests__/Wizard.test.tsx          | 299 ++++++++++++++++++
 .../next/components/Wizard/examples/Wizard.md |  77 +++++
 .../Wizard/examples/WizardBasic.tsx           |  22 ++
 .../Wizard}/examples/WizardCustomNav.tsx      |  26 +-
 .../Wizard}/examples/WizardKitchenSink.tsx    |  63 ++--
 .../Wizard}/hooks/useWizardFooter.tsx         |   2 +-
 .../src/next/components/Wizard/index.ts       |   8 +
 .../components/Wizard}/types.ts               |   8 +-
 .../components/Wizard}/utils.ts               |  18 +-
 .../react-core/src/next/components/index.ts   |   2 +-
 .../patternfly-docs/patternfly-docs.source.js |   2 -
 packages/react-styles/README.md               |   2 +-
 25 files changed, 589 insertions(+), 243 deletions(-)
 delete mode 100644 packages/react-core/src/components/WizardComposable/WizardComposableStep.tsx
 delete mode 100644 packages/react-core/src/components/WizardComposable/examples/WizardBasic.tsx
 delete mode 100644 packages/react-core/src/components/WizardComposable/examples/WizardComposable.md
 delete mode 100644 packages/react-core/src/components/WizardComposable/index.ts
 rename packages/react-core/src/{components/WizardComposable/WizardComposable.tsx => next/components/Wizard/Wizard.tsx} (78%)
 rename packages/react-core/src/{components/WizardComposable/WizardComposableBody.tsx => next/components/Wizard/WizardBody.tsx} (70%)
 rename packages/react-core/src/{components/WizardComposable/WizardComposabeContext.tsx => next/components/Wizard/WizardContext.tsx} (73%)
 rename packages/react-core/src/{components/WizardComposable/WizardComposableFooter.tsx => next/components/Wizard/WizardFooter.tsx} (74%)
 create mode 100644 packages/react-core/src/next/components/Wizard/WizardStep.tsx
 rename packages/react-core/src/{components/WizardComposable/WizardComposableToggle.tsx => next/components/Wizard/WizardToggle.tsx} (88%)
 create mode 100644 packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
 create mode 100644 packages/react-core/src/next/components/Wizard/examples/Wizard.md
 create mode 100644 packages/react-core/src/next/components/Wizard/examples/WizardBasic.tsx
 rename packages/react-core/src/{components/WizardComposable => next/components/Wizard}/examples/WizardCustomNav.tsx (59%)
 rename packages/react-core/src/{components/WizardComposable => next/components/Wizard}/examples/WizardKitchenSink.tsx (74%)
 rename packages/react-core/src/{components/WizardComposable => next/components/Wizard}/hooks/useWizardFooter.tsx (90%)
 create mode 100644 packages/react-core/src/next/components/Wizard/index.ts
 rename packages/react-core/src/{components/WizardComposable => next/components/Wizard}/types.ts (91%)
 rename packages/react-core/src/{components/WizardComposable => next/components/Wizard}/utils.ts (72%)

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 8ad35ff3e0e..9147bdde2b7 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -3,7 +3,6 @@
   "version": "4.232.13",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
-  "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "exports": {
     ".": "./dist/esm/index.js",
diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md
index 9e7dfdb1a4d..671f91caab3 100644
--- a/packages/react-core/src/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/components/Wizard/examples/Wizard.md
@@ -13,7 +13,7 @@ import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-ico
 import FinishedStep from './FinishedStep';
 import SampleForm from './SampleForm';
 
-If you seek a Wizard solution that allows for more composition, see the [React composition](/components/wizard/react-composition) tab.
+If you seek a Wizard solution that allows for more composition, see the [React next](/components/wizard/react-next) tab.
 
 ## Examples
 
@@ -56,7 +56,7 @@ class SimpleWizard extends React.Component {
   render() {
     const steps = [
       { name: 'First step', component: <p>Step 1 content</p> },
-      { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true},
+      { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true },
       { name: 'Third step', component: <p>Step 3 content</p> },
       { name: 'Fourth step', component: <p>Step 4 content</p>, isDisabled: true },
       { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
@@ -147,9 +147,24 @@ class IncrementallyEnabledStepsWizard extends React.Component {
 
     const steps = [
       { id: 'incrementally-enabled-1', name: 'First step', component: <p>Step 1 content</p> },
-      { id: 'incrementally-enabled-2', name: 'Second step', component: <p>Step 2 content</p>, canJumpTo: stepIdReached >= 2 },
-      { id: 'incrementally-enabled-3', name: 'Third step', component: <p>Step 3 content</p>, canJumpTo: stepIdReached >= 3 },
-      { id: 'incrementally-enabled-4', name: 'Fourth step', component: <p>Step 4 content</p>, canJumpTo: stepIdReached >= 4 },
+      {
+        id: 'incrementally-enabled-2',
+        name: 'Second step',
+        component: <p>Step 2 content</p>,
+        canJumpTo: stepIdReached >= 2
+      },
+      {
+        id: 'incrementally-enabled-3',
+        name: 'Third step',
+        component: <p>Step 3 content</p>,
+        canJumpTo: stepIdReached >= 3
+      },
+      {
+        id: 'incrementally-enabled-4',
+        name: 'Fourth step',
+        component: <p>Step 4 content</p>,
+        canJumpTo: stepIdReached >= 4
+      },
       {
         id: 'incrementally-enabled-5',
         name: 'Review',
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposableStep.tsx b/packages/react-core/src/components/WizardComposable/WizardComposableStep.tsx
deleted file mode 100644
index bbec3569f1b..00000000000
--- a/packages/react-core/src/components/WizardComposable/WizardComposableStep.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-import { Step } from './types';
-import { WizardComposableBody, WizardComposableBodyProps } from './WizardComposableBody';
-
-export type WizardComposableStepProps = Omit<Step, 'parentId'> &
-  WizardComposableBodyProps & {
-    /** Optional for when the Step is used as a parent to sub-steps */
-    children?: React.ReactNode;
-    /** Flag indicating whether to use a WizardBody to wrap step contents or not */
-    includeStepBody?: boolean;
-    /** Optional list of sub-steps */
-    steps?: React.ReactElement<WizardComposableStepProps>[];
-  };
-
-export const WizardComposableStep = ({
-  hasNoBodyPadding = false,
-  wrapperElement = 'div',
-  includeStepBody = true,
-  'aria-label': ariaLabel = 'Wizard body',
-  'aria-labelledby': ariaLabelledBy,
-  children
-}: WizardComposableStepProps) =>
-  includeStepBody ? (
-    <WizardComposableBody
-      wrapperElement={wrapperElement}
-      hasNoBodyPadding={hasNoBodyPadding}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-    >
-      {children}
-    </WizardComposableBody>
-  ) : (
-    <>{children}</>
-  );
-
-WizardComposableStep.displayName = 'WizardComposableStep';
diff --git a/packages/react-core/src/components/WizardComposable/examples/WizardBasic.tsx b/packages/react-core/src/components/WizardComposable/examples/WizardBasic.tsx
deleted file mode 100644
index 1b17427c9a7..00000000000
--- a/packages/react-core/src/components/WizardComposable/examples/WizardBasic.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { WizardComposable, WizardComposableStep } from '@patternfly/react-core';
-
-export const WizardBasic: React.FunctionComponent = () => (
-  <WizardComposable height={400}>
-    <WizardComposableStep name="First step" id="first-step">
-      <p>Step 1 content</p>
-    </WizardComposableStep>
-    <WizardComposableStep name="Second step" id="second-step">
-      <p>Step 2 content</p>
-    </WizardComposableStep>
-    <WizardComposableStep name="Third step" id="third-step">
-      <p>Step 3 content</p>
-    </WizardComposableStep>
-    <WizardComposableStep name="Fourth step" id="fourth-step">
-      <p>Step 4 content</p>{' '}
-    </WizardComposableStep>
-    <WizardComposableStep name="Review" id="fifth-step" nextButtonText="Finish">
-      <p>Review step content</p>
-    </WizardComposableStep>
-  </WizardComposable>
-);
diff --git a/packages/react-core/src/components/WizardComposable/examples/WizardComposable.md b/packages/react-core/src/components/WizardComposable/examples/WizardComposable.md
deleted file mode 100644
index e94a8359a5e..00000000000
--- a/packages/react-core/src/components/WizardComposable/examples/WizardComposable.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-id: Wizard
-section: components
-cssPrefix: pf-c-wizard
-propComponents:
-  [
-    'WizardComposable',
-    'WizardComposableFooter',
-    'WizardComposableToggle',
-    'WizardComposableStep',
-    'WizardComposableBody',
-  ]
----
-
-import { Button, WizardComposable, WizardComposableFooter, WizardComposableStep, WizardComposableBody, useWizardFooter, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
-import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
-
-PatternFly has two implementations of a `Wizard`, where the latest `WizardComposable`. Its temporary name speaks to the improvements made to the composition of the Wizard and its ansillary components.
-
-The documentation for the older `Wizard` implementation can be found under the [React legacy](/components/wizard/react-legacy) tab.
-
-## Examples
-
-### Basic
-
-```ts file="./WizardBasic.tsx"
-```
-
-### Custom Nav
-
-```ts file="./WizardCustomNav.tsx"
-```
-
-### Kitchen Sink
-
-```ts file="./WizardKitchenSink.tsx"
-```
diff --git a/packages/react-core/src/components/WizardComposable/index.ts b/packages/react-core/src/components/WizardComposable/index.ts
deleted file mode 100644
index 878e324cc31..00000000000
--- a/packages/react-core/src/components/WizardComposable/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './WizardComposable';
-export * from './WizardComposabeContext';
-export * from './WizardComposableBody';
-export * from './WizardComposableFooter';
-export * from './WizardComposableToggle';
-export * from './WizardComposableStep';
-export { useWizardFooter } from './hooks/useWizardFooter';
-export * from './types';
diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts
index eef0b8f9fbe..aa48375a5d4 100644
--- a/packages/react-core/src/components/index.ts
+++ b/packages/react-core/src/components/index.ts
@@ -80,7 +80,6 @@ export * from './Tooltip';
 export * from './NumberInput';
 export * from './TreeView';
 export * from './Wizard';
-export * from './WizardComposable';
 export * from './DragDrop';
 export * from './TextInputGroup';
 export * from './Panel';
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposable.tsx b/packages/react-core/src/next/components/Wizard/Wizard.tsx
similarity index 78%
rename from packages/react-core/src/components/WizardComposable/WizardComposable.tsx
rename to packages/react-core/src/next/components/Wizard/Wizard.tsx
index 8b464f6b455..cb81b3b64e8 100644
--- a/packages/react-core/src/components/WizardComposable/WizardComposable.tsx
+++ b/packages/react-core/src/next/components/Wizard/Wizard.tsx
@@ -12,14 +12,19 @@ import {
   CustomWizardNavFunction
 } from './types';
 import { buildSteps, normalizeNavStep } from './utils';
-import { useWizardContext, WizardComposableContextProvider } from './WizardComposabeContext';
-import { WizardComposableStepProps } from './WizardComposableStep';
-import { WizardComposableFooter } from './WizardComposableFooter';
-import { WizardComposableToggle } from './WizardComposableToggle';
-
-export interface WizardComposableProps extends React.HTMLProps<HTMLDivElement> {
-  /** Step, footer, or header child components */
-  children: React.ReactElement<WizardComposableStepProps> | React.ReactElement<WizardComposableStepProps>[];
+import { useWizardContext, WizardContextProvider } from './WizardContext';
+import { WizardStepProps } from './WizardStep';
+import { WizardFooter } from './WizardFooter';
+import { WizardToggle } from './WizardToggle';
+
+/**
+ * Wrapper for all steps and hosts state, including navigation helpers, within context.
+ * The WizardContext provided by default gives any child of Wizard access to those resources.
+ */
+
+export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
+  /** Step components */
+  children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[];
   /** Wizard header */
   header?: React.ReactNode;
   /** Wizard footer */
@@ -46,7 +51,7 @@ export interface WizardComposableProps extends React.HTMLProps<HTMLDivElement> {
   onClose?(): void;
 }
 
-export const WizardComposable = (props: WizardComposableProps) => {
+export const Wizard = (props: WizardProps) => {
   const { startIndex = 1, children, footer, onNavByIndex, onNext, onBack, onSave, onClose, ...internalProps } = props;
   const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
   const steps = buildSteps(children);
@@ -122,7 +127,7 @@ export const WizardComposable = (props: WizardComposableProps) => {
   };
 
   return (
-    <WizardComposableContextProvider
+    <WizardContextProvider
       steps={steps}
       currentStepIndex={currentStepIndex}
       footer={isCustomWizardFooter(footer) && footer}
@@ -133,24 +138,24 @@ export const WizardComposable = (props: WizardComposableProps) => {
       goToStepByName={goToStepByName}
       goToStepByIndex={goToStepByIndex}
     >
-      <WizardComposableInternal {...internalProps}>{children}</WizardComposableInternal>
-    </WizardComposableContextProvider>
+      <WizardInternal {...internalProps} footer={footer}>
+        {children}
+      </WizardInternal>
+    </WizardContextProvider>
   );
 };
 
 // eslint-disable-next-line patternfly-react/no-anonymous-functions
-const WizardComposableInternal = ({ height, width, className, header, nav, ...restProps }: WizardComposableProps) => {
-  const { activeStep, steps, footer, onNext, onBack, onClose, goToStepByIndex } = useWizardContext();
+const WizardInternal = ({ height, width, className, header, footer, nav, ...divProps }: WizardProps) => {
+  const { activeStep, steps, footer: customFooter, onNext, onBack, onClose, goToStepByIndex } = useWizardContext();
 
-  const wizardFooter = isCustomWizardFooter(footer) ? (
-    footer
-  ) : (
-    <WizardComposableFooter
+  const wizardFooter = customFooter || (
+    <WizardFooter
       activeStep={activeStep}
       onNext={onNext}
       onBack={onBack}
       onClose={onClose}
-      disableBackButton={activeStep.id === steps[0].id}
+      disableBackButton={activeStep?.id === steps[0]?.id}
       {...footer}
     />
   );
@@ -162,10 +167,10 @@ const WizardComposableInternal = ({ height, width, className, header, nav, ...re
         ...(height ? { height } : {}),
         ...(width ? { width } : {})
       }}
-      {...restProps}
+      {...divProps}
     >
       {header}
-      <WizardComposableToggle
+      <WizardToggle
         steps={steps}
         activeStep={activeStep}
         footer={wizardFooter}
@@ -176,4 +181,4 @@ const WizardComposableInternal = ({ height, width, className, header, nav, ...re
   );
 };
 
-WizardComposable.displayName = 'WizardComposable';
+Wizard.displayName = 'Wizard';
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposableBody.tsx b/packages/react-core/src/next/components/Wizard/WizardBody.tsx
similarity index 70%
rename from packages/react-core/src/components/WizardComposable/WizardComposableBody.tsx
rename to packages/react-core/src/next/components/Wizard/WizardBody.tsx
index b44c4570316..51cd195facc 100644
--- a/packages/react-core/src/components/WizardComposable/WizardComposableBody.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardBody.tsx
@@ -3,7 +3,11 @@ import React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 
-export interface WizardComposableBodyProps {
+/**
+ * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
+ */
+
+export interface WizardBodyProps {
   children?: React.ReactNode | React.ReactNode[];
   /** Set to true to remove the default body padding */
   hasNoBodyPadding?: boolean;
@@ -15,21 +19,16 @@ export interface WizardComposableBodyProps {
   wrapperElement?: React.ElementType;
 }
 
-export const WizardComposableBody = ({
+export const WizardBody = ({
   children,
   hasNoBodyPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   wrapperElement: Wrapper = 'div'
-}: WizardComposableBodyProps) => (
-  <Wrapper
-    aria-label={ariaLabel}
-    aria-labelledby={ariaLabelledBy}
-    className={css(styles.wizardMain)}
-    {...(Wrapper === 'div' && { role: 'main' })}
-  >
+}: WizardBodyProps) => (
+  <Wrapper aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
     <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
   </Wrapper>
 );
 
-WizardComposableBody.displayName = 'WizardComposableBody';
+WizardBody.displayName = 'WizardBody';
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposabeContext.tsx b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
similarity index 73%
rename from packages/react-core/src/components/WizardComposable/WizardComposabeContext.tsx
rename to packages/react-core/src/next/components/Wizard/WizardContext.tsx
index 1f0b7a18680..bbe8b1a758f 100644
--- a/packages/react-core/src/components/WizardComposable/WizardComposabeContext.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Step, SubStep } from './types';
 import { getActiveStep } from './utils';
 
-export interface WizardComposableContextProps {
+export interface WizardContextProps {
   steps: (Step | SubStep)[];
   activeStep: Step | SubStep;
   footer: React.ReactElement;
@@ -15,9 +15,9 @@ export interface WizardComposableContextProps {
   setFooter(footer: React.ReactElement): void;
 }
 
-export const WizardComposableContext = React.createContext({} as WizardComposableContextProps);
+export const WizardContext = React.createContext({} as WizardContextProps);
 
-interface WizardComposableContextRenderProps {
+interface WizardContextRenderProps {
   steps: (Step | SubStep)[];
   activeStep: Step | SubStep;
   footer: React.ReactElement;
@@ -26,11 +26,11 @@ interface WizardComposableContextRenderProps {
   onClose(): void;
 }
 
-interface WizardComposableContextProviderProps {
+export interface WizardContextProviderProps {
   steps: (Step | SubStep)[];
   currentStepIndex: number;
   footer: React.ReactElement;
-  children: React.ReactElement | ((props: WizardComposableContextRenderProps) => React.ReactElement);
+  children: React.ReactElement | ((props: WizardContextRenderProps) => React.ReactElement);
   onNext(): void;
   onBack(): void;
   onClose(): void;
@@ -40,7 +40,7 @@ interface WizardComposableContextProviderProps {
 }
 
 // eslint-disable-next-line patternfly-react/no-anonymous-functions
-export const WizardComposableContextProvider: React.FunctionComponent<WizardComposableContextProviderProps> = ({
+export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
   steps: initialSteps,
   footer: initialFooter,
   currentStepIndex,
@@ -58,7 +58,7 @@ export const WizardComposableContextProvider: React.FunctionComponent<WizardComp
 
   // When the active step changes and the newly active step isn't visited, set the visited flag to true.
   React.useEffect(() => {
-    if (!activeStep.visited) {
+    if (activeStep && !activeStep?.visited) {
       setSteps(prevSteps =>
         prevSteps.map(step => {
           if (step.id === activeStep.id) {
@@ -69,10 +69,10 @@ export const WizardComposableContextProvider: React.FunctionComponent<WizardComp
         })
       );
     }
-  }, [activeStep.id, activeStep.visited]);
+  }, [activeStep]);
 
   return (
-    <WizardComposableContext.Provider
+    <WizardContext.Provider
       value={{
         steps,
         activeStep,
@@ -87,9 +87,9 @@ export const WizardComposableContextProvider: React.FunctionComponent<WizardComp
       }}
     >
       {typeof children === 'function' ? children({ activeStep, steps, footer, onNext, onBack, onClose }) : children}
-    </WizardComposableContext.Provider>
+    </WizardContext.Provider>
   );
 };
 
-export const WizardComposableContextConsumer = WizardComposableContext.Consumer;
-export const useWizardContext = () => React.useContext(WizardComposableContext);
+export const WizardContextConsumer = WizardContext.Consumer;
+export const useWizardContext = () => React.useContext(WizardContext);
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposableFooter.tsx b/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
similarity index 74%
rename from packages/react-core/src/components/WizardComposable/WizardComposableFooter.tsx
rename to packages/react-core/src/next/components/Wizard/WizardFooter.tsx
index 3a9543c10f0..21ba408dbb5 100644
--- a/packages/react-core/src/components/WizardComposable/WizardComposableFooter.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
@@ -3,10 +3,14 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonVariant } from '../../../components/Button';
 import { Step, SubStep, WizardNavStepFunction } from './types';
 
-export interface WizardComposableFooterProps {
+/**
+ * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
+ */
+
+export interface WizardFooterProps {
   /** The currently active WizardStep */
   activeStep: Step | SubStep;
   /** Next button callback */
@@ -25,7 +29,7 @@ export interface WizardComposableFooterProps {
   disableBackButton?: boolean;
 }
 
-export const WizardComposableFooter = ({
+export const WizardFooter = ({
   onNext,
   onBack,
   onClose,
@@ -34,19 +38,19 @@ export const WizardComposableFooter = ({
   nextButtonText = 'Next',
   backButtonText = 'Back',
   cancelButtonText = 'Cancel'
-}: WizardComposableFooterProps) => (
+}: WizardFooterProps) => (
   <footer className={css(styles.wizardFooter)}>
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={activeStep.disableNext}>
-      {activeStep.nextButtonText || nextButtonText}
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={activeStep?.disableNext}>
+      {activeStep?.nextButtonText || nextButtonText}
     </Button>
 
-    {!activeStep.hideBackButton && (
+    {!activeStep?.hideBackButton && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={disableBackButton}>
         {backButtonText}
       </Button>
     )}
 
-    {!activeStep.hideCancelButton && (
+    {!activeStep?.hideCancelButton && (
       <div className={styles.wizardFooterCancel}>
         <Button variant={ButtonVariant.link} onClick={onClose}>
           {cancelButtonText}
@@ -56,4 +60,4 @@ export const WizardComposableFooter = ({
   </footer>
 );
 
-WizardComposableFooter.displayName = 'WizardComposableFooter';
+WizardFooter.displayName = 'WizardFooter';
diff --git a/packages/react-core/src/next/components/Wizard/WizardStep.tsx b/packages/react-core/src/next/components/Wizard/WizardStep.tsx
new file mode 100644
index 00000000000..9b9c81967f0
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/WizardStep.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Step } from './types';
+import { WizardBody, WizardBodyProps } from './WizardBody';
+
+/**
+ * Used as a passthrough of step properties for Wizard and all supporting child components.
+ * Also acts as a wrapper for content, with an optional inclusion of WizardBody.
+ */
+
+export interface WizardStepProps extends Omit<Step, 'parentId' | 'subStepIds' | 'visited'> {
+  /** Optional for when the Step is used as a parent to sub-steps */
+  children?: React.ReactNode;
+  /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
+  body?: WizardBodyProps | null;
+  /** Optional list of sub-steps */
+  steps?: React.ReactElement<WizardStepProps>[];
+}
+
+export const WizardStep = ({ body, children }: WizardStepProps) =>
+  body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
+
+WizardStep.displayName = 'WizardStep';
diff --git a/packages/react-core/src/components/WizardComposable/WizardComposableToggle.tsx b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
similarity index 88%
rename from packages/react-core/src/components/WizardComposable/WizardComposableToggle.tsx
rename to packages/react-core/src/next/components/Wizard/WizardToggle.tsx
index 79cb93714a9..17c8b8d7744 100644
--- a/packages/react-core/src/components/WizardComposable/WizardComposableToggle.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
@@ -5,8 +5,8 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
-import { KeyTypes } from '../../helpers/constants';
-import { WizardNav, WizardNavItem } from '../Wizard';
+import { KeyTypes } from '../../../helpers/constants';
+import { WizardNav, WizardNavItem } from '../../../components/Wizard';
 import {
   Step,
   SubStep,
@@ -18,7 +18,11 @@ import {
   isWizardParentStep
 } from './types';
 
-export interface WizardComposableToggleProps {
+/**
+ * Used to toggle between step content, including the body and footer. This is also where the nav and its expandability is controlled.
+ */
+
+export interface WizardToggleProps {
   /** List of steps and/or sub-steps */
   steps: (Step | SubStep)[];
   /** The currently active WizardStep */
@@ -35,7 +39,7 @@ export interface WizardComposableToggleProps {
   unmountInactiveSteps?: boolean;
 }
 
-export const WizardComposableToggle = ({
+export const WizardToggle = ({
   steps,
   activeStep,
   footer,
@@ -43,7 +47,7 @@ export const WizardComposableToggle = ({
   goToStepByIndex,
   unmountInactiveSteps = true,
   'aria-label': ariaLabel = 'Wizard toggle'
-}: WizardComposableToggleProps) => {
+}: WizardToggleProps) => {
   const [isNavOpen, setIsNavOpen] = React.useState(false);
   const isActiveSubStep = isWizardSubStep(activeStep);
 
@@ -68,9 +72,9 @@ export const WizardComposableToggle = ({
 
   // Only render the active step when unmountInactiveSteps is true
   const bodyContent = unmountInactiveSteps
-    ? activeStep.component
+    ? activeStep?.component
     : steps.map(step => {
-        if (activeStep.name === step.name) {
+        if (activeStep?.name === step.name) {
           return step.component;
         }
 
@@ -108,7 +112,7 @@ export const WizardComposableToggle = ({
                     firstSubStepIndex = subStepIndex;
                   }
 
-                  if (activeStep.id === subStep.id) {
+                  if (activeStep?.id === subStep.id) {
                     hasActiveChild = true;
                   }
 
@@ -119,7 +123,7 @@ export const WizardComposableToggle = ({
                       key={subStep.id}
                       id={subStep.id}
                       content={subStep.name}
-                      isCurrent={activeStep.id === subStep.id}
+                      isCurrent={activeStep?.id === subStep.id}
                       isDisabled={subStep.isDisabled || (nav?.forceStepVisit && !subStep.visited)}
                       step={subStepIndex}
                       onNavItemClick={goToStepByIndex}
@@ -158,7 +162,7 @@ export const WizardComposableToggle = ({
                       key={step.id}
                       id={step.id}
                       content={step.name}
-                      isCurrent={activeStep.id === step.id}
+                      isCurrent={activeStep?.id === step.id}
                       isDisabled={step.isDisabled || (nav?.forceStepVisit && !step.visited)}
                       step={stepIndex}
                       onNavItemClick={goToStepByIndex}
@@ -169,7 +173,7 @@ export const WizardComposableToggle = ({
             })}
           </WizardNav>
         );
-      }, [activeStep.id, goToStepByIndex, isNavOpen, nav, steps]);
+      }, [activeStep?.id, goToStepByIndex, isNavOpen, nav, steps]);
 
   return (
     <>
@@ -181,10 +185,10 @@ export const WizardComposableToggle = ({
       >
         <span className={css(styles.wizardToggleList)}>
           <span className={css(styles.wizardToggleListItem)}>
-            {activeStep.name}
+            {activeStep?.name}
             {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
           </span>
-          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep.name}</span>}
+          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
         </span>
 
         <span className={css(styles.wizardToggleIcon)}>
@@ -203,4 +207,4 @@ export const WizardComposableToggle = ({
   );
 };
 
-WizardComposableToggle.displayName = 'WizardComposableToggle';
+WizardToggle.displayName = 'WizardToggle';
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
new file mode 100644
index 00000000000..096c23c9c32
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
@@ -0,0 +1,299 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { WizardNav, WizardNavItem } from '../../../../components/Wizard';
+import { DefaultWizardNavProps, Step, SubStep } from '../types';
+import { DefaultWizardFooterProps, Wizard, WizardStep } from '..';
+
+describe('Wizard', () => {
+  it('renders step when child is of type WizardStep', () => {
+    render(
+      <Wizard>
+        <WizardStep id="test-step" name="Test step">
+          Step content
+        </WizardStep>
+      </Wizard>
+    );
+
+    expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+    expect(screen.getByText('Step content')).toBeVisible();
+  });
+
+  it('renders step when child has required props; name, id, children', () => {
+    const CustomStep = props => <div {...props} />;
+
+    render(
+      <Wizard>
+        <CustomStep id="test-step" name="Test step">
+          Custom step content
+        </CustomStep>
+      </Wizard>
+    );
+
+    expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+    expect(screen.getByText('Custom step content')).toBeVisible();
+  });
+
+  it('renders a header when specified', () => {
+    render(
+      <Wizard header="Some header">
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    expect(screen.getByText('Some header')).toBeVisible();
+  });
+
+  it('renders default footer without specifying the footer prop', () => {
+    render(
+      <Wizard>
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    expect(screen.getByRole('button', { name: 'Next' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Back' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+  });
+
+  it('renders default footer with custom props', () => {
+    const footer: DefaultWizardFooterProps = {
+      nextButtonText: <>Proceed with caution</>,
+      backButtonText: 'Turn back!',
+      cancelButtonText: 'Leave now!'
+    };
+
+    render(
+      <Wizard footer={footer}>
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    expect(screen.getByRole('button', { name: 'Proceed with caution' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Turn back!' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Leave now!' })).toBeVisible();
+  });
+
+  it('renders custom footer', () => {
+    render(
+      <Wizard footer={<>Some footer</>}>
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    expect(screen.getByText('Some footer')).toBeVisible();
+  });
+
+  it('renders default nav without specifying the nav prop', () => {
+    render(
+      <Wizard>
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    expect(screen.getByRole('navigation')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+  });
+
+  it('renders default nav with custom props', () => {
+    const nav: DefaultWizardNavProps = {
+      isExpandable: true,
+      ariaLabel: 'Some nav label',
+      ariaLabelledBy: 'wizard-id',
+      forceStepVisit: true
+    };
+
+    render(
+      <Wizard id="wizard-id" nav={nav}>
+        <WizardStep id="step-1" name="Test step 1" steps={[<WizardStep id="nested-step" name="Nested step" />]} />
+        <WizardStep id="step-2" name="Test step 2" />
+      </Wizard>
+    );
+
+    const navElement = screen.getByLabelText('Some nav label');
+
+    expect(navElement).toBeVisible();
+    expect(navElement).toHaveAttribute('aria-labelledby', 'wizard-id');
+    expect(screen.getByRole('button', { name: 'Test step 1' }).parentElement).toHaveClass('pf-m-expandable');
+    expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
+  });
+
+  it('renders custom nav', () => {
+    const nav = (
+      isOpen: boolean,
+      steps: (Step | SubStep)[],
+      activeStep: Step | SubStep,
+      goToStepByIndex: (index: number) => void
+    ) => (
+      <WizardNav isOpen={isOpen}>
+        {steps.map((step, index) => (
+          <WizardNavItem
+            key={step.id}
+            id={step.id}
+            content={step.name}
+            isCurrent={activeStep.id === step.id}
+            isDisabled={step.isDisabled}
+            step={index + 1}
+            onNavItemClick={goToStepByIndex}
+          />
+        ))}
+      </WizardNav>
+    );
+
+    render(
+      <Wizard nav={nav}>
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    expect(screen.getByRole('navigation')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+  });
+
+  it('starts at the first step as the active one by default', () => {
+    render(
+      <Wizard>
+        <WizardStep id="step-1" name="Test step 1">
+          Step 1 content
+        </WizardStep>
+        <WizardStep id="step-2" name="Test step 2" />
+      </Wizard>
+    );
+
+    expect(screen.getByText('Step 1 content')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Test step 1' })).toHaveClass('pf-m-current');
+  });
+
+  it(`can start at a step that isn't the first by specifying 'startIndex'`, () => {
+    render(
+      <Wizard startIndex={2}>
+        <WizardStep id="step-1" name="Test step 1" />
+        <WizardStep id="step-2" name="Test step 2">
+          Step 2 content
+        </WizardStep>
+      </Wizard>
+    );
+
+    expect(screen.getByText('Step 2 content')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveClass('pf-m-current');
+  });
+
+  it(`can use custom classNames and spread other props into the wizard's div`, () => {
+    render(
+      <Wizard className="some-class" data-testid="wizard-id">
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    expect(screen.getByTestId('wizard-id')).toHaveClass('some-class');
+  });
+
+  it(`can customize the wizard's height and width`, () => {
+    render(
+      <Wizard height={500} width={500} data-testid="wizard-id">
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    const wizard = screen.getByTestId('wizard-id');
+
+    expect(wizard).toHaveStyle('height: 500px');
+    expect(wizard).toHaveStyle('width: 500px');
+  });
+
+  it('calls onNavByIndex on nav item click', () => {
+    const onNavByIndex = jest.fn();
+
+    render(
+      <Wizard onNavByIndex={onNavByIndex}>
+        <WizardStep id="step-1" name="Test step 1" />
+        <WizardStep id="step-2" name="Test step 2" />
+      </Wizard>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
+    expect(onNavByIndex).toHaveBeenCalled();
+  });
+
+  it('calls onNext and not onSave on next button click when not on the last step', () => {
+    const onNext = jest.fn();
+    const onSave = jest.fn();
+
+    render(
+      <Wizard onNext={onNext} onSave={onSave}>
+        <WizardStep id="step-1" name="Test step 1" />
+        <WizardStep id="step-2" name="Test step 2" />
+      </Wizard>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+
+    expect(onNext).toHaveBeenCalled();
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('calls onBack on back button click', () => {
+    const onBack = jest.fn();
+
+    render(
+      <Wizard onBack={onBack}>
+        <WizardStep id="step-1" name="Test step 1" />
+        <WizardStep id="step-2" name="Test step 2" />
+      </Wizard>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
+    userEvent.click(screen.getByRole('button', { name: 'Back' }));
+
+    expect(onBack).toHaveBeenCalled();
+  });
+
+  it('calls onSave and not onClose on next button click when on the last step', () => {
+    const onSave = jest.fn();
+    const onClose = jest.fn();
+
+    render(
+      <Wizard onSave={onSave} onClose={onClose}>
+        <WizardStep id="step-1" name="Test step 1" />
+        <WizardStep id="step-2" name="Test step 2" />
+      </Wizard>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
+    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+
+    expect(onSave).toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('calls onClose when onSave is not specified on next button click when on the last step', () => {
+    const onClose = jest.fn();
+
+    render(
+      <Wizard onClose={onClose}>
+        <WizardStep id="step-1" name="Test step 1" />
+        <WizardStep id="step-2" name="Test step 2" />
+      </Wizard>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
+    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose on cancel link click', () => {
+    const onClose = jest.fn();
+
+    render(
+      <Wizard onClose={onClose}>
+        <WizardStep id="test-step" name="Test step" />
+      </Wizard>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/packages/react-core/src/next/components/Wizard/examples/Wizard.md b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
new file mode 100644
index 00000000000..2c4cb962b35
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
@@ -0,0 +1,77 @@
+---
+id: Wizard
+section: components
+cssPrefix: pf-c-wizard
+propComponents: ['Wizard', 'WizardFooter', 'WizardToggle', 'WizardStep', 'WizardBody']
+beta: true
+---
+
+import {
+  FormGroup,
+  TextInput,
+  Drawer,
+  DrawerContent,
+  Button,
+  Flex,
+  DrawerPanelContent,
+  DrawerColorVariant,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  WizardNavItem,
+  WizardNav,
+  WizardHeader
+} from '@patternfly/react-core';
+import {
+  Wizard,
+  WizardFooter,
+  WizardToggle,
+  WizardStep,
+  WizardBody,
+  Step,
+  SubStep,
+  useWizardFooter,
+  WizardStepProps,
+  useWizardContext
+} from '@patternfly/react-core/next';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+PatternFly has two implementations of a `Wizard`.
+
+This newer `Wizard` takes a more explicit and declarative approach compared to the older implementation, which can be found under the [React](/components/wizard/react) tab.
+
+## Composable structure
+
+The standard sub-component relationships are arranged as follows:
+
+```noLive
+<Wizard>
+  <WizardStep />
+  <WizardStep
+    steps={[
+      <WizardStep />,
+      <WizardStep />
+    ]}
+  />
+</Wizard>
+```
+
+## Examples
+
+### Basic
+
+```ts file="./WizardBasic.tsx"
+```
+
+### Custom Nav
+
+```ts file="./WizardCustomNav.tsx"
+```
+
+### Kitchen Sink
+
+Includes a header, custom footer, sub-steps, step content with a drawer, custom nav item, and nav prevention until step visitation.
+
+```ts file="./WizardKitchenSink.tsx"
+```
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardBasic.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardBasic.tsx
new file mode 100644
index 00000000000..0739a06eb35
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardBasic.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardBasic: React.FunctionComponent = () => (
+  <Wizard height={400}>
+    <WizardStep name="First step" id="basic-first-step">
+      <p>Step 1 content</p>
+    </WizardStep>
+    <WizardStep name="Second step" id="basic-second-step">
+      <p>Step 2 content</p>
+    </WizardStep>
+    <WizardStep name="Third step" id="basic-third-step">
+      <p>Step 3 content</p>
+    </WizardStep>
+    <WizardStep name="Fourth step" id="basic-fourth-step">
+      <p>Step 4 content</p>{' '}
+    </WizardStep>
+    <WizardStep name="Review" id="basic-review-step" nextButtonText="Finish">
+      <p>Review step content</p>
+    </WizardStep>
+  </Wizard>
+);
diff --git a/packages/react-core/src/components/WizardComposable/examples/WizardCustomNav.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
similarity index 59%
rename from packages/react-core/src/components/WizardComposable/examples/WizardCustomNav.tsx
rename to packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
index 87c000fda0b..9f26ecbeeea 100644
--- a/packages/react-core/src/components/WizardComposable/examples/WizardCustomNav.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Step,
-  SubStep,
-  WizardComposable,
-  WizardComposableStep,
-  WizardNav,
-  WizardNavItem
-} from '@patternfly/react-core';
+import { WizardNav, WizardNavItem } from '@patternfly/react-core';
+import { Step, SubStep, Wizard, WizardStep } from '@patternfly/react-core/next';
 
 export const WizardCustomNav: React.FunctionComponent = () => {
   const nav = (
@@ -31,16 +25,16 @@ export const WizardCustomNav: React.FunctionComponent = () => {
   );
 
   return (
-    <WizardComposable height={400} nav={nav}>
-      <WizardComposableStep name="First step" id="first-step">
+    <Wizard height={400} nav={nav}>
+      <WizardStep name="First step" id="cnav-first-step">
         <p>Did you say...custom nav?</p>
-      </WizardComposableStep>
-      <WizardComposableStep name="Second step" id="second-step">
+      </WizardStep>
+      <WizardStep name="Second step" id="cnav-second-step">
         <p>Step 2 content</p>
-      </WizardComposableStep>
-      <WizardComposableStep name="Review" id="fifth-step" nextButtonText="Wrap it up">
+      </WizardStep>
+      <WizardStep name="Review" id="cnav-review-step" nextButtonText="Wrap it up">
         <p>Review step content</p>
-      </WizardComposableStep>
-    </WizardComposable>
+      </WizardStep>
+    </Wizard>
   );
 };
diff --git a/packages/react-core/src/components/WizardComposable/examples/WizardKitchenSink.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
similarity index 74%
rename from packages/react-core/src/components/WizardComposable/examples/WizardKitchenSink.tsx
rename to packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
index f87763d5168..207875ac7db 100644
--- a/packages/react-core/src/components/WizardComposable/examples/WizardKitchenSink.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
 
 import {
-  WizardComposable,
-  WizardComposableStep,
-  WizardHeader,
   FormGroup,
   TextInput,
   Drawer,
@@ -15,19 +12,25 @@ import {
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
-  WizardComposableBody,
-  WizardComposableFooter,
-  useWizardContext,
   WizardNavItem,
-  Step,
-  useWizardFooter
+  WizardHeader
 } from '@patternfly/react-core';
+import {
+  Step,
+  Wizard,
+  WizardStep,
+  WizardBody,
+  WizardFooter,
+  useWizardFooter,
+  WizardStepProps,
+  useWizardContext
+} from '@patternfly/react-core/next';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 const CustomWizardFooter = () => {
   const { activeStep, onNext, onBack, onClose } = useWizardContext();
-  return <WizardComposableFooter activeStep={activeStep} onNext={onNext} onBack={onBack} onClose={onClose} />;
+  return <WizardFooter activeStep={activeStep} onNext={onNext} onBack={onBack} onClose={onClose} />;
 };
 
 const CustomNavItem = () => {
@@ -37,7 +40,7 @@ const CustomNavItem = () => {
   return (
     <WizardNavItem
       id={step.id}
-      content={step.name}
+      content={<span style={{ color: 'var(--pf-global--default-color--200)' }}>Custom item</span>}
       isCurrent={activeStep.id === step.id}
       step={steps.indexOf(step) + 1}
       isDisabled={step.isDisabled || !step.visited}
@@ -63,7 +66,7 @@ const StepContentWithDrawer = () => {
           </DrawerPanelContent>
         }
       >
-        <WizardComposableBody>
+        <WizardBody>
           <Flex direction={{ default: 'column' }}>
             {!isDrawerExpanded && (
               <Button isInline variant="link" onClick={() => setIsDrawerExpanded(prevExpanded => !prevExpanded)}>
@@ -75,7 +78,7 @@ const StepContentWithDrawer = () => {
               <TextInput aria-label="Some Text Input Label" />
             </FormGroup>
           </Flex>
-        </WizardComposableBody>
+        </WizardBody>
       </DrawerContent>
     </Drawer>
   );
@@ -120,36 +123,38 @@ const StepWithCustomFooter = () => {
   return <>Step 3 content w/ custom async footer</>;
 };
 
+const CustomStepFour = (props: WizardStepProps) => <div {...props} />;
+
 export const WizardKitchenSink: React.FunctionComponent = () => (
-  <WizardComposable
+  <Wizard
     height={400}
     header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
     footer={<CustomWizardFooter />}
     nav={{ forceStepVisit: true, isExpandable: true }}
   >
-    <WizardComposableStep id="first-step" name="First step" includeStepBody={false}>
+    <WizardStep id="sink-first-step" name="First step" body={null}>
       <StepContentWithDrawer />
-    </WizardComposableStep>
-    <WizardComposableStep
-      id="second-step"
+    </WizardStep>
+    <WizardStep
+      id="sink-second-step"
       name="Second step"
       steps={[
-        <WizardComposableStep id="sub-step-one" key="substep-one" name="Substep 1">
+        <WizardStep id="sink-sub-step-one" key="substep-one" name="Substep 1">
           Substep 1 content
-        </WizardComposableStep>,
-        <WizardComposableStep id="sub-step-two" key="substep-two" name="Substep 2">
+        </WizardStep>,
+        <WizardStep id="sink-sub-step-two" key="substep-two" name="Substep 2">
           Substep 2 content
-        </WizardComposableStep>
+        </WizardStep>
       ]}
     />
-    <WizardComposableStep id="third-step" name="Third step" navItem={<CustomNavItem />}>
+    <WizardStep id="sink-third-step" name="Third step" navItem={<CustomNavItem />}>
       <StepWithCustomFooter />
-    </WizardComposableStep>
-    <WizardComposableStep id="fourth-step" name="Fourth step">
-      Step 4 content
-    </WizardComposableStep>
-    <WizardComposableStep id="review-step" name="Review" nextButtonText="Submit" disableNext>
+    </WizardStep>
+    <CustomStepFour id="sink-fourth-step" name="Fourth step">
+      <WizardBody>Step 4 content</WizardBody>
+    </CustomStepFour>
+    <WizardStep id="sink-review-step" name="Review" nextButtonText="Submit" disableNext>
       Review step content
-    </WizardComposableStep>
-  </WizardComposable>
+    </WizardStep>
+  </Wizard>
 );
diff --git a/packages/react-core/src/components/WizardComposable/hooks/useWizardFooter.tsx b/packages/react-core/src/next/components/Wizard/hooks/useWizardFooter.tsx
similarity index 90%
rename from packages/react-core/src/components/WizardComposable/hooks/useWizardFooter.tsx
rename to packages/react-core/src/next/components/Wizard/hooks/useWizardFooter.tsx
index 00420bed143..7910eec9c52 100644
--- a/packages/react-core/src/components/WizardComposable/hooks/useWizardFooter.tsx
+++ b/packages/react-core/src/next/components/Wizard/hooks/useWizardFooter.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useWizardContext } from '../WizardComposabeContext';
+import { useWizardContext } from '../WizardContext';
 
 /**
  * Set a unique footer for the wizard. stepId is only required if inactive steps are hidden instead of unmounted.
diff --git a/packages/react-core/src/next/components/Wizard/index.ts b/packages/react-core/src/next/components/Wizard/index.ts
new file mode 100644
index 00000000000..31a26076411
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/index.ts
@@ -0,0 +1,8 @@
+export * from './Wizard';
+export * from './WizardContext';
+export * from './WizardBody';
+export * from './WizardFooter';
+export * from './WizardToggle';
+export * from './WizardStep';
+export { useWizardFooter } from './hooks/useWizardFooter';
+export * from './types';
diff --git a/packages/react-core/src/components/WizardComposable/types.ts b/packages/react-core/src/next/components/Wizard/types.ts
similarity index 91%
rename from packages/react-core/src/components/WizardComposable/types.ts
rename to packages/react-core/src/next/components/Wizard/types.ts
index e76569f0935..58125167387 100644
--- a/packages/react-core/src/components/WizardComposable/types.ts
+++ b/packages/react-core/src/next/components/Wizard/types.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import { WizardNavItemProps, WizardNavProps } from '../Wizard';
+import { WizardNavItemProps, WizardNavProps } from '../../../components/Wizard';
 
 export interface Step {
   /** Name of the step's nav item */
@@ -74,13 +74,13 @@ export function isCustomWizardFooter(
 }
 
 export function isWizardBasicStep(step: Step | SubStep): step is Step {
-  return (step as Step).subStepIds === undefined && !isWizardSubStep(step);
+  return (step as Step)?.subStepIds === undefined && !isWizardSubStep(step);
 }
 
 export function isWizardSubStep(step: Step | SubStep): step is SubStep {
-  return (step as SubStep).parentId !== undefined;
+  return (step as SubStep)?.parentId !== undefined;
 }
 
 export function isWizardParentStep(step: Step | SubStep): step is Step {
-  return (step as Step).subStepIds !== undefined;
+  return (step as Step)?.subStepIds !== undefined;
 }
diff --git a/packages/react-core/src/components/WizardComposable/utils.ts b/packages/react-core/src/next/components/Wizard/utils.ts
similarity index 72%
rename from packages/react-core/src/components/WizardComposable/utils.ts
rename to packages/react-core/src/next/components/Wizard/utils.ts
index 4661afc0887..30707b9adf9 100644
--- a/packages/react-core/src/components/WizardComposable/utils.ts
+++ b/packages/react-core/src/next/components/Wizard/utils.ts
@@ -1,22 +1,24 @@
 import React from 'react';
 
 import { Step, SubStep, WizardNavStepData } from './types';
-import { WizardComposableStep, WizardComposableStepProps } from './WizardComposableStep';
+import { WizardStep, WizardStepProps } from './WizardStep';
+
+function hasWizardStepProps(props: WizardStepProps | any): props is WizardStepProps {
+  return props.name !== undefined && props.id !== undefined && props.children !== undefined;
+}
 
 /**
  * Accumulate list of step & sub-step props pulled from child components
  * @param children
  * @returns (Step | SubStep)[]
  */
-export const buildSteps = (
-  children: React.ReactElement<WizardComposableStepProps> | React.ReactElement<WizardComposableStepProps>[]
-) =>
+export const buildSteps = (children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[]) =>
   React.Children.toArray(children).reduce((acc: (Step | SubStep)[], child) => {
-    if (React.isValidElement(child) && typeof child.type !== 'string') {
-      if (child.type === WizardComposableStep) {
+    if (React.isValidElement(child)) {
+      if (child.type === WizardStep || hasWizardStepProps(child.props)) {
         // Omit "children" and use the whole "child" (WizardStep) for the component prop. Sub-steps will do the same.
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { steps: subSteps, id, children, ...stepProps } = child.props as WizardComposableStepProps;
+        const { steps: subSteps, id, children, ...stepProps } = child.props as WizardStepProps;
 
         acc.push({
           id,
@@ -33,7 +35,7 @@ export const buildSteps = (
           })
         });
       } else {
-        throw new Error('Wizard only accepts children of type WizardComposableStep');
+        throw new Error('Wizard only accepts children of type WizardStep');
       }
     }
 
diff --git a/packages/react-core/src/next/components/index.ts b/packages/react-core/src/next/components/index.ts
index b13bb4eb87d..4ad68566220 100644
--- a/packages/react-core/src/next/components/index.ts
+++ b/packages/react-core/src/next/components/index.ts
@@ -1 +1 @@
-export * from './';
+export * from './Wizard';
diff --git a/packages/react-docs/patternfly-docs/patternfly-docs.source.js b/packages/react-docs/patternfly-docs/patternfly-docs.source.js
index d20f81350fc..29e3bc703a5 100644
--- a/packages/react-docs/patternfly-docs/patternfly-docs.source.js
+++ b/packages/react-docs/patternfly-docs/patternfly-docs.source.js
@@ -41,8 +41,6 @@ module.exports = (baseSourceMD, sourceProps) => {
   sourceMD(path.join(reactCorePath, '/components/**/examples/*.md'), 'react');
   sourceMD(path.join(reactCorePath, '/next/components/**/examples/*.md'), 'react-next');
   sourceMD(path.join(reactCorePath, '/**/demos/**/*.md'), 'react-demos');
-  sourceMD(path.join(reactCorePath, '/**/Wizard/examples/*.md'), 'react-legacy');
-  sourceMD(path.join(reactCorePath, '/**/WizardComposable/examples/*.md'), 'react-composable');
 
   // React-table MD
   sourceMD(path.join(reactTablePath, '/**/TableComposable/examples/*.md'), 'react-composable');
diff --git a/packages/react-styles/README.md b/packages/react-styles/README.md
index a3a598a825d..f4af8e1df47 100644
--- a/packages/react-styles/README.md
+++ b/packages/react-styles/README.md
@@ -8,7 +8,7 @@ Library that provides CSS-in-JS capabilities
 import { css } from '@patternfly/react-styles';
 import styles from './Button.css';
 
-const Buttton = ({ isActive, isDisabled, children }) => (
+const Button = ({ isActive, isDisabled, children }) => (
   <button
     disabled={isDisabled}
     className={css(styles.button, isActive && styles.modifiers.active, isDisabled && styles.modifiers.disabled)}

From 1a6c9b7d508b0307b0ef4b899806ada15f17db3e Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Fri, 19 Aug 2022 11:23:14 -0400
Subject: [PATCH 3/8] update doc framework version

---
 packages/react-core/package.json                               | 1 +
 .../react-core/src/next/components/Wizard/examples/Wizard.md   | 3 ---
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 9147bdde2b7..8ad35ff3e0e 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -3,6 +3,7 @@
   "version": "4.232.13",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "exports": {
     ".": "./dist/esm/index.js",
diff --git a/packages/react-core/src/next/components/Wizard/examples/Wizard.md b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
index 2c4cb962b35..57d4375ec06 100644
--- a/packages/react-core/src/next/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
@@ -28,10 +28,7 @@ import {
   WizardToggle,
   WizardStep,
   WizardBody,
-  Step,
-  SubStep,
   useWizardFooter,
-  WizardStepProps,
   useWizardContext
 } from '@patternfly/react-core/next';
 import { css } from '@patternfly/react-styles';

From 5982c3f7cbc4e7551aa229a206168c74f57a642a Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Fri, 19 Aug 2022 16:51:22 -0400
Subject: [PATCH 4/8] add section for Hooks and address some other feedback

---
 .../src/components/Wizard/examples/Wizard.md  |  2 +-
 .../src/next/components/Wizard/Wizard.tsx     | 30 +++++------
 .../next/components/Wizard/WizardContext.tsx  | 11 +++-
 .../next/components/Wizard/examples/Wizard.md | 54 +++++++++++--------
 .../Wizard/examples/WizardCustomNav.tsx       |  2 +-
 .../Wizard/examples/WizardKitchenSink.tsx     |  2 +-
 .../src/next/components/Wizard/hooks/index.ts |  1 +
 .../src/next/components/Wizard/index.ts       |  9 ++--
 .../components/Wizard/{types.ts => types.tsx} |  6 ++-
 9 files changed, 72 insertions(+), 45 deletions(-)
 create mode 100644 packages/react-core/src/next/components/Wizard/hooks/index.ts
 rename packages/react-core/src/next/components/Wizard/{types.ts => types.tsx} (91%)

diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md
index 671f91caab3..027987b3e34 100644
--- a/packages/react-core/src/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/components/Wizard/examples/Wizard.md
@@ -13,7 +13,7 @@ import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-ico
 import FinishedStep from './FinishedStep';
 import SampleForm from './SampleForm';
 
-If you seek a Wizard solution that allows for more composition, see the [React next](/components/wizard/react-next) tab.
+If you seek a wizard solution that allows for more composition, see the [React next](/components/wizard/react-next) tab.
 
 ## Examples
 
diff --git a/packages/react-core/src/next/components/Wizard/Wizard.tsx b/packages/react-core/src/next/components/Wizard/Wizard.tsx
index cb81b3b64e8..daf2b83d4ae 100644
--- a/packages/react-core/src/next/components/Wizard/Wizard.tsx
+++ b/packages/react-core/src/next/components/Wizard/Wizard.tsx
@@ -19,7 +19,7 @@ import { WizardToggle } from './WizardToggle';
 
 /**
  * Wrapper for all steps and hosts state, including navigation helpers, within context.
- * The WizardContext provided by default gives any child of Wizard access to those resources.
+ * The WizardContext provided by default gives any child of wizard access to those resources.
  */
 
 export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
@@ -33,7 +33,7 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   nav?: DefaultWizardNavProps | CustomWizardNavFunction;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
-  /** Additional classes spread to the Wizard */
+  /** Additional classes spread to the wizard */
   className?: string;
   /** Custom width of the wizard */
   width?: number | string;
@@ -41,9 +41,9 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   height?: number | string;
   /** Callback function when a step in the nav is clicked */
   onNavByIndex?: WizardNavStepFunction;
-  /** Callback function after Next button is clicked */
+  /** Callback function after next button is clicked */
   onNext?: WizardNavStepFunction;
-  /** Callback function after Back button is clicked */
+  /** Callback function after back button is clicked */
   onBack?: WizardNavStepFunction;
   /** Callback function to save at the end of the wizard, if not specified uses onClose */
   onSave?(): void;
@@ -80,20 +80,20 @@ export const Wizard = (props: WizardProps) => {
       }
 
       return onClose?.();
-    } else {
-      let currStep = steps[currentStepIndex];
-      let newStepIndex = currentStepIndex + 1;
-      const prevStep = steps[currentStepIndex - 1];
+    }
 
-      // Skip parent step and focus on the first sub-step if they exist
-      if (isWizardParentStep(currStep)) {
-        newStepIndex += 1;
-        currStep = steps[currentStepIndex + 1];
-      }
+    let currStep = steps[currentStepIndex];
+    let newStepIndex = currentStepIndex + 1;
+    const prevStep = steps[currentStepIndex - 1];
 
-      setCurrentStepIndex(newStepIndex);
-      return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    // Skip parent step and focus on the first sub-step if they exist
+    if (isWizardParentStep(currStep)) {
+      newStepIndex += 1;
+      currStep = steps[currentStepIndex + 1];
     }
+
+    setCurrentStepIndex(newStepIndex);
+    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
   };
 
   const goToPrevStep = () => {
diff --git a/packages/react-core/src/next/components/Wizard/WizardContext.tsx b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
index bbe8b1a758f..dc2365151a4 100644
--- a/packages/react-core/src/next/components/Wizard/WizardContext.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
@@ -3,15 +3,25 @@ import { Step, SubStep } from './types';
 import { getActiveStep } from './utils';
 
 export interface WizardContextProps {
+  /** List of steps */
   steps: (Step | SubStep)[];
+  /** Active step */
   activeStep: Step | SubStep;
+  /** Footer element */
   footer: React.ReactElement;
+  /** Navigate to the next step */
   onNext(): void;
+  /** Navigate to the previous step */
   onBack(): void;
+  /** Close the wizard */
   onClose(): void;
+  /** Navigate to step by ID */
   goToStepById(id: number | string): void;
+  /** Navigate to step by name */
   goToStepByName(name: string): void;
+  /** Navigate to step by index */
   goToStepByIndex(index: number): void;
+  /** Update the footer with any react element */
   setFooter(footer: React.ReactElement): void;
 }
 
@@ -91,5 +101,4 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   );
 };
 
-export const WizardContextConsumer = WizardContext.Consumer;
 export const useWizardContext = () => React.useContext(WizardContext);
diff --git a/packages/react-core/src/next/components/Wizard/examples/Wizard.md b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
index 57d4375ec06..77007485292 100644
--- a/packages/react-core/src/next/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
@@ -2,7 +2,7 @@
 id: Wizard
 section: components
 cssPrefix: pf-c-wizard
-propComponents: ['Wizard', 'WizardFooter', 'WizardToggle', 'WizardStep', 'WizardBody']
+propComponents: ['Wizard', 'WizardStep', 'WizardFooter', 'WizardToggle', 'WizardStep', 'WizardBody', 'WizardContextProps', 'Step', 'SubStep']
 beta: true
 ---
 
@@ -34,25 +34,7 @@ import {
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
-PatternFly has two implementations of a `Wizard`.
-
-This newer `Wizard` takes a more explicit and declarative approach compared to the older implementation, which can be found under the [React](/components/wizard/react) tab.
-
-## Composable structure
-
-The standard sub-component relationships are arranged as follows:
-
-```noLive
-<Wizard>
-  <WizardStep />
-  <WizardStep
-    steps={[
-      <WizardStep />,
-      <WizardStep />
-    ]}
-  />
-</Wizard>
-```
+PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a more explicit and declarative approach compared to the older implementation, which can be found under the [React](/components/wizard/react) tab.
 
 ## Examples
 
@@ -61,14 +43,42 @@ The standard sub-component relationships are arranged as follows:
 ```ts file="./WizardBasic.tsx"
 ```
 
-### Custom Nav
+### Custom navigation
 
 ```ts file="./WizardCustomNav.tsx"
 ```
 
-### Kitchen Sink
+### Kitchen sink
 
 Includes a header, custom footer, sub-steps, step content with a drawer, custom nav item, and nav prevention until step visitation.
 
 ```ts file="./WizardKitchenSink.tsx"
 ```
+
+## Hooks
+
+### useWizardFooter
+
+Used to set a unique footer for the wizard on any given step. See step 3 of [Kitchen sink](#kitchen-sink) for a live example.
+
+```noLive
+import { useWizardFooter } from '@patternfly/react-core/next';
+
+const StepContent = () => {
+  useWizardFooter(<>Some footer</>);
+  return <>Step content</>;
+}
+```
+
+### useWizardContext
+
+Used to access any property of [WizardContext](#wizardcontextprops):
+
+```noLive
+import { useWizardContext } from '@patternfly/react-core/next';
+
+const StepContent = () => {
+  const { activeStep } = useWizardContext();
+  return <>This is the active step: {activeStep}</>;
+}
+```
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
index 9f26ecbeeea..043f6494af6 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { WizardNav, WizardNavItem } from '@patternfly/react-core';
-import { Step, SubStep, Wizard, WizardStep } from '@patternfly/react-core/next';
+import { Wizard, WizardStep, Step, SubStep } from '@patternfly/react-core/next';
 
 export const WizardCustomNav: React.FunctionComponent = () => {
   const nav = (
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
index 207875ac7db..2cdfb32f2cb 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
@@ -123,7 +123,7 @@ const StepWithCustomFooter = () => {
   return <>Step 3 content w/ custom async footer</>;
 };
 
-const CustomStepFour = (props: WizardStepProps) => <div {...props} />;
+const CustomStepFour = (props: WizardStepProps) => <div {...props} id={props.id.toString()} />;
 
 export const WizardKitchenSink: React.FunctionComponent = () => (
   <Wizard
diff --git a/packages/react-core/src/next/components/Wizard/hooks/index.ts b/packages/react-core/src/next/components/Wizard/hooks/index.ts
new file mode 100644
index 00000000000..c0abee9f15b
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/hooks/index.ts
@@ -0,0 +1 @@
+export { useWizardFooter } from './useWizardFooter';
diff --git a/packages/react-core/src/next/components/Wizard/index.ts b/packages/react-core/src/next/components/Wizard/index.ts
index 31a26076411..2ea6a7685ff 100644
--- a/packages/react-core/src/next/components/Wizard/index.ts
+++ b/packages/react-core/src/next/components/Wizard/index.ts
@@ -1,8 +1,11 @@
 export * from './Wizard';
-export * from './WizardContext';
 export * from './WizardBody';
 export * from './WizardFooter';
 export * from './WizardToggle';
 export * from './WizardStep';
-export { useWizardFooter } from './hooks/useWizardFooter';
-export * from './types';
+export * from './hooks';
+export { useWizardContext } from './WizardContext';
+
+import * as Types from './types';
+export type Step = Types.Step;
+export type SubStep = Types.SubStep;
diff --git a/packages/react-core/src/next/components/Wizard/types.ts b/packages/react-core/src/next/components/Wizard/types.tsx
similarity index 91%
rename from packages/react-core/src/next/components/Wizard/types.ts
rename to packages/react-core/src/next/components/Wizard/types.tsx
index 58125167387..329ac8e22b5 100644
--- a/packages/react-core/src/next/components/Wizard/types.ts
+++ b/packages/react-core/src/next/components/Wizard/types.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { WizardNavItemProps, WizardNavProps } from '../../../components/Wizard';
 
+/** Initially inferred from WizardStep components, these properties represent what is controllable from within WizardContext for a given step. */
+
 export interface Step {
   /** Name of the step's nav item */
   name: React.ReactNode;
   /** Unique identifier */
-  id: string;
+  id: string | number;
   /** Flag to disable the step's nav item */
   isDisabled?: boolean;
   /** Flag to represent whether the step has been visited (navigated to) */
@@ -26,6 +28,8 @@ export interface Step {
   hideBackButton?: boolean;
 }
 
+/** With the same purpose as Step, SubStep inherits all properties of Step with the exception of subStepIds. */
+
 export interface SubStep extends Omit<Step, 'subStepIds'> {
   /** Unique identifier of the parent step */
   parentId?: string | number;

From 78a090bb875c93702a7af1faa215d2283bb24d26 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Mon, 22 Aug 2022 14:19:55 -0400
Subject: [PATCH 5/8] updating types export, including all exported interfaces
 in 'React next' doc for Wizard

---
 .../next/components/Wizard/WizardContext.tsx  | 12 +++----
 .../next/components/Wizard/WizardFooter.tsx   |  4 +--
 .../src/next/components/Wizard/WizardStep.tsx |  6 ++--
 .../next/components/Wizard/WizardToggle.tsx   | 13 ++++---
 .../Wizard/__tests__/Wizard.test.tsx          |  8 ++---
 .../next/components/Wizard/examples/Wizard.md |  2 +-
 .../Wizard/examples/WizardCustomNav.tsx       |  6 ++--
 .../Wizard/examples/WizardKitchenSink.tsx     |  6 ++--
 .../src/next/components/Wizard/index.ts       |  5 +--
 .../src/next/components/Wizard/types.tsx      | 34 +++++++++----------
 .../src/next/components/Wizard/utils.ts       |  8 ++---
 11 files changed, 50 insertions(+), 54 deletions(-)

diff --git a/packages/react-core/src/next/components/Wizard/WizardContext.tsx b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
index dc2365151a4..f8082baa857 100644
--- a/packages/react-core/src/next/components/Wizard/WizardContext.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Step, SubStep } from './types';
+import { WizardControlStep } from './types';
 import { getActiveStep } from './utils';
 
 export interface WizardContextProps {
   /** List of steps */
-  steps: (Step | SubStep)[];
+  steps: WizardControlStep[];
   /** Active step */
-  activeStep: Step | SubStep;
+  activeStep: WizardControlStep;
   /** Footer element */
   footer: React.ReactElement;
   /** Navigate to the next step */
@@ -28,8 +28,8 @@ export interface WizardContextProps {
 export const WizardContext = React.createContext({} as WizardContextProps);
 
 interface WizardContextRenderProps {
-  steps: (Step | SubStep)[];
-  activeStep: Step | SubStep;
+  steps: WizardControlStep[];
+  activeStep: WizardControlStep;
   footer: React.ReactElement;
   onNext(): void;
   onBack(): void;
@@ -37,7 +37,7 @@ interface WizardContextRenderProps {
 }
 
 export interface WizardContextProviderProps {
-  steps: (Step | SubStep)[];
+  steps: WizardControlStep[];
   currentStepIndex: number;
   footer: React.ReactElement;
   children: React.ReactElement | ((props: WizardContextRenderProps) => React.ReactElement);
diff --git a/packages/react-core/src/next/components/Wizard/WizardFooter.tsx b/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
index 21ba408dbb5..40fb1aec6d6 100644
--- a/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../../../components/Button';
-import { Step, SubStep, WizardNavStepFunction } from './types';
+import { WizardControlStep, WizardNavStepFunction } from './types';
 
 /**
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
@@ -12,7 +12,7 @@ import { Step, SubStep, WizardNavStepFunction } from './types';
 
 export interface WizardFooterProps {
   /** The currently active WizardStep */
-  activeStep: Step | SubStep;
+  activeStep: WizardControlStep;
   /** Next button callback */
   onNext(): WizardNavStepFunction | void;
   /** Back button callback */
diff --git a/packages/react-core/src/next/components/Wizard/WizardStep.tsx b/packages/react-core/src/next/components/Wizard/WizardStep.tsx
index 9b9c81967f0..4a0f7a65564 100644
--- a/packages/react-core/src/next/components/Wizard/WizardStep.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardStep.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Step } from './types';
+import { WizardControlStep } from './types';
 import { WizardBody, WizardBodyProps } from './WizardBody';
 
 /**
@@ -8,8 +8,8 @@ import { WizardBody, WizardBodyProps } from './WizardBody';
  * Also acts as a wrapper for content, with an optional inclusion of WizardBody.
  */
 
-export interface WizardStepProps extends Omit<Step, 'parentId' | 'subStepIds' | 'visited'> {
-  /** Optional for when the Step is used as a parent to sub-steps */
+export interface WizardStepProps extends Omit<WizardControlStep, 'parentId' | 'subStepIds' | 'visited'> {
+  /** Optional for when the step is used as a parent to sub-steps */
   children?: React.ReactNode;
   /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
   body?: WizardBodyProps | null;
diff --git a/packages/react-core/src/next/components/Wizard/WizardToggle.tsx b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
index 17c8b8d7744..6200c7445a8 100644
--- a/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
@@ -8,14 +8,13 @@ import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-ico
 import { KeyTypes } from '../../../helpers/constants';
 import { WizardNav, WizardNavItem } from '../../../components/Wizard';
 import {
-  Step,
-  SubStep,
-  isWizardSubStep,
-  isCustomWizardNav,
+  WizardControlStep,
   CustomWizardNavFunction,
   DefaultWizardNavProps,
   isWizardBasicStep,
-  isWizardParentStep
+  isWizardParentStep,
+  isWizardSubStep,
+  isCustomWizardNav
 } from './types';
 
 /**
@@ -24,9 +23,9 @@ import {
 
 export interface WizardToggleProps {
   /** List of steps and/or sub-steps */
-  steps: (Step | SubStep)[];
+  steps: WizardControlStep[];
   /** The currently active WizardStep */
-  activeStep: Step | SubStep;
+  activeStep: WizardControlStep;
   /** The WizardFooter */
   footer: React.ReactElement;
   /** Custom WizardNav or callback used to create a default WizardNav */
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
index 096c23c9c32..31fef48d6d8 100644
--- a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
+++ b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
@@ -4,8 +4,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { WizardNav, WizardNavItem } from '../../../../components/Wizard';
-import { DefaultWizardNavProps, Step, SubStep } from '../types';
-import { DefaultWizardFooterProps, Wizard, WizardStep } from '..';
+import { DefaultWizardNavProps, WizardControlStep, DefaultWizardFooterProps } from '../types';
+import { Wizard, WizardStep } from '..';
 
 describe('Wizard', () => {
   it('renders step when child is of type WizardStep', () => {
@@ -123,8 +123,8 @@ describe('Wizard', () => {
   it('renders custom nav', () => {
     const nav = (
       isOpen: boolean,
-      steps: (Step | SubStep)[],
-      activeStep: Step | SubStep,
+      steps: WizardControlStep[],
+      activeStep: WizardControlStep,
       goToStepByIndex: (index: number) => void
     ) => (
       <WizardNav isOpen={isOpen}>
diff --git a/packages/react-core/src/next/components/Wizard/examples/Wizard.md b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
index 77007485292..0cb1b28f00d 100644
--- a/packages/react-core/src/next/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
@@ -2,7 +2,7 @@
 id: Wizard
 section: components
 cssPrefix: pf-c-wizard
-propComponents: ['Wizard', 'WizardStep', 'WizardFooter', 'WizardToggle', 'WizardStep', 'WizardBody', 'WizardContextProps', 'Step', 'SubStep']
+propComponents: ['Wizard', 'WizardStep', 'WizardFooter', 'WizardToggle', 'WizardStep', 'WizardBody', 'WizardContextProps', 'WizardBasicStep', 'WizardParentStep', 'WizardSubStep', 'DefaultWizardNavProps', 'DefaultWizardFooterProps']
 beta: true
 ---
 
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
index 043f6494af6..97ffd88614b 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { WizardNav, WizardNavItem } from '@patternfly/react-core';
-import { Wizard, WizardStep, Step, SubStep } from '@patternfly/react-core/next';
+import { Wizard, WizardStep, WizardControlStep } from '@patternfly/react-core/next';
 
 export const WizardCustomNav: React.FunctionComponent = () => {
   const nav = (
     isOpen: boolean,
-    steps: (Step | SubStep)[],
-    activeStep: Step | SubStep,
+    steps: WizardControlStep[],
+    activeStep: WizardControlStep,
     goToStepByIndex: (index: number) => void
   ) => (
     <WizardNav isOpen={isOpen}>
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
index 2cdfb32f2cb..303680ff30b 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
@@ -16,13 +16,13 @@ import {
   WizardHeader
 } from '@patternfly/react-core';
 import {
-  Step,
   Wizard,
   WizardStep,
   WizardBody,
   WizardFooter,
-  useWizardFooter,
   WizardStepProps,
+  WizardControlStep,
+  useWizardFooter,
   useWizardContext
 } from '@patternfly/react-core/next';
 import { css } from '@patternfly/react-styles';
@@ -35,7 +35,7 @@ const CustomWizardFooter = () => {
 
 const CustomNavItem = () => {
   const { steps, activeStep, goToStepByIndex } = useWizardContext();
-  const step = (steps.find(step => step.id === 'third-step') || {}) as Step;
+  const step = (steps.find(step => step.id === 'third-step') || {}) as WizardControlStep;
 
   return (
     <WizardNavItem
diff --git a/packages/react-core/src/next/components/Wizard/index.ts b/packages/react-core/src/next/components/Wizard/index.ts
index 2ea6a7685ff..f5b3862ffc4 100644
--- a/packages/react-core/src/next/components/Wizard/index.ts
+++ b/packages/react-core/src/next/components/Wizard/index.ts
@@ -4,8 +4,5 @@ export * from './WizardFooter';
 export * from './WizardToggle';
 export * from './WizardStep';
 export * from './hooks';
+export * from './types';
 export { useWizardContext } from './WizardContext';
-
-import * as Types from './types';
-export type Step = Types.Step;
-export type SubStep = Types.SubStep;
diff --git a/packages/react-core/src/next/components/Wizard/types.tsx b/packages/react-core/src/next/components/Wizard/types.tsx
index 329ac8e22b5..e2ac7264dbf 100644
--- a/packages/react-core/src/next/components/Wizard/types.tsx
+++ b/packages/react-core/src/next/components/Wizard/types.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { WizardNavItemProps, WizardNavProps } from '../../../components/Wizard';
 
-/** Initially inferred from WizardStep components, these properties represent what is controllable from within WizardContext for a given step. */
-
-export interface Step {
+export interface WizardBasicStep {
   /** Name of the step's nav item */
   name: React.ReactNode;
   /** Unique identifier */
@@ -14,8 +12,6 @@ export interface Step {
   visited?: boolean;
   /** Content shown when the step's nav item is selected. When treated as a parent step, only sub-step content will be shown. */
   component?: React.ReactElement;
-  /** Nested step IDs */
-  subStepIds?: string[];
   /** (Unused if nav is controlled) Custom WizardNavItem */
   navItem?: React.ReactElement<WizardNavItemProps>;
   /** (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. */
@@ -28,14 +24,18 @@ export interface Step {
   hideBackButton?: boolean;
 }
 
-/** With the same purpose as Step, SubStep inherits all properties of Step with the exception of subStepIds. */
+export interface WizardParentStep extends WizardBasicStep {
+  /** Nested step IDs */
+  subStepIds: string[];
+}
 
-export interface SubStep extends Omit<Step, 'subStepIds'> {
+export interface WizardSubStep extends WizardBasicStep {
   /** Unique identifier of the parent step */
-  parentId?: string | number;
+  parentId: string | number;
 }
 
-export type WizardNavStepData = Pick<Step | SubStep, 'id' | 'name'>;
+export type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
+export type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
 export type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
 
 export interface DefaultWizardNavProps {
@@ -60,8 +60,8 @@ export interface DefaultWizardFooterProps {
 
 export type CustomWizardNavFunction = (
   isOpen: boolean,
-  steps: (Step | SubStep)[],
-  activeStep: Step | SubStep,
+  steps: WizardControlStep[],
+  activeStep: WizardControlStep,
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavProps>;
 
@@ -77,14 +77,14 @@ export function isCustomWizardFooter(
   return React.isValidElement(footer);
 }
 
-export function isWizardBasicStep(step: Step | SubStep): step is Step {
-  return (step as Step)?.subStepIds === undefined && !isWizardSubStep(step);
+export function isWizardBasicStep(step: WizardControlStep): step is WizardBasicStep {
+  return (step as WizardParentStep)?.subStepIds === undefined && !isWizardSubStep(step);
 }
 
-export function isWizardSubStep(step: Step | SubStep): step is SubStep {
-  return (step as SubStep)?.parentId !== undefined;
+export function isWizardSubStep(step: WizardControlStep): step is WizardSubStep {
+  return (step as WizardSubStep)?.parentId !== undefined;
 }
 
-export function isWizardParentStep(step: Step | SubStep): step is Step {
-  return (step as Step)?.subStepIds !== undefined;
+export function isWizardParentStep(step: WizardControlStep): step is WizardParentStep {
+  return (step as WizardParentStep)?.subStepIds !== undefined;
 }
diff --git a/packages/react-core/src/next/components/Wizard/utils.ts b/packages/react-core/src/next/components/Wizard/utils.ts
index 30707b9adf9..2ec93bb3890 100644
--- a/packages/react-core/src/next/components/Wizard/utils.ts
+++ b/packages/react-core/src/next/components/Wizard/utils.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Step, SubStep, WizardNavStepData } from './types';
+import { WizardControlStep, WizardNavStepData } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 function hasWizardStepProps(props: WizardStepProps | any): props is WizardStepProps {
@@ -10,10 +10,10 @@ function hasWizardStepProps(props: WizardStepProps | any): props is WizardStepPr
 /**
  * Accumulate list of step & sub-step props pulled from child components
  * @param children
- * @returns (Step | SubStep)[]
+ * @returns WizardControlStep[]
  */
 export const buildSteps = (children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[]) =>
-  React.Children.toArray(children).reduce((acc: (Step | SubStep)[], child) => {
+  React.Children.toArray(children).reduce((acc: WizardControlStep[], child) => {
     if (React.isValidElement(child)) {
       if (child.type === WizardStep || hasWizardStepProps(child.props)) {
         // Omit "children" and use the whole "child" (WizardStep) for the component prop. Sub-steps will do the same.
@@ -43,5 +43,5 @@ export const buildSteps = (children: React.ReactElement<WizardStepProps> | React
   }, []);
 
 export const normalizeNavStep = ({ id, name }: WizardNavStepData) => ({ id, name });
-export const getActiveStep = (steps: (Step | SubStep)[], currentStepIndex: number) =>
+export const getActiveStep = (steps: WizardControlStep[], currentStepIndex: number) =>
   steps.find((_, index) => index + 1 === currentStepIndex);

From b3ee7c3f3f584bf6f43baa9123101930690ef6ed Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Tue, 23 Aug 2022 13:28:57 -0400
Subject: [PATCH 6/8] porting over header and nav components so they can be
 referenced alongside other 'next' components, update documentation to
 describe types and update comments for those types in their respective
 locations

---
 .../next/components/Wizard/WizardHeader.tsx   |  53 +++++++++
 .../src/next/components/Wizard/WizardNav.tsx  |  41 +++++++
 .../next/components/Wizard/WizardNavItem.tsx  | 103 ++++++++++++++++++
 .../next/components/Wizard/WizardToggle.tsx   |   2 +-
 .../Wizard/__tests__/Wizard.test.tsx          |   3 +-
 .../next/components/Wizard/examples/Wizard.md |  86 +++++++++++----
 .../Wizard/examples/WizardCustomNav.tsx       |  12 +-
 .../Wizard/examples/WizardKitchenSink.tsx     |  84 +++++++-------
 .../src/next/components/Wizard/index.ts       |   3 +
 .../src/next/components/Wizard/types.tsx      |  21 +++-
 10 files changed, 338 insertions(+), 70 deletions(-)
 create mode 100644 packages/react-core/src/next/components/Wizard/WizardHeader.tsx
 create mode 100644 packages/react-core/src/next/components/Wizard/WizardNav.tsx
 create mode 100644 packages/react-core/src/next/components/Wizard/WizardNavItem.tsx

diff --git a/packages/react-core/src/next/components/Wizard/WizardHeader.tsx b/packages/react-core/src/next/components/Wizard/WizardHeader.tsx
new file mode 100644
index 00000000000..a41307fcb4f
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/WizardHeader.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../../../components/Button';
+import { Title } from '../../../components/Title';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export interface WizardHeaderProps {
+  /** Callback function called when the X (Close) button is clicked */
+  onClose?: () => void;
+  /** Title of the wizard */
+  title: string;
+  /** Description of the wizard */
+  description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
+  /** Flag indicating whether the close button should be in the header */
+  hideClose?: boolean;
+  /** Aria-label applied to the X (Close) button */
+  closeButtonAriaLabel?: string;
+  /** id for the title */
+  titleId?: string;
+  /** id for the description */
+  descriptionId?: string;
+}
+
+export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
+  onClose = () => undefined,
+  title,
+  description,
+  hideClose,
+  closeButtonAriaLabel,
+  titleId,
+  descriptionComponent: Component = 'p',
+  descriptionId
+}: WizardHeaderProps) => (
+  <div className={css(styles.wizardHeader)}>
+    {!hideClose && (
+      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
+        <TimesIcon aria-hidden="true" />
+      </Button>
+    )}
+    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
+      {title || <>&nbsp;</>}
+    </Title>
+    {description && (
+      <Component className={css(styles.wizardDescription)} id={descriptionId}>
+        {description}
+      </Component>
+    )}
+  </div>
+);
+WizardHeader.displayName = 'WizardHeader';
diff --git a/packages/react-core/src/next/components/Wizard/WizardNav.tsx b/packages/react-core/src/next/components/Wizard/WizardNav.tsx
new file mode 100644
index 00000000000..9cdfcb86ab2
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/WizardNav.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+
+export interface WizardNavProps {
+  /** children should be WizardNavItem components */
+  children?: any;
+  /** Aria-label applied to the nav element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute on the nav element */
+  'aria-labelledby'?: string;
+  /** Whether the nav is expanded */
+  isOpen?: boolean;
+  /** True to return the inner list without the wrapping nav element */
+  returnList?: boolean;
+}
+
+export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
+  children,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  isOpen = false,
+  returnList = false
+}: WizardNavProps) => {
+  const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
+
+  if (returnList) {
+    return innerList;
+  }
+
+  return (
+    <nav
+      className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <ol className={css(styles.wizardNavList)}>{children}</ol>
+    </nav>
+  );
+};
+WizardNav.displayName = 'WizardNav';
diff --git a/packages/react-core/src/next/components/Wizard/WizardNavItem.tsx b/packages/react-core/src/next/components/Wizard/WizardNavItem.tsx
new file mode 100644
index 00000000000..311f4a545bf
--- /dev/null
+++ b/packages/react-core/src/next/components/Wizard/WizardNavItem.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+
+export interface WizardNavItemProps {
+  /** Can nest a WizardNav component for substeps */
+  children?: React.ReactNode;
+  /** The content to display in the nav item */
+  content?: React.ReactNode;
+  /** Whether the nav item is the currently active item */
+  isCurrent?: boolean;
+  /** Whether the nav item is disabled */
+  isDisabled?: boolean;
+  /** The step passed into the onNavItemClick callback */
+  step: number;
+  /** Callback for when the nav item is clicked */
+  onNavItemClick?: (step: number) => any;
+  /** Component used to render WizardNavItem */
+  navItemComponent?: 'button' | 'a';
+  /** An optional url to use for when using an anchor component */
+  href?: string;
+  /** Flag indicating that this NavItem has child steps and is expandable */
+  isExpandable?: boolean;
+  /** The id for the nav item */
+  id?: string | number;
+}
+
+export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
+  children = null,
+  content = '',
+  isCurrent = false,
+  isDisabled = false,
+  step,
+  onNavItemClick = () => undefined,
+  navItemComponent = 'button',
+  href = null,
+  isExpandable = false,
+  id,
+  ...rest
+}: WizardNavItemProps) => {
+  const NavItemComponent = navItemComponent;
+
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsExpanded(isCurrent);
+  }, [isCurrent]);
+
+  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.error('WizardNavItem: When using an anchor, please provide an href');
+  }
+
+  const btnProps = {
+    disabled: isDisabled
+  };
+
+  const linkProps = {
+    tabIndex: isDisabled ? -1 : undefined,
+    href
+  };
+
+  return (
+    <li
+      className={css(
+        styles.wizardNavItem,
+        isExpandable && styles.modifiers.expandable,
+        isExpandable && isExpanded && styles.modifiers.expanded
+      )}
+    >
+      <NavItemComponent
+        {...rest}
+        {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
+        {...(id && { id: id.toString() })}
+        onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
+        className={css(
+          styles.wizardNavLink,
+          isCurrent && styles.modifiers.current,
+          isDisabled && styles.modifiers.disabled
+        )}
+        aria-disabled={isDisabled ? true : null}
+        aria-current={isCurrent && !children ? 'step' : false}
+        {...(isExpandable && { 'aria-expanded': isExpanded })}
+      >
+        {isExpandable ? (
+          <>
+            <span className={css(styles.wizardNavLinkText)}>{content}</span>
+            <span className={css(styles.wizardNavLinkToggle)}>
+              <span className={css(styles.wizardNavLinkToggleIcon)}>
+                <AngleRightIcon />
+              </span>
+            </span>
+          </>
+        ) : (
+          content
+        )}
+      </NavItemComponent>
+      {children}
+    </li>
+  );
+};
+WizardNavItem.displayName = 'WizardNavItem';
diff --git a/packages/react-core/src/next/components/Wizard/WizardToggle.tsx b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
index 6200c7445a8..abcd79fd587 100644
--- a/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
@@ -6,7 +6,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 import { KeyTypes } from '../../../helpers/constants';
-import { WizardNav, WizardNavItem } from '../../../components/Wizard';
+import { WizardNav, WizardNavItem } from '../Wizard';
 import {
   WizardControlStep,
   CustomWizardNavFunction,
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
index 31fef48d6d8..c9c75240783 100644
--- a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
+++ b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
@@ -3,9 +3,8 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { WizardNav, WizardNavItem } from '../../../../components/Wizard';
 import { DefaultWizardNavProps, WizardControlStep, DefaultWizardFooterProps } from '../types';
-import { Wizard, WizardStep } from '..';
+import { WizardNav, WizardNavItem, Wizard, WizardStep } from '../';
 
 describe('Wizard', () => {
   it('renders step when child is of type WizardStep', () => {
diff --git a/packages/react-core/src/next/components/Wizard/examples/Wizard.md b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
index 0cb1b28f00d..951ab8f56b3 100644
--- a/packages/react-core/src/next/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
@@ -2,34 +2,51 @@
 id: Wizard
 section: components
 cssPrefix: pf-c-wizard
-propComponents: ['Wizard', 'WizardStep', 'WizardFooter', 'WizardToggle', 'WizardStep', 'WizardBody', 'WizardContextProps', 'WizardBasicStep', 'WizardParentStep', 'WizardSubStep', 'DefaultWizardNavProps', 'DefaultWizardFooterProps']
+propComponents:
+  [
+    'WizardProps',
+    'WizardFooterProps',
+    'WizardToggleProps',
+    'WizardStepProps',
+    'WizardBodyProps',
+    'WizardHeaderProps',
+    'WizardNavProps',
+    'WizardNavItemProps',
+    'WizardContextProps',
+    'WizardBasicStep',
+    'WizardParentStep',
+    'WizardSubStep',
+    'WizardNavItemProps',
+    'DefaultWizardNavProps',
+    'DefaultWizardFooterProps',
+  ]
 beta: true
 ---
 
 import {
-  FormGroup,
-  TextInput,
-  Drawer,
-  DrawerContent,
-  Button,
-  Flex,
-  DrawerPanelContent,
-  DrawerColorVariant,
-  DrawerHead,
-  DrawerActions,
-  DrawerCloseButton,
-  WizardNavItem,
-  WizardNav,
-  WizardHeader
+FormGroup,
+TextInput,
+Drawer,
+DrawerContent,
+Button,
+Flex,
+DrawerPanelContent,
+DrawerColorVariant,
+DrawerHead,
+DrawerActions,
+DrawerCloseButton
 } from '@patternfly/react-core';
 import {
-  Wizard,
-  WizardFooter,
-  WizardToggle,
-  WizardStep,
-  WizardBody,
-  useWizardFooter,
-  useWizardContext
+Wizard,
+WizardFooter,
+WizardToggle,
+WizardStep,
+WizardBody,
+useWizardFooter,
+useWizardContext,
+WizardNavItem,
+WizardNav,
+WizardHeader
 } from '@patternfly/react-core/next';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
@@ -45,6 +62,21 @@ PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a mo
 
 ### Custom navigation
 
+The `Wizard`'s `nav` property can be used to build your own navigation.
+
+```
+/** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
+export type CustomWizardNavFunction = (
+  isOpen: boolean,
+  steps: WizardControlStep[],
+  activeStep: WizardControlStep,
+  goToStepByIndex: (index: number) => void
+) => React.ReactElement<WizardNavProps>;
+
+/** Encompasses all step type variants that are internally controlled by the Wizard */
+type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
+```
+
 ```ts file="./WizardCustomNav.tsx"
 ```
 
@@ -52,6 +84,16 @@ PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a mo
 
 Includes a header, custom footer, sub-steps, step content with a drawer, custom nav item, and nav prevention until step visitation.
 
+When tapping into the `onNext`, `onBack` or `onNavByIndex` function props for `Wizard`, these callback functions will return the 'id' and 'name' of the currentStep (the currently focused step), and the previousStep (the previously focused step).
+
+```
+/** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
+type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
+
+/** Data returned for either parameter of WizardNavStepFunction */
+type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
+```
+
 ```ts file="./WizardKitchenSink.tsx"
 ```
 
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
index 97ffd88614b..29941787d3d 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardCustomNav.tsx
@@ -1,9 +1,15 @@
 import React from 'react';
-import { WizardNav, WizardNavItem } from '@patternfly/react-core';
-import { Wizard, WizardStep, WizardControlStep } from '@patternfly/react-core/next';
+import {
+  Wizard,
+  WizardStep,
+  WizardControlStep,
+  CustomWizardNavFunction,
+  WizardNav,
+  WizardNavItem
+} from '@patternfly/react-core/next';
 
 export const WizardCustomNav: React.FunctionComponent = () => {
-  const nav = (
+  const nav: CustomWizardNavFunction = (
     isOpen: boolean,
     steps: WizardControlStep[],
     activeStep: WizardControlStep,
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
index 303680ff30b..cd78b3434b5 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
@@ -11,9 +11,7 @@ import {
   DrawerColorVariant,
   DrawerHead,
   DrawerActions,
-  DrawerCloseButton,
-  WizardNavItem,
-  WizardHeader
+  DrawerCloseButton
 } from '@patternfly/react-core';
 import {
   Wizard,
@@ -23,7 +21,11 @@ import {
   WizardStepProps,
   WizardControlStep,
   useWizardFooter,
-  useWizardContext
+  useWizardContext,
+  WizardNavStepFunction,
+  WizardNavStepData,
+  WizardNavItem,
+  WizardHeader
 } from '@patternfly/react-core/next';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
@@ -125,36 +127,44 @@ const StepWithCustomFooter = () => {
 
 const CustomStepFour = (props: WizardStepProps) => <div {...props} id={props.id.toString()} />;
 
-export const WizardKitchenSink: React.FunctionComponent = () => (
-  <Wizard
-    height={400}
-    header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
-    footer={<CustomWizardFooter />}
-    nav={{ forceStepVisit: true, isExpandable: true }}
-  >
-    <WizardStep id="sink-first-step" name="First step" body={null}>
-      <StepContentWithDrawer />
-    </WizardStep>
-    <WizardStep
-      id="sink-second-step"
-      name="Second step"
-      steps={[
-        <WizardStep id="sink-sub-step-one" key="substep-one" name="Substep 1">
-          Substep 1 content
-        </WizardStep>,
-        <WizardStep id="sink-sub-step-two" key="substep-two" name="Substep 2">
-          Substep 2 content
-        </WizardStep>
-      ]}
-    />
-    <WizardStep id="sink-third-step" name="Third step" navItem={<CustomNavItem />}>
-      <StepWithCustomFooter />
-    </WizardStep>
-    <CustomStepFour id="sink-fourth-step" name="Fourth step">
-      <WizardBody>Step 4 content</WizardBody>
-    </CustomStepFour>
-    <WizardStep id="sink-review-step" name="Review" nextButtonText="Submit" disableNext>
-      Review step content
-    </WizardStep>
-  </Wizard>
-);
+export const WizardKitchenSink: React.FunctionComponent = () => {
+  const onNext: WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => {
+    // eslint-disable-next-line no-console
+    console.log('currentStep: ', currentStep, '\n previousStep: ', previousStep);
+  };
+
+  return (
+    <Wizard
+      height={400}
+      header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
+      footer={<CustomWizardFooter />}
+      nav={{ forceStepVisit: true, isExpandable: true }}
+      onNext={onNext}
+    >
+      <WizardStep id="sink-first-step" name="First step" body={null}>
+        <StepContentWithDrawer />
+      </WizardStep>
+      <WizardStep
+        id="sink-second-step"
+        name="Second step"
+        steps={[
+          <WizardStep id="sink-sub-step-one" key="substep-one" name="Substep 1">
+            Substep 1 content
+          </WizardStep>,
+          <WizardStep id="sink-sub-step-two" key="substep-two" name="Substep 2">
+            Substep 2 content
+          </WizardStep>
+        ]}
+      />
+      <WizardStep id="sink-third-step" name="Third step" navItem={<CustomNavItem />}>
+        <StepWithCustomFooter />
+      </WizardStep>
+      <CustomStepFour id="sink-fourth-step" name="Fourth step">
+        <WizardBody>Step 4 content</WizardBody>
+      </CustomStepFour>
+      <WizardStep id="sink-review-step" name="Review" nextButtonText="Submit">
+        Review step content
+      </WizardStep>
+    </Wizard>
+  );
+};
diff --git a/packages/react-core/src/next/components/Wizard/index.ts b/packages/react-core/src/next/components/Wizard/index.ts
index f5b3862ffc4..88def117af3 100644
--- a/packages/react-core/src/next/components/Wizard/index.ts
+++ b/packages/react-core/src/next/components/Wizard/index.ts
@@ -3,6 +3,9 @@ export * from './WizardBody';
 export * from './WizardFooter';
 export * from './WizardToggle';
 export * from './WizardStep';
+export * from './WizardNav';
+export * from './WizardNavItem';
+export * from './WizardHeader';
 export * from './hooks';
 export * from './types';
 export { useWizardContext } from './WizardContext';
diff --git a/packages/react-core/src/next/components/Wizard/types.tsx b/packages/react-core/src/next/components/Wizard/types.tsx
index e2ac7264dbf..768fdee4f5d 100644
--- a/packages/react-core/src/next/components/Wizard/types.tsx
+++ b/packages/react-core/src/next/components/Wizard/types.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { WizardNavItemProps, WizardNavProps } from '../../../components/Wizard';
+import { WizardNavProps, WizardNavItemProps } from '../Wizard';
 
+/** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
 export interface WizardBasicStep {
   /** Name of the step's nav item */
   name: React.ReactNode;
@@ -24,20 +25,19 @@ export interface WizardBasicStep {
   hideBackButton?: boolean;
 }
 
+/** Type used to define parent steps. */
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */
   subStepIds: string[];
 }
 
+/** Type used to define sub-steps. */
 export interface WizardSubStep extends WizardBasicStep {
   /** Unique identifier of the parent step */
   parentId: string | number;
 }
 
-export type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
-export type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
-export type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
-
+/** Used to customize aspects of the Wizard's default navigation. */
 export interface DefaultWizardNavProps {
   /** Flag indicating nav items with sub steps are expandable */
   isExpandable?: boolean;
@@ -49,6 +49,7 @@ export interface DefaultWizardNavProps {
   forceStepVisit?: boolean;
 }
 
+/** Used to customize aspects of the Wizard's default footer. */
 export interface DefaultWizardFooterProps {
   /** The Next button text */
   nextButtonText?: React.ReactNode;
@@ -58,6 +59,16 @@ export interface DefaultWizardFooterProps {
   cancelButtonText?: React.ReactNode;
 }
 
+/** Encompasses all step type variants that are internally controlled by the Wizard. */
+export type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
+
+/** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties. */
+export type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
+
+/** Data returned for either parameter of WizardNavStepFunction. */
+export type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
+
+/** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
 export type CustomWizardNavFunction = (
   isOpen: boolean,
   steps: WizardControlStep[],

From c2319730a9e58a13e42908995311a66fde9b8a58 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Tue, 23 Aug 2022 14:23:39 -0400
Subject: [PATCH 7/8] update example comment

---
 .../react-core/src/next/components/Wizard/examples/Wizard.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/next/components/Wizard/examples/Wizard.md b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
index 951ab8f56b3..d55db0d8fd9 100644
--- a/packages/react-core/src/next/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
@@ -84,7 +84,7 @@ type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
 
 Includes a header, custom footer, sub-steps, step content with a drawer, custom nav item, and nav prevention until step visitation.
 
-When tapping into the `onNext`, `onBack` or `onNavByIndex` function props for `Wizard`, these callback functions will return the 'id' and 'name' of the currentStep (the currently focused step), and the previousStep (the previously focused step).
+Custom operations when navigating between steps can be achieved by utilizing `onNext`, `onBack` or `onNavByIndex` properties whose callback functions return the 'id' and 'name' of the currently focused step (currentStep), and the previously focused step (previousStep).
 
 ```
 /** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */

From 97bfc1ce84f5d5d569411ef40c0d124d5cf3674d Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Tue, 23 Aug 2022 15:45:28 -0400
Subject: [PATCH 8/8] update types for documentation purposes

---
 .../src/next/components/Wizard/Wizard.tsx       |  4 ++--
 .../next/components/Wizard/WizardContext.tsx    | 14 +++++++-------
 .../src/next/components/Wizard/WizardFooter.tsx |  6 +++---
 .../src/next/components/Wizard/WizardToggle.tsx |  2 +-
 .../next/components/Wizard/examples/Wizard.md   | 17 ++++++++---------
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/react-core/src/next/components/Wizard/Wizard.tsx b/packages/react-core/src/next/components/Wizard/Wizard.tsx
index daf2b83d4ae..040a8061335 100644
--- a/packages/react-core/src/next/components/Wizard/Wizard.tsx
+++ b/packages/react-core/src/next/components/Wizard/Wizard.tsx
@@ -46,9 +46,9 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function after back button is clicked */
   onBack?: WizardNavStepFunction;
   /** Callback function to save at the end of the wizard, if not specified uses onClose */
-  onSave?(): void;
+  onSave?: () => void;
   /** Callback function to close the wizard */
-  onClose?(): void;
+  onClose?: () => void;
 }
 
 export const Wizard = (props: WizardProps) => {
diff --git a/packages/react-core/src/next/components/Wizard/WizardContext.tsx b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
index f8082baa857..8859d1b5879 100644
--- a/packages/react-core/src/next/components/Wizard/WizardContext.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardContext.tsx
@@ -10,19 +10,19 @@ export interface WizardContextProps {
   /** Footer element */
   footer: React.ReactElement;
   /** Navigate to the next step */
-  onNext(): void;
+  onNext: () => void;
   /** Navigate to the previous step */
-  onBack(): void;
+  onBack: () => void;
   /** Close the wizard */
-  onClose(): void;
+  onClose: () => void;
   /** Navigate to step by ID */
-  goToStepById(id: number | string): void;
+  goToStepById: (id: number | string) => void;
   /** Navigate to step by name */
-  goToStepByName(name: string): void;
+  goToStepByName: (name: string) => void;
   /** Navigate to step by index */
-  goToStepByIndex(index: number): void;
+  goToStepByIndex: (index: number) => void;
   /** Update the footer with any react element */
-  setFooter(footer: React.ReactElement): void;
+  setFooter: (footer: React.ReactElement) => void;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
diff --git a/packages/react-core/src/next/components/Wizard/WizardFooter.tsx b/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
index 40fb1aec6d6..e99371969d2 100644
--- a/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
@@ -14,11 +14,11 @@ export interface WizardFooterProps {
   /** The currently active WizardStep */
   activeStep: WizardControlStep;
   /** Next button callback */
-  onNext(): WizardNavStepFunction | void;
+  onNext: () => WizardNavStepFunction | void;
   /** Back button callback */
-  onBack(): WizardNavStepFunction | void;
+  onBack: () => WizardNavStepFunction | void;
   /** Cancel link callback */
-  onClose(): void;
+  onClose: () => void;
   /** Custom text for the Next button. The activeStep's nextButtonText takes precedence. */
   nextButtonText?: React.ReactNode;
   /** Custom text for the Back button */
diff --git a/packages/react-core/src/next/components/Wizard/WizardToggle.tsx b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
index abcd79fd587..17288370e1a 100644
--- a/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
+++ b/packages/react-core/src/next/components/Wizard/WizardToggle.tsx
@@ -31,7 +31,7 @@ export interface WizardToggleProps {
   /** Custom WizardNav or callback used to create a default WizardNav */
   nav: DefaultWizardNavProps | CustomWizardNavFunction;
   /** Navigate using the step index */
-  goToStepByIndex(index: number): void;
+  goToStepByIndex: (index: number) => void;
   /** The button's aria-label */
   'aria-label'?: string;
   /** Flag to unmount inactive steps instead of hiding. Defaults to true */
diff --git a/packages/react-core/src/next/components/Wizard/examples/Wizard.md b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
index d55db0d8fd9..26af49822a8 100644
--- a/packages/react-core/src/next/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/next/components/Wizard/examples/Wizard.md
@@ -4,19 +4,18 @@ section: components
 cssPrefix: pf-c-wizard
 propComponents:
   [
-    'WizardProps',
-    'WizardFooterProps',
-    'WizardToggleProps',
-    'WizardStepProps',
-    'WizardBodyProps',
-    'WizardHeaderProps',
-    'WizardNavProps',
-    'WizardNavItemProps',
+    'Wizard',
+    'WizardFooter',
+    'WizardToggle',
+    'WizardStep',
+    'WizardBody',
+    'WizardHeader',
+    'WizardNav',
+    'WizardNavItem',
     'WizardContextProps',
     'WizardBasicStep',
     'WizardParentStep',
     'WizardSubStep',
-    'WizardNavItemProps',
     'DefaultWizardNavProps',
     'DefaultWizardFooterProps',
   ]