From 30b1112216d6c8801b9d2bdcbf52c1cb9e9634cd Mon Sep 17 00:00:00 2001
From: Andy Vo <58367784+andyyvo@users.noreply.github.com>
Date: Wed, 21 Sep 2022 07:26:05 -0700
Subject: [PATCH] feat(ProgressStepper): updating description prop to ReactNode
 (#8017)

* feat(ProgressStepper): updating description prop to ReactNode

* feat(ProgressStepper): removed new example and added unit tests
---
 .../ProgressStepper/ProgressStep.tsx          |  2 +-
 .../__tests__/ProgressStepper.test.tsx        | 33 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx b/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx
index fd9f059f425..94aef5ecd2c 100644
--- a/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx
+++ b/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
diff --git a/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx b/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx
index a9827b49875..8c3b5b888a7 100644
--- a/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx
+++ b/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();
+});