chore(Nav): convert demos to TS (#9487)

* chore(Nav): convert demos to TS * fix(Nav): omit <boolean> in useState * fix(Nav): subnav aria-label * chore(Nav): rename components * chore(Nav): add preventDefault prop to NavItem components in demos * refactor(Nav examples): simplify Array.apply, renaming * fix(Nav demo): update JS shortcuts to TS warnings should disappear once issue #9544 is closed * docs(Nav): fix Flyout nav demo: hide sidebar bug * chore(Nav demo): update DashboardHeader/Wrapper imports * chore(Nav demo): use JS shortcut, since docs build still failing on ts * refactor(Nav demo): get rid of Array.apply
patternfly · Oct 19, 2023 · 1194a7e · 1194a7e
1 parent b37416a
commit 1194a7e
Show file tree

Hide file tree

Showing 12 changed files with 1,748 additions and 1,673 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,98 @@
+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 '@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 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.from({ length: 10 }, (_value: any, index: React.Key) => (
+              <GalleryItem key={index}>
+                <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,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 = (

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,124 @@
+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 '@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 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.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>
+  );
+};