@patternfly/react-core 5.2.0-prerelease.40 → 5.2.0-prerelease.41

package/src/next/components/Modal/__tests__/ModalBox.test.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalBox } from '../ModalBox';
+
+test('ModalBox Test', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test large', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="large">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test medium', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="medium">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test small', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="small">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test top aligned', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" position="top">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test top aligned distance', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" position="top" positionOffset="50px">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Modal/__tests__/ModalBoxCloseButton.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ModalBoxCloseButton } from '../ModalBoxCloseButton';
+
+describe('ModalBoxCloseButton', () => {
+  test('onClose called when clicked', async () => {
+    const onClose = jest.fn();
+    const user = userEvent.setup();
+
+    render(<ModalBoxCloseButton className="test-box-close-button-class" onClose={onClose} />);
+
+    await user.click(screen.getByRole('button'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/next/components/Modal/__tests__/ModalBoxDescription.test.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ModalBoxDescription } from '../ModalBoxDescription';
+
+test('ModalBoxDescription Test', () => {
+  const { asFragment } = render(<ModalBoxDescription>This is a ModalBox Description</ModalBoxDescription>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Modal/__tests__/ModalBoxHeader.test.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalHeader } from '../ModalHeader';
+
+test('ModalHeader Test', () => {
+  const { asFragment } = render(<ModalHeader>This is a ModalBox header</ModalHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalHeader help renders', () => {
+  const { asFragment } = render(<ModalHeader help={<div>test</div>}>This is a ModalBox header</ModalHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Test with custom header', () => {
+  const header = <span id="test-custom-header">TEST</span>;
+
+  const { asFragment } = render(<ModalHeader>{header}</ModalHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Modal/__tests__/ModalBoxTitle.test.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalBoxTitle } from '../ModalBoxTitle';
+import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+
+test('ModalBoxTitle alert variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="warning" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle info variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box info" id="boxId" titleIconVariant="info" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle danger variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box danger" id="boxId" titleIconVariant="danger" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle custom variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="custom" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle success variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box success" id="boxId" titleIconVariant="success" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle custom icon variant', () => {
+  const { asFragment } = render(
+    <ModalBoxTitle title="Test Modal Box custom" id="boxId" titleIconVariant={BullhornIcon} />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Modal/__tests__/ModalContent.test.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalContent } from '../ModalContent';
+
+const modalContentProps = {
+  boxId: 'boxId',
+  labelId: 'labelId',
+  descriptorId: 'descriptorId',
+  disableFocusTrap: true
+};
+test('Modal Content Test only body', () => {
+  const { asFragment } = render(
+    <ModalContent isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test isOpen', () => {
+  const { asFragment } = render(
+    <ModalContent isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test description', () => {
+  const { asFragment } = render(
+    <ModalContent isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test with onclose', () => {
+  const { asFragment } = render(
+    <ModalContent variant="large" onClose={() => undefined} isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Modal/__tests__/ModalFooter.test.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ModalFooter } from '../ModalFooter';
+
+test('ModalFooter Test', () => {
+  const { asFragment } = render(<ModalFooter className="test-box-footer-class">This is a ModalBox Footer</ModalFooter>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Modal/__tests__/__snapshots__/ModalBody.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBody tests ModalBody renders 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-modal-box__body test-box-class"
+    id="id"
+  >
+    This is a Modal body
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalBox.test.tsx.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBox Test 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test large 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-lg"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test medium 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-md"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test small 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-sm"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test top aligned 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-align-top"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test top aligned distance 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-align-top"
+    id="boxId"
+    role="dialog"
+    style="--pf-v5-c-modal-box--m-align-top--spacer: 50px;"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalBoxDescription.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBoxDescription Test 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-modal-box__description"
+    id=""
+  >
+    This is a ModalBox Description
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalBoxHeader.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal Test with custom header 1`] = `
+<DocumentFragment>
+  <header
+    class="pf-v5-c-modal-box__header"
+  >
+    <span
+      id="test-custom-header"
+    >
+      TEST
+    </span>
+  </header>
+</DocumentFragment>
+`;
+
+exports[`ModalHeader Test 1`] = `
+<DocumentFragment>
+  <header
+    class="pf-v5-c-modal-box__header"
+  >
+    This is a ModalBox header
+  </header>
+</DocumentFragment>
+`;
+
+exports[`ModalHeader help renders 1`] = `
+<DocumentFragment>
+  <header
+    class="pf-v5-c-modal-box__header pf-m-help"
+  >
+    <div
+      class="pf-v5-c-modal-box__header-main"
+    >
+      This is a ModalBox header
+    </div>
+    <div
+      class="pf-v5-c-modal-box__header-help"
+    >
+      <div>
+        test
+      </div>
+    </div>
+  </header>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap

@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBoxTitle alert variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 576 512"
+        width="1em"
+      >
+        <path
+          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Warning alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box warning
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle custom icon variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 576 512"
+        width="1em"
+      >
+        <path
+          d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box custom
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle custom variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 896 1024"
+        width="1em"
+      >
+        <path
+          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Custom alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box warning
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle danger variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        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>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Danger alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box danger
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle info variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Info alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box info
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle success variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Success alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box success
+    </span>
+  </h1>
+</DocumentFragment>
+`;