From cf7072a1f6a59eeb9a76b63dbd29fefc95974a27 Mon Sep 17 00:00:00 2001
From: Gustavo Santos <gefgu@hotmail.com>
Date: Sat, 17 Sep 2022 09:15:18 -0300
Subject: [PATCH] chore(Title): Convert examples to TypeScript

---
 .../src/components/Title/examples/Title.md    | 54 ++-----------------
 .../Title/examples/TitleCustomSizes.tsx       | 25 +++++++++
 .../Title/examples/TitleDefaultSizes.tsx      | 13 +++++
 3 files changed, 42 insertions(+), 50 deletions(-)
 create mode 100644 packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx
 create mode 100644 packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx

diff --git a/packages/react-core/src/components/Title/examples/Title.md b/packages/react-core/src/components/Title/examples/Title.md
index 676d2e87cc8..e2e3a78a020 100644
--- a/packages/react-core/src/components/Title/examples/Title.md
+++ b/packages/react-core/src/components/Title/examples/Title.md
@@ -6,56 +6,10 @@ propComponents: ['Title']
 ---
 
 ## Examples
-### Sizes
-```js
-import React from 'react';
-import { Title, TitleSizes } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Title headingLevel="h1" size={TitleSizes['4xl']}>
-    4xl Title
-  </Title>
-  <Title headingLevel="h2" size="3xl">
-    3xl Title
-  </Title>
-  <Title headingLevel="h3" size={TitleSizes['2xl']}>
-    2xl Title
-  </Title>
-  <Title headingLevel="h4" size="xl">
-    xl Title
-  </Title>
-  <Title headingLevel="h5" size={TitleSizes.lg}>
-    lg Title
-  </Title>
-  <Title headingLevel="h6" size="md">
-    md Title
-  </Title>
-</React.Fragment>
+### Default Sizes
+```ts file="./TitleDefaultSizes.tsx"
 ```
 
-### Default size mappings
-```js
-import React from 'react';
-import { Title } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Title headingLevel="h1">
-    h1 default to 2xl
-  </Title>
-  <Title headingLevel="h2">
-    h2 defaults to xl
-  </Title>
-  <Title headingLevel="h3">
-    h3 defaults to lg
-  </Title>
-  <Title headingLevel="h4">
-    h4 defaults to md
-  </Title>
-  <Title headingLevel="h5">
-    h5 defaults to md
-  </Title>
-  <Title headingLevel="h6">
-    h6 defaults to md
-  </Title>
-</React.Fragment>
+### Custom Sizes
+```ts file="./TitleCustomSizes.tsx"
 ```
diff --git a/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx b/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx
new file mode 100644
index 00000000000..2d1a89e775d
--- /dev/null
+++ b/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Title, TitleSizes } from '@patternfly/react-core';
+
+export const TitleCustomSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Title headingLevel="h1" size={TitleSizes['4xl']}>
+      h1 as 4xl
+    </Title>
+    <Title headingLevel="h2" size="3xl">
+      h2 as 3xl
+    </Title>
+    <Title headingLevel="h3" size={TitleSizes['2xl']}>
+      h3 as 2xl
+    </Title>
+    <Title headingLevel="h4" size="xl">
+      h4 as xl
+    </Title>
+    <Title headingLevel="h5" size={TitleSizes.lg}>
+      h5 as lg
+    </Title>
+    <Title headingLevel="h6" size="md">
+      h6 as md Title
+    </Title>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx b/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx
new file mode 100644
index 00000000000..f8a33d8db19
--- /dev/null
+++ b/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Title } from '@patternfly/react-core';
+
+export const TitleDefaultSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Title headingLevel="h1">h1 defaults to 2xl</Title>
+    <Title headingLevel="h2">h2 defaults to xl</Title>
+    <Title headingLevel="h3">h3 defaults to lg</Title>
+    <Title headingLevel="h4">h4 defaults to md</Title>
+    <Title headingLevel="h5">h5 defaults to md</Title>
+    <Title headingLevel="h6">h6 defaults to md</Title>
+  </React.Fragment>
+);