feat(ProgressStepper): updating description prop to ReactNode

packages/react-core/src/components/ProgressStepper/ProgressStep.tsx

@@ -19,7 +19,7 @@ export interface ProgressStepProps
   /** Custom icon of a progress step. Will override default icons provided by the variant. */
   icon?: React.ReactNode;
   /** Description text of a progress step. */
-  description?: string;
+  description?: React.ReactNode;
   /** ID of the title of the progress step. */
   titleId?: string;
   /** Accessible label for the progress step. Should communicate all information being communicated by the progress

packages/react-core/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ProgressStepper } from '../ProgressStepper';
 import { ProgressStep } from '../ProgressStep';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
@@ -110,3 +110,34 @@ describe('ProgressStep', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+test('renders description class and text', () => {
+  render(
+    <ProgressStep
+      description="Test description"
+    >
+      Title
+    </ProgressStep>
+  );
+
+  expect(screen.getByText('Test description')).toBeVisible();
+  expect(screen.getByText('Test description')).toHaveClass('pf-c-progress-stepper__step-description');
+});
+
+test('renders description line break', () => {
+  render(
+    <ProgressStep
+      description={
+        <>
+          Testing description
+          <br />
+          Line break
+        </>
+      }
+      >
+        Title
+      </ProgressStep>
+  );
+
+  expect(screen.getByText("Testing descriptionLine break")).toBeVisible();
+});