From 43d6882486946332204b60bb821b5de31c8c6a3d Mon Sep 17 00:00:00 2001
From: Jan Wright <jawright@redhat.com>
Date: Wed, 29 Jun 2022 16:42:59 -0400
Subject: [PATCH 1/2] chore(NotificationBadge):convert examples to typescript

---
 .../examples/NotificationBadge.md             | 76 +------------------
 .../examples/NotificationBadgeBasic.tsx       | 30 ++++++++
 .../examples/NotificationBadgeWithCount.tsx   | 36 +++++++++
 3 files changed, 70 insertions(+), 72 deletions(-)
 create mode 100644 packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
 create mode 100644 packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx

diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
index 9c9863f6c01..ae00e0db929 100644
--- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
@@ -8,79 +8,11 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import './notificationBadge.css';
 
 ## Examples
-### Basic
-```js
-import React from 'react';
-import { NotificationBadge } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-class SimpleNotificationBadge extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      unreadVariant: 'unread',
-      attentionVariant: 'attention'
-    };
-    this.onFirstClick = () => {
-      this.setState({
-        unreadVariant: 'read'
-      });
-    };
-    this.onSecondClick = () => {
-      this.setState({
-        attentionVariant: 'read'
-      });
-    };
-  }
 
-  render() {
-    const { unreadVariant, attentionVariant } = this.state;
-    return (
-      <div className="pf-t-dark">
-        <NotificationBadge variant={unreadVariant} onClick={this.onFirstClick} aria-label="First notifications" />
-        <NotificationBadge variant={attentionVariant} onClick={this.onSecondClick} aria-label="Second notifications" />
-      </div>
-    );
-  }
-}
+### Basic
+```ts file='./NotificationBadgeBasic.tsx' 
 ```
 
-## Examples
 ### With count
-```js
-import React from 'react';
-import { NotificationBadge } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-class NotificationBadgeWithCount extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      firstVariant: 'unread',
-      firstCount: 30,
-      secondVariant: 'attention',
-      secondCount: 30
-    };
-    this.onFirstClick = () => {
-      this.setState({
-        firstVariant: 'read',
-      });
-    };
-    this.onSecondClick = () => {
-      this.setState({
-        secondVariant: 'read'
-      });
-    };
-  }
-
-  render() {
-    const { firstVariant, firstCount, secondVariant, secondCount } = this.state;
-    return (
-      <div className="pf-t-dark">
-        <NotificationBadge variant={firstVariant} onClick={this.onFirstClick} aria-label="First notifications" count={firstCount} />
-        <NotificationBadge variant={secondVariant} onClick={this.onSecondClick} aria-label="Second notifications" count={secondCount} />
-      </div>
-    );
-  }
-}
-```
+```ts file='./NotificationBadgeWithCount.tsx' 
+```
\ No newline at end of file
diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
new file mode 100644
index 00000000000..fff0abd3ab7
--- /dev/null
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
+
+export const SimpleNotificationBadge: React.FunctionComponent = () => {
+  const [unreadVariant, setUnreadVariant] = React.useState(NotificationBadgeVariant.unread);
+  const [attentionVariant, setAttentionVariant] = React.useState(NotificationBadgeVariant.attention);
+
+  const onFirstClick = (value: NotificationBadgeVariant) => {
+    setUnreadVariant(value);
+  };
+
+  const onSecondClick = (value: NotificationBadgeVariant) => {
+    setAttentionVariant(value);
+  };
+
+  return (
+    <div className="pf-t-dark">
+      <NotificationBadge
+        variant={unreadVariant}
+        onClick={() => onFirstClick(NotificationBadgeVariant.read)}
+        aria-label="First notifications"
+      />
+      <NotificationBadge
+        variant={attentionVariant}
+        onClick={() => onSecondClick(NotificationBadgeVariant.read)}
+        aria-label="Second notifications"
+      />
+    </div>
+  );
+};
diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
new file mode 100644
index 00000000000..82ed9086dd3
--- /dev/null
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
+
+export const NotificationBadgeWithCount: React.FunctionComponent = () => {
+  const [firstVariant, setFirstVariant] = React.useState(NotificationBadgeVariant.unread);
+  const [firstVariantCount, setFirstVariantCount] = React.useState(30);
+  const [secondVariant, setSecondVariant] = React.useState(NotificationBadgeVariant.attention);
+  const [secondVariantCount, setSecondVariantCount] = React.useState(30);
+
+  const onFirstClick = (value: NotificationBadgeVariant) => {
+    setFirstVariant(value);
+    setFirstVariantCount(90);
+  };
+
+  const onSecondClick = (value: NotificationBadgeVariant) => {
+    setSecondVariant(value);
+    setSecondVariantCount(90);
+  };
+
+  return (
+    <div className="pf-t-dark">
+      <NotificationBadge
+        variant={firstVariant}
+        onClick={() => onFirstClick(NotificationBadgeVariant.read)}
+        aria-label="First notifications"
+        count={firstVariantCount}
+      />
+      <NotificationBadge
+        variant={secondVariant}
+        onClick={() => onSecondClick(NotificationBadgeVariant.read)}
+        aria-label="Second notifications"
+        count={secondVariantCount}
+      />
+    </div>
+  );
+};

From 99b65841c80bb0b4d5eba1b7c600316e1f17580e Mon Sep 17 00:00:00 2001
From: Jan Wright <jawright@redhat.com>
Date: Tue, 5 Jul 2022 15:12:30 -0400
Subject: [PATCH 2/2] chore<NotificationBadge):update count from 90 to 10

---
 .../NotificationBadge/examples/NotificationBadgeWithCount.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
index 82ed9086dd3..ce8ac33fa5d 100644
--- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
@@ -9,12 +9,12 @@ export const NotificationBadgeWithCount: React.FunctionComponent = () => {
 
   const onFirstClick = (value: NotificationBadgeVariant) => {
     setFirstVariant(value);
-    setFirstVariantCount(90);
+    setFirstVariantCount(10);
   };
 
   const onSecondClick = (value: NotificationBadgeVariant) => {
     setSecondVariant(value);
-    setSecondVariantCount(90);
+    setSecondVariantCount(10);
   };
 
   return (