chore(AlertGroup): convert examples to TypeScript/functional components

packages/react-core/src/components/AlertGroup/examples/AlertGroupAsync.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup,
+  useInterval
+} from '@patternfly/react-core';
+
+export const AlertGroupAsync: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [isRunning, setIsRunning] = React.useState(false);
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addAlert = () => {
+    setAlerts(prevAlerts => [
+      ...prevAlerts,
+      {
+        title: `Async notification ${prevAlerts.length + 1} was added to the queue.`,
+        variant: 'danger',
+        key: getUniqueId()
+      }
+    ]);
+  };
+
+  const removeAlert = (key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+  };
+
+  const startAsyncAlerts = () => {
+    setIsRunning(true);
+  };
+
+  const stopAsyncAlerts = () => {
+    setIsRunning(false);
+  };
+
+  useInterval(addAlert, isRunning ? 4500 : null);
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
+          Start async alerts
+        </button>
+        <button onClick={stopAsyncAlerts} type="button" className={btnClasses}>
+          Stop async alerts
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion aria-live="assertive">
+        {alerts.map(({ title, variant, key }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            key={key}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/AlertGroup/examples/AlertGroupMultipleDynamic.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+
+  const addAlerts = (incomingAlerts: Partial<AlertProps>[]) => {
+    setAlerts(prevAlerts => [...prevAlerts, ...incomingAlerts]);
+  };
+
+  const removeAlert = (key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();
+
+  const addAlertCollection = () => {
+    addAlerts([
+      { title: 'First alert notification.', variant: 'success', key: getUniqueId() },
+      { title: 'Second alert notification.', variant: 'warning', key: getUniqueId() },
+      { title: 'Third alert notification.', variant: 'danger', key: getUniqueId() }
+    ]);
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addAlertCollection} type="button" className={btnClasses}>
+          Add alert collection
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion>
+        {alerts.map(({ title, variant, key }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            key={key}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/AlertGroup/examples/AlertGroupSingularDynamic.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+  };
+
+  const removeAlert = (key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add single success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add single danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add single info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isLiveRegion>
+        {alerts.map(({ title, variant, key }) => (
+          <Alert
+            isInline
+            variant={AlertVariant[variant]}
+            title={title}
+            key={key}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/AlertGroup/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+
+  const maxDisplayed = 4;
+
+  const getOverflowMessage = (alertsNumber: number) => {
+    const overflow = alertsNumber - maxDisplayed;
+    if (overflow > 0) {
+      return `View ${overflow} more alerts`;
+    }
+    return '';
+  };
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setOverflowMessage(getOverflowMessage(alerts.length + 1));
+  };
+
+  const removeAlert = (key: React.Key) => {
+    const newAlerts = alerts.filter(alert => alert.key !== key);
+    setAlerts(newAlerts);
+    setOverflowMessage(getOverflowMessage(newAlerts.length));
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  const onOverflowClick = () => {
+    // eslint-disable-next-line no-console
+    console.log('Overflow message clicked');
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add single success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add single danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add single info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
+        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
+          <Alert
+            isInline
+            variant={AlertVariant[variant]}
+            title={title}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+            key={key}
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/AlertGroup/examples/AlertGroupStatic.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Alert, AlertGroup } from '@patternfly/react-core';
+
+export const AlertGroupStatic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <AlertGroup>
+      <Alert title="Success alert" variant="success" isInline />
+      <Alert title="Info alert" variant="info" isInline />
+    </AlertGroup>
+  </React.Fragment>
+);

packages/react-core/src/components/AlertGroup/examples/AlertGroupToast.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupToast: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+  };
+
+  const removeAlert = (key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add toast success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add toast danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add toast info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion>
+        {alerts.map(({ key, variant, title }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+            key={key}
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};