@patternfly/react-core 6.6.1-prerelease.8 → 6.6.1-prerelease.9

package/src/demos/examples/Page/PagePlain.tsx

@@ -0,0 +1,342 @@
+import { useState } from 'react';
+import {
+  Bullseye,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardExpandableContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Content,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+  Gallery,
+  GalleryItem,
+  Icon,
+  Label,
+  LabelColor,
+  LabelGroup,
+  LabelStatus,
+  MenuToggle,
+  MenuToggleElement,
+  Page,
+  PageBody,
+  PageFooter,
+  PageHeader,
+  PageSection,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  SkipToContent,
+  Title
+} from '@patternfly/react-core';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
+import RhUiPortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
+import RhUiContainerIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-icon';
+import RhUiAutomationIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-automation-icon';
+import RhUiConnectedIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-connected-icon';
+import RhUiArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
+import activeMQIcon from '@patternfly/react-core/src/demos/assets/activemq-core_200x150.png';
+import avroIcon from '@patternfly/react-core/src/demos/assets/camel-avro_200x150.png';
+import dropBoxIcon from '@patternfly/react-core/src/demos/assets/camel-dropbox_200x150.png';
+import infinispanIcon from '@patternfly/react-core/src/demos/assets/camel-infinispan_200x150.png';
+import saxonIcon from '@patternfly/react-core/src/demos/assets/camel-saxon_200x150.png';
+import sparkIcon from '@patternfly/react-core/src/demos/assets/camel-spark_200x150.png';
+import swaggerIcon from '@patternfly/react-core/src/demos/assets/camel-swagger-java_200x150.png';
+import azureIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_REST.png';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
+
+export const PagePlain: React.FunctionComponent = () => {
+  const [isPathwayExpanded, setIsPathwayExpanded] = useState(true);
+  const [isPathwayKebabOpen, setIsPathwayKebabOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const [openCardMenu, setOpenCardMenu] = useState<number | null>(null);
+  const mainContainerId = 'main-content-page-demo-plain';
+
+  const icons = {
+    pfIcon,
+    activeMQIcon,
+    avroIcon,
+    dropBoxIcon,
+    infinispanIcon,
+    saxonIcon,
+    sparkIcon,
+    swaggerIcon,
+    azureIcon,
+    restIcon
+  };
+
+  const cards = data.map((product) => (
+    <GalleryItem key={product.name} component="li">
+      <Card isCompact isGlass isClickable isSelectable isFullHeight id={product.name.replace(/ /g, '-')}>
+        <CardHeader
+          selectableActions={{
+            isChecked: selectedItems.includes(product.id),
+            selectableActionId: `page-demo-plain-selectable-${product.id}`,
+            selectableActionAriaLabelledby: `${product.name.replace(/ /g, '-')}-title`,
+            selectableActionProps: { isLabelWrapped: true },
+            name: `page-demo-plain-check-${product.id}`,
+            onChange: (_event, checked) => {
+              setSelectedItems((items) =>
+                checked ? [...items, product.id] : items.filter((item) => item !== product.id)
+              );
+            }
+          }}
+          actions={{
+            actions: (
+              <Dropdown
+                isOpen={openCardMenu === product.id}
+                onOpenChange={(isOpen) => setOpenCardMenu(isOpen ? product.id : null)}
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    aria-label={`${product.name} actions`}
+                    variant="plain"
+                    onClick={() => setOpenCardMenu(openCardMenu === product.id ? null : product.id)}
+                    isExpanded={openCardMenu === product.id}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
+                  />
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem onClick={() => setOpenCardMenu(null)}>
+                    <RhUiTrashFillIcon /> Delete
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            )
+          }}
+        >
+          <img src={icons[product.icon]} alt="" style={{ maxWidth: '60px' }} />
+        </CardHeader>
+        <CardTitle>{product.name}</CardTitle>
+        <CardBody>{product.description}</CardBody>
+      </Card>
+    </GalleryItem>
+  ));
+
+  const renderPathwayCard = (
+    category: React.ReactNode,
+    systems: number,
+    description: string,
+    rebootRequired: boolean,
+    hasIncident: boolean
+  ) => (
+    <FlexItem flex={{ default: 'flex_1' }} alignSelf={{ default: 'alignSelfStretch' }}>
+      <Card isPlain isFullHeight>
+        <CardBody>
+          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }} className="pf-v6-u-h-100">
+            <Flex
+              spaceItems={{ default: 'spaceItemsSm' }}
+              direction={{ md: 'column', lg: 'row' }}
+              spacer={{ md: 'spacerMd', lg: 'spacerSm' }}
+            >
+              {category}
+              <Button variant={ButtonVariant.link} isInline component="a" href="#">
+                {systems} systems
+              </Button>
+            </Flex>
+            <FlexItem spacer={{ default: 'spacerMd' }}>
+              <p>{description}</p>
+            </FlexItem>
+            <Flex
+              grow={{ default: 'grow' }}
+              direction={{ default: 'column', lg: 'row' }}
+              justifyContent={{ default: 'justifyContentFlexEnd', lg: 'justifyContentFlexStart' }}
+              alignContent={{ lg: 'alignContentFlexEnd' }}
+              rowGap={{ default: 'rowGapMd' }}
+            >
+              {hasIncident && (
+                <FlexItem style={{ marginBlockEnd: '-.25em' }}>
+                  <Label status={LabelStatus.danger}>Incident</Label>
+                </FlexItem>
+              )}
+              <Flex
+                spaceItems={{ default: 'spaceItemsSm' }}
+                alignItems={{ default: 'alignItemsCenter' }}
+                flexWrap={{ default: 'nowrap' }}
+                rowGap={{ default: 'rowGapMd' }}
+              >
+                <Icon status={rebootRequired ? 'danger' : 'success'}>
+                  <RhUiConnectedIcon />
+                </Icon>
+                <p className="pf-v6-u-color-200">
+                  System reboot <b className="pf-v6-u-color-100">{rebootRequired ? 'is' : 'is not'}</b> required
+                </p>
+              </Flex>
+            </Flex>
+          </Flex>
+        </CardBody>
+        <CardFooter>
+          <Button
+            variant={ButtonVariant.link}
+            isInline
+            component="a"
+            href="#"
+            icon={<RhUiArrowRightIcon />}
+            iconPosition="end"
+          >
+            View pathway
+          </Button>
+        </CardFooter>
+      </Card>
+    </FlexItem>
+  );
+
+  const recommendedPathwaysCard = (
+    <Card isExpanded={isPathwayExpanded} isGlass>
+      <CardHeader
+        onExpand={() => setIsPathwayExpanded(!isPathwayExpanded)}
+        toggleButtonProps={{
+          id: 'page-demo-plain-expandable-status-card-1-toggle',
+          'aria-label': 'Details',
+          'aria-labelledby':
+            'page-demo-plain-expandable-status-card-1-title page-demo-plain-expandable-status-card-1-toggle',
+          'aria-expanded': isPathwayExpanded
+        }}
+        actions={{
+          actions: (
+            <Dropdown
+              isOpen={isPathwayKebabOpen}
+              onOpenChange={(isOpen) => setIsPathwayKebabOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  id="page-demo-plain-expandable-status-card-1-action-kebab"
+                  aria-label="Menu toggle"
+                  variant="plain"
+                  onClick={() => setIsPathwayKebabOpen(!isPathwayKebabOpen)}
+                  isExpanded={isPathwayKebabOpen}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
+                />
+              )}
+            >
+              <DropdownList>
+                <DropdownItem onClick={() => setIsPathwayKebabOpen(false)}>Action</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          )
+        }}
+      >
+        <CardTitle id="page-demo-plain-expandable-status-card-1-title">
+          <Title headingLevel="h2" size="xl">
+            Improve recommended pathways
+          </Title>
+        </CardTitle>
+      </CardHeader>
+      <CardExpandableContent>
+        <Flex direction={{ default: 'column', md: 'row' }} alignItems={{ default: 'alignItemsStretch' }}>
+          {renderPathwayCard(
+            <LabelGroup aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiPortIcon />}>
+                Performance
+              </Label>
+            </LabelGroup>,
+            378,
+            'Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance',
+            true,
+            true
+          )}
+          <Divider orientation={{ md: 'vertical' }} inset={{ default: 'inset3xl' }} />
+          {renderPathwayCard(
+            <LabelGroup numLabels={1} aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiContainerIcon />}>
+                Stability
+              </Label>
+              <Label variant="outline" color={LabelColor.blue}>
+                Availability
+              </Label>
+            </LabelGroup>,
+            211,
+            'Adjust your networking configuration to get ahead of network performance degradations and packet losses',
+            false,
+            false
+          )}
+          <Divider orientation={{ md: 'vertical' }} inset={{ default: 'inset3xl' }} />
+          {renderPathwayCard(
+            <LabelGroup aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiAutomationIcon />}>
+                Availability
+              </Label>
+            </LabelGroup>,
+            166,
+            'Fine tune your Oracle DB configuration to improve database performance and avoid process failure',
+            true,
+            true
+          )}
+        </Flex>
+      </CardExpandableContent>
+    </Card>
+  );
+
+  const footer = (
+    <PageFooter>
+      <PageBody>custom footer</PageBody>
+    </PageFooter>
+  );
+
+  return (
+    <Page
+      id="page-demo-plain"
+      isPlain
+      masthead={<PageHeader>Custom header</PageHeader>}
+      skipToContent={<SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>}
+      mainContainerId={mainContainerId}
+      footer={footer}
+      sidebar={null}
+    >
+      <PageSection isPlain padding={{ default: 'noPadding' }}>
+        <Panel isGlass variant="bordered">
+          <PanelMain>
+            <PanelMainBody>
+              <Content>
+                <h1>Page title</h1>
+                <p>This is a full page demo.</p>
+              </Content>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+      <PageSection isPlain padding={{ default: 'noPadding' }}>
+        {recommendedPathwaysCard}
+      </PageSection>
+      <PageSection isPlain padding={{ default: 'noPadding' }} isFilled>
+        <Gallery component="ul" hasGutter aria-label="Selectable card container">
+          <GalleryItem component="li">
+            <Card isCompact isGlass isFullHeight>
+              <Bullseye>
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="Add a new card to your page"
+                  icon={RhUiAddCircleFillIcon}
+                  variant={EmptyStateVariant.xs}
+                >
+                  <EmptyStateFooter>
+                    <EmptyStateActions>
+                      <Button variant={ButtonVariant.link}>Add card</Button>
+                    </EmptyStateActions>
+                  </EmptyStateFooter>
+                </EmptyState>
+              </Bullseye>
+            </Card>
+          </GalleryItem>
+          {cards}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/PageHeaderAndFooterContent.tsx

@@ -1,20 +0,0 @@
-import { Page, PageHeader, PageFooter, PageSection } from '@patternfly/react-core';
-
-export const PageHeaderAndFooterContent: React.FunctionComponent = () => {
-  const pageHeader = <PageHeader>Page header</PageHeader>;
-  const pageFooter = <PageFooter>Page footer</PageFooter>;
-
-  return (
-    <Page isPlain masthead={pageHeader} footer={pageFooter}>
-      <PageSection aria-labelledby="header-example-section-1">
-        <h2 id="header-example-section-1">Page header example section 1</h2>
-      </PageSection>
-      <PageSection variant="secondary" aria-labelledby="header-example-section-2">
-        <h2 id="header-example-section-2">Page header example section 2 with secondary variant styling</h2>
-      </PageSection>
-      <PageSection aria-labelledby="header-example-section-3">
-        <h2 id="header-example-section-3">Page header example section 3</h2>
-      </PageSection>
-    </Page>
-  );
-};