From 866174d698f85be7f62b159f84cf757251dcee7e Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 22 Dec 2021 15:05:30 -0500
Subject: [PATCH 1/3] chore(AboutModal): convert examples to
 TypeScript/functional components

---
 .../AboutModal/examples/AboutModal.md         | 226 +-----------------
 .../examples/AboutModalWithoutProductName.tsx |  45 ++++
 .../AboutModal/examples/BasicAboutModal.tsx   |  46 ++++
 ...ComplexUserPositionedContentAboutModal.tsx |  52 ++++
 .../CustomBackgroundImageAboutModal.tsx       |  35 +++
 5 files changed, 182 insertions(+), 222 deletions(-)
 create mode 100644 packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
 create mode 100644 packages/react-core/src/components/AboutModal/examples/BasicAboutModal.tsx
 create mode 100644 packages/react-core/src/components/AboutModal/examples/ComplexUserPositionedContentAboutModal.tsx
 create mode 100644 packages/react-core/src/components/AboutModal/examples/CustomBackgroundImageAboutModal.tsx

diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModal.md b/packages/react-core/src/components/AboutModal/examples/AboutModal.md
index c4e14b8ae6c..0310a9974df 100644
--- a/packages/react-core/src/components/AboutModal/examples/AboutModal.md
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModal.md
@@ -9,235 +9,17 @@ import bgImg from './patternfly-orb.svg';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './examples/brandImg.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"
-          productName="Product Name"
-        >
-          <TextContent>
-            <TextList component="dl">
-              <TextListItem component="dt">CFME Version</TextListItem>
-              <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-              <TextListItem component="dt">Cloudforms Version</TextListItem>
-              <TextListItem component="dd">4.1</TextListItem>
-              <TextListItem component="dt">Server Name</TextListItem>
-              <TextListItem component="dd">40DemoMaster</TextListItem>
-              <TextListItem component="dt">User Name</TextListItem>
-              <TextListItem component="dd">Administrator</TextListItem>
-              <TextListItem component="dt">User Role</TextListItem>
-              <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-              <TextListItem component="dt">Browser Version</TextListItem>
-              <TextListItem component="dd">601.2</TextListItem>
-              <TextListItem component="dt">Browser OS</TextListItem>
-              <TextListItem component="dd">Mac</TextListItem>
-            </TextList>
-          </TextContent>
-        </AboutModal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./BasicAboutModal.tsx"
 ```
 
 ### Without product name
-```js
-import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './examples/brandImg.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"
-        >
-          <TextContent>
-            <TextList component="dl">
-              <TextListItem component="dt">CFME Version</TextListItem>
-              <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-              <TextListItem component="dt">Cloudforms Version</TextListItem>
-              <TextListItem component="dd">4.1</TextListItem>
-              <TextListItem component="dt">Server Name</TextListItem>
-              <TextListItem component="dd">40DemoMaster</TextListItem>
-              <TextListItem component="dt">User Name</TextListItem>
-              <TextListItem component="dd">Administrator</TextListItem>
-              <TextListItem component="dt">User Role</TextListItem>
-              <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-              <TextListItem component="dt">Browser Version</TextListItem>
-              <TextListItem component="dd">601.2</TextListItem>
-              <TextListItem component="dt">Browser OS</TextListItem>
-              <TextListItem component="dd">Mac</TextListItem>
-            </TextList>
-          </TextContent>
-        </AboutModal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AboutModalWithoutProductName.tsx"
 ```
 
 ### Complex user positioned content
-```js
-import React from 'react';
-import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './examples/brandImg.svg';
-
-class ContentRichAboutModal 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"
-          noAboutModalBoxContentContainer={true}
-          productName="Product Name"
-        >
-          <TextContent id="test1" className="pf-u-py-xl">
-            <h4>About</h4>
-            <p>Content here</p>
-          </TextContent>
-          <Alert variant="info" title="Updates available" />
-          <TextContent id="test2" className="pf-u-py-xl">
-            <TextList component="dl">
-              <TextListItem component="dt">CFME Version</TextListItem>
-              <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-              <TextListItem component="dt">Cloudforms Version</TextListItem>
-              <TextListItem component="dd">4.1</TextListItem>
-              <TextListItem component="dt">Server Name</TextListItem>
-              <TextListItem component="dd">40DemoMaster</TextListItem>
-              <TextListItem component="dt">User Name</TextListItem>
-              <TextListItem component="dd">Administrator</TextListItem>
-              <TextListItem component="dt">User Role</TextListItem>
-              <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-              <TextListItem component="dt">Browser Version</TextListItem>
-              <TextListItem component="dd">601.2</TextListItem>
-              <TextListItem component="dt">Browser OS</TextListItem>
-              <TextListItem component="dd">Mac</TextListItem>
-            </TextList>
-          </TextContent>
-        </AboutModal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ComplexUserPositionedContentAboutModal.tsx"
 ```
 
 ### 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>
-    );
-  }
-}
+```ts file="./CustomBackgroundImageAboutModal.tsx"
 ```
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
new file mode 100644
index 00000000000..c4a7e3aadd1
--- /dev/null
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './brandImg.svg';
+
+export const AboutModalWithoutProductName = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={toggleModal}>
+        Show about modal
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        trademark="Trademark and copyright information here"
+        brandImageSrc={brandImg}
+        brandImageAlt="Patternfly Logo"
+      >
+        <TextContent>
+          <TextList component="dl">
+            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
+            <TextListItem component="dt">Cloudforms Version</TextListItem>
+            <TextListItem component="dd">4.1</TextListItem>
+            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dd">40DemoMaster</TextListItem>
+            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dd">Administrator</TextListItem>
+            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
+            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dd">601.2</TextListItem>
+            <TextListItem component="dt">Browser OS</TextListItem>
+            <TextListItem component="dd">Mac</TextListItem>
+          </TextList>
+        </TextContent>
+      </AboutModal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/AboutModal/examples/BasicAboutModal.tsx b/packages/react-core/src/components/AboutModal/examples/BasicAboutModal.tsx
new file mode 100644
index 00000000000..d0ec140b3e5
--- /dev/null
+++ b/packages/react-core/src/components/AboutModal/examples/BasicAboutModal.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './brandImg.svg';
+
+export const BasicAboutModal = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={toggleModal}>
+        Show about modal
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        trademark="Trademark and copyright information here"
+        brandImageSrc={brandImg}
+        brandImageAlt="Patternfly Logo"
+        productName="Product Name"
+      >
+        <TextContent>
+          <TextList component="dl">
+            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
+            <TextListItem component="dt">Cloudforms Version</TextListItem>
+            <TextListItem component="dd">4.1</TextListItem>
+            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dd">40DemoMaster</TextListItem>
+            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dd">Administrator</TextListItem>
+            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
+            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dd">601.2</TextListItem>
+            <TextListItem component="dt">Browser OS</TextListItem>
+            <TextListItem component="dd">Mac</TextListItem>
+          </TextList>
+        </TextContent>
+      </AboutModal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/AboutModal/examples/ComplexUserPositionedContentAboutModal.tsx b/packages/react-core/src/components/AboutModal/examples/ComplexUserPositionedContentAboutModal.tsx
new file mode 100644
index 00000000000..8f99173645a
--- /dev/null
+++ b/packages/react-core/src/components/AboutModal/examples/ComplexUserPositionedContentAboutModal.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './brandImg.svg';
+
+export const ComplexUserPositionedContentAboutModal = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={toggleModal}>
+        Show about modal
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        trademark="Trademark and copyright information here"
+        brandImageSrc={brandImg}
+        brandImageAlt="Patternfly Logo"
+        noAboutModalBoxContentContainer={true}
+        productName="Product Name"
+      >
+        <TextContent id="test1" className="pf-u-py-xl">
+          <h4>About</h4>
+          <p>Content here</p>
+        </TextContent>
+        <Alert variant="info" title="Updates available" />
+        <TextContent id="test2" className="pf-u-py-xl">
+          <TextList component="dl">
+            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
+            <TextListItem component="dt">Cloudforms Version</TextListItem>
+            <TextListItem component="dd">4.1</TextListItem>
+            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dd">40DemoMaster</TextListItem>
+            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dd">Administrator</TextListItem>
+            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
+            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dd">601.2</TextListItem>
+            <TextListItem component="dt">Browser OS</TextListItem>
+            <TextListItem component="dd">Mac</TextListItem>
+          </TextList>
+        </TextContent>
+      </AboutModal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/AboutModal/examples/CustomBackgroundImageAboutModal.tsx b/packages/react-core/src/components/AboutModal/examples/CustomBackgroundImageAboutModal.tsx
new file mode 100644
index 00000000000..c8c3685197f
--- /dev/null
+++ b/packages/react-core/src/components/AboutModal/examples/CustomBackgroundImageAboutModal.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './brandImg.svg';
+import bgImg from './patternfly-orb.svg';
+
+export const CustomBackgroundImageAboutModal = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={toggleModal}>
+        Show about modal
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        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>
+  );
+};

From 1e3f6e40ec1d29f0c13d46885eb2c44cda94faf2 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 6 Jan 2022 15:11:05 -0500
Subject: [PATCH 2/3] refactors extracted example names for consistency

---
 .../src/components/AboutModal/examples/AboutModal.md        | 6 +++---
 .../examples/{BasicAboutModal.tsx => AboutModalBasic.tsx}   | 2 +-
 ...Modal.tsx => AboutModalComplexUserPositionedContent.tsx} | 2 +-
 ...geAboutModal.tsx => AboutModalCustomBackgroundImage.tsx} | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/react-core/src/components/AboutModal/examples/{BasicAboutModal.tsx => AboutModalBasic.tsx} (97%)
 rename packages/react-core/src/components/AboutModal/examples/{ComplexUserPositionedContentAboutModal.tsx => AboutModalComplexUserPositionedContent.tsx} (97%)
 rename packages/react-core/src/components/AboutModal/examples/{CustomBackgroundImageAboutModal.tsx => AboutModalCustomBackgroundImage.tsx} (94%)

diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModal.md b/packages/react-core/src/components/AboutModal/examples/AboutModal.md
index 0310a9974df..0f7470df817 100644
--- a/packages/react-core/src/components/AboutModal/examples/AboutModal.md
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModal.md
@@ -9,7 +9,7 @@ import bgImg from './patternfly-orb.svg';
 
 ## Examples
 ### Basic
-```ts file="./BasicAboutModal.tsx"
+```ts file="./AboutModalBasic.tsx"
 ```
 
 ### Without product name
