@patternfly/react-core 5.2.0-prerelease.20 → 5.2.0-prerelease.21

package/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Wizard, WizardFooterProps, WizardStep, WizardNavProps } from '../';
+import { Wizard, WizardFooterProps, WizardStep, WizardNavProps, WizardStepChangeScope } from '../';
 
 test('renders step when child is of type WizardStep', () => {
   render(
@@ -58,6 +58,27 @@ test('renders default footer with custom props', () => {
   expect(screen.getByRole('button', { name: 'Leave now!' })).toBeVisible();
 });
 
+test('can add props to default footer buttons', () => {
+  render(
+    <Wizard
+      footer={{
+        nextButtonProps: { id: 'next-button', className: 'custom-class' },
+        backButtonProps: { id: 'back-button' },
+        cancelButtonProps: { id: 'cancel-button' }
+      }}
+    >
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', { name: 'Next' });
+
+  expect(nextButton).toHaveProperty('id', 'next-button');
+  expect(nextButton).toHaveClass('custom-class');
+  expect(screen.getByRole('button', { name: 'Back' })).toHaveProperty('id', 'back-button');
+  expect(screen.getByRole('button', { name: 'Cancel' })).toHaveProperty('id', 'cancel-button');
+});
+
 test('renders custom footer', () => {
   render(
     <Wizard footer={<>Some footer</>}>
@@ -100,7 +121,6 @@ test('renders default nav with custom props', () => {
 });
 
 test('renders nav aria label', () => {
-
   render(
     <Wizard navAriaLabel="custom nav aria-label">
       <WizardStep id="test-step" name="Test step" />
@@ -174,28 +194,33 @@ test(`can customize the wizard's height and width`, () => {
   expect(wizard).toHaveStyle('width: 500px');
 });
 
-test('calls onNavByIndex on nav item click', async () => {
+test('calls onStepChange on nav item click', async () => {
   const user = userEvent.setup();
-  const onNavByIndex = jest.fn();
+  const onStepChange = jest.fn();
 
   render(
-    <Wizard onStepChange={onNavByIndex}>
+    <Wizard onStepChange={onStepChange}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
   );
 
   await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-  expect(onNavByIndex).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-2' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Nav
+  );
 });
 
-test('calls onNext and not onSave on next button click when not on the last step', async () => {
+test('calls onStepChange and not onSave on next button click when not on the last step', async () => {
   const user = userEvent.setup();
-  const onNext = jest.fn();
+  const onStepChange = jest.fn();
   const onSave = jest.fn();
 
   render(
-    <Wizard onStepChange={onNext} onSave={onSave}>
+    <Wizard onStepChange={onStepChange} onSave={onSave}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -203,16 +228,21 @@ test('calls onNext and not onSave on next button click when not on the last step
 
   await user.click(screen.getByRole('button', { name: 'Next' }));
 
-  expect(onNext).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-2' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Next
+  );
   expect(onSave).not.toHaveBeenCalled();
 });
 
-test('calls onBack on back button click', async () => {
+test('calls onStepChange on back button click', async () => {
   const user = userEvent.setup();
-  const onBack = jest.fn();
+  const onStepChange = jest.fn();
 
   render(
-    <Wizard onStepChange={onBack}>
+    <Wizard onStepChange={onStepChange}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -221,7 +251,12 @@ test('calls onBack on back button click', async () => {
   await user.click(screen.getByRole('button', { name: 'Test step 2' }));
   await user.click(screen.getByRole('button', { name: 'Back' }));
 
-  expect(onBack).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-1' }),
+    expect.objectContaining({ id: 'step-2' }),
+    WizardStepChangeScope.Back
+  );
 });
 
 test('calls onSave and not onClose on next button click when on the last step', async () => {
@@ -445,17 +480,153 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   ).toBeNull();
 });
 
-test('parent step can be non-collapsible by setting isCollapsible to false', () => {
+test('parent step can be expandable by setting isExpandable to true', () => {
+  render(
+    <Wizard>
+      <WizardStep
+        id="step-1"
+        name="Test step 1"
+        isExpandable
+        steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
+      />
+    </Wizard>
+  );
+
+  expect(screen.getByLabelText('step icon', { exact: false })).toBeVisible();
+});
+
+test('child steps are disabled when parent is disabled', () => {
   render(
     <Wizard>
       <WizardStep
         id="step-1"
         name="Test step 1"
-        isCollapsible={false}
+        isDisabled
         steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
       />
     </Wizard>
   );
 
-  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeDisabled();
+  expect(
+    screen.getByRole('button', {
+      name: 'Sub step 1'
+    })
+  ).toBeDisabled();
+});
+
+test('child steps are hidden when parent is hidden', () => {
+  render(
+    <Wizard>
+      <WizardStep id="step-1" name="Test step 1" isHidden steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]} />
+    </Wizard>
+  );
+
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeNull();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Sub step 1'
+    })
+  ).toBeNull();
+});
+
+test('onStepChange skips over disabled or hidden steps and substeps', async () => {
+  const user = userEvent.setup();
+  const onStepChange = jest.fn();
+
+  render(
+    <Wizard onStepChange={onStepChange}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" steps={[<WizardStep id="step2-sub1" name="Test Substep 1" />]} />
+      <WizardStep id="step-3" name="Test step 3" isDisabled />
+      <WizardStep
+        id="step-4"
+        name="Test step 4"
+        isDisabled
+        steps={[<WizardStep id="step4-sub1" name="Test Substep 1" />]}
+      />
+      <WizardStep
+        id="step-5"
+        name="Test step 4"
+        steps={[
+          <WizardStep id="step5-sub1" name="Test Substep 1" isDisabled />,
+          <WizardStep id="step5-sub2" name="Test Substep 2" />
+        ]}
+      />
+      <WizardStep id="step-6" name="Test step 6" isHidden />
+      <WizardStep
+        id="step-7"
+        name="Test step 7"
+        isHidden
+        steps={[<WizardStep id="step7-sub1" name="Test Substep 1" />]}
+      />
+      <WizardStep
+        id="step-8"
+        name="Test step 8"
+        steps={[
+          <WizardStep id="step8-sub1" name="Test Substep 1" isHidden />,
+          <WizardStep id="step8-sub2" name="Test Substep 2" />
+        ]}
+      />
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', { name: 'Next' });
+  const backButton = screen.getByRole('button', { name: 'Back' });
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub1' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step5-sub2' }),
+    expect.objectContaining({ id: 'step2-sub1' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step8-sub2' }),
+    expect.objectContaining({ id: 'step5-sub2' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step5-sub2' }),
+    expect.objectContaining({ id: 'step8-sub2' }),
+    WizardStepChangeScope.Back
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub1' }),
+    expect.objectContaining({ id: 'step5-sub2' }),
+    WizardStepChangeScope.Back
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-1' }),
+    expect.objectContaining({ id: 'step2-sub1' }),
+    WizardStepChangeScope.Back
+  );
 });

package/src/components/Wizard/__tests__/WizardBody.test.tsx

@@ -10,7 +10,7 @@ test('renders children without additional props', () => {
   expect(container).not.toHaveAttribute('aria-labelledby');
 });
 
-test('has no padding className when hasNoBodyPadding is not specified', () => {
+test('has no padding className when hasNoPadding is not specified', () => {
   render(<WizardBody>content</WizardBody>);
   expect(screen.getByText('content')).not.toHaveClass('pf-m-no-padding');
 });

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

@@ -36,7 +36,7 @@ const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepTy
 export const GetCurrentStepWizard: React.FunctionComponent = () => {
   const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
 
-  const onStepChange = (event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
+  const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
     setCurrentStep(currentStep);
 
   return (
@@ -44,9 +44,43 @@ export const GetCurrentStepWizard: React.FunctionComponent = () => {
       <WizardStep name="Step 1" id="get-current-step-1">
         {currentStep ? <CurrentStepDescriptionList currentStep={currentStep} /> : 'Step 1 content'}
       </WizardStep>
-      <WizardStep name="Step 2" id="get-current-step-2">
-        <CurrentStepDescriptionList currentStep={currentStep} />
-      </WizardStep>
+      <WizardStep
+        name="Step 2"
+        id="get-current-step-2"
+        isDisabled
+        steps={[
+          <WizardStep name="Substep 1" id="get-current-substep-1" key="get-current-substep-1">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 2" id="get-current-substep-2" key="get-current-substep-2">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
+      <WizardStep
+        name="Step 3"
+        id="get-current-step-3"
+        steps={[
+          <WizardStep name="Substep 3" id="get-current-substep-3" key="get-current-substep-3">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 4" id="get-current-substep-4" key="get-current-substep-4">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
+      <WizardStep
+        name="Step 4"
+        id="get-current-step-4"
+        steps={[
+          <WizardStep name="Substep 5" id="get-current-substep-5" key="get-current-substep-5" isHidden>
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 6" id="get-current-substep-6" key="get-current-substep-6">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
       <WizardStep name="Review" id="get-current-review-step" footer={{ nextButtonText: 'Finish' }}>
         <CurrentStepDescriptionList currentStep={currentStep} />
       </WizardStep>

package/src/components/Wizard/types.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '.';
+import { ButtonProps } from '../Button';
 
 /** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
 export interface WizardBasicStep {
@@ -30,6 +31,9 @@ export enum WizardNavItemStatus {
   Error = 'error'
 }
 
+/** Type for customizing a button (next, back or cancel) in a Wizard footer. It omits some props which either have a default value or are passed directly via WizardFooterProps. */
+export type WizardFooterButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'onClick'>;
+
 /** Type used to define parent steps. */
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */

package/src/components/Wizard/utils.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardStepType } from './types';
+import { isWizardParentStep, isWizardSubStep, WizardStepType } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 /**
@@ -8,7 +8,7 @@ import { WizardStep, WizardStepProps } from './WizardStep';
  * @param children
  * @returns WizardStepType[]
  */
-export const buildSteps = (children: React.ReactNode | React.ReactNode[]) =>
+export const buildSteps = (children: React.ReactNode) =>
   React.Children.toArray(children).reduce((acc: WizardStepType[], child: React.ReactNode, index: number) => {
     if (isWizardStep(child)) {
       const { props: childProps } = child;
@@ -57,3 +57,26 @@ export const normalizeStepProps = ({
   steps: _steps,
   ...controlStep
 }: WizardStepProps): Omit<WizardStepType, 'index'> => controlStep;
+
+/**
+ * Determines whether a step is navigable based on disabled/hidden properties
+ * @param steps All steps
+ * @param step
+ * @returns boolean
+ */
+export const isStepEnabled = (steps: WizardStepType[], step: WizardStepType): boolean => {
+  // Skip over parent steps since they are merely containers of sub-steps
+  if (!isWizardParentStep(step) && !step.isHidden && !step.isDisabled) {
+    if (isWizardSubStep(step)) {
+      const parentStep = steps.find((otherStep) => otherStep.id === step.parentId);
+
+      if (!parentStep.isHidden && !parentStep.isDisabled) {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  }
+
+  return false;
+};