From 8736e858e35338a43ceff70dcea5f1e5e4e6c87c Mon Sep 17 00:00:00 2001
From: Gabi Podolnikova <gpodolni@redhat.com>
Date: Mon, 13 Jan 2025 20:58:15 -0500
Subject: [PATCH 1/3] Chore(Skeleton): Adding demo to match core

---
 packages/react-core/src/demos/Skeleton.md     | 13 +++++
 .../demos/examples/Skeleton/SkeletonCard.tsx  | 48 +++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 packages/react-core/src/demos/Skeleton.md
 create mode 100644 packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx

diff --git a/packages/react-core/src/demos/Skeleton.md b/packages/react-core/src/demos/Skeleton.md
new file mode 100644
index 00000000000..bd2a63db01f
--- /dev/null
+++ b/packages/react-core/src/demos/Skeleton.md
@@ -0,0 +1,13 @@
+---
+id: Skeleton
+section: components
+---
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+## Demos
+
+### Skeleton card
+
+```ts file='./examples/Skeleton/SkeletonCard.tsx' isFullscreen
+
+```
\ No newline at end of file
diff --git a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
new file mode 100644
index 00000000000..d83647c1898
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  Gallery,
+  Flex,
+  PageSection,
+  Content,
+  Card,
+  CardBody,
+  Skeleton
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const SkeletonCard: React.FunctionComponent = () => {
+  const card = (index: number) => (
+    <Card key={index} isCompact>
+      <CardBody>
+        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
+          <Skeleton />
+          <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+        </Flex>
+      </CardBody>
+      <CardBody>
+        <Skeleton shape="square" width="75%" screenreaderText="Loading medium square contents" />
+      </CardBody>
+      <CardBody>
+        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
+          <Skeleton />
+          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+          <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+  return (
+    <DashboardWrapper isBreadcrumbWidthLimited>
+      <PageSection isWidthLimited>
+        <Content component="h1">Main title</Content>
+        <Content component="p">This is a full page demo.</Content>
+      </PageSection>
+      <PageSection>
+        <Gallery hasGutter>{Array.from({ length: 7 }).map((_value, index) => card(index))}</Gallery>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};
\ No newline at end of file

From fd8f92c8ca1bf5276ac93220aa6936a5787d0e37 Mon Sep 17 00:00:00 2001
From: Gabi Podolnikova <gpodolni@redhat.com>
Date: Mon, 13 Jan 2025 21:32:32 -0500
Subject: [PATCH 2/3] Fixes formatting

---
 .../src/demos/examples/Skeleton/SkeletonCard.tsx     | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
index d83647c1898..f56c591dfbe 100644
--- a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
+++ b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  Gallery,
-  Flex,
-  PageSection,
-  Content,
-  Card,
-  CardBody,
-  Skeleton
-} from '@patternfly/react-core';
+import { Gallery, Flex, PageSection, Content, Card, CardBody, Skeleton } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const SkeletonCard: React.FunctionComponent = () => {
@@ -45,4 +37,4 @@ export const SkeletonCard: React.FunctionComponent = () => {
       </PageSection>
     </DashboardWrapper>
   );
-};
\ No newline at end of file
+};

From df7d44664e670c3943d770431e14bafc52a3a5b9 Mon Sep 17 00:00:00 2001
From: Gabi Podolnikova <gpodolni@redhat.com>
Date: Tue, 14 Jan 2025 13:17:49 -0500
Subject: [PATCH 3/3] Adds screenreaderText to Skeleton

---
 .../react-core/src/demos/examples/Skeleton/SkeletonCard.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
index f56c591dfbe..c068ed38a52 100644
--- a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
+++ b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
@@ -7,7 +7,7 @@ export const SkeletonCard: React.FunctionComponent = () => {
     <Card key={index} isCompact>
       <CardBody>
         <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
-          <Skeleton />
+          <Skeleton screenreaderText="Loading content" />
           <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
           <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
           <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
@@ -18,7 +18,7 @@ export const SkeletonCard: React.FunctionComponent = () => {
       </CardBody>
       <CardBody>
         <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
-          <Skeleton />
+          <Skeleton screenreaderText="Loading content" />
           <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
           <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
           <Skeleton width="50%" screenreaderText="Loaded 50% of content" />