@patternfly/react-core 5.0.0-alpha.14 → 5.0.0-alpha.16

package/src/components/AboutModal/AboutModalContainer.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
-import { FocusTrap } from '../../helpers';
-
-import { AboutModalBoxContent } from './AboutModalBoxContent';
-import { AboutModalBoxHeader } from './AboutModalBoxHeader';
-import { AboutModalBoxHero } from './AboutModalBoxHero';
-import { AboutModalBoxBrand } from './AboutModalBoxBrand';
-import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
-import { AboutModalBox } from './AboutModalBox';
-import { Backdrop } from '../Backdrop/Backdrop';
-
-export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement> {
-  /** content rendered inside the About Modal Box Content.  */
-  children: React.ReactNode;
-  /** additional classes added to the About Modal Box  */
-  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 of the image for the background.  */
-  backgroundImageSrc?: string;
-  /** id to use for About Modal Box aria labeled by  */
-  aboutModalBoxHeaderId: string;
-  /** id to use for About Modal Box aria described by  */
-  aboutModalBoxContentId: string;
-  /** Set close button aria label */
-  closeButtonAriaLabel?: string;
-  /** Flag to disable focus trap */
-  disableFocusTrap?: boolean;
-}
-
-export const AboutModalContainer: React.FunctionComponent<AboutModalContainerProps> = ({
-  children,
-  className = '',
-  isOpen = false,
-  onClose = _e => undefined,
-  productName = '',
-  trademark,
-  brandImageSrc,
-  brandImageAlt,
-  backgroundImageSrc,
-  closeButtonAriaLabel,
-  aboutModalBoxHeaderId,
-  aboutModalBoxContentId,
-  disableFocusTrap = false,
-  ...props
-}: AboutModalContainerProps) => {
-  if (!isOpen) {
-    return null;
-  }
-  return (
-    <Backdrop>
-      <FocusTrap
-        active={!disableFocusTrap}
-        focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
-        className={css(styles.bullseye)}
-      >
-        <AboutModalBox
-          className={className}
-          aria-labelledby={aboutModalBoxHeaderId}
-          aria-describedby={aboutModalBoxContentId}
-        >
-          <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
-          <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
-          {productName && <AboutModalBoxHeader id={aboutModalBoxHeaderId} productName={productName} />}
-          <AboutModalBoxContent
-            trademark={trademark}
-            id={aboutModalBoxContentId}
-            noAboutModalBoxContentContainer={false}
-            {...props}
-          >
-            {children}
-          </AboutModalBoxContent>
-          <AboutModalBoxHero backgroundImageSrc={backgroundImageSrc} />
-        </AboutModalBox>
-      </FocusTrap>
-    </Backdrop>
-  );
-};
-AboutModalContainer.displayName = 'AboutModalContainer';

package/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalContainer } from '../AboutModalContainer';
-
-const props = {
-  children: 'modal content',
-  productName: 'Product Name',
-  trademark: 'Trademark and copyright information here',
-  brandImageSrc: 'brandImg...',
-  brandImageAlt: 'Brand Image',
-  backgroundImageSrc: 'backgroundImageSrc...',
-  'aria-labelledby': 'ariaLablledbyId',
-  'aria-describedby': 'ariaDescribedById',
-  aboutModalBoxHeaderId: 'header-id',
-  aboutModalBoxContentId: 'content-id'
-};
-test('About Modal Container Test simple', () => {
-  const { asFragment } = render(<AboutModalContainer {...props}>This is ModalBox content</AboutModalContainer>);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('About Modal Container Test isOpen', () => {
-  const { asFragment } = render(
-    <AboutModalContainer title="Test Modal Container title" {...props} isOpen>
-      This is ModalBox content
-    </AboutModalContainer>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('About Modal Container Test with onlose', () => {
-  const { asFragment } = render(
-    <AboutModalContainer onClose={() => undefined} {...props}>
-      This is ModalBox content
-    </AboutModalContainer>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap

@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`About Modal Container Test isOpen 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-backdrop"
-  >
-    <div
-      class="pf-l-bullseye"
-    >
-      <div
-        aria-describedby="content-id"
-        aria-labelledby="header-id"
-        aria-modal="true"
-        class="pf-c-about-modal-box"
-        role="dialog"
-      >
-        <div
-          class="pf-c-about-modal-box__brand"
-        >
-          <img
-            alt="Brand Image"
-            class="pf-c-about-modal-box__brand-image"
-            src="brandImg..."
-          />
-        </div>
-        <div
-          class="pf-c-about-modal-box__close"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Close Dialog"
-            class="pf-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 352 512"
-              width="1em"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
-        </div>
-        <div
-          class="pf-c-about-modal-box__header"
-        >
-          <h1
-            class="pf-c-title pf-m-4xl"
-            data-ouia-component-id="OUIA-Generated-Title-1"
-            data-ouia-component-type="PF4/Title"
-            data-ouia-safe="true"
-            id="header-id"
-          >
-            Product Name
-          </h1>
-        </div>
-        <div
-          aria-describedby="ariaDescribedById"
-          aria-labelledby="ariaLablledbyId"
-          class="pf-c-about-modal-box__content"
-          id="content-id"
-          title="Test Modal Container title"
-        >
-          <div
-            class="pf-c-about-modal-box__body"
-          >
-            <div
-              class="pf-c-content"
-            >
-              This is ModalBox content
-            </div>
-          </div>
-          <p
-            class="pf-c-about-modal-box__strapline"
-          >
-            Trademark and copyright information here
-          </p>
-        </div>
-        <div
-          class="pf-c-about-modal-box__hero"
-          style="--pf-c-about-modal-box__hero--sm--BackgroundImage: url(backgroundImageSrc...);"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`About Modal Container Test simple 1`] = `<DocumentFragment />`;
-
-exports[`About Modal Container Test with onlose 1`] = `<DocumentFragment />`;