@patternfly/react-core 4.274.0 → 4.275.0

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

@@ -11,12 +11,12 @@ import { WizardNavItem } from './WizardNavItem';
  * This component is not exposed to consumers.
  */
 
-interface WizardNavInternalProps extends Pick<WizardProps, 'isStepVisitRequired'> {
+interface WizardNavInternalProps extends Pick<WizardProps, 'isVisitRequired' | 'isProgressive'> {
   nav: Partial<WizardNavProps>;
   isNavExpanded: boolean;
 }
 
-export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: WizardNavInternalProps) => {
+export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavExpanded }: WizardNavInternalProps) => {
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const wizardNavProps: WizardNavProps = {
@@ -31,7 +31,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
     <WizardNav {...wizardNavProps}>
       {steps.map((step, stepIndex) => {
         const hasVisitedNextStep = steps.some(step => step.index > stepIndex + 1 && step.isVisited);
-        const isStepDisabled = step.isDisabled || (isStepVisitRequired && !step.isVisited && !hasVisitedNextStep);
+        const isStepDisabled = step.isDisabled || (isVisitRequired && !step.isVisited && !hasVisitedNextStep);
         const customStepNavItem = isCustomWizardNavItem(step.navItem) && (
           <React.Fragment key={step.id}>
             {typeof step.navItem === 'function' ? step.navItem(step, activeStep, steps, goToStepByIndex) : step.navItem}
@@ -46,7 +46,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
             const subStep = steps.find(step => step.id === subStepId);
             const hasVisitedNextStep = steps.some(step => step.index > subStep.index && step.isVisited);
             const isSubStepDisabled =
-              subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
+              subStep.isDisabled || (isVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
             const customSubStepNavItem = isCustomWizardNavItem(subStep.navItem) && (
               <React.Fragment key={subStep.id}>
                 {typeof subStep.navItem === 'function'
@@ -70,51 +70,59 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
               hasActiveChild = true;
             }
 
-            return (
-              customSubStepNavItem || (
-                <WizardNavItem
-                  key={subStep.id}
-                  id={subStep.id}
-                  content={subStep.name}
-                  isCurrent={activeStep?.id === subStep.id}
-                  isDisabled={isSubStepDisabled}
-                  isVisited={subStep.isVisited}
-                  stepIndex={subStep.index}
-                  onNavItemClick={goToStepByIndex}
-                  status={subStep.status}
-                  {...subStep.navItem}
-                />
-              )
-            );
+            if (!isProgressive || (isProgressive && subStep.index <= activeStep.index)) {
+              return (
+                customSubStepNavItem || (
+                  <WizardNavItem
+                    key={subStep.id}
+                    id={subStep.id}
+                    content={subStep.name}
+                    isCurrent={activeStep?.id === subStep.id}
+                    isDisabled={isSubStepDisabled}
+                    isVisited={subStep.isVisited}
+                    stepIndex={subStep.index}
+                    onClick={() => goToStepByIndex(subStep.index)}
+                    status={subStep.status}
+                    {...subStep.navItem}
+                  />
+                )
+              );
+            }
           });
           const hasEnabledChildren = React.Children.toArray(subNavItems).some(
             child => React.isValidElement(child) && !child.props.isDisabled
           );
 
-          return (
-            customStepNavItem || (
-              <WizardNavItem
-                key={step.id}
-                id={step.id}
-                content={step.name}
-                isExpandable={step.isCollapsible ?? true}
-                isCurrent={hasActiveChild}
-                isDisabled={!hasEnabledChildren}
-                isVisited={step.isVisited}
-                stepIndex={firstSubStepIndex}
-                onNavItemClick={goToStepByIndex}
-                status={step.status}
-                {...step.navItem}
-              >
-                <WizardNav {...wizardNavProps} isInnerList>
-                  {subNavItems}
-                </WizardNav>
-              </WizardNavItem>
-            )
-          );
+          if (!isProgressive || (isProgressive && step.index <= activeStep.index)) {
+            return (
+              customStepNavItem || (
+                <WizardNavItem
+                  key={step.id}
+                  id={step.id}
+                  content={step.name}
+                  isExpandable={step.isExpandable}
+                  isCurrent={hasActiveChild}
+                  isDisabled={!hasEnabledChildren}
+                  isVisited={step.isVisited}
+                  stepIndex={firstSubStepIndex}
+                  onClick={() => goToStepByIndex(firstSubStepIndex)}
+                  status={step.status}
+                  {...step.navItem}
+                >
+                  <WizardNav {...wizardNavProps} isInnerList>
+                    {subNavItems}
+                  </WizardNav>
+                </WizardNavItem>
+              )
+            );
+          }
         }
 
-        if (isWizardBasicStep(step) && !step.isHidden) {
+        if (
+          isWizardBasicStep(step) &&
+          !step.isHidden &&
+          (!isProgressive || (isProgressive && step.index <= activeStep.index))
+        ) {
           return (
             customStepNavItem || (
               <WizardNavItem
@@ -125,7 +133,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
                 isDisabled={isStepDisabled}
                 isVisited={step.isVisited}
                 stepIndex={step.index}
-                onNavItemClick={goToStepByIndex}
+                onClick={() => goToStepByIndex(step.index)}
                 status={step.status}
                 {...step.navItem}
               />

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

@@ -5,9 +5,10 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
+import { OUIAProps, useOUIAProps } from '../../../helpers';
 import { WizardNavItemStatus } from './types';
 
-export interface WizardNavItemProps {
+export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -21,11 +22,13 @@ export interface WizardNavItemProps {
   /** The step index passed into the onNavItemClick callback */
   stepIndex: number;
   /** Callback for when the navigation item is clicked */
-  onNavItemClick?: (stepIndex: number) => any;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, index: number) => any;
   /** Component used to render WizardNavItem */
-  navItemComponent?: 'button' | 'a';
+  component?: 'button' | 'a';
   /** An optional url to use for when using an anchor component */
   href?: string;
+  /** Where to display the linked URL when using an anchor component */
+  target?: React.HTMLAttributeAnchorTarget;
   /** Flag indicating that this NavItem has child steps and is expandable */
   isExpandable?: boolean;
   /** The id for the navigation item */
@@ -34,29 +37,31 @@ export interface WizardNavItemProps {
   status?: 'default' | 'error';
 }
 
-export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
+export const WizardNavItem = ({
   children = null,
   content = '',
   isCurrent = false,
   isDisabled = false,
   isVisited = false,
   stepIndex,
-  onNavItemClick = () => undefined,
-  navItemComponent = 'button',
-  href = null,
+  onClick,
+  component: NavItemComponent = 'button',
+  href,
   isExpandable = false,
   id,
   status = 'default',
-  ...rest
+  target,
+  ouiaId,
+  ouiaSafe = true
 }: WizardNavItemProps) => {
-  const NavItemComponent = navItemComponent;
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
 
   React.useEffect(() => {
     setIsExpanded(isCurrent);
   }, [isCurrent]);
 
-  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+  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');
   }
@@ -87,12 +92,13 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
       )}
     >
       <NavItemComponent
-        {...rest}
-        {...(navItemComponent === 'a' ? { tabIndex: isDisabled ? -1 : undefined, href } : { disabled: isDisabled })}
+        {...(NavItemComponent === 'a'
+          ? { tabIndex: isDisabled ? -1 : undefined, href, target }
+          : { disabled: isDisabled })}
         {...(id && { id: id.toString() })}
         onClick={e => {
-          e.preventDefault();
-          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(stepIndex);
+          e.stopPropagation();
+          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick?.(e, stepIndex);
         }}
         className={css(
           styles.wizardNavLink,
@@ -103,6 +109,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
         {...(ariaLabel && { 'aria-label': ariaLabel })}
+        {...ouiaProps}
       >
         {isExpandable ? (
           <>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardNavItemType } from './types';
+import { isWizardParentStep, WizardNavItemType } from './types';
 import { WizardBodyProps } from './WizardBody';
 import { useWizardContext } from './WizardContext';
 import { WizardFooterProps } from './WizardFooter';
@@ -15,7 +15,7 @@ export interface WizardStepProps {
   /** Unique identifier */
   id: string | number;
   /** Optional for when the step is used as a parent to sub-steps */
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
   body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'> | null;
   /** Optional list of sub-steps */
@@ -30,8 +30,8 @@ export interface WizardStepProps {
   footer?: React.ReactElement | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navigation item */
   status?: 'default' | 'error';
-  /** Flag to determine whether sub-steps can collapse or not */
-  isCollapsible?: boolean;
+  /** Flag to determine whether parent steps can expand or not. Defaults to false. */
+  isExpandable?: boolean;
 }
 
 export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepProps) => {
@@ -40,6 +40,8 @@ export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepP
 
   // Update step in context when props change or when the step is active has yet to be marked as visited.
   React.useEffect(() => {
+    const shouldUpdateIsVisited = !isWizardParentStep(activeStep) && id === activeStep?.id && !activeStep?.isVisited;
+
     setStep({
       id,
       name,
@@ -49,9 +51,9 @@ export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepP
       ...(navItem && { navItem }),
       ...(footer && { footer }),
       ...(status && { status }),
-      ...(id === activeStep?.id && !activeStep?.isVisited && { isVisited: true })
+      ...(shouldUpdateIsVisited && { isVisited: true })
     });
-  }, [body, footer, id, isDisabled, isHidden, name, navItem, status, activeStep?.id, activeStep?.isVisited, setStep]);
+  }, [body, footer, id, isDisabled, isHidden, name, navItem, status, activeStep, setStep]);
 
   return <>{children}</>;
 };

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

@@ -7,7 +7,7 @@ import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-ico
 
 import { KeyTypes } from '../../../helpers/constants';
 import { WizardNavProps, WizardBody, WizardStep, WizardStepProps } from '../Wizard';
-import { WizardControlStep, isWizardSubStep } from './types';
+import { WizardStepType, isWizardSubStep } from './types';
 
 /**
  * Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
@@ -15,9 +15,9 @@ import { WizardControlStep, isWizardSubStep } from './types';
 
 export interface WizardToggleProps {
   /** List of steps and/or sub-steps */
-  steps: WizardControlStep[];
+  steps: WizardStepType[];
   /** The current step */
-  activeStep: WizardControlStep;
+  activeStep: WizardStepType;
   /** Wizard footer */
   footer: React.ReactElement;
   /** Wizard navigation */
@@ -27,7 +27,7 @@ export interface WizardToggleProps {
   /** Flag to determine whether the dropdown navigation is expanded */
   isNavExpanded?: boolean;
   /** Callback to expand or collapse the dropdown navigation */
-  toggleNavExpanded?: () => void;
+  toggleNavExpanded?: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
 
 export const WizardToggle = ({
@@ -49,7 +49,7 @@ export const WizardToggle = ({
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
       if (isNavExpanded && event.key === KeyTypes.Escape) {
-        toggleNavExpanded?.();
+        toggleNavExpanded?.(event);
       }
     },
     [isNavExpanded, toggleNavExpanded]

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,17 +304,131 @@ 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 non-collapsible by setting isCollapsible to false', () => {
+test('parent step can be expandable by setting isExpandable to true', () => {
   render(
     <Wizard>
       <WizardStep
         id="step-1"
         name="Test step 1"
-        isCollapsible={false}
+        isExpandable
         steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
       />
     </Wizard>
   );
 
-  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
+  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();
 });

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} />;