refactor: Refactor page header to use USWDS components (#1247)

**Related Ticket:** Close #1137 
Related PR: NextJs PR
developmentseed/next-veda-ui#20

### Description of Changes
This change implements the page header with the USWDS ui components

### Notes & Questions About Changes
The new header will have some design inconsistencies with the rest of
the page, but that is intentional as we go through the revamp of the ui.

### Validation / Testing
- [ ] Validate the header contents
- [ ] Use the navigation to access different pages
- [ ] Use keyboard navigation, making sure the navigation is accessible 
- [ ] Instances can use the header and customize its content
       - [x] logo
       - [x] heading
       - [x] primary nav items
       - [x] secondary nav items

.env

@@ -14,3 +14,5 @@ GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f
 
 SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE'
 
+# Enables the refactor page header component that uses the USWDS design system
+ENABLE_USWDS_PAGE_HEADER = 'TRUE'

.stylelintrc.json

@@ -1,11 +1,8 @@
 {
-  "processors": [
-    "stylelint-processor-styled-components"
-  ],
   "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
+    "stylelint-config-recommended"
   ],
+  "customSyntax": "postcss-styled-syntax",
   "rules": {
     "font-family-no-missing-generic-family-keyword": null,
     "no-descending-specificity": [

.vscode/settings.json.sample

@@ -9,6 +9,9 @@
         "javascriptreact",
         "typescript",
         "typescriptreact"
-    ]
+    ],
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
 

app/scripts/components/common/google-form.tsx

@@ -1,61 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button } from '@devseed-ui/button';
 import { Modal } from '@devseed-ui/modal';
-import { media, themeVal } from '@devseed-ui/theme-provider';
-
-import { useFeedbackModal } from './layout-root';
-
-import GlobalMenuLinkCSS from '$styles/menu-link';
 
 const StyledGoogleForm = styled.iframe`
   width: 100%;
 `;
 
-interface BtnMediaProps {
-  active?: boolean;
-}
-
-// Global menu link style
-const ButtonAsNavLink = styled(Button)`
-  ${media.mediumUp<BtnMediaProps>`
-    background-color: ${themeVal('color.primary-700')};
-
-    &:hover {
-      background-color: ${themeVal('color.primary-800')};
-    }
-
-    /* Print & when prop is passed */
-    ${({ active }) => active && '&,'}
-    &:active,
-    &.active {
-      background-color: ${themeVal('color.primary-900')};
-    }
-
-    &:focus-visible {
-      background-color: ${themeVal('color.primary-200a')};
-    }
-  `}
-
-  ${media.mediumDown`
-    ${GlobalMenuLinkCSS}
-  `}
-`;
-
-const GoogleForm: React.FC<{ title: string, src: string }> = (props) => {
-  const { title, src } = props;
-  const { isRevealed, show, hide } = useFeedbackModal();
+const GoogleForm: React.FC<{ src: string, isRevealed: boolean, hide: () => void }> = (props) => {
+  const { src, isRevealed, hide } = props;
 
   return (
     <>
-      <ButtonAsNavLink
-        type='button'
-        size='large'
-        onClick={show}
-        style={{ color: 'white' }}
-      >
-        {title}
-      </ButtonAsNavLink>
       <Modal
         id='modal'
         size='large'

app/scripts/components/common/layout-root/index.tsx

@@ -21,7 +21,7 @@ import { LayoutRootContext } from './context';
 import { setGoogleTagManager } from '$utils/use-google-tag-manager';
 
 import NavWrapper from '$components/common/nav-wrapper';
-import Logo from '$components/common/page-header/logo';
+import Logo from '$components/common/page-header-legacy/logo';
 import {
   mainNavItems,
   subNavItems

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

@@ -2,15 +2,17 @@ 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 PageHeader from './page-header';
 import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps';
-
+import NasaLogoColor from './nasa-logo-color';
 import {
   HEADER_WRAPPER_ID,
   HEADER_TRANSITION_DURATION
 } from '$utils/use-sliding-sticky-header';
+import { checkEnvFlag } from '$utils/utils';
 
-const NavWrapper = styled.div`
+const NavWrapperContainer = styled.div`
   position: sticky;
   top: 0;
   width: 100%;
@@ -26,21 +28,34 @@ const NavWrapper = styled.div`
       top: -${headerHeight}px;
     `}
 `;
+// Hiding configurable map for now until Instances are ready to adapt it
+const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_HEADER);
+const appTitle = isUSWDSEnabled
+  ? 'Earthdata VEDA Dashboard'
+  : process.env.APP_TITLE;
 
-function PageNavWrapper(props) {
+function NavWrapper(props) {
   const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps();
-  return (
-    <NavWrapper
+
+  return isUSWDSEnabled ? (
+    <PageHeader
+      {...props}
+      logoSvg={<NasaLogoColor />}
+      linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
+      title={appTitle}
+    />
+  ) : (
+    <NavWrapperContainer
       id={HEADER_WRAPPER_ID}
       shouldSlideHeader={isHeaderHidden}
       headerHeight={headerHeight}
     >
-      <PageHeader
+      <PageHeaderLegacy
         {...props}
         linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
       />
-    </NavWrapper>
+    </NavWrapperContainer>
   );
 }
 
-export default PageNavWrapper;
+export default NavWrapper;