Announcement component using USWDS

app/scripts/components/common/banner/index.tsx

@@ -0,0 +1,63 @@
+import React, {useState} from "react";
+import { Banner as USWDSBanner, BannerContent, Icon } from "@trussworks/react-uswds";
+
+const BANNER_KEY = 'dismissedBannerUrl';
+
+function hasExpired(expiryDatetime) {
+  const expiryDate = new Date(expiryDatetime);
+  const currentDate = new Date();
+  return !!(currentDate > expiryDate);
+}
+
+enum BannerType {
+  info = 'info',
+  warning ='warning'
+}
+
+const infoTypeFlag = BannerType.info;
+interface BannerProps {
+  appTitle: string,
+  expiryDate: Date,
+  actionUrl: string,
+  contents: string,
+  type?: BannerType
+}
+
+export default function Banner({appTitle, expiryDate, actionUrl, contents, type = infoTypeFlag }: BannerProps) {
+
+  const showBanner = localStorage.getItem(BANNER_KEY) !== actionUrl;
+  const [isOpen, setIsOpen] = useState(showBanner && !(hasExpired(expiryDate)));
+
+  function onClose () {
+    localStorage.setItem(
+      BANNER_KEY,
+      actionUrl
+    );
+    setIsOpen(false);
+  }
+
+  return (
+    <div>
+      {isOpen && 
+        (<div className='position-relative'>
+          <USWDSBanner aria-label={appTitle} className={type !== infoTypeFlag? 'bg-secondary-lighter': ''}>
+            <a href={actionUrl} target='_blank' rel='noreferrer'>
+              <BannerContent className='padding-top-1 padding-bottom-1' isOpen={true}>
+                <p dangerouslySetInnerHTML={{ __html: contents }} />
+              </BannerContent>
+            </a>
+          </USWDSBanner>
+          <div className='position-absolute top-0 right-0 margin-right-3 height-full display-flex'>
+              <button 
+              className='usa-button usa-button--secondary usa-button--unstyled'
+              type='button'
+              aria-label='Close Banner'
+              onClick={onClose}
+              >
+                <Icon.Close />
+              </button>
+          </div>
+         </div>)}
+    </div>
+  );
+}

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

@@ -2,11 +2,11 @@ import React, { ReactNode, useContext, useCallback } from 'react';
 import { useDeepCompareEffect } from 'use-deep-compare';
 import styled from 'styled-components';
 import { Outlet } from 'react-router';
-
 import { reveal } from '@devseed-ui/animation';
 
 import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
+import Banner from '../banner';
 import { LayoutRootContext } from './context';
 
 import { useGoogleTagManager } from '$utils/use-google-tag-manager';
@@ -36,7 +36,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
 
   useGoogleTagManager();
 
-  const { title, thumbnail, description, hideFooter } =
+  const { title, thumbnail, description, banner, hideFooter } =
     useContext(LayoutRootContext);
 
   const truncatedTitle =
@@ -50,6 +50,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
         description={description || appDescription}
         thumbnail={thumbnail}
       />
+      {banner && <Banner appTitle={title} {...banner} />}
       <NavWrapper />
       <PageBody id={PAGE_BODY_ID} tabIndex={-1}>
         <Outlet />

app/scripts/components/common/smart-link.tsx

