add section for Hooks and address some other feedback

Author: jpuzz0

packages/react-core/src/components/Wizard/Wizard.tsx

@@ -68,7 +68,7 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   onClose?: () => void;
   /** Callback function when a step in the nav is clicked */
   onGoToStep?: WizardStepFunctionType;
-  /** Additional classes spread to the Wizard */
+  /** Additional classes spread to the wizard */
   className?: string;
   /** The wizard steps configuration object */
   steps: WizardStep[];
@@ -88,9 +88,9 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   footer?: React.ReactNode;
   /** (Unused if footer is controlled) Callback function to save at the end of the wizard, if not specified uses onClose */
   onSave?: () => void;
-  /** (Unused if footer is controlled) Callback function after Next button is clicked */
+  /** (Unused if footer is controlled) Callback function after next button is clicked */
   onNext?: WizardStepFunctionType;
-  /** (Unused if footer is controlled) Callback function after Back button is clicked */
+  /** (Unused if footer is controlled) Callback function after back button is clicked */
   onBack?: WizardStepFunctionType;
   /** (Unused if footer is controlled) The Next button text */
   nextButtonText?: React.ReactNode;

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
 

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> {
@@ -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 = () => {

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);

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}</>;
+}
+```

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 = (

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

packages/react-core/src/next/components/Wizard/hooks/index.ts

@@ -0,0 +1 @@
+export { useWizardFooter } from './useWizardFooter';

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;

…core/src/next/components/Wizard/types.ts …ore/src/next/components/Wizard/types.tsxpackages/react-core/src/next/components/Wizard/types.ts renamed to packages/react-core/src/next/components/Wizard/types.tsx packages/react-core/src/next/components/Wizard/types.ts renamed to 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;