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

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

@@ -1,117 +0,0 @@
-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 { WizardStepType, isWizardSubStep } from './types';
-import { WizardNavProps } from './WizardNav';
-import { WizardStep, WizardStepProps } from './WizardStep';
-import { WizardBody } from './WizardBody';
-
-/**
- * Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
- */
-
-export interface WizardToggleProps {
-  /** List of steps and/or sub-steps */
-  steps: WizardStepType[];
-  /** The current step */
-  activeStep: WizardStepType;
-  /** Wizard footer */
-  footer: React.ReactElement;
-  /** Wizard navigation */
-  nav: React.ReactElement<WizardNavProps>;
-  /** The expandable dropdown button's aria-label */
-  'aria-label'?: string;
-  /** Flag to determine whether the dropdown navigation is expanded */
-  isNavExpanded?: boolean;
-  /** Callback to expand or collapse the dropdown navigation */
-  toggleNavExpanded?: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
-}
-
-export const WizardToggle = ({
-  steps,
-  activeStep,
-  footer,
-  nav,
-  isNavExpanded,
-  toggleNavExpanded,
-  'aria-label': ariaLabel = 'Wizard toggle'
-}: WizardToggleProps) => {
-  const isActiveSubStep = isWizardSubStep(activeStep);
-  const parentStep = isActiveSubStep && steps.find(step => step.id === activeStep.parentId);
-  const nonSubSteps = steps.filter(step => !isWizardSubStep(step));
-  const wizardToggleIndex = nonSubSteps.indexOf(parentStep || activeStep) + 1;
-
-  const handleKeyClicks = React.useCallback(
-    (event: KeyboardEvent): void => {
-      if (isNavExpanded && event.key === KeyTypes.Escape) {
-        toggleNavExpanded?.(event);
-      }
-    },
-    [isNavExpanded, toggleNavExpanded]
-  );
-
-  // Open/close collapsable navigation 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]);
-
-  const bodyContent = steps.map(step => {
-    const props: WizardStepProps = step.component?.props || {};
-    const { children, body, ...propsWithoutChildren } = props;
-
-    return (
-      <React.Fragment key={step.id}>
-        {activeStep?.name === step.name &&
-          (body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : children)}
-
-        <div key={step.id} style={{ display: 'none' }}>
-          <WizardStep {...propsWithoutChildren} />
-        </div>
-      </React.Fragment>
-    );
-  });
-
-  return (
-    <>
-      <button
-        onClick={toggleNavExpanded}
-        className={css(styles.wizardToggle, isNavExpanded && 'pf-m-expanded')}
-        aria-label={ariaLabel}
-        aria-expanded={isNavExpanded}
-      >
-        <span className={css(styles.wizardToggleList)}>
-          <span className={css(styles.wizardToggleListItem)}>
-            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>{' '}
-            {parentStep?.name || 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)}>
-          {nav}
-          {bodyContent}
-        </div>
-
-        {footer}
-      </div>
-    </>
-  );
-};
-
-WizardToggle.displayName = 'WizardToggle';

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

