@patternfly/react-core 6.1.1-prerelease.2 → 6.2.0-prerelease.10

package/src/demos/DataListDemo.md

@@ -15,6 +15,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
 ## Demos
 
@@ -28,3 +29,13 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 ```
+
+### Actionable
+
+```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
+```
+
+### Static bottom pagination
+
+```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
+```

package/src/demos/DescriptionList/DescriptionList.md

@@ -4,6 +4,7 @@ section: components
 ---
 
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
@@ -11,4 +12,9 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 ### Basic
 
 ```js file='./examples/DescriptionListBasic.tsx' isFullscreen
-```
+```
+
+### In drawer
+
+```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen
+```

package/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  Gallery,
+  Content,
+  PageSection,
+  GalleryItem,
+  Card,
+  CardBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelBody,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Button,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListInDrawer: React.FunctionComponent = () => {
+  const drawerRef = React.useRef<HTMLDivElement>(null);
+  const btnRef = React.useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = React.useState(true);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+    btnRef.current && btnRef.current.focus();
+  };
+
+  const onToggleDrawer = () => {
+    setIsExpanded((prevIsExpanded) => !prevIsExpanded);
+  };
+
+  const panelContent = (
+    <>
+      <DrawerHead>
+        <Title headingLevel="h2">
+          <span ref={drawerRef} tabIndex={isExpanded ? 0 : -1}>
+            test
+          </span>
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>test</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <a href="#">mary-test</a>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>app=test</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod selector</DescriptionListTerm>
+            <DescriptionListDescription>Node selector is not available at this time</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>No tolerations</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>No annotaions</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>Active</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at:</DescriptionListTerm>
+            <DescriptionListDescription>3 minutes agot</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod selector</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Button variant="link" isInline icon={<PlusCircleIcon />}>
+                app=MyApp
+              </Button>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Session affinity</DescriptionListTerm>
+            <DescriptionListDescription>None</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Latest version</DescriptionListTerm>
+            <DescriptionListDescription>1.0</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Update strategy</DescriptionListTerm>
+            <DescriptionListDescription>Rolling</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Timeout</DescriptionListTerm>
+            <DescriptionListDescription>600 seconds</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Max available</DescriptionListTerm>
+            <DescriptionListDescription>25% of 1 pod</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Max surge</DescriptionListTerm>
+            <DescriptionListDescription>25% greater than 1 pod</DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </DrawerPanelBody>
+    </>
+  );
+
+  const drawerContent = (
+    <Gallery hasGutter>
+      <GalleryItem key={0}>
+        <Card>
+          <CardBody>
+            <Button variant="link" isInline onClick={onToggleDrawer} ref={btnRef}>
+              {`${isExpanded ? 'Close' : 'Open'} drawer`}
+            </Button>
+          </CardBody>
+        </Card>
+      </GalleryItem>
+      {Array.from({ length: 30 }).map((_value, index) => (
+        <GalleryItem key={index + 1}>
+          <Card>
+            <CardBody>{`Card-${index + 1}`}</CardBody>
+          </Card>
+        </GalleryItem>
+      ))}
+    </Gallery>
+  );
+
+  return (
+    <DashboardWrapper
+      notificationDrawer={panelContent}
+      isNotificationDrawerExpanded={isExpanded}
+      onNotificationDrawerExpand={onExpand}
+    >
+      <PageSection>
+        <Content>
+          <Content component="h1">Main title</Content>
+          <Content component="p">This is a full page demo.</Content>
+        </Content>
+      </PageSection>
+      <PageSection>{drawerContent}</PageSection>
+    </DashboardWrapper>
+  );
+};

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>
+  );
+};