Expose As Is - PageHeader, LinkElement Prop & Logo (#1184)

**Related Ticket:** #1136 ### Description of Changes * Exposes the Page Header, LinkElement as prop, & LOGO without any additional styling ### Notes & Questions About Changes * **Related PR:** developmentseed/next-veda-ui#6 * Next Preview here (version published as `5.8.0-alpha.0`) => https://deploy-preview-6--veda-ui-next-test.netlify.app/ ### Validation / Testing * This should NOT break any current behavior with the page header and navigation
NASA-IMPACT · Oct 29, 2024 · 0cc5f82 · 0cc5f82
2 parents 646f73e + 947ad47
commit 0cc5f82
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 33 deletions.
diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode, useContext, useCallback, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { useDeepCompareEffect } from 'use-deep-compare';
 import styled from 'styled-components';
 import { Outlet } from 'react-router';
@@ -97,7 +98,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
       <NavWrapper
         mainNavItems={mainNavItems}
         subNavItems={subNavItems}
-        logo={<Logo />}
+        logo={<Logo linkProperties={{LinkElement: Link, pathAttributeKeyName: 'to'}} />}
       />
       <PageBody id={PAGE_BODY_ID} tabIndex={-1}>
         <Outlet />

diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js
@@ -1,7 +1,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 PageHeader from './page-header';
 import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps';
 
@@ -35,7 +35,10 @@ function PageNavWrapper(props) {
       shouldSlideHeader={isHeaderHidden}
       headerHeight={headerHeight}
     >
-      <PageHeader {...props} />
+      <PageHeader
+        {...props}
+        linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
+      />
     </NavWrapper>
   );
 }

diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx
@@ -15,6 +15,7 @@ import {
 } from '@devseed-ui/collecticons';
 
 import UnscrollableBody from '../unscrollable-body';
+import { LinkProperties } from '../card';
 import NavMenuItem from './nav-menu-item';
 import { NavItem } from './types';
 
@@ -229,14 +230,13 @@ const GlobalMenu = styled.ul`
 interface PageHeaderProps {
   mainNavItems: NavItem[];
   subNavItems: NavItem[];
-  logo: ReactElement
+  logo: ReactElement;
+  linkProperties: LinkProperties;
 }
 
-
 function PageHeader(props: PageHeaderProps) {
-  const { mainNavItems, subNavItems, logo } = props;
+  const { mainNavItems, subNavItems, logo, linkProperties } = props;
   const { isMediumDown } = useMediaQuery();
-
   const [globalNavRevealed, setGlobalNavRevealed] = useState(false);
 
   const globalNavBodyRef = useRef<HTMLDivElement>(null);
@@ -276,7 +276,6 @@ function PageHeader(props: PageHeaderProps) {
     <>
     <SROnly href='#' onClick={skipNav}>Skip to main content</SROnly>
     <PageHeaderSelf id={HEADER_ID}>
-
       {globalNavRevealed && isMediumDown && <UnscrollableBody />}
       {logo}
       {isMediumDown && (
@@ -317,15 +316,15 @@ function PageHeader(props: PageHeaderProps) {
                 <GlobalNavBlockTitle>Global</GlobalNavBlockTitle>
                 <GlobalMenu>
                   {mainNavItems.map((item) => {
-                    return <NavMenuItem key={`${item.title}-nav-item`} item={item} alignment='left' onClick={closeNavOnClick} />;
+                    return <NavMenuItem linkProperties={linkProperties} key={`${item.title}-nav-item`} item={item} alignment='left' onClick={closeNavOnClick} />;
                   })}
                 </GlobalMenu>
               </SectionsNavBlock>
               <SectionsNavBlock>
                 <GlobalNavBlockTitle>Meta</GlobalNavBlockTitle>
                 <GlobalMenu>
                   {subNavItems.map((item) => {
-                    return <NavMenuItem key={`${item.title}-nav-item`} item={item} alignment='right' onClick={closeNavOnClick} />;
+                    return <NavMenuItem linkProperties={linkProperties} key={`${item.title}-nav-item`} item={item} alignment='right' onClick={closeNavOnClick} />;
                   })}
                 </GlobalMenu>
               </SectionsNavBlock>

diff --git a/app/scripts/components/common/page-header/logo-container.tsx b/app/scripts/components/common/page-header/logo-container.tsx
@@ -0,0 +1,30 @@
+import React, { ComponentType } from 'react';
+import { Tip } from '../tip';
+import { LinkProperties } from '../card';
+import { Brand, PageTitleSecLink } from './logo';
+/**
+ * LogoContainer that is meant to integrate in the default page header without the dependencies of the veda virtual modules
+ * and expects the Logo SVG to be passed in as a prop - this will support the instance for refactor
+ */
+
+export default function LogoContainer ({ linkProperties, Logo, title, subTitle, version }: {
+  linkProperties: LinkProperties,
+  Logo: JSX.Element,
+  title: string,
+  subTitle: string,
+  version: string
+}) {
+  const LinkElement: ComponentType<any> = linkProperties.LinkElement as ComponentType<any>;
+
+  return (
+    <Brand>
+      <LinkElement {...{[linkProperties.pathAttributeKeyName]: '/'}}>
+        {Logo}
+        <span>{title}</span> <span>{subTitle}</span>
+      </LinkElement>
+      <Tip content={`v${version}`}>
+      <PageTitleSecLink {...{as: linkProperties.LinkElement as ComponentType<any>, [linkProperties.pathAttributeKeyName]: '/development'}}>Beta</PageTitleSecLink>
+      </Tip>
+    </Brand>
+  );
+}
diff --git a/app/scripts/components/common/page-header/logo.tsx b/app/scripts/components/common/page-header/logo.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import styled from 'styled-components';
 import { glsp, media, themeVal } from '@devseed-ui/theme-provider';
-import { Link } from 'react-router-dom';
 import NasaLogo from '../nasa-logo';
 import { Tip } from '../tip';
+import { LinkProperties } from '../card';
 import { ComponentOverride } from '$components/common/page-overrides';
 
 const appTitle = process.env.APP_TITLE;
 const appVersion = process.env.APP_VERSION;
 
-const Brand = styled.div`
+export const Brand = styled.div`
   display: flex;
   flex-shrink: 0;
 
@@ -74,7 +74,7 @@ const Brand = styled.div`
   }
 `;
 
-const PageTitleSecLink = styled(Link)`
+export const PageTitleSecLink = styled.a`
   align-self: end;
   font-size: 0.75rem;
   font-weight: ${themeVal('type.base.bold')};
@@ -98,16 +98,18 @@ const PageTitleSecLink = styled(Link)`
   `}
 `;
 
