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

package/src/demos/Drawer/examples/DrawerViewport.tsx

@@ -0,0 +1,112 @@
+import { Fragment, useRef, useState } from 'react';
+import {
+  Backdrop,
+  Button,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHead,
+  DrawerPanelContent,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadLogo,
+  MastheadMain,
+  MastheadToggle,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+
+export const DrawerViewport: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const drawerRef = useRef<HTMLSpanElement>(null);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) => {
+    // eslint-disable-next-line no-console
+    console.log(`${id} has new width of: ${newWidth}`);
+  };
+
+  const headerToolbar = (
+    <Toolbar id="viewport-drawer-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>
+          <Button aria-expanded={isExpanded} onClick={onClick}>
+            Toggle drawer
+          </Button>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" id="viewport-drawer-nav-toggle" />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar id="viewport-drawer-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent isResizable onResize={onResize} id="viewport-resize-panel" minSize="150px">
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          Drawer panel header
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <Fragment>
+      <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
+        <PageSection aria-labelledby="viewport-drawer-section">
+          <h2 id="viewport-drawer-section">Viewport drawer example</h2>
+          <p>
+            The viewport drawer is a sibling of Page. DrawerContent is left empty so the panel overlays the page without
+            affecting page layout or scrolling.
+          </p>
+        </PageSection>
+      </Page>
+      {isExpanded && <Backdrop onClick={onCloseClick}></Backdrop>}
+      <Drawer isExpanded={isExpanded} isViewport onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent} />
+      </Drawer>
+    </Fragment>
+  );
+};

package/src/demos/Page.md

@@ -4,18 +4,25 @@ section: components
 ---
 
 import { useState, useRef, useEffect } from 'react';
-import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
-import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
-import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
-import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
-import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+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';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
   1. Add an onNavToggle callback to PageHeader
@@ -50,3 +57,9 @@ When adding a context selector/perspective switcher in a `PageSidebar`, you must
 ```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
 
 ```
+
+### Plain
+
+```ts file='./examples/Page/PagePlain.tsx' isFullscreen
+
+```

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/PageHeaderContent.tsx

@@ -1,19 +0,0 @@
-import { Page, PageHeader, PageSection } from '@patternfly/react-core';
-
-export const PageHeaderContent: React.FunctionComponent = () => {
-  const pageHeader = <PageHeader>Page header</PageHeader>;
-
-  return (
-    <Page masthead={pageHeader}>
-      <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>
-  );
-};