From 0a91d1e5734ae021c5ead087a8ba06869e7d7552 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Fri, 19 Nov 2021 15:42:37 -0500
Subject: [PATCH 1/2] docs(Alert): Rewrite all examples to be functional and
 typescript

---
 .../src/components/Alert/examples/Alert.md    | 583 ++++++------------
 .../Alert/examples/AlertAsyncLiveRegion.tsx   |  62 ++
 .../Alert/examples/AlertDynamicLiveRegion.tsx |  62 ++
 3 files changed, 325 insertions(+), 382 deletions(-)
 create mode 100644 packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
 create mode 100644 packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx

diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
index b53c7ddbb95..d186f28879c 100644
--- a/packages/react-core/src/components/Alert/examples/Alert.md
+++ b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -16,412 +16,245 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 ## Examples
 
 ### Types
-```js
+```ts
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
 
-class AlertTypes extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <Alert title="Default alert title" />
-        <Alert variant="info" title="Info alert title" />
-        <Alert variant="success" title="Success alert title" />
-        <Alert variant="warning" title="Warning alert title" />
-        <Alert variant="danger" title="Danger alert title" />
-      </React.Fragment>
-    );
-  }
-}
+<React.Fragment>
+  <Alert title="Default alert title" />
+  <Alert variant="info" title="Info alert title" />
+  <Alert variant="success" title="Success alert title" />
+  <Alert variant="warning" title="Warning alert title" />
+  <Alert variant="danger" title="Danger alert title" />
+</React.Fragment>
 ```
 
 ### Variations
-```js
+```ts
 import React from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
 
-class AlertVariations extends React.Component {
-  render() {
-    return (
+<React.Fragment>
+  <Alert
+    variant="success"
+    title="Success alert title"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionLinks={
       <React.Fragment>
-        <Alert
-          variant="success"
-          title="Success alert title"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-          actionLinks={
-            <React.Fragment>
-              <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
-              <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
-            </React.Fragment>
-          }
-        >
-          <p>Success alert description. This should tell the user more information about the alert.</p>
-        </Alert>
-        <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}>
-          <p>
-            Success alert description. This should tell the user more information about the alert.{' '}
-            <a href="#">This is a link.</a>
-          </p>
-        </Alert>
-        <Alert
-          variant="success"
-          title="Success alert title"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-          actionLinks={
-            <React.Fragment>
-              <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
-              <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
-            </React.Fragment>
-          }
-        />
-        <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />} />
-        <Alert variant="success" title="h1 Success alert title" titleHeadingLevel="h1" />
-        <Alert variant="success" title="h6 Success alert title" titleHeadingLevel="h6" />
+        <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
+        <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
       </React.Fragment>
-    );
-  }
-}
+    }
+  >
+    <p>Success alert description. This should tell the user more information about the alert.</p>
+  </Alert>
+  <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}>
+    <p>
+      Success alert description. This should tell the user more information about the alert.{' '}
+      <a href="#">This is a link.</a>
+    </p>
+  </Alert>
+  <Alert
+    variant="success"
+    title="Success alert title"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionLinks={
+      <React.Fragment>
+        <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
+        <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
+      </React.Fragment>
+    }
+  />
+  <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />} />
+  <Alert variant="success" title="h1 Success alert title" titleHeadingLevel="h1" />
+  <Alert variant="success" title="h6 Success alert title" titleHeadingLevel="h6" />
+  </React.Fragment>
 ```
 
 ### Inline types
-```js
+```ts
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
 
