@patternfly/react-core 5.2.0-prerelease.9 → 6.0.0-alpha.2

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -15,7 +15,6 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text,
   EmptyStateVariant,
@@ -318,7 +317,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isDrawerExpanded}
     >
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Alert Group with Notification Drawer demo</Text>
           <Text component="p">
@@ -330,7 +329,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </TextContent>
       </PageSection>
 
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <Button variant="secondary" onClick={() => addNewNotification('success')} style={alertButtonStyle}>
           Add toast success alert
         </Button>
@@ -350,7 +349,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </Button>
       </PageSection>
 
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <br />
           <Text component="h2">Max displayed alerts</Text>
@@ -370,7 +369,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           style={{ margin: '12px 0' }}
         />
       </PageSection>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <AlertGroup isToast isLiveRegion onOverflowClick={onAlertGroupOverflowClick} overflowMessage={overflowMessage}>
           {alerts.slice(0, maxDisplayed)}
         </AlertGroup>

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -6,7 +6,6 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text,
   Page,
@@ -24,7 +23,7 @@ export const Name = () => {
   return (
     <DashboardWrapper breadcrumb={null}>
       <Page>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">

package/src/demos/examples/DashboardWrapper.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  Text,
+  TextContent
+} from '@patternfly/react-core';
+import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+
+export const DashboardBreadcrumb = (
+  <Breadcrumb>
+    <BreadcrumbItem>Section home</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#" isActive>
+      Section landing
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+export const PageTemplateTitle = (
+  <PageSection>
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
+
+export default class DashboardWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItem: 1
+    };
+
+    this.onNavSelect = (_event, result) => {
+      this.setState({
+        activeItem: result.itemId
+      });
+    };
+  }
+
+  render() {
+    const { activeItem } = this.state;
+    const {
+      children,
+      mainContainerId,
+      breadcrumb,
+      header,
+      sidebar,
+      sidebarNavOpen,
+      onPageResize = () => {},
+      hasNoBreadcrumb,
+      notificationDrawer,
+      isNotificationDrawerExpanded,
+      hasPageTemplateTitle,
+      ...pageProps
+    } = this.props;
+
+    let renderedBreadcrumb;
+    if (!hasNoBreadcrumb) {
+      renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb;
+    }
+
+    const PageNav = (
+      <Nav onSelect={this.onNavSelect} aria-label="Nav">
+        <NavList>
+          <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
+            System panel
+          </NavItem>
+          <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
+            Policy
+          </NavItem>
+          <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
+            Authentication
+          </NavItem>
+          <NavItem itemId={3} isActive={activeItem === 3} to="#network">
+            Network services
+          </NavItem>
+          <NavItem itemId={4} isActive={activeItem === 4} to="#server">
+            Server
+          </NavItem>
+        </NavList>
+      </Nav>
+    );
+
+    const _sidebar = (
+      <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
+    const PageSkipToContent = (
+      <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
+        Skip to content
+      </SkipToContent>
+    );
+
+    return (
+      <Page
+        header={header !== undefined ? header : <DashboardHeader />}
+        sidebar={sidebar !== undefined ? sidebar : _sidebar}
+        isManagedSidebar
+        skipToContent={PageSkipToContent}
+        breadcrumb={renderedBreadcrumb}
+        mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
+        notificationDrawer={notificationDrawer}
+        isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+        {...(typeof onPageResize === 'function' && {
+          onPageResize: (event, resizeObject) => onPageResize(event, resizeObject)
+        })}
+        {...pageProps}
+      >
+        {hasPageTemplateTitle && PageTemplateTitle}
+        {children}
+      </Page>
+    );
+  }
+}

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -12,7 +12,6 @@ import {
   JumpLinksItem,
   JumpLinksList,
   PageSection,
-  PageSectionVariants,
   Sidebar,
   SidebarContent,
   SidebarPanel,
@@ -70,7 +69,7 @@ export const JumpLinksWithDrawer = () => {
           <DrawerContentBody>
             <Sidebar>
               <SidebarPanel variant="sticky">
-                <PageSection variant={PageSectionVariants.light}>
+                <PageSection>
                   <JumpLinks
                     isVertical={true}
                     label="Jump to section"
@@ -88,10 +87,10 @@ export const JumpLinksWithDrawer = () => {
                 </PageSection>
               </SidebarPanel>
               <SidebarContent>
-                <PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }} variant="light">
+                <PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }}>
                   <Button onClick={onToggleClick}>Toggle drawer</Button>
                 </PageSection>