@@ -17,9 +17,9 @@ import bgImg from './patternfly-orb.svg';
 ```
 
 ### Complex user positioned content
-```ts file="./ComplexUserPositionedContentAboutModal.tsx"
+```ts file="./AboutModalComplexUserPositionedContent.tsx"
 ```
 
 ### Custom background image
-```ts file="./CustomBackgroundImageAboutModal.tsx"
+```ts file="./AboutModalCustomBackgroundImage.tsx"
 ```
diff --git a/packages/react-core/src/components/AboutModal/examples/BasicAboutModal.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
similarity index 97%
rename from packages/react-core/src/components/AboutModal/examples/BasicAboutModal.tsx
rename to packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
index d0ec140b3e5..7cec5f7a30d 100644
--- a/packages/react-core/src/components/AboutModal/examples/BasicAboutModal.tsx
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './brandImg.svg';
 
-export const BasicAboutModal = () => {
+export const AboutModalBasic = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
   const toggleModal = () => {
diff --git a/packages/react-core/src/components/AboutModal/examples/ComplexUserPositionedContentAboutModal.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
similarity index 97%
rename from packages/react-core/src/components/AboutModal/examples/ComplexUserPositionedContentAboutModal.tsx
rename to packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
index 8f99173645a..e7c34a4e4a9 100644
--- a/packages/react-core/src/components/AboutModal/examples/ComplexUserPositionedContentAboutModal.tsx
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './brandImg.svg';
 
-export const ComplexUserPositionedContentAboutModal = () => {
+export const AboutModalComplexUserPositionedContent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
   const toggleModal = () => {
diff --git a/packages/react-core/src/components/AboutModal/examples/CustomBackgroundImageAboutModal.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx
similarity index 94%
rename from packages/react-core/src/components/AboutModal/examples/CustomBackgroundImageAboutModal.tsx
rename to packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx
index c8c3685197f..8b40ea29ff3 100644
--- a/packages/react-core/src/components/AboutModal/examples/CustomBackgroundImageAboutModal.tsx
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx
@@ -3,7 +3,7 @@ import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patter
 import brandImg from './brandImg.svg';
 import bgImg from './patternfly-orb.svg';
 
-export const CustomBackgroundImageAboutModal = () => {
+export const AboutModalCustomBackgroundImage = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
   const toggleModal = () => {

From b08103d8cbf3e1a9afc5582907e4db6fd30d2aae Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 6 Jan 2022 15:15:00 -0500
Subject: [PATCH 3/3] explicitly types function component return values

---
 .../src/components/AboutModal/examples/AboutModalBasic.tsx      | 2 +-
 .../examples/AboutModalComplexUserPositionedContent.tsx         | 2 +-
 .../AboutModal/examples/AboutModalCustomBackgroundImage.tsx     | 2 +-
 .../AboutModal/examples/AboutModalWithoutProductName.tsx        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
index 7cec5f7a30d..3a20a8743d0 100644
--- a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './brandImg.svg';
 
-export const AboutModalBasic = () => {
+export const AboutModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
   const toggleModal = () => {
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
index e7c34a4e4a9..916b5ed322f 100644
--- a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './brandImg.svg';
 
-export const AboutModalComplexUserPositionedContent = () => {
+export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
   const toggleModal = () => {
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx
index 8b40ea29ff3..3bcc7ed013d 100644
--- a/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx
@@ -3,7 +3,7 @@ import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patter
 import brandImg from './brandImg.svg';
 import bgImg from './patternfly-orb.svg';
 
-export const AboutModalCustomBackgroundImage = () => {
+export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
   const toggleModal = () => {
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
index c4a7e3aadd1..1870c112617 100644
--- a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from './brandImg.svg';
 
-export const AboutModalWithoutProductName = () => {
+export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
   const toggleModal = () => {