@patternfly/react-core 5.0.0-alpha.70 → 5.0.0-alpha.72

package/src/components/Wizard/examples/Wizard.md

@@ -3,19 +3,53 @@ id: Wizard
 section: components
 cssPrefix: pf-c-wizard
 propComponents:
-  ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
-ouia: true
+  [
+    'Wizard',
+    'WizardFooter',
+    'WizardFooterWrapper',
+    'WizardToggle',
+    'WizardStep',
+    'WizardBody',
+    'WizardHeader',
+    'WizardNav',
+    'WizardNavItem',
+    'WizardContextProps',
+    'WizardBasicStep',
+    'WizardParentStep',
+    'WizardSubStep',
+  ]
 ---
 
-import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
-DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
+import {
+FormGroup,
+TextInput,
+Drawer,
+DrawerContent,
+Button,
+Title,
+Flex,
+Checkbox,
+DrawerPanelContent,
+DrawerColorVariant,
+DrawerHead,
+DrawerActions,
+DrawerCloseButton,
+Wizard,
+WizardFooter,
+WizardFooterWrapper,
+WizardToggle,
+WizardStep,
+WizardBody,
+useWizardFooter,
+useWizardContext,
+WizardNavItem,
+WizardNav,
+WizardHeader
+} from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 
-
-If you seek a wizard solution that allows for more composition, see the [React next](/components/wizard/react-next) tab.
-
 ## Examples
 
 ### Basic
