@patternfly/react-core 4.198.16 → 4.198.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.198.16",
+  "version": "4.198.19",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.49.16",
-    "@patternfly/react-styles": "^4.48.16",
-    "@patternfly/react-tokens": "^4.50.16",
+    "@patternfly/react-icons": "^4.49.19",
+    "@patternfly/react-styles": "^4.48.19",
+    "@patternfly/react-tokens": "^4.50.19",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.179.3",
+    "@patternfly/patternfly": "4.183.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "752c9d1a3638f356f2e68f670e79356f03ebea8e"
+  "gitHead": "5b472303da22cb9c67e9977b3933f6576c27ac01"
 }

package/src/components/AlertGroup/AlertGroup.tsx

@@ -14,6 +14,10 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   isLiveRegion?: boolean;
   /** Determine where the alert is appended to */
   appendTo?: HTMLElement | (() => HTMLElement);
+  /** Function to call if user clicks on overflow message */
+  onOverflowClick?: () => void;
+  /** Custom text to show for the overflow message */
+  overflowMessage?: string;
 }
 
 interface AlertGroupState {
@@ -49,9 +53,16 @@ export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState
   }
 
   render() {
-    const { className, children, isToast, isLiveRegion, ...props } = this.props;
+    const { className, children, isToast, isLiveRegion, onOverflowClick, overflowMessage, ...props } = this.props;
     const alertGroup = (
-      <AlertGroupInline className={className} isToast={isToast} isLiveRegion={isLiveRegion} {...props}>
+      <AlertGroupInline
+        onOverflowClick={onOverflowClick}
+        className={className}
+        isToast={isToast}
+        isLiveRegion={isLiveRegion}
+        overflowMessage={overflowMessage}
+        {...props}
+      >
         {children}
       </AlertGroupInline>
     );

package/src/components/AlertGroup/AlertGroupInline.tsx

@@ -8,6 +8,8 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   children,
   isToast,
   isLiveRegion,
+  onOverflowClick,
+  overflowMessage,
   ...rest
 }: AlertGroupProps) => (
   <ul
@@ -19,6 +21,13 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
     {React.Children.toArray(children).map((Alert: React.ReactNode, index: number) => (
       <li key={index}>{Alert}</li>
     ))}
+    {overflowMessage && (
+      <li>
+        <button onClick={onOverflowClick} className={css(styles.alertGroupOverflowButton)}>
+          {overflowMessage}
+        </button>
+      </li>
+    )}
   </ul>
 );
 AlertGroupInline.displayName = 'AlertGroupInline';

package/src/components/AlertGroup/__tests__/AlertGroup.test.tsx

@@ -28,6 +28,21 @@ test('Alert Group works with n children', () => {
   expect(view).toBeTruthy();
 });
 
