@patternfly/react-core 4.234.4 → 4.235.0

package/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';

package/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';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { WizardControlStep } 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<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;
+  /** 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';

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

@@ -0,0 +1,209 @@
+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 {
+  WizardControlStep,
+  CustomWizardNavFunction,
+  DefaultWizardNavProps,
+  isWizardBasicStep,
+  isWizardParentStep,
+  isWizardSubStep,
+  isCustomWizardNav
+} from './types';
+
+/**
+ * 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: WizardControlStep[];
+  /** The currently active WizardStep */
+  activeStep: WizardControlStep;
+  /** 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 WizardToggle = ({
+  steps,
+  activeStep,
+  footer,
+  nav,
+  goToStepByIndex,
+  unmountInactiveSteps = true,
+  'aria-label': ariaLabel = 'Wizard toggle'
+}: WizardToggleProps) => {
+  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>
+    </>
+  );
+};
+
+WizardToggle.displayName = 'WizardToggle';

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

@@ -0,0 +1,298 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { DefaultWizardNavProps, WizardControlStep, DefaultWizardFooterProps } from '../types';
+import { WizardNav, WizardNavItem, 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: WizardControlStep[],
+      activeStep: WizardControlStep,
+      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();
+  });
+});