-                <PageSection variant={PageSectionVariants.light}>
+                <PageSection>
                   <TextContent>
                     {headings.map((heading) => (
                       <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -31,7 +31,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -533,7 +532,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       isTertiaryNavGrouped
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">This is a full page demo.</Text>

package/src/demos/examples/Nav/NavDefault.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  TextContent,
+  Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavDefault: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+
+  const onNavSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    selectedItem: {
+      groupId: number | string;
+      itemId: number | string;
+      to: string;
+    }
+  ) => setActiveItem(selectedItem.itemId);
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        {/* Preventing default click behavior on each NavItem for demo purposes only */}
+        <NavItem preventDefault itemId={0} isActive={activeItem === 0} to="#">
+          System Panel
+        </NavItem>
+        <NavItem preventDefault itemId={1} isActive={activeItem === 1} to="#">
+          Policy
+        </NavItem>
+        <NavItem preventDefault itemId={2} isActive={activeItem === 2} to="#">
+          Authentication
+        </NavItem>
+        <NavItem preventDefault itemId={3} isActive={activeItem === 3} to="#">
+          Network Services
+        </NavItem>
+        <NavItem preventDefault itemId={4} isActive={activeItem === 4} to="#">
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const Sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+  const pageId = 'main-content-page-layout-default-nav';
+  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <>
+      <Page
+        header={<DashboardHeader />}
+        sidebar={Sidebar}
+        isManagedSidebar
+        skipToContent={PageSkipToContent}
+        breadcrumb={DashboardBreadcrumb}
+        mainContainerId={pageId}
+      >
+        <PageSection>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">
+              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+              of its relative line height of 1.5.
+            </Text>
+          </TextContent>
+        </PageSection>
+        <PageSection>
+          <Gallery hasGutter>
+            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+              <GalleryItem key={index}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </Page>
+    </>
+  );
+};

package/src/demos/examples/Nav/NavDrilldown.tsx

@@ -13,6 +13,7 @@ import {
   PageSection
 } from '@patternfly/react-core';
 import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
 interface MenuHeights {
   [menuId: string]: number;
 }
@@ -26,6 +27,7 @@ function getNavLayer(menuId: string): number {
     case 'subMenu-2':
       return 3;
   }
+  return 1;
 }
 
 const subMenuTwo: JSX.Element = (

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  Nav,
+  NavExpandable,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  TextContent,
+  Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavExpandableDemo: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = React.useState<string | number>('grp-1');
+  const [activeItem, setActiveItem] = React.useState<string | number>('grp-1_itm-1');
+
+  const onNavSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    selectedItem: {
+      groupId: number | string;
+      itemId: number | string;
+      to: string;
+    }
+  ) => {
+    setActiveItem(selectedItem.itemId);
+    setActiveGroup(selectedItem.groupId);
+  };
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavExpandable title="System Panel" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
+          {/* Preventing default click behavior on each NavItem for demo purposes only */}
+          <NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'} to="#">
+            Overview
+          </NavItem>
+          <NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'} to="#">
+            Resource usage
+          </NavItem>
+          <NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'} to="#">
+            Hypervisors
+          </NavItem>
+          <NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-4" isActive={activeItem === 'grp-1_itm-4'} to="#">
+            Instances
+          </NavItem>
+          <NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-5" isActive={activeItem === 'grp-1_itm-5'} to="#">
+            Volumes
+          </NavItem>
+          <NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-6" isActive={activeItem === 'grp-1_itm-6'} to="#">
+            Network
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable title="Policy" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
+          <NavItem preventDefault groupId="grp-2" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'} to="#">
+            Subnav link 1
+          </NavItem>
+          <NavItem preventDefault groupId="grp-2" itemId="grp-2_itm-2" isActive={activeItem === 'grp-2_itm-2'} to="#">
+            Subnav link 2
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable title="Authentication" groupId="grp-3" isActive={activeGroup === 'grp-3'}>
+          <NavItem preventDefault groupId="grp-3" itemId="grp-3_itm-1" isActive={activeItem === 'grp-3_itm-1'} to="#">
+            Subnav link 1
+          </NavItem>
+          <NavItem preventDefault groupId="grp-3" itemId="grp-3_itm-2" isActive={activeItem === 'grp-3_itm-2'} to="#">
+            Subnav link 2
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+
+  const Sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+  const pageId = 'main-content-page-layout-expandable-nav';
+  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <React.Fragment>
+      <Page
+        header={<DashboardHeader />}
+        sidebar={Sidebar}
+        isManagedSidebar
+        skipToContent={PageSkipToContent}
+        breadcrumb={DashboardBreadcrumb}
+        mainContainerId={pageId}
+      >
+        <PageSection>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">
+              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+              of its relative line height of 1.5.
+            </Text>
+          </TextContent>
+        </PageSection>
+        <PageSection>
+          <Gallery hasGutter>
+            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+              <GalleryItem key={index}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </Page>
+    </React.Fragment>
+  );
+};