-class InlineAlert extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <Alert variant="default" isInline title="Default inline alert title" />
-        <Alert variant="info" isInline title="Info inline alert title" />
-        <Alert variant="success" isInline title="Success inline alert title" />
-        <Alert variant="warning" isInline title="Warning inline alert title" />
-        <Alert variant="danger" isInline title="Danger inline alert title" />
-      </React.Fragment>
-    );
-  }
-}
+<React.Fragment>
+  <Alert variant="default" isInline title="Default inline alert title" />
+  <Alert variant="info" isInline title="Info inline alert title" />
+  <Alert variant="success" isInline title="Success inline alert title" />
+  <Alert variant="warning" isInline title="Warning inline alert title" />
+  <Alert variant="danger" isInline title="Danger inline alert title" />
+</React.Fragment>
 ```
 
 ### Inline variations
-```js
+```ts
 import React from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
 
-class InlineAlertVariations extends React.Component {
-  render() {
-    return (
+<React.Fragment>
+  <Alert
+    isInline
+    variant="success"
+    title="Success alert title"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionLinks={
       <React.Fragment>
-        <Alert
-          isInline
-          variant="success"
-          title="Success alert title"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-          actionLinks={
-            <React.Fragment>
-              <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
-              <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
-            </React.Fragment>
-          }
-        >
-          <p>Success alert description. This should tell the user more information about the alert.</p>
-        </Alert>
-        <Alert isInline variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}>
-          <p>
-            Success alert description. This should tell the user more information about the alert.{' '}
-            <a href="#">This is a link.</a>
-          </p>
-        </Alert>
-        <Alert
-          isInline
-          variant="success"
-          title="Success alert title"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-          actionLinks={
-            <React.Fragment>
-              <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
-              <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
-            </React.Fragment>
-          }
-        />
-        <Alert
-          isInline
-          variant="success"
-          title="Success alert title"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-        />
-        <Alert isInline variant="success" title="Success alert title" />
+        <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
+        <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
       </React.Fragment>
-    );
-  }
-}
+    }
+  >
+    <p>Success alert description. This should tell the user more information about the alert.</p>
+  </Alert>
+  <Alert isInline variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}>
+    <p>
+      Success alert description. This should tell the user more information about the alert.{' '}
+      <a href="#">This is a link.</a>
+    </p>
+  </Alert>
+  <Alert
+    isInline
+    variant="success"
+    title="Success alert title"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionLinks={
+      <React.Fragment>
+        <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
+        <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
+      </React.Fragment>
+    }
+  />
+  <Alert
+    isInline
+    variant="success"
+    title="Success alert title"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+  />
+  <Alert isInline variant="success" title="Success alert title" />
+</React.Fragment>
 ```
 
 ### Inline plain types
-```js
+```ts
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
 
-class InlinePlainAlert extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <Alert variant="default" isInline isPlain title="Default inline alert title" />
-        <Alert variant="info" isInline isPlain title="Info inline alert title" />
-        <Alert variant="success" isInline isPlain title="Success inline alert title" />
-        <Alert variant="warning" isInline isPlain title="Warning inline alert title" />
-        <Alert variant="danger" isInline isPlain title="Danger inline alert title" />
-      </React.Fragment>
-    );
-  }
-}
+<React.Fragment>
+  <Alert variant="default" isInline isPlain title="Default inline alert title" />
+  <Alert variant="info" isInline isPlain title="Info inline alert title" />
+  <Alert variant="success" isInline isPlain title="Success inline alert title" />
+  <Alert variant="warning" isInline isPlain title="Warning inline alert title" />
+  <Alert variant="danger" isInline isPlain title="Danger inline alert title" />
+</React.Fragment>
 ```
 
 ### Inline plain variations
 
 It is not recommended to use an inline plain alert with actionClose nor actionLinks.
 
-```js
+```ts
 import React from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
 
-class InlinePlainAlertVariations extends React.Component {
-  render() {
-    return (
-      <Alert
-        isInline
-        isPlain
-        variant="success"
-        title="Success alert title"
-      >
-        <p>Success alert description. This should tell the user more information about the alert.</p>
-      </Alert>
-    );
-  }
-}
+<Alert
+  isInline
+  isPlain
+  variant="success"
+  title="Success alert title"
+>
+  <p>Success alert description. This should tell the user more information about the alert.</p>
+</Alert>
 ```
 
 ### Expandable
 
 It is not recommended to use an expandable alert within a toast Alert group. In such a case, the Alert could timeout before users would have time to interact and view the entire Alert.
 
-```js
+```ts
 import React from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
 
