From 11d13139774cfadf1e7bdb7beb6104a294750590 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 18 Oct 2022 09:53:24 -0400
Subject: [PATCH 1/2] chore(Skeleton): update examples to typescript

---
 .../components/Skeleton/examples/Skeleton.md  | 103 +-----------------
 .../Skeleton/examples/SkeletonBasic.tsx       |   4 +
 .../examples/SkeletonPercentageHeight.tsx     |  13 +++
 .../examples/SkeletonPercentageWidth.tsx      |  18 +++
 .../Skeleton/examples/SkeletonShapes.tsx      |  39 +++++++
 .../Skeleton/examples/SkeletonText.tsx        |  27 +++++
 6 files changed, 106 insertions(+), 98 deletions(-)
 create mode 100644 packages/react-core/src/components/Skeleton/examples/SkeletonBasic.tsx
 create mode 100644 packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx
 create mode 100644 packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx
 create mode 100644 packages/react-core/src/components/Skeleton/examples/SkeletonShapes.tsx
 create mode 100644 packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx

diff --git a/packages/react-core/src/components/Skeleton/examples/Skeleton.md b/packages/react-core/src/components/Skeleton/examples/Skeleton.md
index 3db117e243a..1987422559f 100644
--- a/packages/react-core/src/components/Skeleton/examples/Skeleton.md
+++ b/packages/react-core/src/components/Skeleton/examples/Skeleton.md
@@ -9,118 +9,25 @@ propComponents: ['Skeleton']
 
 ### Default
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<Skeleton screenreaderText="Loading contents" />;
+```ts file="./SkeletonBasic.tsx"
 ```
 
 ### Percentage widths
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Skeleton width="25%" screenreaderText="Loading contents" />
-  <br />
-  <Skeleton width="33%" />
-  <br />
-  <Skeleton width="50%" />
-  <br />
-  <Skeleton width="66%" />
-  <br />
-  <Skeleton width="75%" />
-  <br />
-  <Skeleton />
-</React.Fragment>;
+```ts file="./SkeletonPercentageWidth.tsx"
 ```
 
 ### Percentage heights
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-  <Skeleton height="25%" width="15%" screenreaderText="Loading contents" />
-  <Skeleton height="33%" width="15%" />
-  <Skeleton height="50%" width="15%" />
-  <Skeleton height="66%" width="15%" />
-  <Skeleton height="75%" width="15%" />
-  <Skeleton height="100%" width="15%" />
-</div>;
+```ts file="./SkeletonPercentageHeight.tsx"
 ```
 
 ### Text modifiers
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  --pf-global--FontSize--4xl
-  <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
-  <br />
-  --pf-global--FontSize--3xl
-  <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
-  <br />
-  --pf-global--FontSize--2xl
-  <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
-  <br />
-  --pf-global--FontSize--xl
-  <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
-  <br />
-  --pf-global--FontSize--lg
-  <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
-  <br />
-  --pf-global--FontSize--md
-  <Skeleton fontSize="md" screenreaderText="Loading font size md" />
-  <br />
-  --pf-global--FontSize--sm
-  <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
-</React.Fragment>;
+```ts file="./SkeletonText.tsx"
 ```
 
 ### Shapes
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  Small circle
-  <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
-  <br />
-  Medium circle
-  <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
-  <br />
-  Large circle
-  <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
-  <br />
-  Small square
-  <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
-  <br />
-  Medium square
-  <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
-  <br />
-  Large square
-  <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
-  <br />
-  Small rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
-  </div>
-  <br />
-  Medium rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
-  </div>
-  <br />
-  Large rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
-  </div>
-</React.Fragment>;
+```ts file="./SkeletonShapes.tsx"
 ```
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonBasic.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonBasic.tsx
new file mode 100644
index 00000000000..846b42d0ef8
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonBasic.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonBasic: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx
new file mode 100644
index 00000000000..6ca74b757fc
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonPercentageHeight: React.FunctionComponent = () => (
+  <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+    <Skeleton height="25%" width="15%" screenreaderText="Loading contents" />
+    <Skeleton height="33%" width="15%" />
+    <Skeleton height="50%" width="15%" />
+    <Skeleton height="66%" width="15%" />
+    <Skeleton height="75%" width="15%" />
+    <Skeleton height="100%" width="15%" />
+  </div>
+);
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx
new file mode 100644
index 00000000000..1e40d2c8d9a
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonPercentageWidth: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Skeleton width="25%" screenreaderText="Loading contents" />
+    <br />
+    <Skeleton width="33%" />
+    <br />
+    <Skeleton width="50%" />
+    <br />
+    <Skeleton width="66%" />
+    <br />
+    <Skeleton width="75%" />
+    <br />
+    <Skeleton />
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonShapes.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonShapes.tsx
new file mode 100644
index 00000000000..e94153ce482
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonShapes.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonShapes: React.FunctionComponent = () => (
+  <React.Fragment>
+    Small circle
+    <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
+    <br />
+    Medium circle
+    <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
+    <br />
+    Large circle
+    <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
+    <br />
+    Small square
+    <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
+    <br />
+    Medium square
+    <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
+    <br />
+    Large square
+    <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
+    <br />
+    Small rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
+    </div>
+    <br />
+    Medium rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
+    </div>
+    <br />
+    Large rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
+    </div>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx
new file mode 100644
index 00000000000..160b9dfc49f
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonText: React.FunctionComponent = () => (
+  <React.Fragment>
+    --pf-global--FontSize--4xl
+    <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
+    <br />
+    --pf-global--FontSize--3xl
+    <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
+    <br />
+    --pf-global--FontSize--2xl
+    <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
+    <br />
+    --pf-global--FontSize--xl
+    <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
+    <br />
+    --pf-global--FontSize--lg
+    <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
+    <br />
+    --pf-global--FontSize--md
+    <Skeleton fontSize="md" screenreaderText="Loading font size md" />
+    <br />
+    --pf-global--FontSize--sm
+    <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
+  </React.Fragment>
+);

From 35f307fd4b5e86b070205a3e1d50d03e67cd4058 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Fri, 21 Oct 2022 11:13:48 -0400
Subject: [PATCH 2/2] update example name, update sreenreader text

---
 .../src/components/Skeleton/examples/Skeleton.md     |  2 +-
 .../components/Skeleton/examples/SkeletonBasic.tsx   |  4 ----
 .../components/Skeleton/examples/SkeletonDefault.tsx |  4 ++++
 .../Skeleton/examples/SkeletonPercentageHeight.tsx   | 12 ++++++------
 .../Skeleton/examples/SkeletonPercentageWidth.tsx    | 10 +++++-----
 5 files changed, 16 insertions(+), 16 deletions(-)
 delete mode 100644 packages/react-core/src/components/Skeleton/examples/SkeletonBasic.tsx
 create mode 100644 packages/react-core/src/components/Skeleton/examples/SkeletonDefault.tsx

diff --git a/packages/react-core/src/components/Skeleton/examples/Skeleton.md b/packages/react-core/src/components/Skeleton/examples/Skeleton.md
index 1987422559f..0062ad91380 100644
--- a/packages/react-core/src/components/Skeleton/examples/Skeleton.md
+++ b/packages/react-core/src/components/Skeleton/examples/Skeleton.md
@@ -9,7 +9,7 @@ propComponents: ['Skeleton']
 
 ### Default
 
-```ts file="./SkeletonBasic.tsx"
+```ts file="./SkeletonDefault.tsx"
 ```
 
 ### Percentage widths
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonBasic.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonBasic.tsx
deleted file mode 100644
index 846b42d0ef8..00000000000
--- a/packages/react-core/src/components/Skeleton/examples/SkeletonBasic.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-export const SkeletonBasic: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonDefault.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonDefault.tsx
new file mode 100644
index 00000000000..47d75fa63b7
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonDefault.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx
index 6ca74b757fc..3f19887aa94 100644
--- a/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx
@@ -3,11 +3,11 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonPercentageHeight: React.FunctionComponent = () => (
   <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-    <Skeleton height="25%" width="15%" screenreaderText="Loading contents" />
-    <Skeleton height="33%" width="15%" />
-    <Skeleton height="50%" width="15%" />
-    <Skeleton height="66%" width="15%" />
-    <Skeleton height="75%" width="15%" />
-    <Skeleton height="100%" width="15%" />
+    <Skeleton height="25%" width="15%" screenreaderText="Loaded 25% of content" />
+    <Skeleton height="33%" width="15%" screenreaderText="Loaded 33% of content" />
+    <Skeleton height="50%" width="15%" screenreaderText="Loaded 50% of content" />
+    <Skeleton height="66%" width="15%" screenreaderText="Loaded 66% of content" />
+    <Skeleton height="75%" width="15%" screenreaderText="Loaded 75% of content" />
+    <Skeleton height="100%" width="15%" screenreaderText="Loaded 100% of content" />
   </div>
 );
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx
index 1e40d2c8d9a..39ca9ae7bd2 100644
--- a/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx
@@ -3,15 +3,15 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonPercentageWidth: React.FunctionComponent = () => (
   <React.Fragment>
-    <Skeleton width="25%" screenreaderText="Loading contents" />
+    <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
     <br />
-    <Skeleton width="33%" />
+    <Skeleton width="33%" screenreaderText="Loaded 33% of content" />
     <br />
-    <Skeleton width="50%" />
+    <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
     <br />
-    <Skeleton width="66%" />
+    <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
     <br />
-    <Skeleton width="75%" />
+    <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
     <br />
     <Skeleton />
   </React.Fragment>