@patternfly/react-core 6.0.0-alpha.85 → 6.0.0-alpha.87

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.84","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.86","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.84","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.86","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.84","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.86","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.85",
+  "version": "6.0.0-alpha.87",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.30",
-    "@patternfly/react-styles": "^6.0.0-alpha.29",
-    "@patternfly/react-tokens": "^6.0.0-alpha.29",
+    "@patternfly/react-icons": "^6.0.0-alpha.31",
+    "@patternfly/react-styles": "^6.0.0-alpha.30",
+    "@patternfly/react-tokens": "^6.0.0-alpha.30",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.187",
+    "@patternfly/patternfly": "6.0.0-alpha.190",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c3878e74a655cae5c081b3f2b799f060ccd47fed"
+  "gitHead": "8e897861592c3ee8b186f6aef3958741073312e7"
 }

package/src/components/Page/Page.tsx

@@ -94,6 +94,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
   breadcrumbProps?: PageBreadcrumbProps;
+  /** Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property. */
+  isContentFilled?: boolean;
 }
 
 export interface PageState {
@@ -249,6 +251,7 @@ class Page extends React.Component<PageProps, PageState> {
       additionalGroupedContent,
       groupProps,
       breadcrumbProps,
+      isContentFilled,
       ...rest
     } = this.props;
     const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
@@ -294,7 +297,7 @@ class Page extends React.Component<PageProps, PageState> {
     const Component: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
-      <div className={css(styles.pageMainContainer)}>
+      <div className={css(styles.pageMainContainer, isContentFilled && styles.modifiers.fill)}>
         <Component
           ref={this.mainRef}
           role={role}

package/src/components/Page/PageGroup.tsx

@@ -17,6 +17,8 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** Enables the page group to fill the available vertical space if true, or disable filling if false. */
+  isFilled?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the bottom */
@@ -31,6 +33,7 @@ export const PageGroup = ({
   className = '',
   children,
   stickyOnBreakpoint,
+  isFilled,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
@@ -52,6 +55,8 @@ export const PageGroup = ({
       className={css(
         styles.pageMainGroup,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        isFilled === false && styles.modifiers.noFill,
+        isFilled === true && styles.modifiers.fill,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,

package/src/components/Page/PageSection.tsx

@@ -27,7 +27,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'secondary';
   /** Section type variant */
   type?: 'default' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
-  /** Enables the page section to fill the available vertical space */
+  /** Enables the page section to fill the available vertical space if true, or disable filling if false. */
   isFilled?: boolean;
   /** Limits the width of the section */
   isWidthLimited?: boolean;

package/src/components/Page/__tests__/Page.test.tsx

@@ -13,6 +13,8 @@ import { PageBreadcrumb } from '../PageBreadcrumb';
 import { PageGroup } from '../PageGroup';
 import { Masthead } from '../../Masthead';
 
+import styles from '@patternfly/react-styles/css/components/Page/page';
+
 const props = {
   'aria-label': 'Page layout',
   id: 'PageId',
@@ -352,4 +354,23 @@ describe('Page', () => {
     expect(screen.getByTestId('page-test-id')).toHaveAttribute('id', props.id);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isContentFilled is not passed`, () => {
+    render(<Page {...props} role="main"></Page>);
+
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.fill);
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
+  });
+
+  test(`Renders with ${styles.modifiers.fill} if isContentFilled={true} is passed`, () => {
+    render(<Page {...props} role="main" isContentFilled={true}></Page>);
+
+    expect(screen.getByRole('main').parentElement).toHaveClass(styles.modifiers.fill);
+  });
+
+  test(`Does not render with ${styles.modifiers.noFill} if isContentFilled={false} is passed`, () => {
+    render(<Page {...props} role="main" isContentFilled={false}></Page>);
+
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
+  });
 });

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PageGroup } from '../PageGroup';
+import styles from '@patternfly/react-styles/css/components/Page/page';
 
 describe('page group', () => {
   test('Verify basic render', () => {
@@ -71,4 +72,23 @@ describe('page group', () => {
 
     expect(consoleWarning).toHaveBeenCalled();
   });
+
+  test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => {
+    render(<PageGroup>test</PageGroup>);
+
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.fill);
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noFill);
+  });
+
+  test(`Renders with ${styles.modifiers.fill} if isFilled={true} is passed`, () => {
+    render(<PageGroup isFilled={true}>test</PageGroup>);
+
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers.fill);
+  });
+
+  test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => {
+    render(<PageGroup isFilled={false}>test</PageGroup>);
+
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers.noFill);
+  });
 });

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -153,3 +153,30 @@ test('Does not render with PageBody wrapper when hasBodyWrapper is false', () =>
 
   expect(screen.getByText('test')).not.toHaveClass(styles.pageMainBody);
 });
+
+test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => {
+  render(<PageSection component="main">test</PageSection>);
+
+  expect(screen.getByRole('main')).not.toHaveClass(styles.modifiers.fill);
+  expect(screen.getByRole('main')).not.toHaveClass(styles.modifiers.noFill);
+});
+
+test(`Renders with ${styles.modifiers.fill} if isFilled={true} is passed`, () => {
+  render(
+    <PageSection component="main" isFilled={true}>
+      test
+    </PageSection>
+  );
+
+  expect(screen.getByRole('main')).toHaveClass(styles.modifiers.fill);
+});
+
+test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => {
+  render(
+    <PageSection component="main" isFilled={false}>
+      test
+    </PageSection>
+  );
+
+  expect(screen.getByRole('main')).toHaveClass(styles.modifiers.noFill);
+});

package/src/components/Page/examples/Page.md

@@ -62,9 +62,9 @@ When the `isManagedSidebar` property is true, it manages the sidebar open/close
 
 ### Filled page sections
 
-By default, the last page section is "filled", meaning it fills the available vertical space of a page.
+By default, page sections will not expand to fill in the available vertical space in a page.
 
-To change the default behavior, use the `isFilled` property. To make other page sections "filled", set `isFilled` equal to "true". To disable the last page section from being "filled", set `isFilled` equal to "false".
+To change this default behavior, pass `isContentFilled` to the `<Page>` component and `isFilled={true}` to any child `<PageSection>` or `<PageGroup>` component that you want to fill the space. If multiple components are set to fill, then the available space will be split equally between them.
 
 ```ts file="./PageWithOrWithoutFill.tsx"
 

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -60,13 +60,12 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
   );
 
   return (
-    <Page masthead={masthead} sidebar={sidebar}>
+    <Page isContentFilled masthead={masthead} sidebar={sidebar}>
       <PageSection>A default page section</PageSection>
-      <PageSection isFilled={true}>This section fills the available space.</PageSection>
-      <PageSection isFilled={false}>
-        This section is set to not fill the available space, since the last page section is set to fill the available
-        space by default.
+      <PageSection isFilled={true} variant="secondary">
+        This section fills the available space.
       </PageSection>
+      <PageSection>A default page section</PageSection>
     </Page>
   );
 };

package/src/components/Wizard/Wizard.tsx

@@ -92,10 +92,12 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
-  // When children change, active step index should reset
+  // When the number of steps changes and pushes activeStepIndex out of bounds, reset back to startIndex
   React.useEffect(() => {
-    setActiveStepIndex(startIndex);
-  }, [children, startIndex]);
+    if (activeStepIndex > initialSteps.length) {
+      setActiveStepIndex(startIndex);
+    }
+  }, [initialSteps, activeStepIndex, startIndex]);
 
   const focusMainContentElement = () =>
     setTimeout(() => {

package/src/components/Wizard/WizardContext.tsx

@@ -74,10 +74,20 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
-  // Callback to update steps if they change after initial render
+  // Callback to update steps if the overall step number changes
   React.useEffect(() => {
-    setCurrentSteps(initialSteps);
-  }, [initialSteps]);
+    if (currentSteps.length !== initialSteps.length) {
+      const newSteps = initialSteps.map((newStep) => {
+        const currentStepMatch = currentSteps.find((step) => step.id === newStep.id);
+        // If an existing step has the same id as a new step, carry over props
+        if (currentStepMatch) {
+          return { ...currentStepMatch, ...newStep };
+        }
+        return newStep;
+      });
+      setCurrentSteps(newSteps);
+    }
+  }, [currentSteps, initialSteps]);
 
   // Combined initial and current state steps
   const steps = React.useMemo(
@@ -130,7 +140,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
           }
-
           return prevStep;
         })
       ),

package/src/components/Wizard/WizardNavItem.tsx

@@ -4,6 +4,7 @@ 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 ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
@@ -38,7 +39,7 @@ export interface WizardNavItemProps
   /** The id for the navigation item */
   id?: string | number;
   /** Used to determine the icon displayed next to content. Default has no icon. */
-  status?: 'default' | 'error';
+  status?: 'default' | 'error' | 'success';
 }
 
 export const WizardNavItem = ({
@@ -96,18 +97,20 @@ export const WizardNavItem = ({
           styles.wizardNavLink,
           isCurrent && styles.modifiers.current,
           isDisabled && styles.modifiers.disabled,
-          status === WizardNavItemStatus.Error && styles.modifiers.danger
+          status === WizardNavItemStatus.Error && styles.modifiers.danger,
+          status === WizardNavItemStatus.Success && styles.modifiers.success
         )}
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
         {...ouiaProps}
       >
-        {status === WizardNavItemStatus.Error && (
+        {status !== WizardNavItemStatus.Default && (
           <>
             <span className="pf-v6-screen-reader">, {status}</span>
             <span className={css(styles.wizardNavLinkStatusIcon)}>
-              <ExclamationCircleIcon />
+              {status === WizardNavItemStatus.Error && <ExclamationCircleIcon />}
+              {status === WizardNavItemStatus.Success && <CheckCircleIcon />}
             </span>
           </>
         )}

package/src/components/Wizard/WizardStep.tsx

@@ -29,7 +29,7 @@ export interface WizardStepProps {
   /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
   footer?: React.ReactElement | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navigation item */
-  status?: 'default' | 'error';
+  status?: 'default' | 'error' | 'success';
   /** Flag to determine whether parent steps can expand or not. Defaults to false. */
   isExpandable?: boolean;
 }

package/src/components/Wizard/WizardToggle.tsx

@@ -5,6 +5,7 @@ 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 ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 import { KeyTypes } from '../../helpers/constants';
 import { WizardStepType, isWizardSubStep } from './types';
@@ -91,12 +92,24 @@ export const WizardToggle = ({
         aria-expanded={isNavExpanded}
       >
         <span className={css(styles.wizardToggleList)}>
-          <span className={css(styles.wizardToggleListItem, isActiveStepStatus === 'error' && styles.modifiers.danger)}>
-            {isActiveStepStatus === 'error' ? (
+          <span
+            className={css(
+              styles.wizardToggleListItem,
+              isActiveStepStatus === 'error' && styles.modifiers.danger,
+              isActiveStepStatus === 'success' && styles.modifiers.success
+            )}
+          >
+            {isActiveStepStatus === 'error' && (
               <span className={css(styles.wizardToggleStatusIcon)}>
                 <ExclamationCircleIcon />
               </span>
-            ) : (
+            )}
+            {isActiveStepStatus === 'success' && (
+              <span className={css(styles.wizardToggleStatusIcon)}>
+                <CheckCircleIcon />
+              </span>
+            )}
+            {isActiveStepStatus !== 'success' && isActiveStepStatus !== 'error' && (
               <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>
             )}{' '}
             {parentStep?.name || activeStep?.name}

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

@@ -59,3 +59,9 @@ test(`Renders screen reader text and danger icon when status is error`, () => {
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.danger);
   expect(screen.getByText(', error')).toBeInTheDocument();
 });
+
+test(`Renders screen reader text and success icon when status is success`, () => {
+  render(<WizardNavItem status="success" />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.success);
+  expect(screen.getByText(', success')).toBeInTheDocument();
+});

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

@@ -70,4 +70,6 @@ test('updates "navItem" in context when the value changes', () => {
 test('updates "status" in context when the value changes', () => {
   render(<WizardStep {...testStep} status="error" />);
   expect(setStep).toHaveBeenCalledWith({ ...testStepProps, status: 'error', isVisited: true });
+  render(<WizardStep {...testStep} status="success" />);
+  expect(setStep).toHaveBeenCalledWith({ ...testStepProps, status: 'success', isVisited: true });
 });

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

@@ -165,9 +165,9 @@ To focus the main content element of the `Wizard`, pass in the `shouldFocusConte
 
 ```
 
-### Step error status
+### Step status
 
-```ts file="./WizardStepErrorStatus.tsx"
+```ts file="./WizardStepStatus.tsx"
 
 ```
 

package/src/components/Wizard/examples/WizardStepStatus.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { Radio, Wizard, WizardStep } from '@patternfly/react-core';
+
+interface SomeContextProps {
+  errorMessage: string | undefined;
+  setErrorMessage(error: string | undefined): void;
+  successMessage: string | undefined;
+  setSuccessMessage(error: string | undefined): void;
+}
+type SomeContextRenderProps = Pick<SomeContextProps, 'successMessage', 'errorMessage'>;
+interface SomeContextProviderProps {
+  children: (context: SomeContextRenderProps) => React.ReactElement;
+}
+
+const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+
+const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
+  const [errorMessage, setErrorMessage] = React.useState<string>();
+  const [successMessage, setSuccessMessage] = React.useState<string>();
+
+  return (
+    <SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}>
+      {children({ errorMessage, successMessage })}
+    </SomeContext.Provider>
+  );
+};
+
+const StepContentWithAction = () => {
+  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = React.useContext(SomeContext);
+
+  return (
+    <>
+      <Radio
+        label="Give step 1 an error status"
+        isChecked={!!errorMessage}
+        onChange={(_event, checked) => {
+          setErrorMessage(checked ? 'Some error message' : undefined);
+          setSuccessMessage(!checked ? 'Some error message' : undefined);
+        }}
+        id="toggle-error-checkbox"
+        name="Toggle Status"
+      />
+      <Radio
+        label="Give step 1 a success status"
+        isChecked={!!successMessage}
+        onChange={(_event, checked) => {
+          setSuccessMessage(checked ? 'Some success message' : undefined);
+          setErrorMessage(!checked ? 'Some success message' : undefined);
+        }}
+        id="toggle-success-checkbox"
+        name="Toggle Status"
+      />
+    </>
+  );
+};
+
+export const WizardStepStatus: React.FunctionComponent = () => (
+  <SomeContextProvider>
+    {({ errorMessage, successMessage }) => {
+      let status = 'default';
+      if (errorMessage) {
+        status = 'error';
+      } else if (successMessage) {
+        status = 'success';
+      }
+      return (
+        <Wizard height={400} title="Step status wizard">
+          <WizardStep status={status} id="status-step-1" name="Step 1">
+            Step 1 content
+          </WizardStep>
+          <WizardStep name="Status step" id="error-status-step-2">
+            <StepContentWithAction />
+          </WizardStep>
+          <WizardStep name="Review" id="status-review-step" footer={{ nextButtonText: 'Finish' }}>
+            Review step content
+          </WizardStep>
+        </Wizard>
+      );
+    }}
+  </SomeContextProvider>
+);

package/src/components/Wizard/types.tsx

@@ -23,12 +23,13 @@ export interface WizardBasicStep {
   /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
   footer?: React.ReactElement | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navItem */
-  status?: 'default' | 'error';
+  status?: 'default' | 'error' | 'success';
 }
 
 export enum WizardNavItemStatus {
   Default = 'default',
-  Error = 'error'
+  Error = 'error',
+  Success = 'success'
 }
 
 /** Type for customizing a button (next, back or cancel) in a Wizard footer. It omits some props which either have a default value or are passed directly via WizardFooterProps. */

package/src/components/Wizard/examples/WizardStepErrorStatus.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';
-
-interface SomeContextProps {
-  errorMessage: string | undefined;
-  setErrorMessage(error: string | undefined): void;
-}
-type SomeContextRenderProps = Pick<SomeContextProps, 'errorMessage'>;
-interface SomeContextProviderProps {
-  children: (context: SomeContextRenderProps) => React.ReactElement;
-}
-
-const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
-
-const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
-  const [errorMessage, setErrorMessage] = React.useState<string>();
-
-  return (
-    <SomeContext.Provider value={{ errorMessage, setErrorMessage }}>{children({ errorMessage })}</SomeContext.Provider>
-  );
-};
-
-const StepContentWithAction = () => {
-  const { errorMessage, setErrorMessage } = React.useContext(SomeContext);
-
-  return (
-    <Checkbox
-      label="Give step 1 an error status"
-      isChecked={!!errorMessage}
-      onChange={(_event, checked) => setErrorMessage(checked ? 'Some error message' : undefined)}
-      id="toggle-error-checkbox"
-      name="Toggle Error Checkbox"
-    />
-  );
-};
-
-export const WizardStepErrorStatus: React.FunctionComponent = () => (
-  <SomeContextProvider>
-    {({ errorMessage }) => (
-      <Wizard height={400} title="Step error status wizard">
-        <WizardStep status={errorMessage ? 'error' : 'default'} id="error-status-step-1" name="Step 1">
-          Step 1 content
-        </WizardStep>
-        <WizardStep name="Error action step" id="error-status-step-2">
-          <StepContentWithAction />
-        </WizardStep>
-        <WizardStep name="Review" id="error-status-review-step" footer={{ nextButtonText: 'Finish' }}>
-          Review step content
-        </WizardStep>
-      </Wizard>
-    )}
-  </SomeContextProvider>
-);