feat(Progress): added helper text (#8307)

* feat(Progress): added helper text

* enabled custom components to be passed as children of ProgressHelperText

* spread props in ProgressHelperText

* improved prop description

* removed default isLiveRegion

* marked helper text prop as beta

* marked example as beta

* added custom component example

* refactored to make ProgressHelperText a basic wrapper component

* added locally defined capitalize function

Author: wise-king-sullyman

packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HelperTextProps } from '../';
+
+export const HelperText = ({ children, isLiveRegion }: HelperTextProps) => (
+  <>
+    <div data-testid="helper-text-children-container">{children}</div>
+    <p>{`isLiveRegion: ${isLiveRegion}`}</p>
+  </>
+);

packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HelperTextItemProps } from '../';
+
+export const HelperTextItem = ({ children, variant }: HelperTextItemProps) => (
+  <>
+    <div data-testid="helper-text-item-children-container">{children}</div>
+    <p>{`variant: ${variant}`}</p>
+  </>
+);

packages/react-core/src/components/HelperText/__mocks__/index.ts

@@ -0,0 +1,2 @@
+export * from './HelperText';
+export * from './HelperTextItem';

packages/react-core/src/components/Progress/Progress.tsx

@@ -42,6 +42,10 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
+  /** @beta Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  helperText?: React.ReactNode;
 }
 
 export class Progress extends React.Component<ProgressProps> {
@@ -85,6 +89,7 @@ export class Progress extends React.Component<ProgressProps> {
       tooltipPosition,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      helperText,
       ...props
     } = this.props;
 
@@ -137,6 +142,7 @@ export class Progress extends React.Component<ProgressProps> {
           progressBarAriaProps={progressBarAriaProps}
           isTitleTruncated={isTitleTruncated}
           tooltipPosition={tooltipPosition}
+          helperText={helperText}
         />
       </div>
     );

packages/react-core/src/components/Progress/ProgressContainer.tsx

@@ -6,6 +6,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { AriaProps, ProgressBar } from './ProgressBar';
+import { ProgressHelperText } from './ProgressHelperText';
 
 export enum ProgressMeasureLocation {
   outside = 'outside',
@@ -53,6 +54,10 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  helperText?: React.ReactNode;
 }
 
 const variantToIcon = {
@@ -70,7 +75,8 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   variant = null,
   measureLocation = ProgressMeasureLocation.top,
   isTitleTruncated = false,
-  tooltipPosition
+  tooltipPosition,
+  helperText
 }: ProgressContainerProps) => {
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = React.useState('');
@@ -117,6 +123,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
       <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>
+      {helperText && <ProgressHelperText>{helperText}</ProgressHelperText>}
     </React.Fragment>
   );
 };

packages/react-core/src/components/Progress/ProgressHelperText.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import progressStyle from '@patternfly/react-styles/css/components/Progress/progress';
+
+export interface ProgressHelperTextProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  children?: React.ReactNode;
+}
+
+export const ProgressHelperText: React.FunctionComponent<ProgressHelperTextProps> = ({
+  children,
+  ...props
+}: ProgressHelperTextProps) => (
+  <div className={progressStyle.progressHelperText} {...props}>
+    {children}
+  </div>
+);
+
+ProgressHelperText.displayName = 'ProgressHelperText';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Progress, ProgressSize } from '../Progress';
 import { ProgressVariant, ProgressMeasureLocation } from '../ProgressContainer';
 
@@ -97,3 +97,15 @@ test('progress component generates console warning when no accessible name is pr
   render(<Progress value={33} />);
   expect(consoleWarnMock).toHaveBeenCalled();
 });
+
+test('Does not render helper text by default', () => {
+  render(<Progress/>);
+
+  expect(screen.queryByText('Test helper text')).not.toBeInTheDocument();
+})
+
+test('Renders passed helper text', () => {
+  render(<Progress helperText="Test helper text" />);
+
+  expect(screen.getByText('Test helper text')).toBeVisible();
+});

packages/react-core/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ProgressHelperText } from '../ProgressHelperText';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <ProgressHelperText />
+    </div>
+  );
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ProgressHelperText>Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-progress__helper-text on the div containing the helper text component', () => {
+  render(<ProgressHelperText>Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-progress__helper-text');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ProgressHelperText aria-label="Test label">Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ProgressHelperText>test</ProgressHelperText>);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-core/src/components/Progress/__tests__/__snapshots__/ProgressHelperText.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-progress__helper-text"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;

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

@@ -74,3 +74,7 @@ propComponents: ['Progress']
 ### Title outside of progress bar
 ```ts file="./ProgressTitleOutsideOfProgressBar.tsx"
 ```
+
+### Helper text
+```ts file="./ProgressHelperText.tsx" isBeta
+```