@@ -25,17 +59,17 @@ If you seek a wizard solution that allows for more composition, see the [React n
 
 ### Basic with disabled steps
 
-```ts file="./WizardBasicWithDisabledSteps.tsx"
+```ts file="./WizardBasicDisabledSteps.tsx"
 ```
 
 ### Anchors for nav items
 
-```ts file="./WizardAnchorsForNavItems.tsx"
+```ts file="./WizardWithNavAnchors.tsx"
 ```
 
 ### Incrementally enabled steps
 
-```ts file="./WizardIncrementallyEnabledSteps.tsx"
+```ts file="./WizardStepVisitRequired.tsx"
 ```
 
 ### Expandable steps
@@ -43,9 +77,9 @@ If you seek a wizard solution that allows for more composition, see the [React n
 ```ts file="./WizardExpandableSteps.tsx"
 ```
 
-### Finished
+### Progress after submission
 
-```ts file="./WizardFinished.tsx"
+```ts file="./WizardWithSubmitProgress.tsx"
 ```
 
 ### Enabled on form validation
@@ -55,322 +89,83 @@ If you seek a wizard solution that allows for more composition, see the [React n
 
 ### Validate on button press
 
-This example demonstrates how to use the `WizardContextConsumer` to consume the `WizardContext`. `WizardContext` can be used to imperatively move to a specific wizard step.
+```ts file="./WizardValidateOnButtonPress.tsx"
+```
 
-The definition of the `WizardContext` is as follows:
+### Progressive steps
 
+```ts file="./WizardProgressiveSteps.tsx"
 ```
-interface WizardContext {
-  goToStepById: (stepId: number | string) => void;
-  goToStepByName: (stepName: string) => void;
-  onNext: () => void;
-  onBack: () => void;
-  onClose: () => void;
-  activeStep: WizardStep;
-}
+
+### Get current step
+
+```ts file="./WizardGetCurrentStep.tsx"
 ```
 
-```ts file="./WizardValidateOnButtonPress.tsx"
+### Within modal
+
+```ts file="./WizardWithinModal.tsx"
 ```
 
-### Progressive steps
+### Step drawer content
 
-```js
-import React from 'react';
-import { Button, Radio, Wizard, WizardFooter, WizardContextConsumer, Alert } from '@patternfly/react-core';
-
-class ProgressiveWizard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showCreateStep: false,
-      showUpdateStep: false,
-      showOptionsStep: false,
-      showReviewStep: false,
-      getStartedStepRadio: 'Create',
-      createStepRadio: 'Quick',
-      updateStepRadio: 'Quick'
-    };
-    this.closeWizard = () => {
-      console.log('close wizard');
-    };
-    this.onGoToStep = ({ id, name }, { prevId, prevName }) => {
-      // Remove steps after the currently clicked step
-      if (name === 'Get started') {
-        this.setState({
-          showReviewStep: false,
-          showOptionsStep: false,
-          showCreateStep: false,
-          showUpdateStep: false
-        });
-      } else if (name === 'Create options' || name === 'Update options') {
-        this.setState({
-          showReviewStep: false,
-          showOptionsStep: false
-        });
-      } else if (name.indexOf('Substep') > -1) {
-        this.setState({
-          showReviewStep: false
-        });
-      }
-    };
-    this.getNextStep = (activeStep, callback) => {
-      if (activeStep.name === 'Get started') {
-        if (this.state.getStartedStepRadio === 'Create') {
-          this.setState(
-            {
-              showCreateStep: true,
-              showUpdateStep: false,
-              showOptionsStep: false,
-              showReviewStep: false
-            },
-            () => {
-              callback();
-            }
-          );
-        } else {
-          this.setState(
-            {
-              showCreateStep: false,
-              showUpdateStep: true,
-              showOptionsStep: false,
-              showReviewStep: false
-            },
-            () => {
-              callback();
-            }
-          );
-        }
-      } else if (activeStep.name === 'Create options' || activeStep.name === 'Update options') {
-        this.setState(
-          {
-            showOptionsStep: true,
-            showReviewStep: false
-          },
-          () => {
-            callback();
-          }
-        );
-      } else if (activeStep.name === 'Substep 3') {
-        this.setState(
-          {
-            showReviewStep: true
-          },
-          () => {
-            callback();
-          }
-        );
-      } else {
-        callback();
-      }
-    };
-    this.getPreviousStep = (activeStep, callback) => {
-      if (activeStep.name === 'Review') {
-        this.setState(
-          {
-            showReviewStep: false
-          },
-          () => {
-            callback();
-          }
-        );
-      } else if (activeStep.name === 'Substep 1') {
-        this.setState(
-          {
-            showOptionsStep: false
-          },
-          () => {
-            callback();
-          }
-        );
-      } else if (activeStep.name === 'Create options') {
-        this.setState(
-          {
-            showCreateStep: false
-          },
-          () => {
-            callback();
-          }
-        );
-      } else if (activeStep.name === 'Update options') {
-        this.setState(
-          {
-            showUpdateStep: false
-          },
-          () => {
-            callback();
-          }
-        );
-      } else {
-        callback();
-      }
-    };
-  }
-  render() {
-    const {
-      stepsValid,
-      getStartedStepRadio,
-      createStepRadio,
-      updateStepRadio,
-      showCreateStep,
-      showUpdateStep,
-      showOptionsStep,
-      showReviewStep
-    } = this.state;
-    const getStartedStep = {
-      name: 'Get started',
-      component: (
-        <div>
-          <Radio
-            value="Create"
-            isChecked={getStartedStepRadio === 'Create'}
-            onChange={(_, event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}
-            label="Create a new thing"
-            name="radio-step-start"
-            id="radio-step-start-1"
-          />{' '}
-          <Radio
-            value="Update"
-            isChecked={getStartedStepRadio === 'Update'}
-            onChange={(_, event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}
-            label="Update an existing thing"
-            name="radio-step-start"
-            id="radio-step-start-2"
-          />
-        </div>
-      )
-    };
-    const createStep = {
-      name: 'Create options',
-      component: (
-        <div>
-          <Radio
-            value="Quick"
-            isChecked={createStepRadio === 'Quick'}
-            onChange={(_, event) => this.setState({ createStepRadio: event.currentTarget.value })}
-            label="Quick create"
-            name="radio-step-create"
-            id="radio-step-create-1"
-          />{' '}
-          <Radio
-            value="Custom"
-            isChecked={createStepRadio === 'Custom'}
-            onChange={(_, event) => this.setState({ createStepRadio: event.currentTarget.value })}
-            label="Custom create"
-            name="radio-step-create"
-            id="radio-step-create-2"
-          />
-        </div>
-      )
-    };
-    const updateStep = {
-      name: 'Update options',
-      component: (
-        <div>
-          <Radio
-            value="Quick"
-            isChecked={updateStepRadio === 'Quick'}
-            onChange={(_, event) => this.setState({ updateStepRadio: event.currentTarget.value })}
-            label="Quick update"
-            name="radio-step-update"
-            id="radio-step-update-1"
-          />{' '}
-          <Radio
-            value="Custom"
-            isChecked={updateStepRadio === 'Custom'}
-            onChange={(_, event) => this.setState({ updateStepRadio: event.currentTarget.value })}
-            label="Custom update"
-            name="radio-step-update"
-            id="radio-step-update-2"
-          />
-        </div>
-      )
-    };
-    const optionsStep = {
-      name: showCreateStep ? `${createStepRadio} Options` : `${updateStepRadio} Options`,
-      steps: [
-        {
-          name: 'Substep 1',
-          component: 'Substep 1'
-        },
-        {
-          name: 'Substep 2',
-          component: 'Substep 2'
-        },
-        {
-          name: 'Substep 3',
-          component: 'Substep 3'
-        }
-      ]
-    };
-    const reviewStep = {
-      name: 'Review',
-      component: (
-        <div>
-          <div>First choice: {getStartedStepRadio}</div>
-          <div>Second choice: {showCreateStep ? createStepRadio : updateStepRadio}</div>
-        </div>
-      )
-    };
-    const steps = [
-      getStartedStep,
-      ...(showCreateStep ? [createStep] : []),
-      ...(showUpdateStep ? [updateStep] : []),
-      ...(showOptionsStep ? [optionsStep] : []),
-      ...(showReviewStep ? [reviewStep] : [])
-    ];
-    const CustomFooter = (
-      <WizardFooter>
-        <WizardContextConsumer>
-          {({ activeStep, goToStepByName, goToStepById, onNext, onBack, onClose }) => {
-            return (
-              <>
-                <Button
-                  variant="secondary"
-                  onClick={() => this.getPreviousStep(activeStep, onBack)}
-                  className={activeStep.name === 'Get started' ? 'pf-m-disabled' : ''}
-                >
-                  Back
-                </Button>
-                <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
-                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}
-                </Button>
-                <Button variant="link" onClick={onClose}>
-                  Cancel
-                </Button>
-              </>
-            );
-          }}
-        </WizardContextConsumer>
-      </WizardFooter>
-    );
-    const title = 'Progressive wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        onClose={this.closeWizard}
-        footer={CustomFooter}
-        onGoToStep={this.onGoToStep}
-        steps={steps}
-        height={400}
-      />
-    );
-  }
-}
+```ts file="./WizardStepDrawerContent.tsx"
 ```
 
