chore(Modal): convert examples to TypeScript

packages/react-core/src/components/Modal/examples/ModalBasic.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalBasic: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show basic modal
+      </Button>
+      <Modal
+        title="Basic modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalCustomHeaderFooter.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Modal, ModalVariant, Button, Title, TitleSizes } from '@patternfly/react-core';
+import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+
+export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const header = (
+    <React.Fragment>
+      <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
+        Custom header/footer modal
+      </Title>
+      <p className="pf-u-pt-sm">Allows for custom content in the header and/or footer by passing components.</p>
+    </React.Fragment>
+  );
+
+  const footer = (
+    <Title headingLevel="h4" size={TitleSizes.md}>
+      <WarningTriangleIcon />
+      <span className="pf-u-pl-sm">Custom modal footer.</span>
+    </Title>
+  );
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom header/footer modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        header={header}
+        aria-labelledby="modal-custom-header-label"
+        aria-describedby="modal-custom-header-description"
+        footer={footer}
+      >
+        <span id="modal-custom-header-description">
+          When static text describing the modal is available outside of the modal header, it can be given an ID that is
+          then passed in as the modal's aria-describedby value.
+        </span>
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+
+export const ModalCustomTitleIcon: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom title icon modal
+      </Button>
+      <Modal
+        title="Custom title icon modal"
+        titleIconVariant={BullhornIcon}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-describedby="modal-custom-icon-description"
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <span id="modal-custom-icon-description">
+          When static text describing the modal is available outside of the modal header, it can be given an ID that is
+          then passed in as the modal's aria-describedby value.
+        </span>
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalCustomWidth: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom width modal
+      </Button>
+      <Modal
+        width="50%"
+        title="Custom width modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalLarge.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalLarge: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show large modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        title="Large modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalMedium.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalMedium: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show medium modal
+      </Button>
+      <Modal
+        variant={ModalVariant.medium}
+        title="Medium modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalNoHeaderFooter: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show no header/footer modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        aria-label="No header/footer modal"
+        aria-describedby="modal-no-header-description"
+        onClose={handleModalToggle}
+      >
+        <span id="modal-no-header-description">
+          When static text describing the modal is available outside of the modal header, it can be given an ID that is
+          then passed in as the modal's aria-describedby value.
+        </span>
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalSmall.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalSmall: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show small modal
+      </Button>
+      <Modal
+        variant={ModalVariant.small}
+        title="Small modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalTitleIcon: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show title icon modal
+      </Button>
+      <Modal
+        title="Title icon modal"
+        titleIconVariant="warning"
+        isOpen={isModalOpen}
+        aria-describedby="modal-title-icon-description"
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <span id="modal-title-icon-description">
+          When static text describing the modal is available outside of the modal header, it can be given an ID that is
+          then passed in as the modal's aria-describedby value.
+        </span>
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};