feat(Wizard): implement success status on steps / nav items

packages/react-core/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>
           </>
         )}

packages/react-core/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;
 }

packages/react-core/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';
@@ -92,12 +93,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}

packages/react-core/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();
+});

packages/react-core/src/components/Wizard/__tests__/WizardStep.test.tsx

@@ -75,4 +75,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 });
 });

packages/react-core/src/components/Wizard/examples/Wizard.md

@@ -167,9 +167,9 @@ If a `WizardStep` is passed a `body={null}` property, you must manually handle f
 
 ```
 
-### Step error status
+### Step status
 
-```ts file="./WizardStepErrorStatus.tsx"
+```ts file="./WizardStepStatus.tsx"
 
 ```
 

packages/react-core/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>
+);

packages/react-core/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. */