-### Get current step
+### Custom navigation
 
-```ts file="./WizardGetCurrentStep.tsx"
+```ts file="./WizardWithCustomNav.tsx"
+```
+
+### Header
+
+```ts file="./WizardWithHeader.tsx"
 ```
 
-### Wizard in modal
+### Custom footer
 
-```ts file="./WizardInModal.tsx"
+```ts file="./WizardWithCustomFooter.tsx"
 ```
 
-### Wizard with drawer
+### Custom navigation item
 
-```ts file="./WizardWithDrawer.tsx"
+```ts file="./WizardWithCustomNavItem.tsx"
+```
+
+### Toggle step visibility
+
+```ts file="./WizardToggleStepVisibility.tsx"
+```
+
+### Step error status
+
+```ts file="./WizardStepErrorStatus.tsx"
+```
+
+## Hooks
+
+### 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 current step: {activeStep}</>;
+}
+```
+
+### useWizardFooter
+
+Used to set a unique footer for the wizard on any given step.
+
+```noLive
+import { useWizardFooter } from '@patternfly/react-core/next';
+
+const StepContent = () => {
+  useWizardFooter(<>Some footer</>);
+  return <>Step content</>;
+}
 ```

package/src/components/Wizard/examples/WizardBasic.tsx

@@ -1,39 +1,34 @@
 import React from 'react';
-import { Wizard } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core';
 
