@patternfly/react-core 6.0.0-alpha.10 → 6.0.0-alpha.12

package/src/components/Nav/examples/Nav.md

@@ -50,12 +50,6 @@ The following example shows two navigation groups, each with a `title` prop pass
 
 ```
 
-### Tertiary (deprecated)
-
-```ts file="./NavLegacyTertiary.tsx" isDeprecated
-
-```
-
 ### Flyout
 
 A flyout should be a `Menu` component. Press `space` or `right arrow` to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press `escape` or `left arrow` to close a flyout.

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
+import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavExpandableExample: React.FunctionComponent = () => {
   const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1');
@@ -49,7 +49,6 @@ export const NavExpandableExample: React.FunctionComponent = () => {
           >
             Subnav 1 Link 1
           </NavItem>
-          <NavItemSeparator />
           <NavItem
             preventDefault
             id="expandable-2"

package/src/components/Nav/examples/nav.css

@@ -1,17 +1,3 @@
-#ws-react-c-navigation-basic,
-#ws-react-c-navigation-grouped,
-#ws-react-c-navigation-default,
-#ws-react-c-navigation-expandable,
-#ws-react-c-navigation-expandable-wsubnavigation-titles,
-#ws-react-c-navigation-mixed,
-#ws-react-c-navigation-expandable-third-level,
-#ws-react-c-navigation-link-text,
-#ws-react-c-navigation-horizontal-subnav,
-#ws-react-c-navigation-flyout,
-#ws-react-c-navigation-drilldown {
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
 #ws-react-c-navigation-flyout,
 #ws-react-c-navigation-drilldown {
   width: 300px;

package/src/components/Page/Page.tsx

@@ -44,8 +44,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
-  /** Flag indicating if tertiary nav width should be limited */
-  isTertiaryNavWidthLimited?: boolean;
+  /** Flag indicating if horizontal sub navigation width should be limited */
+  isHorizontalSubnavWidthLimited?: boolean;
   /**
    * If true, the managed sidebar is initially open for desktop view
    */
@@ -71,12 +71,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
-  /** Tertiary nav component for the page */
-  tertiaryNav?: React.ReactNode;
+  /** Horizontal sub navigation component for the page */
+  horizontalSubnav?: React.ReactNode;
   /** Accessible label, can be used to name main section */
   mainAriaLabel?: string;
-  /** Flag indicating if the tertiaryNav should be in a group */
-  isTertiaryNavGrouped?: boolean;
+  /** Flag indicating if the horizontal sub navigation should be in a group */
+  isHorizontalSubnavGrouped?: boolean;
   /** Flag indicating if the breadcrumb should be in a group */
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
@@ -219,7 +219,7 @@ class Page extends React.Component<PageProps, PageState> {
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
-      isTertiaryNavWidthLimited,
+      isHorizontalSubnavWidthLimited,
       skipToContent,
       role,
       mainContainerId,
@@ -233,8 +233,8 @@ class Page extends React.Component<PageProps, PageState> {
       mainAriaLabel,
       mainTabIndex,
       mainComponent,
-      tertiaryNav,
-      isTertiaryNavGrouped,
+      horizontalSubnav,
+      isHorizontalSubnavGrouped,
       isBreadcrumbGrouped,
       additionalGroupedContent,
       groupProps,
@@ -254,14 +254,14 @@ class Page extends React.Component<PageProps, PageState> {
     };
 
     let nav = null;
-    if (tertiaryNav && isTertiaryNavWidthLimited) {
+    if (horizontalSubnav && isHorizontalSubnavWidthLimited) {
       nav = (
         <div className={css(styles.pageMainNav, styles.modifiers.limitWidth)}>
-          <div className={css(styles.pageMainBody)}>{tertiaryNav}</div>
+          <div className={css(styles.pageMainBody)}>{horizontalSubnav}</div>
         </div>
       );
-    } else if (tertiaryNav) {
-      nav = <div className={css(styles.pageMainNav)}>{tertiaryNav}</div>;
+    } else if (horizontalSubnav) {
+      nav = <div className={css(styles.pageMainNav)}>{horizontalSubnav}</div>;
     }
 
     const crumb = breadcrumb ? (
@@ -282,11 +282,11 @@ class Page extends React.Component<PageProps, PageState> {
       </section>
     ) : null;
 
-    const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
+    const isGrouped = isHorizontalSubnavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
 
     const group = isGrouped ? (
       <PageGroup {...groupProps}>
-        {isTertiaryNavGrouped && nav}
+        {isHorizontalSubnavGrouped && nav}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
       </PageGroup>
@@ -304,7 +304,7 @@ class Page extends React.Component<PageProps, PageState> {
         aria-label={mainAriaLabel}
       >
         {group}
-        {!isTertiaryNavGrouped && nav}
+        {!isHorizontalSubnavGrouped && nav}
         {!isBreadcrumbGrouped && crumb}
         {children}
       </Component>

package/src/components/Page/__tests__/Page.test.tsx

@@ -235,7 +235,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageNavigation>
-          <Nav aria-label="Nav" variant="tertiary">
+          <Nav aria-label="Nav" variant="horizontal-subnav">
             <NavList>
               <NavItem itemId={0} isActive>
                 System Panel
@@ -273,7 +273,7 @@ describe('Page', () => {
             </Breadcrumb>
           </PageBreadcrumb>
           <PageNavigation>
-            <Nav aria-label="Nav" variant="tertiary">
+            <Nav aria-label="Nav" variant="horizontal-subnav">
               <NavList>
                 <NavItem itemId={0} isActive>
                   System Panel
@@ -310,7 +310,7 @@ describe('Page', () => {
       </PageBreadcrumb>
     );
     const nav = (
-      <Nav aria-label="Nav" variant="tertiary">
+      <Nav aria-label="Nav" variant="horizontal-subnav">
         <NavList>
           <NavItem itemId={0} isActive>
             System Panel
@@ -329,9 +329,9 @@ describe('Page', () => {
         header={Header}
         sidebar={Sidebar}
         breadcrumb={crumb}
-        tertiaryNav={nav}
+        horizontalSubnav={nav}
         isBreadcrumbGrouped
-        isTertiaryNavGrouped
+        isHorizontalSubnavGrouped
         groupProps={{
           stickyOnBreakpoint: { default: 'bottom' },
           hasShadowTop: true,

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -536,30 +536,42 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
             <ul
               class="pf-v5-c-nav__list"
               role="list"
@@ -626,25 +638,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
       </div>
@@ -704,30 +728,42 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-3"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
             <ul
               class="pf-v5-c-nav__list"
               role="list"
@@ -794,25 +830,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
         <section
@@ -974,30 +1022,42 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       >
         <nav
           aria-label="Nav"
-          class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-          data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
+          class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+          data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
           data-ouia-component-type="PF5/Nav"
           data-ouia-safe="true"
         >
-          <button
-            aria-label="Scroll back"
+          <div
             class="pf-v5-c-nav__scroll-button"
-            disabled=""
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll back"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-              />
-            </svg>
-          </button>
+              <span
+                class="pf-v5-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
           <ul
             class="pf-v5-c-nav__list"
             role="list"
@@ -1064,25 +1124,37 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
               </a>
             </li>
           </ul>
-          <button
-            aria-label="Scroll foward"
+          <div
             class="pf-v5-c-nav__scroll-button"
-            disabled=""
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll foward"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </button>
+              <span
+                class="pf-v5-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </nav>
       </div>
       <section

package/src/components/Page/examples/Page.md

@@ -61,16 +61,6 @@ To add horizontal navigation to the top of a `<Page>`, add the navigation inside
 
 ```
 