-class ExpandableAlert extends React.Component {
-  render() {
-    return (
+<React.Fragment>
+  <Alert
+    isExpandable
+    variant="success"
+    title="Success alert title"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionLinks={
       <React.Fragment>
-        <Alert
-          isExpandable
-          variant="success"
-          title="Success alert title"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-          actionLinks={
-            <React.Fragment>
-              <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
-              <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
-            </React.Fragment>
-          }
-        >
-          <p>Success alert description. This should tell the user more information about the alert.</p>
-        </Alert>
-        <Alert
-          isExpandable
-          isInline
-          variant="success"
-          title="Success alert title"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-          actionLinks={
-            <React.Fragment>
-              <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
-              <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
-            </React.Fragment>
-          } 
-        >
-          <p>Success alert description. This should tell the user more information about the alert.</p>
-        </Alert>
+        <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
+        <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
       </React.Fragment>
-    );
-  }
-}
+    }
+  >
+    <p>Success alert description. This should tell the user more information about the alert.</p>
+  </Alert>
+  <Alert
+    isExpandable
+    isInline
+    variant="success"
+    title="Success alert title"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+    actionLinks={
+      <React.Fragment>
+        <AlertActionLink onClick={() => alert('Clicked on View details')}>View details</AlertActionLink>
+        <AlertActionLink onClick={() => alert('Clicked on Ignore')}>Ignore</AlertActionLink>
+      </React.Fragment>
+    } 
+  >
+    <p>Success alert description. This should tell the user more information about the alert.</p>
+  </Alert>
+</React.Fragment>
 ```
 
 ### Static live region alert
-```js
+```ts
 import React from 'react';
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 
-class StaticLiveRegionAlert extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <Alert
-          isLiveRegion
-          variant="info"
-          title="Default live region configuration"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-        >
-          This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS classes.
-        </Alert>
-        <Alert
-          aria-live="assertive"
-          aria-relevant="additions text"
-          aria-atomic="true"
-          variant="info"
-          title="Customized live region"
-          actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
-        >
-          You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on
-          the containing element.
-        </Alert>
-      </React.Fragment>
-    );
-  }
-}
+<React.Fragment>
+  <Alert
+    isLiveRegion
+    variant="info"
+    title="Default live region configuration"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+  >
+    This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS classes.
+  </Alert>
+  <Alert
+    aria-live="assertive"
+    aria-relevant="additions text"
+    aria-atomic="true"
+    variant="info"
+    title="Customized live region"
+    actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
+  >
+    You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on
+    the containing element.
+  </Alert>
+</React.Fragment>
 ```
 
 ### Dynamic live region alert
 Alerts asynchronously appended into dynamic AlertGroups with isLiveRegion will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced.
-```js
-import React from 'react';
-import { Alert, AlertGroup, InputGroup } from '@patternfly/react-core';
-
-class DynamicLiveRegionAlert extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      alerts: []
-    };
-  }
-
-  render() {
-    const addAlert = alertProps => {
-      this.setState({ alerts: [...this.state.alerts, alertProps] });
-    };
-    const getUniqueId = () => new Date().getTime();
-    const addSuccessAlert = () => {
-      addAlert({
-        title: 'Single success alert',
-        variant: 'success',
-        key: getUniqueId()
-      });
-    };
-    const addInfoAlert = () => {
-      addAlert({
-        title: 'Single info alert',
-        variant: 'info',
-        key: getUniqueId()
-      });
-    };
-    const addDangerAlert = () => {
-      addAlert({
-        title: 'Single danger alert',
-        variant: 'danger',
-        key: getUniqueId()
-      });
-    };
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
-    return (
-      <React.Fragment>
-        <InputGroup style={{ marginBottom: '16px' }}>
-          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-            Add single success alert
-          </button>
-          <button onClick={addInfoAlert} type="button" className={btnClasses}>
-            Add single info alert
-          </button>
-          <button onClick={addDangerAlert} type="button" className={btnClasses}>
-            Add single danger alert
-          </button>
-        </InputGroup>
-        <AlertGroup isLiveRegion aria-live="polite" aria-relevant="additions text" aria-atomic="false">
-        {this.state.alerts.map(({ title, variant, isLiveRegion, ariaLive, ariaRelevant, ariaAtomic, key }) => (
-          <Alert
-            variant={variant}
-            title={title}
-            key={key}
-          />
-        ))}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="AlertDynamicLiveRegion.tsx"
 ```
 
 ### Async live region alert
 This shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the alert accessibility tab for more information.
