From 04b81e70915a1bf4a75d4f41157ca40d08a81782 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Wed, 18 Dec 2024 09:35:54 +0100
Subject: [PATCH] Address comments

---
 .../components/common/banner/index.tsx        | 101 +++++++++---------
 .../components/common/site-alert/index.tsx    |   5 +-
 mock/veda.config.js                           |   6 +-
 3 files changed, 54 insertions(+), 58 deletions(-)

diff --git a/app/scripts/components/common/banner/index.tsx b/app/scripts/components/common/banner/index.tsx
index 8346eb43a..127d6b1fd 100644
--- a/app/scripts/components/common/banner/index.tsx
+++ b/app/scripts/components/common/banner/index.tsx
@@ -11,11 +11,16 @@ import {
   USWDSMediaBlockBody
 } from '$components/common/uswds/banner';
 
+interface Guidance {
+  left?: GuidanceContent;
+  right?: GuidanceContent;
+}
+
 interface GuidanceContent {
-  icon: string;
+  icon?: string;
   iconAlt?: string;
-  title: string;
-  text: string;
+  title?: string;
+  text?: string;
 }
 
 interface BannerProps {
@@ -30,7 +35,12 @@ interface BannerProps {
   contentId?: string;
 }
 
-const defaultGuidance = {
+const DEFAULT_HEADER_TEXT =
+  'An official website of the United States government';
+
+const DEFAULT_HEADER_ACTION_TEXT = "Here's how you know";
+
+const DEFAULT_GUIDANCE: Guidance = {
   left: {
     title: 'Official websites use .gov',
     text: 'A .gov website belongs to an official government organization in the United States.',
@@ -39,19 +49,40 @@ const defaultGuidance = {
   },
   right: {
     title: 'Secure .gov websites use HTTPS',
-    text: `<>
+    text: `
         A <strong>lock</strong> or <strong>https://</strong> means you've safely
         connected to the .gov website. Share sensitive information only on
         official, secure websites.
-      </>`,
+      `,
     iconAlt: 'HTTPS icon',
     icon: '/img/icon-https.svg'
   }
 };
 
+const GuidanceBlock = ({
+  content,
+  className
+}: {
+  content: GuidanceContent;
+  className?: string;
+}) => (
+  <USWDSBannerGuidance className={className}>
+    <USWDSBannerIcon src={content.icon} alt={content.iconAlt ?? ''} />
+    <USWDSMediaBlockBody>
+      <p>
+        <strong>{content.title}</strong>
+        <br />
+        <span
+          dangerouslySetInnerHTML={{ __html: decode(content.text ?? '') }}
+        />
+      </p>
+    </USWDSMediaBlockBody>
+  </USWDSBannerGuidance>
+);
+
 export default function Banner({
   headerText,
-  headerActionText = "Here's how you know",
+  headerActionText,
   ariaLabel,
   flagImgAlt = '',
   leftGuidance,
@@ -62,22 +93,19 @@ export default function Banner({
 }: BannerProps) {
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
 
-  const defaultHeaderText =
-    'An official website of the United States government';
-
   const leftContent = {
-    ...defaultGuidance.left,
+    ...DEFAULT_GUIDANCE.left,
     ...leftGuidance
-  };
+  } as GuidanceContent;
 
   const rightContent = {
-    ...defaultGuidance.right,
+    ...DEFAULT_GUIDANCE.right,
     ...rightGuidance
-  };
+  } as GuidanceContent;
 
   return (
     <USWDSBanner
-      aria-label={ariaLabel ?? defaultHeaderText}
+      aria-label={ariaLabel ?? DEFAULT_HEADER_TEXT}
       className={className}
     >
       <USWDSBannerHeader
@@ -85,55 +113,22 @@ export default function Banner({
         flagImg={
           <USWDSBannerFlag src='/img/us_flag_small.png' alt={flagImgAlt} />
         }
-        headerText={headerText ?? defaultHeaderText}
-        headerActionText={headerActionText}
+        headerText={headerText ?? DEFAULT_HEADER_TEXT}
+        headerActionText={headerActionText ?? DEFAULT_HEADER_ACTION_TEXT}
       >
         <USWDSBannerButton
           isOpen={isOpen}
           onClick={() => setIsOpen((prev) => !prev)}
           aria-controls={contentId}
         >
-          {headerActionText}
+          {headerActionText ?? DEFAULT_HEADER_ACTION_TEXT}
         </USWDSBannerButton>
       </USWDSBannerHeader>
 
       <USWDSBannerContent id={contentId} isOpen={isOpen}>
         <div className='grid-row grid-gap-lg'>
-          <USWDSBannerGuidance className='tablet:grid-col-6'>
-            <USWDSBannerIcon
-              src={leftContent.icon}
-              alt={leftContent.iconAlt || ''}
-            />
-            <USWDSMediaBlockBody>
-              <p>
-                <strong>{leftContent.title}</strong>
-                <br />
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: decode(leftContent.text)
-                  }}
-                />
-              </p>
-            </USWDSMediaBlockBody>
-          </USWDSBannerGuidance>
-
-          <USWDSBannerGuidance className='tablet:grid-col-6'>
-            <USWDSBannerIcon
-              src={rightContent.icon}
-              alt={rightContent.iconAlt || ''}
-            />
-            <USWDSMediaBlockBody>
-              <p>
-                <strong>{rightContent.title}</strong>
-                <br />
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: decode(rightContent.text)
-                  }}
-                />
-              </p>
-            </USWDSMediaBlockBody>
-          </USWDSBannerGuidance>
+          <GuidanceBlock content={leftContent} className='tablet:grid-col-6' />
+          <GuidanceBlock content={rightContent} className='tablet:grid-col-6' />
         </div>
       </USWDSBannerContent>
     </USWDSBanner>
diff --git a/app/scripts/components/common/site-alert/index.tsx b/app/scripts/components/common/site-alert/index.tsx
index af186c2d5..07b1ec63d 100644
--- a/app/scripts/components/common/site-alert/index.tsx
+++ b/app/scripts/components/common/site-alert/index.tsx
@@ -40,12 +40,11 @@ export default function SiteAlert({
   slim = false,
   className = ''
 }: SiteAlertProps) {
-  const alertId = content;
-  const showAlert = localStorage.getItem(ALERT_KEY) !== alertId;
+  const showAlert = localStorage.getItem(ALERT_KEY) !== content;
   const [isOpen, setIsOpen] = useState(showAlert && !hasExpired(expires));
 
   function onClose() {
-    localStorage.setItem(ALERT_KEY, alertId);
+    localStorage.setItem(ALERT_KEY, content);
     setIsOpen(false);
   }
 
diff --git a/mock/veda.config.js b/mock/veda.config.js
index 4c847ae41..33c8d8a9c 100644
--- a/mock/veda.config.js
+++ b/mock/veda.config.js
@@ -130,8 +130,10 @@ module.exports = {
     contentId: 'gov-banner-content'
   },
   siteAlert: {
-    content:
-      '<p class="usa-alert__text"><a target="_blank" rel="noreferrer" href="stories/emit-and-aviris-3">Read the new data insight</a> on using EMIT and AVIRIS-3 for monitoring large methane emission events.</p>',
+    content: `<p class="usa-alert__text">
+        <a target="_blank" rel="noreferrer" href="stories/life-of-water">
+          Discover insights on how the COVID-19 pandemic
+      </a> impacted air quality worldwide, observed through NASA's satellite data.</p>`,
     expires: '2026-08-03T12:00:00-04:00',
     type: 'info',
     slim: true,