-### Tertiary navigation (deprecated)
-
-[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation.
-
-Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
-
-```ts file="./PageTertiaryNav.tsx" isDeprecated
-
-```
-
 ### Uncontrolled navigation
 
 When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isSidebarOpen` into the `<PageSidebar>` and `onSidebarToggle` into the `<PageToggleButton>`.
@@ -114,7 +104,7 @@ The following example adds a group containing `<PageNavigation>`, `<PageBreadcru
 To add additional components and information to a group, you may use the following properties:
 
 - To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`.
-- To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
+- To indicate that horizontal sub navigation should be in a group, use `isHorizontalSubnavGrouped`.
 - To specify additional group content, use `additionalGroupedContent`.
 
 ```ts file="./PageGroupSection.tsx"

package/src/components/Page/examples/PageGroupSection.tsx

@@ -71,7 +71,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
     <Page header={header} sidebar={sidebar}>
       <PageGroup>
         <PageNavigation>
-          <Nav aria-label="Group section navigation" variant="tertiary">
+          <Nav aria-label="Group section navigation" variant="horizontal-subnav">
             <NavList>
               <NavItem href="#" itemId={0} isActive>
                 System panel

package/src/demos/Nav.md

@@ -44,16 +44,6 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 ```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen
 ```
 
-### Tertiary nav (deprecated)
-
-```js file='./examples/Nav/deprecated/NavTertiary.tsx' isFullscreen
-```
-
-### Light nav (deprecated)
-
-```js file='./examples/Nav/deprecated/NavLight.tsx' isFullscreen
-```
-
 ### Manual nav
 
 ```js file='./examples/Nav/NavManual.tsx' isFullscreen

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

@@ -527,9 +527,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       skipToContent={pageSkipToContent}
       breadcrumb={dashboardBreadcrumb}
       mainContainerId={mainContainerId}
-      isTertiaryNavWidthLimited
+      isHorizontalSubnavWidthLimited
       isBreadcrumbWidthLimited
-      isTertiaryNavGrouped
       isBreadcrumbGrouped
       additionalGroupedContent={
         <PageSection>

package/src/components/Nav/examples/NavLegacyTertiary.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Nav, NavItem, NavList } from '@patternfly/react-core';
-
-export const NavLegacyTertiary: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-
-  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
-    setActiveItem(result.itemId as number);
-  };
-
-  return (
-    <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary local">
-      <NavList>
-        {Array.from({ length: 10 }).map(function (_value, index) {
-          const num = index + 1;
-          return (
-            <NavItem
-              preventDefault
-              key={num}
-              itemId={num}
-              isActive={activeItem === num}
-              id={`legacy-tertiary-${num}`}
-              to={`#legacy-tertiary-${num}`}
-            >
-              Tertiary nav item {num}
-            </NavItem>
-          );
-        })}
-      </NavList>
-    </Nav>
-  );
-};