@@ -1,23 +1,24 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
 import { getLinkProps } from '$utils/url';
 
 interface SmartLinkProps {
   to: string;
+  children?: ReactNode;
 }
 
 /**
  * Switches between a `a` and a `Link` depending on the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
-  const { to, ...rest } = props;
+  const { to, children, ...rest } = props;
   const isExternalLink = /^https?:\/\//.test(to);
   const linkProps = getLinkProps(to);
   return isExternalLink ? (
-      <a {...linkProps} {...rest} />
+      <a {...linkProps} {...rest}> {children} </a>
   ) : (
-    <Link {...linkProps} {...rest} />
+    <Link {...linkProps} {...rest}> {children} </Link>
   );
 }
 

app/scripts/components/home/index.tsx

@@ -5,7 +5,7 @@ import { Button } from '@devseed-ui/button';
 import { glsp, listReset, media, themeVal } from '@devseed-ui/theme-provider';
 import { Heading } from '@devseed-ui/typography';
 import { CollecticonChevronRightSmall } from '@devseed-ui/collecticons';
-import { getOverride } from 'veda';
+import { getOverride, getBanner } from 'veda';
 
 import rootCoverImage from '../../../graphics/layout/root-welcome--cover.jpg';
 
@@ -131,9 +131,15 @@ const getCoverProps = () => {
 function RootHome() {
   const { show: showFeedbackModal } = useFeedbackModal();
 
+  const banner = getBanner();
+  const renderBanner = !!banner && banner.contents && banner.actionUrl && banner.expiryDate;
+
   return (
     <PageMainContent>
-      <LayoutProps title='Welcome' />
+      <LayoutProps 
+        title='Welcome' 
+        banner={renderBanner? {...banner}: null}
+      />
 
       <ComponentOverride with='homeHero'>
         <PageHeroHome

app/scripts/main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import T from 'prop-types';
 import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
 
-import '@trussworks/react-uswds/lib/index.css';
+// import '@trussworks/react-uswds/lib/index.css';
 import '$styles/styles.scss';
 
 import { userPages } from 'veda';

app/scripts/styles/styles.scss

@@ -1 +1,5 @@
 @forward 'uswds-theme';
+
+@use "uswds-utilities";
+@use "usa-banner";
+@use "usa-button";

mock/veda.config.js

@@ -16,5 +16,11 @@ module.exports = {
       one: 'Story',
       other: 'Stories'
     }
+  },
+  banner: {
+    text: 'Read the new data insight on using EMIT and AVIRIS-3 for monitoring large methane emission events.',
+    url: 'stories/emit-and-aviris-3',
+    expires: '2024-08-03T12:00:00-04:00',
+    type: 'info'
   }
 };

package.json

@@ -44,6 +44,7 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.18.6",
+    "@fullhuman/postcss-purgecss": "^6.0.0",
     "@mdx-js/mdx": "^2.0.0",
     "@parcel/packager-raw-url": "2.7.0",
     "@parcel/packager-ts": "2.12.0",
@@ -86,8 +87,8 @@
     "jest-css-modules-transform": "^4.3.0",
     "lint-staged": "14.0.1",
     "parcel": "^2.12.0",
-    "parcel-resolver-ignore": "^2.1.3",
     "parcel-resolver-alias": "link:./parcel-resolver-alias",
+    "parcel-resolver-ignore": "^2.1.3",
     "parcel-resolver-veda": "link:./parcel-resolver-veda",
     "parcel-transformer-mdx": "link:./parcel-transformer-mdx",
     "parcel-transformer-mdx-frontmatter": "link:./parcel-transformer-mdx-frontmatter",

parcel-resolver-veda/index.d.ts

@@ -251,6 +251,24 @@ export interface LayerInfo {
     id: string;
     name: string;
   }
+    /**
+     * Not exporting this type 
+     * Since we are moving forward to ditching VEDA faux module
+     */
+
+  enum BannerType {
+    info = 'info',
+    warning ='warning'
+  }
+
+  const infoTypeFlag = BannerType.info;
+  interface BannerData {
+    expiryDate: Date,
+    actionUrl: string,
+    contents: string,
+    type?: BannerType
+  }
+
 
   /**
    * Named exports: datasets.
@@ -294,6 +312,8 @@ export interface LayerInfo {
 
   export const getBoolean: (variable: string) => boolean;
 
+  export const getBanner: () => BannerData | undefined;
+
   /**
    * List of custom user defined pages.
    */

parcel-resolver-veda/index.js

@@ -194,7 +194,8 @@ module.exports = new Resolver({
             logger
           )},
           strings: ${JSON.stringify(withDefaultStrings(result.strings))},
-          booleans: ${JSON.stringify(withDefaultStrings(result.booleans))}
+          booleans: ${JSON.stringify(withDefaultStrings(result.booleans))},
+          banner: ${JSON.stringify(result.banner)}
         };
 
         export const theme = ${JSON.stringify(result.theme) || null};
@@ -211,6 +212,9 @@ module.exports = new Resolver({
         export const getString = (variable) => config.strings[variable];
         export const getBoolean = (variable) => config.booleans[variable];
 
+        export const getConfig = () => config;
+        export const getBanner = () => config.banner;
+
         export const datasets = ${generateMdxDataObject(datasetsImportData)};
         export const stories = ${generateMdxDataObject(storiesImportData)};
       `;

postcss.config.js

@@ -4,5 +4,15 @@ module.exports = {
   plugins: [
     require('autoprefixer'),
     require('postcss-import'),
+    require('@fullhuman/postcss-purgecss')({
+      content: [
+        './app/**/*.{js,jsx,ts,tsx}',
+        '@trussworks/react-uswds/lib/index.css'
+      ],
+      safelist: {
+        deep: [/usa-banner$/],
+        greedy: [/^usa-banner/]
+      }
+    })
   ]
 };