chore(Nav): convert demos to TS

patternfly · Aug 13, 2023 · eb294c5 · eb294c5
1 parent 03985a2
commit eb294c5
Show file tree

Hide file tree

Showing 12 changed files with 1,547 additions and 1,676 deletions.
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
diff --git a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  TextContent,
+  Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '../DashboardWrapper';
+import DashboardHeader from '../DashboardHeader';
+
+export const PageLayoutDefaultNav: 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>
+        <NavItem itemId={0} isActive={activeItem === 0} to="#">
+          System Panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1} to="#">
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2} to="#">
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3} to="#">
+          Network Services
+        </NavItem>
+        <NavItem 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 variant={PageSectionVariants.light}>
+          <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.apply(0, Array(10)).map((_x: any, i: React.Key | null | undefined) => (
+              <GalleryItem key={i}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </Page>
+    </>
+  );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
@@ -13,7 +13,7 @@ import {
   PageSection
 } from '@patternfly/react-core';
 
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import DashboardHeader from '../DashboardHeader';
 
 interface MenuHeights {
   [menuId: string]: number;

diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/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,
+  PageSectionVariants,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  TextContent,
+  Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '../DashboardWrapper';
+import DashboardHeader from '../DashboardHeader';
+
+export const PageLayoutExpandableNav: 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>
+          <NavItem groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'} to="#">
+            Overview
+          </NavItem>
+          <NavItem groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'} to="#">
+            Resource usage
+          </NavItem>
+          <NavItem groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'} to="#">
+            Hypervisors
+          </NavItem>
+          <NavItem groupId="grp-1" itemId="grp-1_itm-4" isActive={activeItem === 'grp-1_itm-4'} to="#">
+            Instances
+          </NavItem>
+          <NavItem groupId="grp-1" itemId="grp-1_itm-5" isActive={activeItem === 'grp-1_itm-5'} to="#">
+            Volumes
+          </NavItem>
+          <NavItem 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 groupId="grp-2" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'} to="#">
+            Subnav link 1
+          </NavItem>
+          <NavItem 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 groupId="grp-3" itemId="grp-3_itm-1" isActive={activeItem === 'grp-3_itm-1'} to="#">
+            Subnav link 1
+          </NavItem>
+          <NavItem 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 variant={PageSectionVariants.light}>
+          <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.apply(0, Array(10)).map((_x: any, i: React.Key | null | undefined) => (
+              <GalleryItem key={i}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </Page>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  Page,
+  Nav,
+  NavList,
+  NavItem,
+  PageSidebar,
+  PageSidebarBody,
+  PageSection,
+  PageSectionVariants,
+  Menu,
+  MenuContent,
+  MenuList,
+  MenuItem
+} from '@patternfly/react-core';
+import DashboardHeader from '../DashboardHeader';
+
+export const VerticalPage: 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 onMenuSelect = (_event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
+    itemId && setActiveItem(itemId);
+  };
+
+  const numFlyouts = 5;
+  const FlyoutMenu = ({ depth, children }) => (
+    <Menu key={depth} containsFlyout isNavFlyout id={`menu-${depth}`} onSelect={onMenuSelect}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`}>
+            Additional settings
+          </MenuItem>
+          {[...Array(numFlyouts - depth).keys()].map((j) => (
+            <MenuItem key={`${depth}-${j}`} itemId={`${depth}-${j}`} to={`#menu-link-${depth}-${j}`}>
+              Settings menu {depth} item {j}
+            </MenuItem>
+          ))}
+          <MenuItem flyoutMenu={children} itemId={`next-menu-2-${depth}`}>
+            Additional settings
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+  let curFlyout = <FlyoutMenu depth={1}>{}</FlyoutMenu>;
+  for (let i = 2; i < numFlyouts - 1; i++) {
+    curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;
+  }
+
+  const Sidebar = (
+    <PageSidebar style={{ overflow: 'visible' }}>
+      <PageSidebarBody>
+        <Nav onSelect={onNavSelect}>
+          <NavList>
+            <NavItem preventDefault id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
+              System Panel
+            </NavItem>
+            <NavItem preventDefault flyout={curFlyout} id="flyout-link2" itemId={1} isActive={activeItem === 1}>
+              Settings
+            </NavItem>
+            <NavItem preventDefault id="flyout-link3" to="#flyout-link3" itemId={2} isActive={activeItem === 2}>
+              Authentication
+            </NavItem>
+          </NavList>
+        </Nav>
+      </PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page header={<DashboardHeader />} sidebar={Sidebar} isManagedSidebar>
+      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
+      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
+      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+    </Page>
+  );
+};