AboutModal.tsx

import { css } from '@patternfly/react-styles';
import backgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box_BackgroundImage';
import { AboutModalBoxContent } from './AboutModalBoxContent';
import { AboutModalBoxHeader } from './AboutModalBoxHeader';
import { AboutModalBoxBrand } from './AboutModalBoxBrand';
import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
import { AboutModalBox } from './AboutModalBox';
import { Modal, ModalVariant } from '../Modal';
import { useSSRSafeId } from '../../helpers';

export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
  /** Content rendered inside the about modal */
  children: React.ReactNode;
  /** Additional classes added to the about modal */
  className?: string;
  /** Flag to show the about modal  */
  isOpen?: boolean;
  /** A callback for when the close button is clicked  */
  onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
  /** Product name  */
  productName?: string;
  /** Trademark information  */
  trademark?: string;
  /** The URL of the image for the brand  */
  brandImageSrc: string;
  /** The alternate text of the brand image  */
  brandImageAlt: string;
  /** The URL or file path of the image for the background  */
  backgroundImageSrc?: string;
  /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts  */
  hasNoContentContainer?: boolean;
  /** The parent container to append the modal to. Defaults to document.body */
  appendTo?: HTMLElement | (() => HTMLElement);
  /** Aria label for the about modal.  This should be used when no productName prop is provided */
  'aria-label'?: string;
  /** Set aria label to the close button */
  closeButtonAriaLabel?: string;
  /** Flag to disable focus trap */
  disableFocusTrap?: boolean;
}

export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
  children,
  className,
  isOpen = false,
  onClose = (_e): any => undefined,
  productName,
  trademark,
  backgroundImageSrc,
  brandImageSrc,
  brandImageAlt,
  hasNoContentContainer = false,
  appendTo,
  closeButtonAriaLabel,
  'aria-label': ariaLabel,
  disableFocusTrap,
  ...props
}: AboutModalProps) => {
  const ariaLabelledBy = useSSRSafeId('pf-about-modal-title-');

  if (brandImageSrc && !brandImageAlt) {
    // eslint-disable-next-line no-console
    console.error(
      'AboutModal:',
      'brandImageAlt is required when a brandImageSrc is specified, and should not be an empty string.'
    );
  }

  if (!productName && !ariaLabel) {
    // eslint-disable-next-line no-console
    console.error('AboutModal:', 'Either productName or ariaLabel is required for component to be accessible');
  }

  if (!isOpen) {
    return null;
  }
  return (
    <Modal
      isOpen={isOpen}
      variant={ModalVariant.large}
      {...(productName && { 'aria-labelledby': ariaLabelledBy })}
      aria-label={ariaLabel}
      onEscapePress={onClose}
      appendTo={appendTo}
      disableFocusTrap={disableFocusTrap}
    >
      <AboutModalBox
        style={
          backgroundImageSrc ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties) : {}
        }
        className={css(className)}
      >
        <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
        <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
        {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
        <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
          {children}
        </AboutModalBoxContent>
      </AboutModalBox>
    </Modal>
  );
};
AboutModal.displayName = 'AboutModal';