-```js
-import React from 'react';
-import { Alert, AlertGroup, InputGroup } from '@patternfly/react-core';
-
-class AsyncLiveRegionAlert extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      alerts: [],
-      timer: null
-    };
-    this.stopAsyncAlerts = () => {
-      clearInterval(this.state.timer);
-    };
-  }
-  componentWillUnmount() {
-    this.stopAsyncAlerts();
-  }
-  render() {
-    const addAlert = incomingAlerts => {
-      this.setState({ alerts: [...this.state.alerts, incomingAlerts] });
-    };
-    const getUniqueId = () => new Date().getTime();
-    const startAsyncAlerts = () => {
-      let timerValue = setInterval(() => {
-        addAlert({
-          title: `Async alert number ${this.state.alerts.length + 1}`,
-          variant: 'info',
-          key: getUniqueId()
-        });
-      }, 4500);
-      this.setState({ timer: timerValue });
-    };
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
-    return (
-      <React.Fragment>
-        <InputGroup style={{ marginBottom: '16px' }}>
-          <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
-            Start async info alerts
-          </button>
-          <button onClick={this.stopAsyncAlerts} type="button" className={btnClasses}>
-            Stop async info alerts
-          </button>
-        </InputGroup>
-        <AlertGroup isLiveRegion>
-        {this.state.alerts.map(({ title, variant, key }) => (
-          <Alert variant={variant} title={title} key={key} />
-        ))}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="AlertAsyncLiveRegion.tsx"
 ```
 
 ### Alert timeout
-```js
+```ts
 import React from 'react';
 import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';
 
