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

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();
-});

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

@@ -1,176 +0,0 @@
----
-id: Wizard
-section: components
-cssPrefix: pf-c-wizard
-propComponents:
-  [
-    'Wizard',
-    'WizardFooter',
-    'WizardFooterWrapper',
-    'WizardToggle',
-    'WizardStep',
-    'WizardBody',
-    'WizardHeader',
-    'WizardNav',
-    'WizardNavItem',
-    'WizardContextProps',
-    'WizardBasicStep',
-    'WizardParentStep',
-    'WizardSubStep',
-  ]
-beta: true
----
-
-import {
-FormGroup,
-TextInput,
-Drawer,
-DrawerContent,
-Button,
-Title,
-Flex,
-Checkbox,
-DrawerPanelContent,
-DrawerColorVariant,
-DrawerHead,
-DrawerActions,
-DrawerCloseButton
-} from '@patternfly/react-core';
-import {
-Wizard,
-WizardFooter,
-WizardFooterWrapper,
-WizardToggle,
-WizardStep,
-WizardBody,
-useWizardFooter,
-useWizardContext,
-WizardNavItem,
-WizardNav,
-WizardHeader
-} from '@patternfly/react-core/next';
-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';
-
-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.
-
-## Examples
-
-### Basic
-
-```ts file="./WizardBasic.tsx"
-```
-
-### Basic with disabled steps
-
-```ts file="./WizardBasicDisabledSteps.tsx"
-```
-
-### Anchors for nav items
-
-```ts file="./WizardWithNavAnchors.tsx"
-```
-
-### Incrementally enabled steps
-
-```ts file="./WizardStepVisitRequired.tsx"
-```
-
-### Expandable steps
-
-```ts file="./WizardExpandableSteps.tsx"
-```
-
-### Progress after submission
-
-```ts file="./WizardWithSubmitProgress.tsx"
-```
-
-### Enabled on form validation
-
-```ts file="./WizardEnabledOnFormValidation.tsx"
-```
-
-### Validate on button press
-
-```ts file="./WizardValidateOnButtonPress.tsx"
-```
-
-### Progressive steps
-
-```ts file="./WizardProgressiveSteps.tsx"
-```
-
-### Get current step
-
-```ts file="./WizardGetCurrentStep.tsx"
-```
-
-### Within modal
-
-```ts file="./WizardWithinModal.tsx"
-```
-
-### Step drawer content
-
-```ts file="./WizardStepDrawerContent.tsx"
-```
-
-### Custom navigation
-
-```ts file="./WizardWithCustomNav.tsx"
-```
-
-### Header
-
-```ts file="./WizardWithHeader.tsx"
-```
-
-### Custom footer
-
-```ts file="./WizardWithCustomFooter.tsx"
-```
-
-### Custom navigation item
-
-```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/next/components/Wizard/examples/WizardBasic.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Wizard, WizardStep } from '@patternfly/react-core/next';
-
-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>
-);