@@ -1,449 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Wizard, WizardFooterProps, WizardStep, WizardNavProps } from '../';
-
-test('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();
-});
-
-test('renders a header when specified', () => {
-  render(
-    <Wizard header="Some header">
-      <WizardStep id="test-step" name="Test step" />
-    </Wizard>
-  );
-
-  expect(screen.getByText('Some header')).toBeVisible();
-});
-
-test('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();
-});
-
-test('renders default footer with custom props', () => {
-  const footer: Partial<WizardFooterProps> = {
-    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();
-});
-
-test('renders custom footer', () => {
-  render(
-    <Wizard footer={<>Some footer</>}>
-      <WizardStep id="test-step" name="Test step" />
-    </Wizard>
-  );
-
-  expect(screen.getByText('Some footer')).toBeVisible();
-});
-
-test('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();
-});
-
-test('renders default nav with custom props', () => {
-  const nav: Partial<WizardNavProps> = {
-    'aria-label': 'Some nav label',
-    'aria-labelledby': 'wizard-id'
-  };
-
-  render(
-    <Wizard id="wizard-id" nav={nav} isVisitRequired>
-      <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 2' })).toHaveAttribute('disabled');
-});
-
-test('renders custom nav', () => {
-  const customNav = () => <nav>Some custom nav</nav>;
-
-  render(
-    <Wizard nav={customNav}>
-      <WizardStep id="test-step" name="Test step" />
-    </Wizard>
-  );
-
-  expect(screen.getByRole('navigation')).toBeVisible();
-});
-
-test('starts with the first step as the current 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');
-});
-
-test(`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');
-});
-
-test(`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');
-});
-
-test(`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');
-});
-
-test('calls onNavByIndex on nav item click', async () => {
-  const user = userEvent.setup();
-  const onNavByIndex = jest.fn();
-
-  render(
-    <Wizard onStepChange={onNavByIndex}>
-      <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();
-});
-
-test('calls onNext and not onSave on next button click when not on the last step', async () => {
-  const user = userEvent.setup();
-  const onNext = jest.fn();
-  const onSave = jest.fn();
-
-  render(
-    <Wizard onStepChange={onNext} onSave={onSave}>
-      <WizardStep id="step-1" name="Test step 1" />
-      <WizardStep id="step-2" name="Test step 2" />
-    </Wizard>
-  );
-
-  await user.click(screen.getByRole('button', { name: 'Next' }));
-
-  expect(onNext).toHaveBeenCalled();
-  expect(onSave).not.toHaveBeenCalled();
-});
-
-test('calls onBack on back button click', async () => {
-  const user = userEvent.setup();
-  const onBack = jest.fn();
-
-  render(
-    <Wizard onStepChange={onBack}>
-      <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' }));
-  await user.click(screen.getByRole('button', { name: 'Back' }));
-
-  expect(onBack).toHaveBeenCalled();
-});
-
-test('calls onSave and not onClose on next button click when on the last step', async () => {
-  const user = userEvent.setup();
-  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>
-  );
-
-  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-  await user.click(screen.getByRole('button', { name: 'Next' }));
-
-  expect(onSave).toHaveBeenCalled();
-  expect(onClose).not.toHaveBeenCalled();
-});
-
-test('calls onClose when onSave is not specified on next button click when on the last step', async () => {
-  const user = userEvent.setup();
-  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>
-  );
-
-  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-  await user.click(screen.getByRole('button', { name: 'Next' }));
-
-  expect(onClose).toHaveBeenCalled();
-});
-
-test('calls onClose on cancel link click', async () => {
-  const user = userEvent.setup();
-  const onClose = jest.fn();
-
-  render(
-    <Wizard onClose={onClose}>
-      <WizardStep id="test-step" name="Test step" />
-    </Wizard>
-  );
-
-  await user.click(screen.getByRole('button', { name: 'Cancel' }));
-  expect(onClose).toHaveBeenCalled();
-});
-
-test('does not render inactive step content', async () => {
-  const user = userEvent.setup();
-
-  render(
-    <Wizard>
-      <WizardStep id="step-1" name="Test step 1">
-        Step 1 content
-      </WizardStep>
-      <WizardStep id="step-2" name="Test step 2">
-        Step 2 content
-      </WizardStep>
-    </Wizard>
-  );
-
-  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-
-  expect(screen.queryByText('Step 1 content')).toBeNull();
-  expect(screen.getByText('Step 2 content')).toBeVisible();
-});
-
-test('parent steps have collapsed sub-steps when isExpandable is true unless the step is active', async () => {
-  const user = userEvent.setup();
-
-  render(
-    <Wizard>
-      <WizardStep id="step-1" name="Test step 1" />
-      <WizardStep
-        id="step-2"
-        name="Test step 2"
-        isExpandable
-        steps={[<WizardStep id="sub-step-1" name="Test sub step 1" />]}
-      />
-    </Wizard>
-  );
-
-  expect(screen.getByLabelText('Expand step icon')).toBeVisible();
-
-  await user.click(screen.getByRole('button', { name: 'Next' }));
-
-  expect(screen.getByLabelText('Collapse step icon')).toBeVisible();
-});
-
-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.queryByLabelText('step icon', { exact: false })).toBeVisible();
-});
-
-test('incrementally shows/hides steps based on the activeStep when isProgressive is enabled', async () => {
-  const user = userEvent.setup();
-
-  render(
-    <Wizard isProgressive>
-      <WizardStep id="step-1" name="Test step 1">
-        Step 1 content
-      </WizardStep>
-      <WizardStep id="step-2" name="Test step 2">
-        Step 2 content
-      </WizardStep>
-      <WizardStep id="step-3" name="Test step 3">
-        Step 3 content
-      </WizardStep>
-    </Wizard>
-  );
-
-  const nextButton = screen.getByRole('button', {
-    name: 'Next'
-  });
-  const backButton = screen.getByRole('button', {
-    name: 'Back'
-  });
-
-  // Initially only the first nav item will be visible
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 1'
-    })
-  ).toBeVisible();
-  expect(
-    screen.queryByRole('button', {
-      name: 'Test step 2'
-    })
-  ).toBeNull();
-  expect(
-    screen.queryByRole('button', {
-      name: 'Test step 3'
-    })
-  ).toBeNull();
-
-  // Progressing to the next step will show steps 1 & 2
-  await user.click(nextButton);
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 1, visited'
-    })
-  ).toBeVisible();
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 2'
-    })
-  ).toBeVisible();
-  expect(
-    screen.queryByRole('button', {
-      name: 'Test step 3'
-    })
-  ).toBeNull();
-
-  // Progressing to the next step will show all steps
-  await user.click(nextButton);
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 1, visited'
-    })
-  ).toBeVisible();
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 2, visited'
-    })
-  ).toBeVisible();
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 3'
-    })
-  ).toBeVisible();
-
-  // Going back a step will hide step 3
-  await user.click(backButton);
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 1, visited'
-    })
-  ).toBeVisible();
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 2'
-    })
-  ).toBeVisible();
-  expect(
-    screen.queryByRole('button', {
-      name: 'Test step 3'
-    })
-  ).toBeNull();
-
-  // Going back a step will hide step 2 & 3
-  await user.click(backButton);
-  expect(
-    screen.getByRole('button', {
-      name: 'Test step 1'
-    })
-  ).toBeVisible();
-  expect(
-    screen.queryByRole('button', {
-      name: 'Test step 2'
-    })
-  ).toBeNull();
-  expect(
-    screen.queryByRole('button', {
-      name: 'Test step 3'
-    })
-  ).toBeNull();
-});
-
-test('parent step can be non-collapsible by setting isCollapsible to false', () => {
-  render(
-    <Wizard>
-      <WizardStep
-        id="step-1"
-        name="Test step 1"
-        isCollapsible={false}
-        steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
-      />
-    </Wizard>
-  );
-
-  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
-});