-class AlertTimeout extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      alerts: []
-    };
-    this.onClick = () => {
-      const timeout = 8000;
-      this.state.alerts.push(
+const AlertTimeout: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<React.ReactNode[]>([]);
+  const onClick = () => {
+    const timeout = 8000;
+    setAlerts(prevAlerts => {
+      return [...prevAlerts,
         <Alert title="Default timeout Alert" timeout={timeout} actionLinks={
           <React.Fragment>
             <AlertActionLink>View details</AlertActionLink>
@@ -430,50 +263,42 @@ class AlertTimeout extends React.Component {
         }>
           This alert will dismiss after {`${timeout / 1000} seconds`}
         </Alert>
-      );
-      this.setState({ alerts: [...this.state.alerts] })
-    };
+      ]
+    });
   }
 
-  render() {
-    return (
-      <React.Fragment>
-        <Button variant="secondary" onClick={this.onClick}>Add alert</Button>
-        <Button variant="secondary" onClick={() => this.setState({ alerts: [] })}>Remove all alerts</Button>
-        <AlertGroup isLiveRegion>
-        {this.state.alerts}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+  return (
+    <React.Fragment>
+      <Button variant="secondary" onClick={onClick}>Add alert</Button>
+      <Button variant="secondary" onClick={() => setAlerts([])}>Remove all alerts</Button>
+      <AlertGroup isLiveRegion>
+        {alerts}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};
 ```
 
 ### Truncate
-```js
+```ts
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
-class AlertTypes extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <Alert variant="info" truncateTitle={1} title={`
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
-        `} />
-        <Alert variant="warning" truncateTitle={2} title={`
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
-        `} />
-        <Alert variant="danger" truncateTitle={3} title={`
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
-        `} />
-      </React.Fragment>
-    );
-  }
-}
+
+<React.Fragment>
+  <Alert variant="info" truncateTitle={1} title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `} />
+  <Alert variant="warning" truncateTitle={2} title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `} />
+  <Alert variant="danger" truncateTitle={3} title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `} />
+</React.Fragment>
 ```
 
 ### Custom icons
-```js
+```ts
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
@@ -482,17 +307,11 @@ import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 
-class AlertTypes extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <Alert customIcon={<UsersIcon />} title="Default alert title" />
-        <Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
-        <Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
-        <Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
-        <Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
-      </React.Fragment>
-    );
-  }
-}
+<React.Fragment>
+  <Alert customIcon={<UsersIcon />} title="Default alert title" />
+  <Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
+  <Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
+  <Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
+  <Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
+</React.Fragment>
 ```
diff --git a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
new file mode 100644
index 00000000000..f612e66a74b
--- /dev/null
+++ b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Alert, AlertGroup, AlertVariant, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+interface AlertInfo {
+  title: string;
+  variant: AlertVariant;
+  key: number;
+}
+
+export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<AlertInfo[]>([]);
+  const [isActive, setIsActive] = React.useState<boolean>(false);
+  const getUniqueId: () => number = () => new Date().getTime();
+
+  const addAlert = (alertInfo: AlertInfo) => {
+    setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);
+  };
+
+  React.useEffect(() => {
+    let timer = null;
+    if (isActive) {
+      timer = setInterval(() => {
+        addAlert({
+          title: `Async alert number ${alerts.length + 1}`,
+          variant: AlertVariant.info,
+          key: getUniqueId()
+        });
+      }, 4500);
+    } else {
+      clearInterval(timer);
+    }
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [isActive, alerts]);
+
+  return (
+    <React.Fragment>
+      <ToggleGroup aria-label="Toggle asynchronous alerts">
+        <ToggleGroupItem
+          text="Async alerts on"
+          buttonId="async-alerts-on"
+          isSelected={isActive}
+          onChange={() => setIsActive(true)}
+        />
+        <ToggleGroupItem
+          text="Async alerts off"
+          buttonId="async-alerts-off"
+          isSelected={!isActive}
+          onChange={() => setIsActive(false)}
+        />
+      </ToggleGroup>
+      <AlertGroup isLiveRegion>
+        {alerts.map(({ title, variant, key }) => (
+          <Alert variant={variant} title={title} key={key} />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};
+AsyncLiveRegionAlert.displayName = 'AsyncLiveRegionAlert';
diff --git a/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx
new file mode 100644
index 00000000000..08dba555021
--- /dev/null
+++ b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Alert, AlertGroup, AlertVariant, InputGroup } from '@patternfly/react-core';
+
+interface AlertInfo {
+  title: string;
+  variant: AlertVariant;
+  key: number;
+}
+
+export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<AlertInfo[]>([]);
+  const getUniqueId: () => number = () => new Date().getTime();
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const addAlert = (alertInfo: AlertInfo) => {
+    setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);
+  };
+
+  const addSuccessAlert = () => {
+    addAlert({
+      title: 'Single success alert',
+      variant: AlertVariant.success,
+      key: getUniqueId()
+    });
+  };
+  const addInfoAlert = () => {
+    addAlert({
+      title: 'Single info alert',
+      variant: AlertVariant.info,
+      key: getUniqueId()
+    });
+  };
+  const addDangerAlert = () => {
+    addAlert({
+      title: 'Single danger alert',
+      variant: AlertVariant.danger,
+      key: getUniqueId()
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add single success alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add single info alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add single danger alert
+        </button>
+      </InputGroup>
+      <AlertGroup isLiveRegion aria-live="polite" aria-relevant="additions text" aria-atomic="false">
+        {alerts.map(({ title, variant, key }) => (
+          <Alert variant={variant} title={title} key={key} />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};
+DynamicLiveRegionAlert.displayName = 'DynamicLiveRegionAlert';

From e9bd8d71d3756cf3f0a290b76158fee83143cd9e Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 2 Dec 2021 11:05:12 -0500
Subject: [PATCH 2/2] remove last lines from tsx files so examples render

---
 .../src/components/Alert/examples/AlertAsyncLiveRegion.tsx       | 1 -
 .../src/components/Alert/examples/AlertDynamicLiveRegion.tsx     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
index f612e66a74b..39517dc90f6 100644
--- a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
@@ -59,4 +59,3 @@ export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
     </React.Fragment>
   );
 };
-AsyncLiveRegionAlert.displayName = 'AsyncLiveRegionAlert';
diff --git a/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx
index 08dba555021..dd2c00c92f0 100644
--- a/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx
@@ -59,4 +59,3 @@ export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
     </React.Fragment>
   );
 };
-DynamicLiveRegionAlert.displayName = 'DynamicLiveRegionAlert';