From 35c86caa2f8d07a3bb9c50baa08715e0244d063e Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 29 Mar 2022 16:05:52 -0400
Subject: [PATCH] chore(Divider): convert examples to TypeScript

---
 .../components/Divider/examples/Divider.md    | 83 ++++---------------
 .../Divider/examples/DividerInsetMedium.tsx   |  4 +
 .../DividerInsetVariousBreakpoints.tsx        | 13 +++
 .../Divider/examples/DividerUsingDiv.tsx      |  4 +
 .../Divider/examples/DividerUsingHr.tsx       |  4 +
 .../Divider/examples/DividerUsingLi.tsx       | 10 +++
 .../Divider/examples/DividerVerticalFlex.tsx  | 10 +++
 .../DividerVerticalFlexInsetMedium.tsx        | 10 +++
 ...derVerticalFlexInsetVariousBreakpoints.tsx | 18 ++++
 9 files changed, 88 insertions(+), 68 deletions(-)
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerInsetMedium.tsx
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerInsetVariousBreakpoints.tsx
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerUsingDiv.tsx
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerUsingHr.tsx
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerUsingLi.tsx
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx

diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md
index b62854854a6..93cf361ae2a 100644
--- a/packages/react-core/src/components/Divider/examples/Divider.md
+++ b/packages/react-core/src/components/Divider/examples/Divider.md
@@ -6,96 +6,43 @@ propComponents: ['Divider']
 ---
 
 ## Examples
+
 ### Using hr
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider />
+```ts file='./DividerUsingHr.tsx'
 ```
 
 ### Using li
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core/dist';
-
-<ul>
-  <li>List item one</li>
-  <Divider component="li"/>
-  <li>List item two</li>
-</ul>
+
+```ts file='./DividerUsingLi.tsx'
 ```
 
 ### Using div
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider component="div"/>
+```ts file='./DividerUsingDiv.tsx'
 ```
 
 ### Inset medium
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider inset={{default: 'insetMd'}}/>
+```ts file='./DividerInsetMedium.tsx'
 ```
 
 ### Inset at various breakpoints
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
-
-<Divider
-  inset={{
-    default: 'insetMd',
-    md: 'insetNone',
-    lg: 'inset3xl',
-    xl: 'insetLg'
-  }}
-/>
+
+```ts file='./DividerInsetVariousBreakpoints.tsx'
 ```
 
 ### Vertical in flex layout
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical/>
-  <FlexItem>second item</FlexItem>
-</Flex>
+
+```ts file='./DividerVerticalFlex.tsx'
 ```
 
-### Vertical, inset medium in flex layout
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+### Vertical in flex layout, inset medium
 
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical inset={{default: 'insetMd'}}/>
-  <FlexItem>second item</FlexItem>
-</Flex>
+```ts file='./DividerVerticalFlexInsetMedium.tsx'
 ```
 
-### Vertical, inset at various breakpoints
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical
-    inset={{
-      default: 'insetMd',
-      md: 'insetNone',
-      lg: 'insetSm',
-      xl: 'insetXs'
-    }}
-  />
-  <FlexItem>first item</FlexItem>
-</Flex>
+### Vertical in flex layout, inset at various breakpoints
+
+```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
 ```
diff --git a/packages/react-core/src/components/Divider/examples/DividerInsetMedium.tsx b/packages/react-core/src/components/Divider/examples/DividerInsetMedium.tsx
new file mode 100644
index 00000000000..281c786b590
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerInsetMedium.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerInsetMedium: React.FunctionComponent = () => <Divider inset={{ default: 'insetMd' }} />;
diff --git a/packages/react-core/src/components/Divider/examples/DividerInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerInsetVariousBreakpoints.tsx
new file mode 100644
index 00000000000..20f43d5dedc
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerInsetVariousBreakpoints.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerInsetVariousBreakpoints: React.FunctionComponent = () => (
+  <Divider
+    inset={{
+      default: 'insetMd',
+      md: 'insetNone',
+      lg: 'inset3xl',
+      xl: 'insetLg'
+    }}
+  />
+);
diff --git a/packages/react-core/src/components/Divider/examples/DividerUsingDiv.tsx b/packages/react-core/src/components/Divider/examples/DividerUsingDiv.tsx
new file mode 100644
index 00000000000..fc16716c5f7
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerUsingDiv.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingDiv: React.FunctionComponent = () => <Divider component="div" />;
diff --git a/packages/react-core/src/components/Divider/examples/DividerUsingHr.tsx b/packages/react-core/src/components/Divider/examples/DividerUsingHr.tsx
new file mode 100644
index 00000000000..8ca86bcdee6
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerUsingHr.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingHr: React.FunctionComponent = () => <Divider />;
diff --git a/packages/react-core/src/components/Divider/examples/DividerUsingLi.tsx b/packages/react-core/src/components/Divider/examples/DividerUsingLi.tsx
new file mode 100644
index 00000000000..b71602dc05c
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerUsingLi.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingLi: React.FunctionComponent = () => (
+  <ul>
+    <li>List item one</li>
+    <Divider component="li" />
+    <li>List item two</li>
+  </ul>
+);
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
new file mode 100644
index 00000000000..6742f01b894
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlex: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider isVertical />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
new file mode 100644
index 00000000000..f9738446b41
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider isVertical inset={{ default: 'insetMd' }} />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
new file mode 100644
index 00000000000..e82d433546d
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider
+      isVertical
+      inset={{
+        default: 'insetMd',
+        md: 'insetNone',
+        lg: 'insetSm',
+        xl: 'insetXs'
+      }}
+    />
+    <FlexItem>first item</FlexItem>
+  </Flex>
+);