feat(ProgressStepper): updating description prop to ReactNode (#8017)

* feat(ProgressStepper): updating description prop to ReactNode * feat(ProgressStepper): removed new example and added unit tests
patternfly · Sep 21, 2022 · 30b1112 · 30b1112
1 parent 69c858f
commit 30b1112
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git 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
@@ -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();
+});