+test('Alert group overflow shows up', () => {
+  const overflowMessage = "View 2 more alerts";
+  const onOverflowClick = jest.fn();
+  const wrapper = mount(
+    <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
+      <Alert variant="danger" title="alert title" />
+    </AlertGroup>
+  )
+  expect(wrapper.find('.pf-c-alert-group > li')).toHaveLength(2);
+  expect(wrapper.find('.pf-c-alert-group__overflow-button').text()).toContain(overflowMessage);
+  expect(wrapper).toMatchSnapshot();
+  wrapper.find('.pf-c-alert-group__overflow-button').simulate('click');
+  expect(onOverflowClick).toBeCalled();
+});
+
 test('Standard Alert Group is not a toast alert group', () => {
   const wrapper = mount(
     <AlertGroup>

package/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap

@@ -8,6 +8,95 @@ exports[`Alert Group should match snapshot 1`] = `
 </div>
 `;
 
+exports[`Alert group overflow shows up 1`] = `
+<AlertGroup
+  onOverflowClick={[MockFunction]}
+  overflowMessage="View 2 more alerts"
+>
+  <AlertGroupInline
+    onOverflowClick={[MockFunction]}
+    overflowMessage="View 2 more alerts"
+  >
+    <ul
+      aria-atomic={null}
+      aria-live={null}
+      className="pf-c-alert-group"
+    >
+      <li
+        key="0"
+      >
+        <Alert
+          key=".0"
+          title="alert title"
+          variant="danger"
+        >
+          <div
+            aria-label="Danger Alert"
+            className="pf-c-alert pf-m-danger"
+            data-ouia-component-id="OUIA-Generated-Alert-danger-1"
+            data-ouia-component-type="PF4/Alert"
+            data-ouia-safe={true}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+          >
+            <AlertIcon
+              variant="danger"
+            >
+              <div
+                className="pf-c-alert__icon"
+              >
+                <ExclamationCircleIcon
+                  color="currentColor"
+                  noVerticalAlign={false}
+                  size="sm"
+                >
+                  <svg
+                    aria-hidden={true}
+                    aria-labelledby={null}
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style={
+                      Object {
+                        "verticalAlign": "-0.125em",
+                      }
+                    }
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                    />
+                  </svg>
+                </ExclamationCircleIcon>
+              </div>
+            </AlertIcon>
+            <h4
+              className="pf-c-alert__title"
+            >
+              <span
+                className="pf-u-screen-reader"
+              >
+                Danger alert:
+              </span>
+              alert title
+            </h4>
+          </div>
+        </Alert>
+      </li>
+      <li>
+        <button
+          className="pf-c-alert-group__overflow-button"
+          onClick={[MockFunction]}
+        >
+          View 2 more alerts
+        </button>
+      </li>
+    </ul>
+  </AlertGroupInline>
+</AlertGroup>
+`;
+
 exports[`Standard Alert Group is not a toast alert group 1`] = `
 <AlertGroup>
   <AlertGroupInline>
@@ -27,7 +116,7 @@ exports[`Standard Alert Group is not a toast alert group 1`] = `
           <div
             aria-label="Danger Alert"
             className="pf-c-alert pf-m-danger"
-            data-ouia-component-id="OUIA-Generated-Alert-danger-1"
+            data-ouia-component-id="OUIA-Generated-Alert-danger-2"
             data-ouia-component-type="PF4/Alert"
             data-ouia-safe={true}
             onMouseEnter={[Function]}
@@ -215,6 +304,7 @@ exports[`alertgroup closes when alerts are closed 1`] = `
 <AlertGroup
   appendTo={
     <body>
+      <div />
       <div />
       <div>
         <ul
@@ -420,6 +510,7 @@ exports[`alertgroup closes when alerts are closed 1`] = `
     <AlertGroupInline
       appendTo={
         <body>
+          <div />
           <div />
           <div>
             <ul
@@ -547,6 +638,7 @@ exports[`alertgroup closes when alerts are closed 1`] = `
       <ul
         appendTo={
           <body>
+            <div />
             <div />
             <div>
               <ul

package/src/components/AlertGroup/examples/AlertGroup.md

@@ -78,6 +78,79 @@ class ToastAlertGroup extends React.Component {
 }
 ```
 
+### Toast alert group with overflow capture
+After a specified number of alerts displayed is reached, we will see an overflow message instead of new alerts. Alerts asynchronously appended into dynamic AlertGroups with `isLiveRegion` will be announced to assistive technology at the moment the change happens. When the overflow message appears or is updated in AlertGroups with `isLiveRegion`, the `View 1 more alert` text will be read, but the alert message will not be read. screen reader user or keyboard user will need a way to navigate to and reveal the hidden alerts before they disappear. Alternatively, there should be a place that notifications or alerts are collected to be viewed or read later. In this example we are showing a max of 4 alerts.
+```js isBeta
+import React from 'react';
+import { Alert, AlertGroup, AlertActionCloseButton, AlertVariant, InputGroup } from '@patternfly/react-core';
+class ToastAlertGroup extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      alerts: [],
+      maxDisplayed: "4",
+      overflowMessage: ''
+    };
+    this.getOverflowMessage = (alertsNumber) => {
+      const overflow = alertsNumber - this.state.maxDisplayed;
+      if (overflow > 0) {
+        return "View " + (overflow) + " more alerts";
+      }
+      return '';
+    };
+    this.addAlert = (title, variant, key) => {
+      this.setState({
+        ...this.state,
+        alerts: [ ...this.state.alerts, { title: title, variant: variant, key }],
+        overflowMessage: this.getOverflowMessage(this.state.alerts.length + 1)
+      });
+    };
+    this.removeAlert = key => {
+      const newAlerts = [...this.state.alerts.filter(el => el.key !== key)];
+      this.setState({
+        ...this.state,
+        alerts: newAlerts,
+        overflowMessage: this.getOverflowMessage(newAlerts.length)
+      });
+    };
+  }
+  render() {
+    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+    const getUniqueId = () => (new Date().getTime());
+    const addSuccessAlert = () => { this.addAlert('Toast success alert', 'success', getUniqueId()) };
+    const addDangerAlert = () => { this.addAlert('Toast danger alert', 'danger', getUniqueId()) };
+    const addInfoAlert = () => { this.addAlert('Toast info alert', 'info', getUniqueId()) };
+    const onOverflowClick = () => {
+      console.log('Overflow message clicked');
+    };
+    return (
+      <React.Fragment>
+        <InputGroup style={{ marginBottom: '16px' }}>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>Add toast success alert</button>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>Add toast danger alert</button>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>Add toast info alert</button>
+        </InputGroup>
+        <AlertGroup isToast isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={this.state.overflowMessage}>
+          {this.state.alerts.slice(0, this.state.maxDisplayed).map(({key, variant, title}) => (
+            <Alert
+              variant={AlertVariant[variant]}
+              title={title}
+              actionClose={
+                <AlertActionCloseButton
+                  title={title}
+                  variantLabel={`${variant} alert`}
+                  onClose={() => this.removeAlert(key)}
+                />
+              }
+              key={key} />
+          ))}
+        </AlertGroup>
+      </React.Fragment>
+    );
+  }
+}
+```
+
 ### Singular dynamic alert group
 This alert will appear in the page, most likely in response to a user action.
 ```js
@@ -131,6 +204,80 @@ class SingularAdditiveAlertGroup extends React.Component {
 }
 ```
 
+### Singular dynamic alert group with overflow message
+This alert will appear in the page, most likely in response to a user action. In this example we are showing a max of 4 alerts.
+```js isBeta
+import React from 'react';
+import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton, InputGroup } from '@patternfly/react-core';
+class SingularAdditiveAlertGroup extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      alerts: [],
+      maxDisplayed: "4",
+      overflowMessage: ''
+    };
+    this.getOverflowMessage = (alertsNumber) => {
+      const overflow = alertsNumber - this.state.maxDisplayed;
+      if (overflow > 0) {
+        return "View " + (overflow) + " more alerts";
+      }
+      return '';
+    };
+    this.addAlert = (title, variant, key) => {
+      this.setState({
+        ...this.state,
+        alerts: [ ...this.state.alerts, { title: title, variant: variant, key }],
+        overflowMessage: this.getOverflowMessage(this.state.alerts.length + 1)
+      });
+    };
+    this.removeAlert = key => {
+      const newAlerts = [...this.state.alerts.filter(el => el.key !== key)];
+      this.setState({
+        ...this.state,
+        alerts: newAlerts,
+        overflowMessage: this.getOverflowMessage(newAlerts.length)
+      });
+    };
+  }
+  render() {
+    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+    const getUniqueId = () => (new Date().getTime());
+    const addSuccessAlert = () => { this.addAlert('Single success alert', 'success', getUniqueId()) };
+    const addDangerAlert = () => { this.addAlert('Single danger alert', 'danger', getUniqueId()) };
+    const addInfoAlert = () => { this.addAlert('Single info alert', 'info', getUniqueId()) };
+    const onOverflowClick = () => {
+      console.log('Overflow message clicked');
+    };
+    return (
+      <React.Fragment>
+        <InputGroup style={{ marginBottom: '16px' }}>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>Add single success alert</button>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>Add single danger alert</button>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>Add single info alert</button>
+        </InputGroup>
+        <AlertGroup isLiveRegion overflowMessage={this.state.overflowMessage} onOverflowClick={onOverflowClick}>
+          {this.state.alerts.slice(0, this.state.maxDisplayed).map(({ title, variant, key }) => (
+            <Alert
+              isInline
+              variant={AlertVariant[variant]}
+              title={title}
+              key={key}
+              actionClose={
+                <AlertActionCloseButton
+                  title={title}
+                  variantLabel={`${variant} alert`}
+                  onClose={() => this.removeAlert(key)}
+                />
+              }/>
+          ))}
+        </AlertGroup>
+      </React.Fragment>
+    );
+  }
+}
+```
+
 ### Multiple dynamic alert group
 These alerts will appear in the page, most likely in response to a user action.
 ```js

package/src/components/MultipleFileUpload/MultipleFileUploadMain.tsx

@@ -1,22 +1,43 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
+import { MultipleFileUploadTitle } from './MultipleFileUploadTitle';
+import { MultipleFileUploadButton } from './MultipleFileUploadButton';
+import { MultipleFileUploadInfo } from './MultipleFileUploadInfo';
 
 export interface MultipleFileUploadMainProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside multiple file upload main */
-  children?: React.ReactNode;
   /** Class to add to outer div */
   className?: string;
+  /** Content rendered inside the title icon div */
+  titleIcon?: React.ReactNode;
+  /** Content rendered inside the title text div */
+  titleText?: React.ReactNode;
+  /** Content rendered inside the title text separator div */
+  titleTextSeparator?: React.ReactNode;
+  /** Content rendered inside the info div */
+  infoText?: React.ReactNode;
+  /** Flag to prevent the upload button from being rendered */
+  isUploadButtonHidden?: boolean;
 }
 
 export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadMainProps> = ({
   className,
-  children,
+  titleIcon,
+  titleText,
+  titleTextSeparator,
+  infoText,
+  isUploadButtonHidden,
   ...props
-}: MultipleFileUploadMainProps) => (
-  <div className={css(styles.multipleFileUploadMain, className)} {...props}>
-    {children}
-  </div>
-);
+}: MultipleFileUploadMainProps) => {
+  const showTitle = !!titleIcon || !!titleText || !!titleTextSeparator;
+
+  return (
+    <div className={css(styles.multipleFileUploadMain, className)} {...props}>
+      {showTitle && <MultipleFileUploadTitle icon={titleIcon} text={titleText} textSeparator={titleTextSeparator} />}
+      {isUploadButtonHidden || <MultipleFileUploadButton />}
+      {!!infoText && <MultipleFileUploadInfo>{infoText}</MultipleFileUploadInfo>}
+    </div>
+  );
+};
 
 MultipleFileUploadMain.displayName = 'MultipleFileUploadMain';

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 import { ExpandableSection } from '../ExpandableSection';
+import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 
 export interface MultipleFileUploadStatusProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside multi file upload status list */
@@ -11,7 +14,7 @@ export interface MultipleFileUploadStatusProps extends React.HTMLProps<HTMLDivEl
   /** String to show in the status toggle */
   statusToggleText?: string;
   /** Icon to show in the status toggle */
-  statusToggleIcon?: React.ReactNode;
+  statusToggleIcon?: 'danger' | 'success' | 'inProgress' | React.ReactNode;
 }
 
 export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploadStatusProps> = ({
@@ -21,15 +24,32 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   statusToggleIcon,
   ...props
 }: MultipleFileUploadStatusProps) => {
+  const [icon, setIcon] = React.useState<React.ReactNode>();
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  React.useEffect(() => {
+    switch (statusToggleIcon) {
+      case 'danger':
+        setIcon(<TimesCircleIcon />);
+        break;
+      case 'success':
+        setIcon(<CheckCircleIcon />);
+        break;
+      case 'inProgress':
+        setIcon(<InProgressIcon />);
+        break;
+      default:
+        setIcon(statusToggleIcon);
+    }
+  }, [statusToggleIcon]);
+
   const toggle = (
     <div className={styles.multipleFileUploadStatusProgress}>
-      <div className={styles.multipleFileUploadStatusProgressIcon}>{statusToggleIcon}</div>
+      <div className={styles.multipleFileUploadStatusProgressIcon}>{icon}</div>
       <div className={styles.multipleFileUploadStatusItemProgressText}>{statusToggleText}</div>
     </div>
   );
 
-  const [isOpen, setIsOpen] = React.useState(true);
-
   const toggleExpandableSection = () => {
     setIsOpen(!isOpen);
   };

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -65,7 +65,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressAriaLabelledBy,
   buttonAriaLabel = 'Remove from list',
   ...props
-}) => {
+}: MultipleFileUploadStatusItemProps) => {
   const [loadPercentage, setLoadPercentage] = React.useState(0);
   const [loadResult, setLoadResult] = React.useState<undefined | 'danger' | 'success'>();
 

package/src/components/MultipleFileUpload/MultipleFileUploadTitle.tsx

@@ -1,21 +1,35 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
-
+import { MultipleFileUploadTitleIcon } from './MultipleFileUploadTitleIcon';
+import { MultipleFileUploadTitleText } from './MultipleFileUploadTitleText';
+import { MultipleFileUploadTitleTextSeparator } from './MultipleFileUploadTitleTextSeparator';
 export interface MultipleFileUploadTitleProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside multiple file upload title */
-  children?: React.ReactNode;
   /** Class to add to outer div */
   className?: string;
+  /** Content rendered inside the title icon div */
+  icon?: React.ReactNode;
+  /** Content rendered inside the title text div */
+  text?: React.ReactNode;
+  /** Content rendered inside the title text separator div */
+  textSeparator?: React.ReactNode;
 }
 
 export const MultipleFileUploadTitle: React.FunctionComponent<MultipleFileUploadTitleProps> = ({
   className,
-  children,
+  icon,
+  text = '',
+  textSeparator = '',
   ...props
 }: MultipleFileUploadTitleProps) => (
   <div className={css(styles.multipleFileUploadTitle, className)} {...props}>
-    {children}
+    {icon && <MultipleFileUploadTitleIcon>{icon}</MultipleFileUploadTitleIcon>}
+    {text && (
+      <MultipleFileUploadTitleText>
+        {`${text} `}
+        {textSeparator && <MultipleFileUploadTitleTextSeparator>{textSeparator}</MultipleFileUploadTitleTextSeparator>}
+      </MultipleFileUploadTitleText>
+    )}
   </div>
 );
 

package/src/components/MultipleFileUpload/MultipleFileUploadTitleIcon.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
-
 export interface MultipleFileUploadTitleIconProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside multiple file upload title icon */
+  children?: React.ReactNode;
   /** Class to add to outer div */
   className?: string;
 }
 
 export const MultipleFileUploadTitleIcon: React.FunctionComponent<MultipleFileUploadTitleIconProps> = ({
+  children,
   className,
   ...props
 }: MultipleFileUploadTitleIconProps) => (
   <div className={css(styles.multipleFileUploadTitleIcon, className)} {...props}>
-    <UploadIcon />
+    {children}
   </div>
 );
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadMain.test.tsx

@@ -4,12 +4,29 @@ import { MultipleFileUploadMain } from '../MultipleFileUploadMain';
 
 describe('MultipleFileUploadMain', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadMain>Foo</MultipleFileUploadMain>);
+    const view = mount(<MultipleFileUploadMain />);
     expect(view).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadMain className="test">Foo</MultipleFileUploadMain>);
+    const view = mount(<MultipleFileUploadMain className="test" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('passes props to the title as expected', () => {
+    const view = mount(
+      <MultipleFileUploadMain titleIcon="icon" titleText="title text" titleTextSeparator="title test separator" />
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('renders without the button when expected', () => {
+    const view = mount(<MultipleFileUploadMain isUploadButtonHidden />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('passes props to the info component as expected', () => {
+    const view = mount(<MultipleFileUploadMain infoText="info text" />);
     expect(view).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitle.test.tsx

@@ -4,12 +4,27 @@ import { MultipleFileUploadTitle } from '../MultipleFileUploadTitle';
 
 describe('MultipleFileUploadTitle', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitle>Foo</MultipleFileUploadTitle>);
+    const view = mount(<MultipleFileUploadTitle />);
     expect(view).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitle className="test">Foo</MultipleFileUploadTitle>);
+    const view = mount(<MultipleFileUploadTitle className="test" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('renders with title icon', () => {
+    const view = mount(<MultipleFileUploadTitle icon="icon" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('renders with title text', () => {
+    const view = mount(<MultipleFileUploadTitle text="text" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('renders with title text separator', () => {
+    const view = mount(<MultipleFileUploadTitle text="text" textSeparator="text separator" />);
     expect(view).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleIcon.test.tsx

@@ -4,7 +4,7 @@ import { MultipleFileUploadTitleIcon } from '../MultipleFileUploadTitleIcon';
 
 describe('MultipleFileUploadTitleIcon', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitleIcon />);
+    const view = mount(<MultipleFileUploadTitleIcon>Foo</MultipleFileUploadTitleIcon>);
     expect(view).toMatchSnapshot();
   });