@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.7

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

@@ -18,21 +18,6 @@ test('renders step when child is of type WizardStep', () => {
   expect(screen.getByText('Step content')).toBeVisible();
 });
 
-test('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();
-});
-
 test('renders a header when specified', () => {
   render(
     <Wizard header="Some header">
@@ -101,7 +86,7 @@ test('renders default nav with custom props', () => {
   };
 
   render(
-    <Wizard id="wizard-id" nav={nav} isStepVisitRequired>
+    <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>
@@ -111,7 +96,6 @@ test('renders default nav with custom props', () => {
 
   expect(navElement).toBeVisible();
   expect(navElement).toHaveAttribute('aria-labelledby', 'wizard-id');
-  expect(screen.getByRole('button', { name: 'Test step 1, visited' }).parentElement).toHaveClass('pf-m-expandable');
   expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
 });
 
@@ -183,7 +167,7 @@ test('calls onNavByIndex on nav item click', async () => {
   const onNavByIndex = jest.fn();
 
   render(
-    <Wizard onNavByIndex={onNavByIndex}>
+    <Wizard onStepChange={onNavByIndex}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -199,7 +183,7 @@ test('calls onNext and not onSave on next button click when not on the last step
   const onSave = jest.fn();
 
   render(
-    <Wizard onNext={onNext} onSave={onSave}>
+    <Wizard onStepChange={onNext} onSave={onSave}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -216,7 +200,7 @@ test('calls onBack on back button click', async () => {
   const onBack = jest.fn();
 
   render(
-    <Wizard onBack={onBack}>
+    <Wizard onStepChange={onBack}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -298,13 +282,18 @@ test('does not render inactive step content', async () => {
   expect(screen.getByText('Step 2 content')).toBeVisible();
 });
 
-test('parent steps have collapsed sub-steps by default unless the step is active', async () => {
+test('parent steps have collapsed sub-steps when isExpandable is true unless the step is active', async () => {
   const user = userEvent.setup();
 
   render(
-    <Wizard startIndex={2}>
+    <Wizard>
       <WizardStep id="step-1" name="Test step 1" />
-      <WizardStep id="step-2" name="Test step 2" steps={[<WizardStep id="sub-step-1" name="Test sub step 1" />]} />
+      <WizardStep
+        id="step-2"
+        name="Test step 2"
+        isExpandable
+        steps={[<WizardStep id="sub-step-1" name="Test sub step 1" />]}
+      />
     </Wizard>
   );
 
@@ -315,6 +304,135 @@ test('parent steps have collapsed sub-steps by default unless the step is active
   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>

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

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { WizardStep, WizardStepProps } from '../WizardStep';
 import * as WizardContext from '../WizardContext';
-import { WizardControlStep } from '..';
+import { WizardStepType } from '..';
 
 const testStepProps: WizardStepProps = {
   id: 'test-step',
@@ -12,7 +12,7 @@ const testStepProps: WizardStepProps = {
   footer: <>Step footer</>
 };
 
-const testStep: WizardControlStep = {
+const testStep: WizardStepType = {
   ...testStepProps,
   index: 1
 };
@@ -24,9 +24,9 @@ const wizardContext: WizardContext.WizardContextProps = {
   steps: [testStep],
   activeStep: testStep,
   footer: <>Wizard footer</>,
-  onNext: jest.fn(),
-  onBack: jest.fn(),
-  onClose: jest.fn(),
+  goToNextStep: jest.fn(),
+  goToPrevStep: jest.fn(),
+  close: jest.fn(),
   goToStepById: jest.fn(),
   goToStepByName: jest.fn(),
   goToStepByIndex: jest.fn(),

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

@@ -5,9 +5,9 @@ import userEvent from '@testing-library/user-event';
 
 import { KeyTypes } from '../../../../helpers';
 import { WizardToggle, WizardToggleProps } from '../WizardToggle';
-import { WizardControlStep } from '../types';
+import { WizardStepType } from '../types';
 
-const steps: WizardControlStep[] = [
+const steps: WizardStepType[] = [
   { id: 'id-1', name: 'First step', index: 1, component: <>First step content</> },
   { id: 'id-2', name: 'Second step', index: 2, component: <>Second step content</> }
 ];

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

@@ -5,11 +5,11 @@ import { buildSteps } from '../utils';
 import { WizardStep } from '../WizardStep';
 
 describe('buildSteps', () => {
-  test('throws error if child does not have required props or type of WizardStep', () => {
+  test('throws error if child is not of type WizardStep', () => {
     try {
       buildSteps(<div />);
     } catch (error) {
-      expect(error.message).toEqual('Wizard only accepts children with required WizardStepProps.');
+      expect(error.message).toEqual('Wizard only accepts children of type WizardStep.');
     }
   });
 
@@ -17,7 +17,7 @@ describe('buildSteps', () => {
     try {
       buildSteps('test' as any);
     } catch (error) {
-      expect(error.message).toEqual('Wizard only accepts children with required WizardStepProps.');
+      expect(error.message).toEqual('Wizard only accepts children of type WizardStep.');
     }
   });
 
@@ -30,20 +30,6 @@ describe('buildSteps', () => {
     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} />;
 

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

@@ -6,6 +6,7 @@ propComponents:
   [
     'Wizard',
     'WizardFooter',
+    'WizardFooterWrapper',
     'WizardToggle',
     'WizardStep',
     'WizardBody',
@@ -16,7 +17,6 @@ propComponents:
     'WizardBasicStep',
     'WizardParentStep',
     'WizardSubStep',
-    'WizardNavStepData',
   ]
 beta: true
 ---
@@ -49,6 +49,9 @@ 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.
 
@@ -59,64 +62,89 @@ PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a mo
 ```ts file="./WizardBasic.tsx"
 ```
 
-### Custom navigation
+### Basic with disabled steps
 
-The `Wizard`'s `nav` property can be used to build your own navigation.
+```ts file="./WizardBasicDisabledSteps.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
-export type CustomWizardNavFunction = (
-  isExpanded: boolean,
-  steps: WizardControlStep[],
-  activeStep: WizardControlStep,
-  goToStepByIndex: (index: number) => void
-) => React.ReactElement<WizardNavProps>;
+### Anchors for nav items
 
-/** Encompasses all step type variants that are internally controlled by the Wizard */
-type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
+```ts file="./WizardWithNavAnchors.tsx"
 ```
 
-```ts file="./WizardCustomNav.tsx"
+### Incrementally enabled steps
+
+```ts file="./WizardStepVisitRequired.tsx"
 ```
 
-### Kitchen sink
+### Expandable steps
 
-Includes the following:
+```ts file="./WizardExpandableSteps.tsx"
+```
 
-- Header
-- Custom footer
-- Sub-steps
-- Step content with a drawer
-- Custom navigation item
-- Disabled navigation items until visited
-- Action to toggle visibility of a step
-- Action to toggle navigation item error status
+### Progress after submission
 
-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).
+```ts file="./WizardWithSubmitProgress.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
-type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void | Promise<void>;
+### Enabled on form validation
 
-/** Data returned for either parameter of WizardNavStepFunction */
-type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
+```ts file="./WizardEnabledOnFormValidation.tsx"
 ```
 
-#
+### Validate on button press
 
-The `WizardStep`'s `navItem` property can be used to build your own nav item for that step.
+```ts file="./WizardValidateOnButtonPress.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navItem. */
-export type CustomWizardNavItemFunction = (
-  step: WizardControlStep,
-  activeStep: WizardControlStep,
-  steps: WizardControlStep[],
-  goToStepByIndex: (index: number) => void
-) => React.ReactElement<WizardNavItemProps>;
+### 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"
 ```
 
-```ts file="./WizardKitchenSink.tsx"
+### Toggle step visibility
+
+```ts file="./WizardToggleStepVisibility.tsx"
+```
+
+### Step error status
+
+```ts file="./WizardStepErrorStatus.tsx"
 ```
 
 ## Hooks

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

@@ -2,21 +2,15 @@ import React from 'react';
 import { Wizard, WizardStep } from '@patternfly/react-core/next';
 
 export const WizardBasic: React.FunctionComponent = () => (
-  <Wizard height={400}>
-    <WizardStep name="First step" id="basic-first-step">
-      <p>Step 1 content</p>
+  <Wizard height={400} title="Basic wizard">
+    <WizardStep name="Step 1" id="basic-first-step">
+      Step 1 content
     </WizardStep>
-    <WizardStep name="Second step" id="basic-second-step">
-      <p>Step 2 content</p>
-    </WizardStep>
-    <WizardStep name="Third step" id="basic-third-step">
-      <p>Step 3 content</p>
-    </WizardStep>
-    <WizardStep name="Fourth step" id="basic-fourth-step">
-      <p>Step 4 content</p>
+    <WizardStep name="Step 2" id="basic-second-step">
+      Step 2 content
     </WizardStep>
     <WizardStep name="Review" id="basic-review-step" footer={{ nextButtonText: 'Finish' }}>
-      <p>Review step content</p>
+      Review step content
     </WizardStep>
   </Wizard>
 );

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardBasicDisabledSteps: React.FunctionComponent = () => (
+  <Wizard height={400} title="Basic disabled wizard">
+    <WizardStep name="Step 1" id="bdisabled-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="bdisabled-second-step" isDisabled>
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Step 3" id="bdisabled-third-step">
+      Step 3 content
+    </WizardStep>
+    <WizardStep name="Step 4" id="bdisabled-fourth-step" isDisabled>
+      Step 4 content
+    </WizardStep>
+    <WizardStep name="Review" id="bdisabled-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+interface SampleFormProps {
+  value: string;
+  isValid: boolean;
+  setValue: (value: string) => void;
+  setIsValid: (isValid: boolean) => void;
+}
+
+const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {
+  const validated = isValid ? 'default' : 'error';
+
+  const handleTextInputChange = (value: string) => {
+    const isValid = /^\d+$/.test(value);
+
+    setValue(value);
+    setIsValid(isValid);
+  };
+
+  return (
+    <Form>
+      <FormGroup
+        label="Age:"
+        type="number"
+        helperText="Write your age in numbers."
+        helperTextInvalid="Age has to be a number"
+        fieldId="age"
+        validated={validated}
+      >
+        <TextInput
+          validated={validated}
+          value={value}
+          id="age"
+          aria-describedby="age-helper"
+          onChange={handleTextInputChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+
+export const WizardEnabledOnFormValidation: React.FunctionComponent = () => {
+  const [ageValue, setAgeValue] = React.useState('Thirty');
+  const [isSubAFormValid, setIsSubAFormValid] = React.useState(false);
+
+  const onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);
+
+  return (
+    <Wizard isVisitRequired height={400} title="Enabled on form validation wizard" onSave={onSave}>
+      <WizardStep name="Information" id="form-valid-info">
+        Information content
+      </WizardStep>
+      <WizardStep
+        name="Configuration"
+        id="form-valid-config"
+        steps={[
+          <WizardStep
+            name="Substep A with validation"
+            id="form-valid-sub-a"
+            key="form-valid-sub-a"
+            footer={{ isNextDisabled: !isSubAFormValid }}
+          >
+            <SampleForm
+              value={ageValue}
+              setValue={setAgeValue}
+              isValid={isSubAFormValid}
+              setIsValid={setIsSubAFormValid}
+            />
+          </WizardStep>,
+          <WizardStep name="Substep B" id="form-valid-sub-b" key="form-valid-sub-b">
+            Substep B content
+          </WizardStep>
+        ]}
+      />
+      <WizardStep name="Additional" id="form-valid-additional">
+        Additional step content
+      </WizardStep>
+      <WizardStep name="Review" id="form-valid-review" footer={{ nextButtonText: 'Submit form' }}></WizardStep>
+    </Wizard>
+  );
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardExpandableSteps: React.FunctionComponent = () => (
+  <Wizard height={400} title="Expandable steps wizard" nav={{ isExpanded: true }}>
+    <WizardStep
+      name="Step 1"
+      id="expand-steps-1"
+      isExpandable
+      steps={[
+        <WizardStep name="Substep A" id="expand-steps-sub-a" key="expand-steps-sub-a">
+          Substep A content
+        </WizardStep>,
+        <WizardStep name="Substep B" id="expand-steps-sub-b" key="expand-steps-sub-b">
+          Substep B content
+        </WizardStep>
+      ]}
+    />
+    <WizardStep name="Step 2" id="expand-steps-2">
+      Step 2 content
+    </WizardStep>
+    <WizardStep
+      name="Step 3"
+      id="expand-steps-3"
+      isExpandable
+      steps={[
+        <WizardStep name="Substep C" id="expand-steps-sub-c" key="expand-steps-sub-c">
+          Substep C content
+        </WizardStep>,
+        <WizardStep name="Substep D" id="expand-steps-sub-d" key="expand-steps-sub-d">
+          Substep D content
+        </WizardStep>
+      ]}
+    />
+    <WizardStep name="Step 4" id="expand-steps-4">
+      Step 4 content
+    </WizardStep>
+    <WizardStep name="Review" id="expand-steps-review" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);