Hide new USWDS footer behind feature flag (#1287)

Contributes to the feature branch #1285

Hej @snmln ! Thanks for setting up the feature branch and foundations
for the new footer component!
I renamed the old footer to PageFooterLegacy, that way we can use the
regular import path for our new footer component. Also added a .env var
that allows us to switch between old and new footer implementations
easily.

Campground Rule[^1]: While working on the feature flag, I addressed an
unrelated lint warning within the files I made changes to.

[^1]: Always leave the campground cleaner than you found it.

Author: snmln

.env

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

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

@@ -11,8 +11,11 @@ import styled from 'styled-components';
 import { Outlet } from 'react-router';
 import { reveal } from '@devseed-ui/animation';
 import { getBannerFromVedaConfig, getCookieConsentFromVedaConfig } from 'veda';
+
 import MetaTags from '../meta-tags';
-import PageFooter from '../page-footer/index';
+import PageFooter from '../page-footer';
+import PageFooterLegacy from '../page-footer-legacy';
+
 const Banner = React.lazy(() => import('../banner'));
 const CookieConsent = React.lazy(() => import('../cookie-consent'));
 
@@ -26,9 +29,11 @@ import {
   mainNavItems,
   subNavItems
 } from '$components/common/page-header/default-config';
+import { checkEnvFlag } from '$utils/utils';
 
 const appTitle = process.env.APP_TITLE;
 const appDescription = process.env.APP_DESCRIPTION;
+const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_FOOTER);
 
 export const PAGE_BODY_ID = 'pagebody';
 
@@ -58,7 +63,8 @@ function LayoutRoot(props: { children?: ReactNode }) {
   useEffect(() => {
     // When there is no cookie consent form set up
     !cookieConsentContent && setGoogleTagManager();
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Empty dependency array ensures this effect runs only once, and not during SSR
 
   const { title, thumbnail, description, hideFooter } =
     useContext(LayoutRootContext);
@@ -98,7 +104,11 @@ function LayoutRoot(props: { children?: ReactNode }) {
           />
         )}
       </PageBody>
-      <PageFooter hideFooter />
+      {isUSWDSEnabled ? (
+        <PageFooter />
+      ) : (
+        <PageFooterLegacy hideFooter={hideFooter} />
+      )}
     </Page>
   );
 }

…scripts/components/common/page-footer.js …/components/common/page-footer-legacy.jsapp/scripts/components/common/page-footer.js renamed to app/scripts/components/common/page-footer-legacy.js app/scripts/components/common/page-footer.js renamed to app/scripts/components/common/page-footer-legacy.js

@@ -109,7 +109,7 @@ const InfoList = styled.dl`
   }
 `;
 
-function PageFooter(props) {
+function PageFooterLegacy(props) {
   const nowDate = new Date();
 
   return (
@@ -174,8 +174,8 @@ function PageFooter(props) {
   );
 }
 
-export default PageFooter;
+export default PageFooterLegacy;
 
-PageFooter.propTypes = {
+PageFooterLegacy.propTypes = {
   isHidden: T.bool
 };

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

@@ -7,10 +7,9 @@ import {
   USWDSFooterNav,
   USWDSLogo
 } from '$components/common/uswds';
-export default function PageFooter(hideFooter) {
+export default function PageFooter() {
   return (
     <>
-      {/* //commenting out hidefooter functionality for inflight work{!hideFooter && ( */}
       <USWDSFooter
         size='slim'
         // returnToTop={returnToTop}
@@ -41,7 +40,6 @@ export default function PageFooter(hideFooter) {
           />
         }
       />
-      {/*  )} */}
     </>
   );
 }

app/scripts/components/home/index.tsx

@@ -24,8 +24,9 @@ import {
   ComponentOverride,
   ContentOverride
 } from '$components/common/page-overrides';
+import { checkEnvFlag } from '$utils/utils';
 
-
+const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_FOOTER);
 const homeContent = getOverride('homeContent');
 
 const Connections = styled(Hug)`
@@ -113,10 +114,10 @@ const getCoverProps = () => {
 
     return author
       ? {
-        ...coverProps,
-        attributionAuthor: author.name,
-        attributionUrl: author.url
-      }
+          ...coverProps,
+          attributionAuthor: author.name,
+          attributionUrl: author.url
+        }
       : coverProps;
   } else {
     return {
@@ -171,36 +172,37 @@ function RootHome() {
       </ComponentOverride>
 
       <ContentOverride with='homeContent'>
-
         <Audience />
 
         <FeaturedStories />
 
         <ValueProposition />
 
-        <Connections>
-          <ConnectionsBlock>
-            <ConnectionsBlockTitle>About</ConnectionsBlockTitle>
-            <ConnectionsList>
-              <li>
-                <Link to='/about'>
-                  <CollecticonChevronRightSmall /> Learn more
-                </Link>
-              </li>
-              <li>
-                <a
-                  href='#'
-                  onClick={(e) => {
-                    e.preventDefault();
-                    showFeedbackModal();
-                  }}
-                >
-                  <CollecticonChevronRightSmall /> Give feedback
-                </a>
-              </li>
-            </ConnectionsList>
-          </ConnectionsBlock>
-        </Connections>
+        {!isUSWDSEnabled && (
+          <Connections>
+            <ConnectionsBlock>
+              <ConnectionsBlockTitle>About</ConnectionsBlockTitle>
+              <ConnectionsList>
+                <li>
+                  <Link to='/about'>
+                    <CollecticonChevronRightSmall /> Learn more
+                  </Link>
+                </li>
+                <li>
+                  <a
+                    href='#'
+                    onClick={(e) => {
+                      e.preventDefault();
+                      showFeedbackModal();
+                    }}
+                  >
+                    <CollecticonChevronRightSmall /> Give feedback
+                  </a>
+                </li>
+              </ConnectionsList>
+            </ConnectionsBlock>
+          </Connections>
+        )}
       </ContentOverride>
     </PageMainContent>
   );