-export default function Logo () {
+export default function Logo ({ linkProperties }: { linkProperties: LinkProperties }) {
+  const LinkElement: ComponentType<any> = linkProperties.LinkElement as ComponentType<any>;
+
   return (
   <ComponentOverride with='headerBrand'>
     <Brand>
-      <Link to='/'>
+      <LinkElement {...{[linkProperties.pathAttributeKeyName]: '/'}}>
         <NasaLogo />
         <span>Earthdata</span> <span>{appTitle}</span>
-      </Link>
+      </LinkElement>
       <Tip content={`v${appVersion}`}>
-        <PageTitleSecLink to='/development'>Beta</PageTitleSecLink>
+      <PageTitleSecLink {...{as: linkProperties.LinkElement as ComponentType<any>, [linkProperties.pathAttributeKeyName]: '/development'}}>Beta</PageTitleSecLink>
       </Tip>
     </Brand>
   </ComponentOverride>);

diff --git a/app/scripts/components/common/page-header/nav-menu-item.tsx b/app/scripts/components/common/page-header/nav-menu-item.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import styled from 'styled-components';
-import { NavLink } from 'react-router-dom';
 import {
   glsp,
   media,
@@ -13,10 +12,12 @@ import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown';
 
 import DropdownScrollable from '../dropdown-scrollable';
 import GoogleForm from '../google-form';
+import { LinkProperties } from '../card';
 import { AlignmentEnum, InternalNavLink, ExternalNavLink, NavLinkItem, DropdownNavLink, ModalNavLink, NavItem, NavItemType } from './types.d';
 import GlobalMenuLinkCSS from '$styles/menu-link';
 import { useMediaQuery } from '$utils/use-media-query';
 
+
 const rgbaFixed = rgba as any;
 
 export const GlobalNavActions = styled.div`
@@ -38,9 +39,10 @@ export const GlobalNavToggle = styled(Button)`
   z-index: 2000;
 `;
 
-const GlobalMenuLink = styled(NavLink)`
+const GlobalMenuLink = styled.a`
   ${GlobalMenuLinkCSS}
 `;
+
 const GlobalMenuButton = styled(Button)`
   ${GlobalMenuLinkCSS}
 `;
@@ -60,12 +62,17 @@ const DropMenuNavItem = styled(DropMenuItem)`
 
 const LOG = true;
 
-function LinkDropMenuNavItem({ child, onClick }: { child: NavLinkItem, onClick?:() => void}) {
+function LinkDropMenuNavItem({ child, onClick, linkProperties }: { child: NavLinkItem, onClick?:() => void, linkProperties: LinkProperties }) {
   const { title, type, ...rest } = child;
+  const linkProps = {
+    as: linkProperties.LinkElement as ComponentType<any>,
+    [linkProperties.pathAttributeKeyName]: (rest as InternalNavLink).to,
+  };
+
   if (type === NavItemType.INTERNAL_LINK) {
     return (
     <li>
-      <DropMenuNavItem as={NavLink} to={(rest as InternalNavLink).to} onClick={onClick} data-dropdown='click.close'>
+      <DropMenuNavItem {...linkProps} onClick={onClick} data-dropdown='click.close'>
         {title}
       </DropMenuNavItem>
     </li>
@@ -89,18 +96,23 @@ function LinkDropMenuNavItem({ child, onClick }: { child: NavLinkItem, onClick?:
 }
 
 
-export default function NavMenuItem({ item, alignment, onClick }: {item: NavItem, alignment?: AlignmentEnum, onClick?: () => void }) {
+export default function NavMenuItem({ item, alignment, onClick, linkProperties }: {item: NavItem, alignment?: AlignmentEnum, onClick?: () => void, linkProperties: LinkProperties }) {
   const { isMediumDown } = useMediaQuery();
   const { title, type, ...rest } = item;
+
   if (type === NavItemType.INTERNAL_LINK) {
-      return (
-        <li key={`${title}-nav-item`}>
-        <GlobalMenuLink to={(rest as InternalNavLink).to} onClick={onClick}>
-          {title}
-        </GlobalMenuLink>
-        </li>
+    const linkProps = {
+      as: linkProperties.LinkElement as ComponentType<any>,
+      [linkProperties.pathAttributeKeyName]: (rest as InternalNavLink).to,
+    };
+    return (
+      <li key={`${title}-nav-item`}>
+      <GlobalMenuLink {...linkProps} onClick={onClick}>
+        {title}
+      </GlobalMenuLink>
+      </li>
 
-      );
+    );
   } else if (item.type === NavItemType.EXTERNAL_LINK) {
     return (
       <li key={`${title}-nav-item`}>
@@ -127,7 +139,7 @@ export default function NavMenuItem({ item, alignment, onClick }: {item: NavItem
         <>
         <li><GlobalMenuItem>{title} </GlobalMenuItem></li>
           {item.children.map((child) => {
-            return <LinkDropMenuNavItem key={`${title}-dropdown-menu`} child={child} onClick={onClick} />;
+            return <LinkDropMenuNavItem key={`${title}-dropdown-menu`} child={child} onClick={onClick} linkProperties={linkProperties} />;
           })}
         </>
       );
@@ -144,7 +156,7 @@ export default function NavMenuItem({ item, alignment, onClick }: {item: NavItem
       >
         <DropMenu>
           {(item as DropdownNavLink).children.map((child) => {
-            return <LinkDropMenuNavItem key={`${title}-dropdown-menu`} child={child} />;
+            return <LinkDropMenuNavItem key={`${title}-dropdown-menu`} child={child} linkProperties={linkProperties} />;
           })}
         </DropMenu>
       </DropdownScrollable>

diff --git a/app/scripts/index.ts b/app/scripts/index.ts
@@ -16,6 +16,8 @@ import { PageMainContent } from '$styles/page';
 import PageHero from '$components/common/page-hero';
 import StoriesHubContent from '$components/stories/hub/hub-content';
 import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use-filters-with-query';
+import PageHeader from '$components/common/page-header';
+import LogoContainer from '$components/common/page-header/logo-container';
 
 
 export {
@@ -36,8 +38,10 @@ export {
   DevseedUiThemeProvider,
   PageMainContent,
   PageHero,
+  PageHeader,
   ReactQueryProvider,
   StoriesHubContent,
+  LogoContainer,
   // HOOKS and utility functions
   useFiltersWithQS
 };