@patternfly/react-core 6.2.0-prerelease.3 → 6.2.0-prerelease.4

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.3","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.3","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.3",
+  "version": "6.2.0-prerelease.4",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "1ccc691a770cdf0fda24a569a14684199cdeef35"
+  "gitHead": "e970ecb6bb172b1f8cbbc5ce26887212c5830892"
 }

package/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
+
+```

package/src/demos/examples/Skeleton/SkeletonCard.tsx

@@ -0,0 +1,40 @@
+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 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" />
+        </Flex>
+      </CardBody>
+      <CardBody>
+        <Skeleton shape="square" width="75%" screenreaderText="Loading medium square contents" />
+      </CardBody>
+      <CardBody>
+        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
+          <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" />
+        </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>
+  );
+};