Refactor page header to use USWDS components

.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 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 @@
       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
-      id={HEADER_WRAPPER_ID}
-      shouldSlideHeader={isHeaderHidden}
-      headerHeight={headerHeight}
-    >
+    isUSWDSEnabled ? (
       <PageHeader
         {...props}
+        logoSvg={<NasaLogoColor />}
         linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
+        title={appTitle}
       />
-    </NavWrapper>
-  );
+    ) : (
+      <NavWrapperContainer
+        id={HEADER_WRAPPER_ID}
+        shouldSlideHeader={isHeaderHidden}
+        headerHeight={headerHeight}
+      >
+        <PageHeaderLegacy
+          {...props}
+          linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
+        />
+      </NavWrapperContainer>
+    )
+  )
 }
 
-export default PageNavWrapper;
+export default NavWrapper;