@patternfly/react-core 6.5.0-prerelease.21 → 6.5.0-prerelease.25

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

@@ -0,0 +1,259 @@
+import { useRef, useState } from 'react';
+import {
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Content,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Gallery,
+  GalleryItem,
+  Masthead,
+  MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
+  MenuToggle,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  SkipToContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Tooltip
+} from '@patternfly/react-core';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+}
+
+export const PageDockedNav: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const dashboardBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem>Section home</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#" isActive>
+        Section landing
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+
+  const userDropdownItems = [
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  ];
+
+  const navItem1Ref = useRef<HTMLAnchorElement>(null);
+  const navItem2Ref = useRef<HTMLAnchorElement>(null);
+  const navItem3Ref = useRef<HTMLAnchorElement>(null);
+  const navItem4Ref = useRef<HTMLAnchorElement>(null);
+  const settingsRef = useRef<HTMLButtonElement>(null);
+  const helpRef = useRef<HTMLButtonElement>(null);
+  const userMenuRef = useRef<HTMLButtonElement>(null);
+
+  const masthead = (
+    <Masthead id="icon-router-link" variant="docked">
+      <MastheadMain>
+        <MastheadBrand>
+          <MastheadLogo component={(props) => <a {...props} href="#" />}>
+            <Brand src={pfIconLogo} alt="PatternFly" heights={{ default: '37px' }} />
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <Divider />
+      <MastheadContent>
+        <Toolbar id="toolbar" isVertical>
+          <ToolbarContent>
+            <ToolbarItem>
+              <Nav onSelect={onNavSelect} variant="docked" aria-label="Icon global" ouiaId="IconNav">
+                <NavList>
+                  <NavItem
+                    preventDefault
+                    id="nav-icon-link1"
+                    to="#nav-icon-link1"
+                    itemId={0}
+                    isActive={activeItem === 0}
+                    icon={<CubeIcon />}
+                    anchorRef={navItem1Ref}
+                    aria-label="Link 1"
+                  />
+                  <NavItem
+                    preventDefault
+                    id="nav-icon-link2"
+                    to="#nav-icon-link2"
+                    itemId={1}
+                    isActive={activeItem === 1}
+                    icon={<FolderIcon />}
+                    anchorRef={navItem2Ref}
+                    aria-label="Link 2"
+                  />
+                  <NavItem
+                    preventDefault
+                    id="nav-icon-link3"
+                    to="#nav-icon-link3"
+                    itemId={2}
+                    isActive={activeItem === 2}
+                    icon={<CloudIcon />}
+                    anchorRef={navItem3Ref}
+                    aria-label="Link 3"
+                  />
+                  <NavItem
+                    preventDefault
+                    id="nav-icon-link4"
+                    to="#nav-icon-link4"
+                    itemId={3}
+                    isActive={activeItem === 3}
+                    icon={<CodeIcon />}
+                    anchorRef={navItem4Ref}
+                    aria-label="Link 4"
+                  />
+                </NavList>
+              </Nav>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="Link 1"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Link 2"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Link 3"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Link 4"></Tooltip>
+            </ToolbarItem>
+            <ToolbarGroup
+              variant="action-group-plain"
+              align={{ default: 'alignEnd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
+            >
+              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Tooltip aria="none" aria-live="off" triggerRef={settingsRef} content="Settings">
+                    <Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" />
+                  </Tooltip>
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Tooltip aria="none" aria-live="off" triggerRef={helpRef} content="Help">
+                    <Button
+                      ref={helpRef}
+                      aria-label="Help"
+                      variant={ButtonVariant.plain}
+                      icon={<QuestionCircleIcon />}
+                    />
+                  </Tooltip>
+                </ToolbarItem>
+              </ToolbarGroup>
+            </ToolbarGroup>
+            <ToolbarItem>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={onDropdownSelect}
+                shouldFocusToggleOnSelect
+                onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+                toggle={{
+                  toggleNode: (
+                    <Tooltip content="User menu" aria="none" aria-live="off" triggerRef={userMenuRef}>
+                      <MenuToggle
+                        ref={userMenuRef}
+                        onClick={onDropdownToggle}
+                        isExpanded={isDropdownOpen}
+                        icon={<Avatar src={imgAvatar} alt="" size="sm" />}
+                        variant="plain"
+                        aria-label="User menu"
+                      />
+                    </Tooltip>
+                  ),
+                  toggleRef: userMenuRef
+                }}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+
+  const mainContainerId = 'main-content-page-layout-tertiary-nav';
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
+
+  return (
+    <Page
+      variant="docked"
+      masthead={masthead}
+      skipToContent={pageSkipToContent}
+      breadcrumb={dashboardBreadcrumb}
+      mainContainerId={mainContainerId}
+      isHorizontalSubnavWidthLimited
+      isBreadcrumbWidthLimited
+      isBreadcrumbGrouped
+      additionalGroupedContent={
+        <PageSection aria-labelledby="main-title">
+          <Content>
+            <h1 id="main-title">Main title</h1>
+            <p>This is a full page demo.</p>
+          </Content>
+        </PageSection>
+      }
+    >
+      <PageSection aria-label="Card gallery">
+        <Gallery hasGutter>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

package/src/layouts/Bullseye/examples/bullseye.css

@@ -1,5 +1,5 @@
-.ws-react-l-bullseye .pf-v6-l-bullseye,
-.ws-react-l-bullseye .pf-v6-l-bullseye > div {
+.ws-react-f-bullseye .pf-v6-l-bullseye,
+.ws-react-f-bullseye .pf-v6-l-bullseye > div {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Flex/examples/flex.css

@@ -1,9 +1,9 @@
-.ws-react-l-flex .pf-v6-l-flex {
+.ws-react-f-flex .pf-v6-l-flex {
   padding: var(--pf-t--global--spacer--md);
 }
 
-.ws-react-l-flex .pf-v6-l-flex > div,
-.ws-react-l-flex .example-border {
+.ws-react-f-flex .pf-v6-l-flex > div,
+.ws-react-f-flex .example-border {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Gallery/examples/gallery.css

@@ -1,8 +1,8 @@
-.ws-react-l-gallery .pf-v6-l-gallery {
+.ws-react-f-gallery .pf-v6-l-gallery {
   padding: var(--pf-t--global--spacer--md);
 }
 
-.ws-react-l-gallery .pf-v6-l-gallery > div {
+.ws-react-f-gallery .pf-v6-l-gallery > div {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Grid/examples/grid.css

@@ -1,5 +1,5 @@
-.ws-react-l-grid > .pf-v6-l-grid,
-.ws-react-l-grid > .pf-v6-l-grid > .pf-v6-l-grid__item {
+.ws-react-f-grid > .pf-v6-l-grid,
+.ws-react-f-grid > .pf-v6-l-grid > .pf-v6-l-grid__item {
   min-height: 75px;
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);

package/src/layouts/Level/examples/level.css

@@ -1,13 +1,13 @@
-.ws-react-l-level {
+.ws-react-f-level {
   padding: var(--pf-t--global--spacer--sm);
 }
 
-.ws-react-l-level .pf-v6-l-level {
+.ws-react-f-level .pf-v6-l-level {
   min-height: 160px;
 }
 
-.ws-react-l-level .pf-v6-l-level,
-.ws-react-l-level .pf-v6-l-level > div {
+.ws-react-f-level .pf-v6-l-level,
+.ws-react-f-level .pf-v6-l-level > div {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Split/examples/split.css

@@ -1,5 +1,5 @@
-.ws-react-l-split .pf-v6-l-split,
-.ws-react-l-split .pf-v6-l-split > .pf-v6-l-split__item {
+.ws-react-f-split .pf-v6-l-split,
+.ws-react-f-split .pf-v6-l-split > .pf-v6-l-split__item {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Stack/examples/stack.css

@@ -1,15 +1,15 @@
-.ws-react-l-stack {
+.ws-react-f-stack {
   min-height: 30em;
   display: flex;
   flex-direction: column;
 }
 
-.ws-react-l-stack > .pf-v6-l-stack {
+.ws-react-f-stack > .pf-v6-l-stack {
   flex-grow: 1;
 }
 
-.ws-react-l-stack .pf-v6-l-stack,
-.ws-react-l-stack .pf-v6-l-stack > .pf-v6-l-stack__item {
+.ws-react-f-stack .pf-v6-l-stack,
+.ws-react-f-stack .pf-v6-l-stack > .pf-v6-l-stack__item {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }