chore: Remove LinkProperties from PageHeader in favor of VedaUIProvider (#1382)

**Related Ticket:** #1381
**Related PRs:** NASA-IMPACT/next-veda-ui#36

### Description of Changes
* Removed `LinkProperties` prop from PageHeader and down the tree. 
* Abstracted VedaUIProvider wrapper out so it can also wrap around tests
* Updated tests

### Notes & Questions About Changes
_{Add additonal notes and outstanding questions here related to changes
in this pull request}_

### Validation / Testing
* Make sure pageheader navigation is working as expected

Author: sandrahoang686

app/scripts/components/common/nav-wrapper.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
 import { NavLink } from 'react-router-dom';
-import { default as PageHeaderLegacy } from './page-header-legacy';
+import PageHeaderLegacy from './page-header-legacy';
 import PageHeader from './page-header';
 import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps';
 import NasaLogoColor from './nasa-logo-color';
@@ -38,12 +38,7 @@ function NavWrapper(props) {
   const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps();
 
   return isUSWDSEnabled ? (
-    <PageHeader
-      {...props}
-      logoSvg={<NasaLogoColor />}
-      linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
-      title={appTitle}
-    />
+    <PageHeader {...props} logoSvg={<NasaLogoColor />} title={appTitle} />
   ) : (
     <NavWrapperContainer
       id={HEADER_WRAPPER_ID}

app/scripts/components/common/page-header-legacy/index.tsx

@@ -229,14 +229,14 @@ const GlobalMenu = styled.ul`
   `}
 `;
 
-interface PageHeaderProps {
+interface PageHeaderLegacyProps {
   mainNavItems: NavItem[];
   subNavItems: NavItem[];
   logo: ReactElement;
   linkProperties: LinkProperties;
 }
 
-function PageHeader(props: PageHeaderProps) {
+function PageHeaderLegacy(props: PageHeaderLegacyProps) {
   const { mainNavItems, subNavItems, logo, linkProperties } = props;
   const { isMediumDown } = useMediaQuery();
   const [globalNavRevealed, setGlobalNavRevealed] = useState(false);
@@ -357,4 +357,4 @@ function PageHeader(props: PageHeaderProps) {
   );
 }
 
-export default PageHeader;
+export default PageHeaderLegacy;

app/scripts/components/common/page-header/index.tsx

@@ -10,12 +10,11 @@ import {
   USWDSNavMenuButton,
   USWDSExtendedNav
 } from '$uswds';
-import { LinkProperties } from '$types/veda';
+
 interface PageHeaderProps {
   mainNavItems: NavItem[];
   subNavItems: NavItem[];
   logoSvg?: SVGElement | JSX.Element;
-  linkProperties: LinkProperties;
   title: string;
   version?: string;
   accessibilityHomeShortCutText?: string;
@@ -25,7 +24,6 @@ export default function PageHeader({
   mainNavItems,
   subNavItems,
   logoSvg: Logo,
-  linkProperties,
   title,
   version,
   accessibilityHomeShortCutText
@@ -44,14 +42,13 @@ export default function PageHeader({
   }, []);
 
   const primaryItems = useMemo(
-    () =>
-      createDynamicNavMenuList(mainNavItems, linkProperties, isOpen, setIsOpen),
-    [mainNavItems, linkProperties, isOpen]
+    () => createDynamicNavMenuList(mainNavItems, isOpen, setIsOpen),
+    [mainNavItems, isOpen]
   );
 
   const secondaryItems = useMemo(
-    () => createDynamicNavMenuList(subNavItems, linkProperties),
-    [subNavItems, linkProperties]
+    () => createDynamicNavMenuList(subNavItems),
+    [subNavItems]
   );
 
   const skipNav = (e) => {
@@ -64,22 +61,13 @@ export default function PageHeader({
 
   return (
     <>
-      <button
-        type='button'
-        className='usa-skipnav'
-        onClick={skipNav}
-      >
+      <button type='button' className='usa-skipnav' onClick={skipNav}>
         {accessibilityHomeShortCutText || 'Skip to main content'}
       </button>
       <USWDSHeader extended={true} showMobileOverlay={expanded}>
         <div className='usa-navbar'>
           <USWDSHeaderTitle>
-            <LogoContainer
-              linkProperties={linkProperties}
-              LogoSvg={Logo}
-              title={title}
-              version={version}
-            />
+            <LogoContainer LogoSvg={Logo} title={title} version={version} />
           </USWDSHeaderTitle>
           <USWDSNavMenuButton onClick={toggleExpansion} label='Menu' />
         </div>

app/scripts/components/common/page-header/logo-container/index.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType } from 'react';
 import { Tip } from '../../tip';
-import { LinkProperties } from '$types/veda';
 import './logo-container.scss';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 /**
  * LogoContainer that is meant to integrate in the default
@@ -11,34 +11,33 @@ import './logo-container.scss';
  */
 
 export default function LogoContainer({
-  linkProperties,
   LogoSvg,
   title,
   version
 }: {
-  linkProperties: LinkProperties;
   LogoSvg?: SVGElement | JSX.Element;
   title: string;
   version?: string;
 }) {
-  const LinkElement: ComponentType<any> =
-    linkProperties.LinkElement as ComponentType<any>;
+  const {
+    navigation: { LinkComponent, linkProps }
+  } = useVedaUI();
 
   return (
     <div id='logo-container'>
-      <LinkElement
+      <LinkComponent
         id='logo-container-link'
-        {...{ [linkProperties.pathAttributeKeyName]: '/' }}
+        {...{ [linkProps.pathAttributeKeyName]: '/' }}
       >
-        {LogoSvg}
+        {LogoSvg as any}
         <span>{title}</span>
-      </LinkElement>
+      </LinkComponent>
       <Tip content={version ? `v${version}` : 'beta version'}>
         <div
           id='logo-container-beta-tag'
           {...{
-            as: linkProperties.LinkElement as ComponentType<any>,
-            [linkProperties.pathAttributeKeyName]: '/development'
+            as: LinkComponent,
+            [linkProps.pathAttributeKeyName]: '/development'
           }}
         >
           {version || 'BETA'}

app/scripts/components/common/page-header/logo-container/logo-container.scss

@@ -11,6 +11,7 @@
     gap: themeVars.$veda-uswds-spacing-105;
     font-weight: themeVars.$veda-uswds-fontweight-bold;
     font-size: themeVars.$veda-uswds-fontsize-lg;
+    color: themeVars.$veda-uswds-color-base-ink;
   }
 
   #nasa-logo-pos {

app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx

@@ -3,12 +3,10 @@ import { NavItem, NavItemType } from '../types';
 import { NavDropDownButton } from './nav-dropdown-button';
 import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links';
 import { NavItemCTA } from './nav-item-cta';
-import { LinkProperties } from '$types/veda';
 import { SetState } from '$types/aliases';
 
 export const createDynamicNavMenuList = (
   navItems: NavItem[],
-  linkProperties: LinkProperties,
   isOpen?: boolean[],
   setIsOpen?: SetState<boolean[]>
 ): JSX.Element[] => {
@@ -22,14 +20,13 @@ export const createDynamicNavMenuList = (
               item,
               isOpen,
               setIsOpen,
-              index,
-              linkProperties
+              index
             }}
           />
         );
 
       case NavItemType.INTERNAL_LINK:
-        return <NavItemInternalLink {...{ item, linkProperties }} />;
+        return <NavItemInternalLink item={item} />;
 
       case NavItemType.EXTERNAL_LINK:
         return <NavItemExternalLink item={item} />;

app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx

@@ -3,23 +3,20 @@ import { DropdownNavLink } from '../types';
 import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list';
 import { USWDSNavDropDownButton, USWDSMenu } from '$uswds';
 import { SetState } from '$types/aliases';
-import { LinkProperties } from '$types/veda';
 import { useClickOutside } from '$utils/use-click-outside';
 
 interface NavDropDownButtonProps {
   item: DropdownNavLink;
   isOpen: boolean[];
   setIsOpen: SetState<boolean[]>;
   index: number;
-  linkProperties: LinkProperties;
 }
 
 export const NavDropDownButton = ({
   item,
   isOpen,
   setIsOpen,
-  index,
-  linkProperties
+  index
 }: NavDropDownButtonProps) => {
   const onToggle = (index: number, setIsOpen: SetState<boolean[]>): void => {
     setIsOpen((prevIsOpen) => {
@@ -42,7 +39,7 @@ export const NavDropDownButton = ({
     }
   }, [index, isOpen, setIsOpen]);
   const dropdownRef = useClickOutside(handleClickOutside);
-  const submenuItems = createDynamicNavMenuList(item.children, linkProperties);
+  const submenuItems = createDynamicNavMenuList(item.children);
 
   return (
     <div key={item.id} ref={dropdownRef}>

app/scripts/components/common/page-header/nav/nav-item-links.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { ExternalNavLink, InternalNavLink } from '../types';
-import { LinkProperties } from '$types/veda';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface NavItemExternalLinkProps {
   item: ExternalNavLink;
 }
 
 interface NavItemInternalLinkProps {
   item: InternalNavLink;
-  linkProperties: LinkProperties;
 }
 
 export const NavItemExternalLink = ({ item }: NavItemExternalLinkProps) => {
@@ -26,26 +25,22 @@ export const NavItemExternalLink = ({ item }: NavItemExternalLinkProps) => {
   );
 };
 
-export const NavItemInternalLink = ({
-  item,
-  linkProperties
-}: NavItemInternalLinkProps) => {
-  if (linkProperties.LinkElement) {
-    const path = {
-      [linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to
-    };
-    const LinkElement = linkProperties.LinkElement;
-    return (
-      <LinkElement
-        key={item.id}
-        {...path}
-        className='usa-nav__link'
-        id={item.id}
-      >
-        <span>{item.title}</span>
-      </LinkElement>
-    );
-  }
-  // If the link provided is invalid, do not render the element
-  return null;
+export const NavItemInternalLink = ({ item }: NavItemInternalLinkProps) => {
+  const {
+    navigation: { LinkComponent, linkProps }
+  } = useVedaUI();
+
+  const path = {
+    [linkProps.pathAttributeKeyName]: (item as InternalNavLink).to
+  };
+  return (
+    <LinkComponent
+      key={item.id}
+      {...path}
+      className='usa-nav__link'
+      id={item.id}
+    >
+      <span>{item.title}</span>
+    </LinkComponent>
+  );
 };

app/scripts/components/common/page-header/page-header.test.tsx

@@ -1,9 +1,11 @@
-import React, { ComponentType } from 'react';
+import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { BrowserRouter } from 'react-router-dom';
 import { navItems } from '../../../../../mock/veda.config.js';
 import NasaLogoColor from '../nasa-logo-color';
+import { VedaUIConfigProvider } from '../../../../../test/utils.js';
 import { NavItem } from './types';
 import PageHeader from './index';
 
@@ -13,22 +15,21 @@ import PageHeader from './index';
 const mockMainNavItems: NavItem[] = navItems.mainNavItems;
 const mockSubNavItems: NavItem[] = navItems.subNavItems;
 
-const mockLinkProperties = {
-  pathAttributeKeyName: 'to',
-  LinkElement: 'a' as unknown as ComponentType
-};
 const testTitle = 'Test Title';
 
 describe('PageHeader', () => {
   beforeEach(() => {
     render(
-      <PageHeader
-        mainNavItems={mockMainNavItems}
-        subNavItems={mockSubNavItems}
-        logoSvg={<NasaLogoColor />}
-        title={testTitle}
-        linkProperties={mockLinkProperties}
-      />
+      <BrowserRouter basename=''>
+        <VedaUIConfigProvider>
+          <PageHeader
+            mainNavItems={mockMainNavItems}
+            subNavItems={mockSubNavItems}
+            logoSvg={<NasaLogoColor />}
+            title={testTitle}
+          />
+        </VedaUIConfigProvider>
+      </BrowserRouter>
     );
   });
 
@@ -45,7 +46,7 @@ describe('PageHeader', () => {
 
     expect(primaryNav.childElementCount).toEqual(mockMainNavItems.length);
     expect(secondaryNav.childElementCount).toEqual(mockSubNavItems.length);
-    expect(within(primaryNav).getByText('Test')).toBeInTheDocument();
+    expect(within(primaryNav).getByText('TestDropdown1')).toBeInTheDocument();
     expect(within(primaryNav).getByText('Data Catalog')).toBeInTheDocument();
     expect(within(primaryNav).getByText('Exploration')).toBeInTheDocument();
     expect(within(primaryNav).getByText('Stories')).toBeInTheDocument();
@@ -59,11 +60,9 @@ describe('PageHeader', () => {
     expect(navElement).toBeInTheDocument();
 
     const primaryNav = within(navElement).getAllByRole('list')[0];
-    const navItem = screen.getByText('Test');
-    expect(
-      within(primaryNav).getByText('dropdown menu item 1')
-    ).not.toBeVisible();
+    const navItem = screen.getByText('TestDropdown1');
+    expect(within(primaryNav).getByText('route to stories')).not.toBeVisible();
     await user.click(navItem);
-    expect(within(primaryNav).getByText('dropdown menu item 1')).toBeVisible();
+    expect(within(primaryNav).getByText('route to stories')).toBeVisible();
   });
 });

mock/veda.config.js

@@ -7,26 +7,26 @@ function checkEnvFlag(value) {
 let mainNavItems = [
   {
     id: 'test',
-    title: 'Test',
+    title: 'TestDropdown1',
     type: 'dropdown',
     children: [
       {
         id: 'dropdown-menu-item-1',
-        title: 'dropdown menu item 1',
+        title: 'route to stories',
         to: '/stories',
         type: 'internalLink'
       }
     ]
   },
   {
     id: 'another-test',
-    title: 'Another Test',
+    title: 'TestDropdown2',
     type: 'dropdown',
     children: [
       {
         id: 'dropdown-menu-item-2',
-        title: 'dropdown menu item 2',
-        to: '/stories',
+        title: 'route to about',
+        to: '/about',
         type: 'internalLink'
       }
     ]