chore(NotificationBadge):convert examples to typescript

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' 
+```

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>
+  );
+};

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(10);
+  };
+
+  const onSecondClick = (value: NotificationBadgeVariant) => {
+    setSecondVariant(value);
+    setSecondVariantCount(10);
+  };
+
+  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>
+  );
+};