@patternfly/react-core 4.240.0 → 4.241.0

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { WizardBody } from '../WizardBody';
+
+test('renders children without additional props', () => {
+  const { container } = render(<WizardBody>content</WizardBody>);
+
+  expect(container).toHaveTextContent('content');
+  expect(container).not.toHaveAttribute('aria-label');
+  expect(container).not.toHaveAttribute('aria-labelledby');
+});
+
+test('has no padding className when hasNoBodyPadding is not specified', () => {
+  render(<WizardBody>content</WizardBody>);
+  expect(screen.getByText('content')).not.toHaveClass('pf-m-no-padding');
+});
+
+test('has padding className when hasNoBodyPadding is specified', () => {
+  render(<WizardBody hasNoBodyPadding>content</WizardBody>);
+  expect(screen.getByText('content')).toHaveClass('pf-m-no-padding');
+});
+
+test('has aria-label when one is specified', () => {
+  render(<WizardBody aria-label="Body label">content</WizardBody>);
+  expect(screen.getByLabelText('Body label')).toBeVisible();
+});
+
+test('has aria-labelledby when one is specified', () => {
+  const { container } = render(<WizardBody aria-labelledby="some-id">content</WizardBody>);
+  expect(container.firstElementChild).toHaveAttribute('aria-labelledby', 'some-id');
+});
+
+test('wrapper element is of type div when wrapperElement is not specified', () => {
+  const { container } = render(<WizardBody aria-label="Wizard body">content</WizardBody>);
+  expect(container.firstElementChild?.tagName).toEqual('DIV');
+});
+
+test('renders with custom wrapperElement', () => {
+  const { container } = render(<WizardBody wrapperElement="main">content</WizardBody>);
+  expect(container.firstElementChild?.tagName).toEqual('MAIN');
+});

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

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { WizardFooter } from '../WizardFooter';
+
+const defaultProps = {
+  activeStep: { name: 'Step name', id: 'some-id' },
+  onNext: jest.fn(),
+  onBack: jest.fn(),
+  onClose: jest.fn()
+};
+
+test('has button names of "Next", "Back", and "Cancel" by default', () => {
+  render(<WizardFooter {...defaultProps} />);
+
+  expect(screen.getByRole('button', { name: 'Next' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Back' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+});
+
+test('calls onNext when the next button is clicked', async () => {
+  const onNext = jest.fn();
+  const user = userEvent.setup();
+
+  render(<WizardFooter {...defaultProps} onNext={onNext} />);
+
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  expect(onNext).toHaveBeenCalled();
+});
+
+test('calls onBack when the back button is clicked', async () => {
+  const onBack = jest.fn();
+  const user = userEvent.setup();
+
+  render(<WizardFooter {...defaultProps} onBack={onBack} />);
+
+  await user.click(screen.getByRole('button', { name: 'Back' }));
+  expect(onBack).toHaveBeenCalled();
+});
+
+test('calls onClose when the close button is clicked', async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+
+  render(<WizardFooter {...defaultProps} onClose={onClose} />);
+
+  await user.click(screen.getByRole('button', { name: 'Cancel' }));
+  expect(onClose).toHaveBeenCalled();
+});
+
+test('can have custom button names', () => {
+  render(
+    <WizardFooter
+      {...defaultProps}
+      nextButtonText={<>Go!</>}
+      backButtonText="Turn around!"
+      cancelButtonText={<span>Get out!</span>}
+    />
+  );
+
+  expect(screen.getByRole('button', { name: 'Go!' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Turn around!' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Get out!' })).toBeVisible();
+});
+
+test('has disabled back button when disableBackButton is enabled', () => {
+  render(<WizardFooter {...defaultProps} disableBackButton />);
+  expect(screen.getByRole('button', { name: 'Back' })).toHaveAttribute('disabled');
+});
+
+test('has no back button when activeStep has hideBackButton enabled', () => {
+  render(<WizardFooter {...defaultProps} activeStep={{ ...defaultProps.activeStep, hideBackButton: true }} />);
+  expect(screen.queryByRole('button', { name: 'Back' })).toBeNull();
+});
+
+test('has no cancel button when activeStep has hideCancelButton enabled', () => {
+  render(<WizardFooter {...defaultProps} activeStep={{ ...defaultProps.activeStep, hideCancelButton: true }} />);
+  expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
+});
+
+test(`uses activeStep's nextButtonText when specified instead of nextButtonText of WizardFooter`, () => {
+  render(
+    <WizardFooter
+      {...defaultProps}
+      nextButtonText="Footer next"
+      activeStep={{ ...defaultProps.activeStep, nextButtonText: 'Active step next' }}
+    />
+  );
+  expect(screen.queryByRole('button', { name: 'Footer next' })).toBeNull();
+  expect(screen.getByRole('button', { name: 'Active step next' })).toBeVisible();
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { WizardStep } from '../WizardStep';
+
+test('renders without children', () => {
+  const { container } = render(<WizardStep id="test-step" name="Test step" />);
+  expect(container).toBeVisible();
+});
+
+test('renders with children', () => {
+  render(
+    <WizardStep id="test-step" name="Test step">
+      content
+    </WizardStep>
+  );
+
+  expect(screen.getByText('content')).toBeVisible();
+});
+
+test('excludes WizardBody when body is set to null', () => {
+  render(<WizardStep id="test-step" name="Test step" body={null} />);
+  expect(screen.queryByRole('main')).toBeNull();
+});
+
+test('uses body props for WizardBody when passed', () => {
+  render(
+    <WizardStep id="test-step" name="Test step" body={{ 'aria-label': 'Some label' }}>
+      content
+    </WizardStep>
+  );
+
+  expect(screen.getByLabelText('Some label')).toBeVisible();
+});

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

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { KeyTypes } from '../../../../helpers';
+import { WizardToggle, WizardToggleProps } from '../WizardToggle';
+
+const steps = [
+  { id: 'id-1', name: 'First step', component: <>First step content</> },
+  { id: 'id-2', name: 'Second step', component: <>Second step content</> }
+];
+
+const defaultProps: WizardToggleProps = {
+  steps,
+  activeStep: steps[0],
+  footer: <div>Some footer</div>,
+  nav: <div>Some nav</div>,
+  'aria-label': 'Some label'
+};
+
+test('renders provided footer, nav, and active step content', () => {
+  render(<WizardToggle {...defaultProps} />);
+
+  expect(screen.getByText('Some footer')).toBeVisible();
+  expect(screen.getByText('Some nav')).toBeVisible();
+  expect(screen.getByText('First step content')).toBeVisible();
+});
+
+test('applies aria-label to the expandable toggle button when specified', () => {
+  render(<WizardToggle {...defaultProps} aria-label="Some label" />);
+  expect(screen.getByRole('button', { name: 'Some label' })).toBeVisible();
+});
+
+test('has expanded properties when isNavExpanded is true', async () => {
+  render(<WizardToggle {...defaultProps} aria-label="Some label" isNavExpanded />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Some label' });
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+  expect(toggleButton).toHaveClass('pf-m-expanded');
+});
+
+test('calls toggleNavExpanded on toggle button click', async () => {
+  const toggleNavExpanded = jest.fn();
+  const user = userEvent.setup();
+
+  render(<WizardToggle {...defaultProps} aria-label="Some label" toggleNavExpanded={toggleNavExpanded} />);
+
+  await user.click(screen.getByRole('button', { name: 'Some label' }));
+  expect(toggleNavExpanded).toHaveBeenCalled();
+});
+
+test('renders only the active step content by default', async () => {
+  render(<WizardToggle {...defaultProps} />);
+
+  expect(screen.getByText('First step content')).toBeInTheDocument();
+  expect(screen.queryByText('Second step content')).toBeNull;
+});
+
+test('renders all step content when unmountInactiveSteps is false', async () => {
+  render(<WizardToggle {...defaultProps} unmountInactiveSteps={false} />);
+
+  expect(screen.getByText('First step content')).toBeInTheDocument();
+  expect(screen.getByText('Second step content')).toBeInTheDocument();
+});
+
+test('has expanded properties when the toggle dropdown button is clicked', async () => {
+  const user = userEvent.setup();
+
+  render(<WizardToggleExpand aria-label="Some label" />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Some label' });
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+  expect(toggleButton).not.toHaveClass('pf-m-expanded');
+
+  await user.click(toggleButton);
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+  expect(toggleButton).toHaveClass('pf-m-expanded');
+});
+
+test('unsets expanded properties when using the Escape key', async () => {
+  const user = userEvent.setup();
+
+  render(<WizardToggleExpand aria-label="Some label" />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Some label' });
+
+  await user.click(toggleButton);
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+  expect(toggleButton).toHaveClass('pf-m-expanded');
+
+  await user.type(toggleButton, `{${KeyTypes.Escape}}`);
+
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+  expect(toggleButton).not.toHaveClass('pf-m-expanded');
+});
+
+const WizardToggleExpand = props => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  return (
+    <WizardToggle
+      {...defaultProps}
+      isNavExpanded={isExpanded}
+      toggleNavExpanded={() => setIsExpanded(!isExpanded)}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { WizardParentStep, WizardSubStep } from '../types';
+import { buildSteps } from '../utils';
+import { WizardStep } from '../WizardStep';
+
+describe('buildSteps', () => {
+  test('throws error if child does not have required props or type of WizardStep', () => {
+    try {
+      buildSteps(<div />);
+    } catch (error) {
+      expect(error.message).toEqual('Wizard only accepts children of type WizardStep');
+    }
+  });
+
+  test('throws error if no children are valid react elements', () => {
+    try {
+      buildSteps('test' as any);
+    } catch (error) {
+      expect(error.message).toEqual('Wizard only accepts children of type WizardStep');
+    }
+  });
+
+  test('returns array of steps if children are of type WizardStep', () => {
+    const component = <WizardStep name="Step 1" id="step-1" />;
+    const [step] = buildSteps(component);
+
+    expect(step.id).toEqual('step-1');
+    expect(step.name).toEqual('Step 1');
+    expect(step.component?.props).toEqual(component.props);
+  });
+
+  test('returns array of steps if children have required props', () => {
+    const CustomStep = props => <div {...props} />;
+    const component = (
+      <CustomStep name="Step 1" id="step-1">
+        Content
+      </CustomStep>
+    );
+    const [step] = buildSteps(component);
+
+    expect(step.id).toEqual('step-1');
+    expect(step.name).toEqual('Step 1');
+    expect(step.component?.props).toEqual(component.props);
+  });
+
+  test('returns flattened array of steps and sub-steps when sub-steps exist', () => {
+    const CustomSubStep = props => <div {...props} />;
+
+    const component = (
+      <WizardStep
+        name="Step 1"
+        id="step-1"
+        steps={[
+          <WizardStep name="SubStep" id="sub-step" />,
+          <CustomSubStep name="Custom SubStep" id="custom-sub-step" />
+        ]}
+      />
+    );
+    const [subStep, customSubStep, parentStep] = buildSteps(component);
+
+    expect((subStep as WizardSubStep).parentId).toEqual('step-1');
+    expect((customSubStep as WizardSubStep).parentId).toEqual('step-1');
+    expect((parentStep as WizardParentStep).subStepIds).toEqual(['sub-step', 'custom-sub-step']);
+  });
+});

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

@@ -47,8 +47,6 @@ WizardNavItem,
 WizardNav,
 WizardHeader
 } 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.
 
@@ -63,10 +61,10 @@ PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a mo
 
 The `Wizard`'s `nav` property can be used to build your own navigation.
 
-```
+```noLive
 /** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
 export type CustomWizardNavFunction = (
-  isOpen: boolean,
+  isExpanded: boolean,
   steps: WizardControlStep[],
   activeStep: WizardControlStep,
   goToStepByIndex: (index: number) => void
@@ -85,7 +83,7 @@ Includes a header, custom footer, sub-steps, step content with a drawer, custom
 
 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).
 
-```
+```noLive
 /** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
 type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
 

package/src/next/components/Wizard/examples/WizardCustomNav.tsx

@@ -10,12 +10,12 @@ import {
 
 export const WizardCustomNav: React.FunctionComponent = () => {
   const nav: CustomWizardNavFunction = (
-    isOpen: boolean,
+    isExpanded: boolean,
     steps: WizardControlStep[],
     activeStep: WizardControlStep,
     goToStepByIndex: (index: number) => void
   ) => (
-    <WizardNav isOpen={isOpen}>
+    <WizardNav isExpanded={isExpanded}>
       {steps.map((step, index) => (
         <WizardNavItem
           key={step.id}

package/src/next/components/Wizard/examples/WizardKitchenSink.tsx

@@ -27,8 +27,6 @@ import {
   WizardNavItem,
   WizardHeader
 } 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();
@@ -100,14 +98,8 @@ const StepWithCustomFooter = () => {
 
   const footer = React.useMemo(
     () => (
-      <div className={css(styles.wizardFooter)}>
-        <Button
-          variant="primary"
-          type="submit"
-          onClick={() => onNext(goToNextStep)}
-          isLoading={isLoading}
-          isDisabled={isLoading}
-        >
+      <>
+        <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
           Async Next
         </Button>
         <Button variant="secondary" onClick={onBack}>
@@ -116,7 +108,7 @@ const StepWithCustomFooter = () => {
         <Button variant="link" onClick={onClose}>
           Cancel
         </Button>
-      </div>
+      </>
     ),
     [isLoading, onBack, onClose, goToNextStep]
   );

package/src/next/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useWizardFooter } from '../useWizardFooter';
+import * as WizardContext from '../../WizardContext';
+
+describe('useWizardFooter', () => {
+  const customFooter = <>My custom footer</>;
+  const useWizardContextSpy = jest.spyOn(WizardContext, 'useWizardContext');
+  const setFooter = jest.fn();
+
+  it('sets the footer when one is provided without a stepId', () => {
+    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+
+    renderHook(() => useWizardFooter(customFooter));
+    expect(setFooter).toHaveBeenCalledWith(customFooter);
+  });
+
+  it(`sets the footer when the provided stepId matches the activeStep's id`, () => {
+    useWizardContextSpy.mockReturnValueOnce({ setFooter, activeStep: { id: 'active-step-id' } } as any);
+
+    renderHook(() => useWizardFooter(customFooter, 'active-step-id'));
+    expect(setFooter).toHaveBeenCalledWith(customFooter);
+  });
+
+  it(`does not set the footer when the provided stepId does not match the activeStep's id`, () => {
+    useWizardContextSpy.mockReturnValueOnce({ setFooter, activeStep: { id: 'active-step-id' } } as any);
+
+    renderHook(() => useWizardFooter(customFooter, 'some-other-step-id'));
+    expect(setFooter).not.toHaveBeenCalled();
+  });
+
+  it('sets the footer to null on unmount', () => {
+    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+
+    const { unmount } = renderHook(() => useWizardFooter(customFooter));
+    unmount();
+
+    expect(setFooter).toHaveBeenCalledWith(null);
+  });
+
+  it('sets footer with default props instead of react element', () => {
+    const footerProps = { onNext: jest.fn(), onBack: jest.fn(), onClose: jest.fn() };
+    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+
+    renderHook(() => useWizardFooter(footerProps));
+
+    expect(setFooter).toHaveBeenCalledWith(footerProps);
+  });
+});

package/src/next/components/Wizard/hooks/useWizardFooter.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+
+import { DefaultWizardFooterProps } from '../types';
 import { useWizardContext } from '../WizardContext';
 
 /**
@@ -6,7 +8,7 @@ import { useWizardContext } from '../WizardContext';
  * @param footer
  * @param stepId
  */
-export const useWizardFooter = (footer: React.ReactElement, stepId?: string | number) => {
+export const useWizardFooter = (footer: DefaultWizardFooterProps | React.ReactElement, stepId?: string | number) => {
   const { activeStep, setFooter } = useWizardContext();
 
   React.useEffect(() => {

package/src/next/components/Wizard/types.tsx

@@ -57,6 +57,12 @@ export interface DefaultWizardFooterProps {
   backButtonText?: React.ReactNode;
   /** The Cancel button text */
   cancelButtonText?: React.ReactNode;
+  /** Next button callback */
+  onNext?: () => WizardNavStepFunction | void;
+  /** Back button callback */
+  onBack?: () => WizardNavStepFunction | void;
+  /** Cancel link callback */
+  onClose?: () => void;
 }
 
 /** Encompasses all step type variants that are internally controlled by the Wizard. */
@@ -70,7 +76,7 @@ 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,
+  isExpanded: boolean,
   steps: WizardControlStep[],
   activeStep: WizardControlStep,
   goToStepByIndex: (index: number) => void

package/src/next/components/Wizard/utils.ts

@@ -4,7 +4,7 @@ import { WizardControlStep, WizardNavStepData } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 function hasWizardStepProps(props: WizardStepProps | any): props is WizardStepProps {
-  return props.name !== undefined && props.id !== undefined && props.children !== undefined;
+  return props.name !== undefined && props.id !== undefined;
 }
 
 /**
@@ -14,29 +14,31 @@ function hasWizardStepProps(props: WizardStepProps | any): props is WizardStepPr
  */
 export const buildSteps = (children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[]) =>
   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.
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { steps: subSteps, id, children, ...stepProps } = child.props as WizardStepProps;
+    if (React.isValidElement(child) && (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 WizardStepProps;
 
-        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 });
+      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;
-            })
+            return subStep.props.id;
           })
-        });
-      } else {
-        throw new Error('Wizard only accepts children of type WizardStep');
-      }
+        })
+      });
+    } else {
+      throw new Error('Wizard only accepts children of type WizardStep');
     }
 
     return acc;