refactor: Use markdown for the SiteAlert and Banner, remove HTML enco…

…der dependency (#1355)

**Related Ticket:** #1348

### Description of Changes
- Remove the HTML encoder dependency
- Updated `SiteAlert` and `Banner` mocks to use markdown syntax, which
is parsed via Parcel

### Notes & Questions About Changes
_{Add additonal notes and outstanding questions here related to changes
in this pull request}_

### Validation / Testing
1. Tweak the content for the SiteAlert or the Banner in the the
configuration file using markdown syntax for their content / text
2. Restart your build process (`yarn clean` may be needed)
3. Check that the changes are correctly displayed in the banner or site
alert

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

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { decode } from 'he';
 import {
   USWDSBanner,
   USWDSBannerContent,
@@ -72,9 +71,7 @@ const GuidanceBlock = ({
       <p>
         <strong>{content.title}</strong>
         <br />
-        <span
-          dangerouslySetInnerHTML={{ __html: decode(content.text ?? '') }}
-        />
+        <span dangerouslySetInnerHTML={{ __html: content.text ?? '' }} />
       </p>
     </USWDSMediaBlockBody>
   </USWDSBannerGuidance>

app/scripts/components/common/site-alert/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Icon } from '@trussworks/react-uswds';
-import { decode } from 'he';
 import { USWDSSiteAlert } from '$components/common/uswds/site-alert';
 
 const ALERT_KEY = 'dismissedSiteAlertUrl';
@@ -62,7 +61,10 @@ export default function SiteAlert({
               type !== infoTypeFlag ? 'bg-secondary-lighter' : ''
             }`}
           >
-            <div dangerouslySetInnerHTML={{ __html: decode(content) }} />
+            <div
+              className='usa-alert__text'
+              dangerouslySetInnerHTML={{ __html: content }}
+            />
           </USWDSSiteAlert>
           <div className='position-absolute top-0 right-0 margin-right-3 height-full display-flex'>
             <button

mock/veda.config.js

@@ -74,13 +74,13 @@ let subNavItems = [
 const defaultGuidance = {
   left: {
     title: 'Official websites use .gov',
-    text: 'A <strong>.gov</strong> website belongs to an official government organization in the United States.',
+    text: 'A **.gov** website belongs to an official government organization in the United States.',
     iconAlt: 'Dot gov icon',
     icon: '/img/icon-dot-gov.svg'
   },
   right: {
     title: 'Secure .gov websites use HTTPS',
-    text: `A <strong>lock icon</strong> or <strong>https://</strong> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.`,
+    text: "A **lock icon** or **https://** 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'
   }
@@ -130,10 +130,7 @@ module.exports = {
     contentId: 'gov-banner-content'
   },
   siteAlert: {
-    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>`,
+    content: `[Discover insights on how the COVID-19 pandemic](stories/life-of-water) impacted air quality worldwide, observed through NASA's satellite data.`,
     expires: '2026-08-03T12:00:00-04:00',
     type: 'info',
     slim: true,

package.json

@@ -71,7 +71,6 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.0",
     "@types/geojson": "^7946.0.10",
-    "@types/he": "^1.2.3",
     "@types/jest": "^29.5.14",
     "@types/mapbox-gl": "^2.7.5",
     "@types/mdx": "^2.0.1",
@@ -196,7 +195,6 @@
     "google-polyline": "^1.0.3",
     "gulp-postcss": "^10.0.0",
     "gulp-sass": "^6.0.0",
-    "he": "^1.2.0",
     "history": "^5.1.0",
     "intersection-observer": "^0.12.0",
     "jotai": "^2.6.2",

parcel-resolver-veda/index.js

@@ -118,19 +118,26 @@ function getSiteAlertContent(result) {
 function getBannerContent(result) {
   if (!result.banner) return undefined;
 
-  const { title, text, leftGuidance, rightGuidance } = result.banner;
+  const { title, leftGuidance, rightGuidance } = result.banner;
 
-  const parsedText = text ? md.render(text) : '';
-  const trimmedText = parsedText.replace(/(\r\n|\n|\r)/gm, '');
+  const processedLeftGuidance = {
+    ...leftGuidance,
+    text: md.render(leftGuidance.text).replace(/(\r\n|\n|\r)/gm, '')
+  };
+
+  const processedRightGuidance = {
+    ...rightGuidance,
+    text: md.render(rightGuidance.text).replace(/(\r\n|\n|\r)/gm, '')
+  };
 
   return JSON.stringify({
     headerText: title,
     headerActionText: "Here's how you know",
-    ariaLabel: trimmedText || title,
+    ariaLabel: title,
     flagImgSrc: '/img/us_flag_small.png',
     flagImgAlt: '',
-    leftGuidance,
-    rightGuidance,
+    leftGuidance: processedLeftGuidance,
+    rightGuidance: processedRightGuidance,
     className: '',
     defaultIsOpen: false,
     contentId: 'gov-banner-content'

yarn.lock

@@ -9506,11 +9506,6 @@ [email protected]:
   resolved "http://verdaccio.ds.io:4873/hat/-/hat-0.0.3.tgz#bb014a9e64b3788aed8005917413d4ff3d502d8a"
   integrity sha1-uwFKnmSzeIrtgAWRdBPU/z1QLYo=
 
-he@^1.2.0:
-  version "1.2.0"
-  resolved "http://verdaccio.ds.io:4873/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
 history@^5.1.0, history@^5.2.0:
   version "5.3.0"
   resolved "http://verdaccio.ds.io:4873/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"