-export const WizardBasic: React.FunctionComponent = () => {
-  const steps = [
-    {
-      name: 'First step',
-      component: (
-        <>
-          <p>
-            The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
-            "region", and an aria-label or aria-labelledby to be applied.
-          </p>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
-            lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim
-            ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis
-            eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id
-            nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.
-          </p>
-          <p>
-            Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices
-            orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante.
-            Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam
-            lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut
-            sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed
-            luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
-          </p>
-        </>
-      )
-    },
-    { name: 'Second step', component: <p>Step 2 content</p> },
-    { name: 'Third step', component: <p>Step 3 content</p> },
-    { name: 'Fourth step', component: <p>Step 4 content</p> },
-    { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
-  ];
-  const title = 'Basic wizard example';
-  return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
-};
+export const WizardBasic: React.FunctionComponent = () => (
+  <Wizard height={400} title="Basic wizard">
+    <WizardStep name="Step 1" id="basic-first-step">
+      <p>
+        The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of "region",
+        and an aria-label or aria-labelledby to be applied.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis lacinia
+        vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim ex porttitor
+        odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis eget finibus
+        ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id nec turpis. Morbi
+        mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.
+      </p>
+      <p>
+        Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices orci
+        fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante. Vestibulum
+        sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam lectus a urna.
+        Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut sit amet commodo
+        orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed luctus elit nibh.
+        Quisque et felis diam. Integer ac metus dolor.
+      </p>
+    </WizardStep>
+    <WizardStep name="Step 2" id="basic-second-step">
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Review" id="basic-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

package/src/{next/components → components}/Wizard/examples/WizardBasicDisabledSteps.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Wizard, WizardStep } from '@patternfly/react-core/next';
+import { Wizard, WizardStep } from '@patternfly/react-core';
 
 export const WizardBasicDisabledSteps: React.FunctionComponent = () => (
   <Wizard height={400} title="Basic disabled wizard">

package/src/{next/components → components}/Wizard/examples/WizardCustomNav.tsx

@@ -2,21 +2,21 @@ import React from 'react';
 import {
   Wizard,
   WizardStep,
-  WizardControlStep,
+  WizardStepType,
   CustomWizardNavFunction,
   WizardNav,
   WizardNavItem
-} from '@patternfly/react-core/next';
+} from '@patternfly/react-core';
 
-export const WizardCustomNav: React.FunctionComponent = () => {
+export const WizardWithCustomNav: React.FunctionComponent = () => {
   const nav: CustomWizardNavFunction = (
     isExpanded: boolean,
-    steps: WizardControlStep[],
-    activeStep: WizardControlStep,
+    steps: WizardStepType[],
+    activeStep: WizardStepType,
     goToStepByIndex: (index: number) => void
   ) => (
     <WizardNav isExpanded={isExpanded}>
-      {steps.map(step => (
+      {steps.map((step) => (
         <WizardNavItem
           key={step.id}
           id={step.id}
@@ -24,7 +24,7 @@ export const WizardCustomNav: React.FunctionComponent = () => {
           isCurrent={activeStep.id === step.id}
           isDisabled={step.isDisabled}
           stepIndex={step.index}
-          onNavItemClick={goToStepByIndex}
+          onClick={() => goToStepByIndex(step.index)}
         />
       ))}
     </WizardNav>
@@ -32,14 +32,14 @@ export const WizardCustomNav: React.FunctionComponent = () => {
 
   return (
     <Wizard height={400} nav={nav}>
-      <WizardStep name="First step" id="cnav-first-step">
-        <p>Did you say...custom nav?</p>
+      <WizardStep name="Step 1" id="custom-nav-first-step">
+        Did you say...custom nav?
       </WizardStep>
-      <WizardStep name="Second step" id="cnav-second-step">
-        <p>Step 2 content</p>
+      <WizardStep name="Step 2" id="custom-nav-second-step">
+        Oh, you didn't?
       </WizardStep>
-      <WizardStep name="Review" id="cnav-review-step" footer={{ nextButtonText: 'Wrap it up' }}>
-        <p>Review step content</p>
+      <WizardStep name="Review" id="custom-nav-review-step" footer={{ nextButtonText: 'Wrap it up' }}>
+        Well, this is awkward.
       </WizardStep>
     </Wizard>
   );