fix(AboutModal): provide a way to set the background using props (#1940)

packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.d.ts

@@ -8,8 +8,7 @@ export interface AboutModalProps extends HTMLProps<HTMLDivElement> {
   trademark?: string;
   brandImageSrc: string;
   brandImageAlt: string;
-  logoImageSrc?: string;
-  logoImageAlt?: string;
+  backgroundImageSrc?: string;
   noAboutModalBoxContentContainer?: boolean;
 }
 

packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.js

@@ -24,29 +24,22 @@ const propTypes = {
   brandImageSrc: PropTypes.string.isRequired,
   /** The alternate text of the brand image */
   brandImageAlt: PropTypes.string.isRequired,
-  /** The URL of the image for the logo */
-  logoImageSrc: PropTypes.string,
-  /** The alternate text of the logo image */
-  logoImageAlt: props => {
-    if (props.logoImageSrc && !props.logoImageAlt) {
-      return new Error('logoImageAlt is required when a logoImageSrc is specified');
-    }
-    return null;
-  },
+  /** The URL of the image for the background */
+  backgroundImageSrc: PropTypes.string,
   /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts */
   noAboutModalBoxContentContainer: PropTypes.bool,
   /** Additional props are passed and spread to the modal content container <div> */
   '': PropTypes.any
 };
 
+
 const defaultProps = {
   className: '',
   isOpen: false,
   onClose: () => undefined,
   productName: '',
   trademark: '',
-  logoImageSrc: '',
-  logoImageAlt: '',
+  backgroundImageSrc: '',
   noAboutModalBoxContentContainer: false
 };
 

packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.md

@@ -4,14 +4,13 @@ cssPrefix: 'pf-c-about-modal-box'
 ---
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './examples/brandImg.svg';
-import logoImg from './examples/logoImg.svg';
+import bgImg from './examples/patternfly-orb.svg';
 
 ## Simple about modal
 ```js
 import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './examples/brandImg.svg';
-import logoImg from './examples/logoImg.svg';
 
 class SimpleAboutModal extends React.Component {
   constructor(props) {
@@ -40,8 +39,6 @@ class SimpleAboutModal extends React.Component {
           trademark="Trademark and copyright information here"
           brandImageSrc={brandImg}
           brandImageAlt="Patternfly Logo"
-          logoImageSrc={logoImg}
-          logoImageAlt="Patternfly Logo"
           productName="Product Name"
         >
           <TextContent>
@@ -75,7 +72,6 @@ class SimpleAboutModal extends React.Component {
 import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './examples/brandImg.svg';
-import logoImg from './examples/logoImg.svg';
 
 class SimpleAboutModal extends React.Component {
   constructor(props) {
@@ -104,8 +100,6 @@ class SimpleAboutModal extends React.Component {
           trademark="Trademark and copyright information here"
           brandImageSrc={brandImg}
           brandImageAlt="Patternfly Logo"
-          logoImageSrc={logoImg}
-          logoImageAlt="Patternfly Logo"
         >
           <TextContent>
             <TextList component="dl">
@@ -138,7 +132,6 @@ class SimpleAboutModal extends React.Component {
 import React from 'react';
 import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './examples/brandImg.svg';
-import logoImg from './examples/logoImg.svg';
 
 class ContentRichAboutModal extends React.Component {
   constructor(props) {
@@ -167,8 +160,6 @@ class ContentRichAboutModal extends React.Component {
           trademark="Trademark and copyright information here"
           brandImageSrc={brandImg}
           brandImageAlt="Patternfly Logo"
-          logoImageSrc={logoImg}
-          logoImageAlt="Patternfly Logo"
           noAboutModalBoxContentContainer={true}
           productName="Product Name"
         >
@@ -202,3 +193,52 @@ class ContentRichAboutModal extends React.Component {
 }
 ```
 
+## About modal with custom background image
+
+```js
+import React from 'react';
+import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './examples/brandImg.svg';
+import bgImg from './examples/patternfly-orb.svg';
+
+class SimpleAboutModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isModalOpen: false
+    };
+    this.handleModalToggle = () => {
+      this.setState(({ isModalOpen }) => ({
+        isModalOpen: !isModalOpen
+      }));
+    };
+  }
+
+  render() {
+    const { isModalOpen } = this.state;
+
+    return (
+      <React.Fragment>
+        <Button variant="primary" onClick={this.handleModalToggle}>
+          Show About Modal
+        </Button>
+        <AboutModal
+          isOpen={isModalOpen}
+          onClose={this.handleModalToggle}
+          trademark="Trademark and copyright information here"
+          brandImageSrc={brandImg}
+          brandImageAlt="Patternfly Logo"
+          backgroundImageSrc={bgImg}
+        >
+          <TextContent>
+            <TextList component="dl">
+              <TextListItem component="dt">CFME Version</TextListItem>
+              <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
+            </TextList>
+          </TextContent>
+        </AboutModal>
+      </React.Fragment>
+    );
+  }
+}
+```

packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.test.js

@@ -17,8 +17,7 @@ const props = {
   trademark: 'Trademark and copyright information here',
   brandImageSrc: 'brandImg...',
   brandImageAlt: 'Brand Image',
-  logoImageSrc: 'logoImg...',
-  logoImageAlt: 'AboutModal Logo'
+  backgroundImageSrc: 'background-image-src'
 };
 
 test('AboutModal creates a container element once for div', () => {
@@ -55,15 +54,13 @@ test('Each modal is given new ariaDescribedById and ariaLablledbyId', () => {
   expect(first.props().ariaDescribedById).not.toBe(second.props().ariaDescribedById);
 });
 
-test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
+test('Console error is generated when the brandImageSrc is provided without brandImageAlt', () => {
   const noImgAltrops = {
     onClose: jest.fn(),
     children: 'modal content',
     productName: 'Product Name',
     trademark: 'Trademark and copyright information here',
-    brandImageSrc: 'brandImg...',
-    brandImageAlt: 'Brand Image',
-    logoImageSrc: 'logoImg...'
+    brandImageSrc: 'brandImg...'
   };
   const myMock = jest.fn();
   global.console = { error: myMock };

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxHero.d.ts

@@ -1,5 +1,7 @@
 import { FunctionComponent, HTMLProps } from 'react';
 
-export interface AboutModalBoxHeroProps extends HTMLProps<HTMLImageElement> {}
+export interface AboutModalBoxHeroProps extends HTMLProps<HTMLImageElement> {
+  backgroundImageSrc?: string;
+}
 declare const AboutModalBoxHero: FunctionComponent<AboutModalBoxHeroProps>;
 export default AboutModalBoxHero;

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxHero.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
+import { c_about_modal_box__hero_sm_BackgroundImage } from '@patternfly/react-tokens'
 import PropTypes from 'prop-types';
 import styles from '@patternfly/patternfly/components/AboutModalBox/about-modal-box.css';
 
 const propTypes = {
   /** additional classes added to the About Modal Hero */
   className: PropTypes.string,
+  /** background image data or file path */
+  backgroundImageSrc: PropTypes.string,
   /** Additional props are spread to the container <div> */
   '': PropTypes.any
 };
@@ -14,9 +17,14 @@ const defaultProps = {
   className: ''
 };
 
-const AboutModalBoxHero = ({ className, ...props }) => (
-  <div {...props} className={css(styles.aboutModalBoxHero, className)} />
-);
+const AboutModalBoxHero = ({ className, backgroundImageSrc, ...props }) => {
+  const bgStyle = (backgroundImageSrc !== '') ? {
+    [c_about_modal_box__hero_sm_BackgroundImage.name]: `url(${backgroundImageSrc})`
+  } : {};
+  return (
+    <div {...props} style={bgStyle} className={css(styles.aboutModalBoxHero, className)} />
+  )
+};
 
 AboutModalBoxHero.propTypes = propTypes;
 AboutModalBoxHero.defaultProps = defaultProps;

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.d.ts

@@ -10,8 +10,7 @@ export interface AboutModalContainerProps extends HTMLProps<HTMLDivElement> {
   trademark: string;
   brandImageSrc: string;
   brandImageAlt: string;
-  logoImageSrc: string;
-  logoImageAlt: string;
+  backgroundImageSrc?: string;
 }
 
 declare const AboutModalContainer: FunctionComponent<AboutModalContainerProps>;

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.js

@@ -26,10 +26,8 @@ const propTypes = {
   brandImageSrc: PropTypes.string.isRequired,
   /** the alternate text of the Brand image. */
   brandImageAlt: PropTypes.string.isRequired,
-  /** the URL of the image for the Logo. */
-  logoImageSrc: PropTypes.string.isRequired,
-  /** the alternate text of the Logo image. */
-  logoImageAlt: PropTypes.string.isRequired,
+  /** the URL of the image for the background. */
+  backgroundImageSrc: PropTypes.string,
   /** id to use for About Modal Box aria labeled by */
   ariaLabelledbyId: PropTypes.string.isRequired,
   /** id to use for About Modal Box aria described by */
@@ -54,8 +52,7 @@ const ModalContent = ({
   trademark,
   brandImageSrc,
   brandImageAlt,
-  logoImageSrc,
-  logoImageAlt,
+  backgroundImageSrc,
   ariaLabelledbyId,
   ariaDescribedById,
   ...props
@@ -73,7 +70,7 @@ const ModalContent = ({
           <AboutModalBoxContent {...props} trademark={trademark} id={ariaDescribedById}>
             {children}
           </AboutModalBoxContent>
-          <AboutModalBoxHero />
+          <AboutModalBoxHero backgroundImageSrc={backgroundImageSrc} />
         </AboutModalBox>
       </Bullseye>
     </Backdrop>

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.test.js

@@ -8,8 +8,7 @@ const props = {
   trademark: 'Trademark and copyright information here',
   brandImageSrc: 'brandImg...',
   brandImageAlt: 'Brand Image',
-  logoImageSrc: 'logoImg...',
-  logoImageAlt: 'AboutModal Logo',
+  backgroundImageSrc: 'backgroundImageSrc...',
   ariaLabelledbyId: 'ariaLablledbyId',
   ariaDescribedById: 'ariaDescribedById'
 };

packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBoxHero.test.js.snap

@@ -3,5 +3,10 @@
 exports[`test About Modal Box SHero 1`] = `
 <div
   className="pf-c-about-modal-box__hero"
+  style={
+    Object {
+      "--pf-c-about-modal-box__hero--sm--BackgroundImage": "url(undefined)",
+    }
+  }
 />
 `;

packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.js.snap

@@ -36,6 +36,7 @@ exports[`About Modal Container Test isOpen 1`] = `
         This is ModalBox content
       </AboutModalBoxContent>
       <AboutModalBoxHero
+        backgroundImageSrc="backgroundImageSrc..."
         className=""
       />
     </AboutModalBox>