Update Download sidebar, add new alert (#1587)

* Update Download sidebar, add new alert

- Fixes #1567
- Cleaned up styles related to buttons.
- Refactored buttons a little to make easier to maintain.
- Updated test snapshots/translation files

* Fixes

* More text fixes

client/compiled-lang/en.json

@@ -207,6 +207,32 @@
       "value": "About"
     }
   ],
+  "common.pages.alerts.additional_docs_available.description": [
+    {
+      "type": 0,
+      "value": "Download new technical support and other documentation and "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "send feedback"
+        }
+      ],
+      "type": 8,
+      "value": "link2"
+    },
+    {
+      "type": 0,
+      "value": "."
+    }
+  ],
+  "common.pages.alerts.additional_docs_available.title": [
+    {
+      "type": 0,
+      "value": "Additional documentation now available"
+    }
+  ],
   "common.pages.alerts.public_comment_period.description": [
     {
       "type": 0,
@@ -2596,9 +2622,19 @@
     }
   ],
   "methodology.page.downloadPacket.header.text": [
+    {
+      "children": [
         {
           "type": 0,
-      "value": "Files available for download"
+          "value": "NEW"
+        }
+      ],
+      "type": 8,
+      "value": "callout"
+    },
+    {
+      "type": 0,
+      "value": " files available for download"
     }
   ],
   "methodology.page.downloadPacket.info.shape.last.updated": [
@@ -2614,7 +2650,21 @@
   "methodology.page.downloadPacket.info.text1": [
     {
       "type": 0,
-      "value": "Download the data sources used in the CEJST (.csv and .xlsx, "
+      "value": "Download the data sources used in the CEJST (.csv, .xlxs, "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": ".pdf"
+        }
+      ],
+      "type": 8,
+      "value": "callout"
+    },
+    {
+      "type": 0,
+      "value": " that describes how to use the list, and a codebook, "
     },
     {
       "type": 1,
@@ -2622,7 +2672,21 @@
     },
     {
       "type": 0,
-      "value": " unzipped), the shapefile, along with a codebook (.zip, "
+      "value": " unzipped), the shapefile, along with a "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "codebook"
+        }
+      ],
+      "type": 8,
+      "value": "callout"
+    },
+    {
+      "type": 0,
+      "value": " (.zip, "
     },
     {
       "type": 1,
@@ -2638,7 +2702,7 @@
     },
     {
       "type": 0,
-      "value": ")."
+      "value": " unzipped)."
     }
   ],
   "methodology.page.downloadPacket.info.tsd.last.updated": [
@@ -2673,6 +2737,18 @@
       "value": "boldtag"
     }
   ],
+  "methodology.page.downloadPacket.updated.tag.text": [
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Updated"
+        }
+      ],
+      "type": 8,
+      "value": "boldtag"
+    }
+  ],
   "methodology.page.formula.first": [
     {
       "children": [

client/src/components/DownloadPacket/DownloadPacket.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {FC} from 'react';
 import {Button, Grid, Tag} from '@trussworks/react-uswds';
 
 import * as styles from './downloadPacket.module.scss';
@@ -8,6 +8,24 @@ import * as METHODOLOGY_COPY from '../../data/copy/methodology';
 import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
 
 const DownloadPacket = () => {
+  // inline components to make build layout below more readable
+  const UpdateTag = () => <div className={styles.tagContainer}><Tag
+    className={styles.updateTag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.UPDATED_TAG}</Tag></div>;
+
+  const NewTag = () => <div className={styles.tagContainer}>
+    <Tag className={styles.newTag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag></div>;
+
+  const DownloadButton: FC = ({children}) =>
+    <Button className={styles.downloadBoxButton} type="button">
+      <span className={styles.downloadButtonIconSpan}>
+        <img src={downloadIcon} className={styles.downloadButtonIcon}
+          alt={'download icon for download package'} />
+      </span>
+      <span className={styles.downloadButtonText} >
+        {children}
+      </span>
+    </Button>;
+
   return (
     <Grid>
       <div className={styles.downloadBoxContainer}>
@@ -20,23 +38,17 @@ const DownloadPacket = () => {
             </div>
 
             {/* Download box description 1 */}
-            <div className={styles.dataSourceText}>
+            <div className={styles.downloadSourceText}>
               {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1}
             </div>
 
             {/* Download box button 1 */}
-            <div className={styles.dataSourceButtonContainer}>
+            <div className={styles.downloadButtonContainer}>
+              <UpdateTag/>
               <a data-cy={'download-link'}
                 download
                 href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
-                <Button className={styles.downloadBoxButton} type="button">
+                <DownloadButton>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT1}</DownloadButton>
-                  <div>
-                    <img src={downloadIcon} alt={'download icon for download package'}/>
-                  </div>
-                  <div className={styles.dataSourceButtonText}>
-                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT1}
-                  </div>
-                </Button>
               </a>
             </div>
             <div className={styles.lastUpdated}>
@@ -45,21 +57,12 @@ const DownloadPacket = () => {
 
 
             {/* Download box button 2 */}
-            <div className={styles.shapefileButtonContainer}>
+            <div className={styles.downloadButtonContainer}>
-              <div className={styles.newTagContainer}>
+              <UpdateTag/>
-                <Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
-              </div>
               <a data-cy={'shapefile-link'}
                 download
                 href={METHODOLOGY_COPY.DOWNLOAD_SHAPEFILE_URL}>
-                <Button className={styles.downloadBoxButton} type="button">
+                <DownloadButton>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT2}</DownloadButton>
-                  <div>
-                    <img src={downloadIcon} alt={'download icon for download package'}/>
-                  </div>
-                  <div className={styles.shapeFileButtonText}>
-                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT2}
-                  </div>
-                </Button>
               </a>
             </div>
             <div className={styles.lastUpdated}>
@@ -67,30 +70,20 @@ const DownloadPacket = () => {
             </div>
 
             {/* Download box button 3 */}
-            <div className={styles.shapefileButtonContainer}>
+            <div className={styles.downloadButtonContainer}>
-              <div className={styles.newTagContainer}>
+              <NewTag/>
-                <Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
-              </div>
               {/* target and rel required since PDFs open in browser and don't download */}
-              <a data-cy={'shapefile-link'}
+              <a data-cy={'tsd-link'}
                 download
                 target={'_blank'}
                 rel={'noreferrer'}
                 href={METHODOLOGY_COPY.DOWNLOAD_TSD_URL}>
-                <Button className={styles.downloadBoxButton} type="button">
+                <DownloadButton>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT3}</DownloadButton>
-                  <div>
-                    <img src={downloadIcon} alt={'download icon for download package'}/>
-                  </div>
-                  <div className={styles.shapeFileButtonText}>
-                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT3}
-                  </div>
-                </Button>
               </a>
             </div>
             <div className={styles.lastUpdated}>
               {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TSD_LAST_UPDATED}
             </div>
-
           </div>
         </div>
       </div>

client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap

@@ -10,12 +10,33 @@ exports[`download packet component defined checks if component renders 1`] = `
       <div>
         <div>
           <div>
-            Files available for download
+            <span>
+              NEW
+            </span>
+             files available for download
           </div>
           <div>
-            Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped), the shapefile, along with a codebook (.zip, 742MB unzipped) or the technical support document (.pdf, 913kB).
+            Download the data sources used in the CEJST (.csv, .xlxs, 
+            <span>
+              .pdf
+            </span>
+             that describes how to use the list, and a codebook, 53MB unzipped), the shapefile, along with a 
+            <span>
+              codebook
+            </span>
+             (.zip, 742MB unzipped) or the technical support document (.pdf, 2.5MB unzipped).
           </div>
           <div>
+            <div>
+              <span
+                class="usa-tag"
+                data-testid="tag"
+              >
+                <strong>
+                  Updated
+                </strong>
+              </span>
+            </div>
             <a
               data-cy="download-link"
               download=""
@@ -26,20 +47,20 @@ exports[`download packet component defined checks if component renders 1`] = `
                 data-testid="button"
                 type="button"
               >
-                <div>
+                <span>
                   <img
                     alt="download icon for download package"
                     src="test-file-stub"
                   />
-                </div>
+                </span>
-                <div>
+                <span>
                   Download data sources
-                </div>
+                </span>
               </button>
             </a>
           </div>
           <div>
-            Last updated: 04/06/22 
+            Last updated: 04/26/22 
           </div>
           <div>
             <div>
@@ -48,7 +69,7 @@ exports[`download packet component defined checks if component renders 1`] = `
                 data-testid="tag"
               >
                 <strong>
-                  NEW
+                  Updated
                 </strong>
               </span>
             </div>
@@ -62,20 +83,20 @@ exports[`download packet component defined checks if component renders 1`] = `
                 data-testid="button"
                 type="button"
               >
-                <div>
+                <span>
                   <img
                     alt="download icon for download package"
                     src="test-file-stub"
                   />
-                </div>
+                </span>
-                <div>
+                <span>
                   Download shapefile
-                </div>
+                </span>
               </button>
             </a>
           </div>
           <div>
-            Last updated: 04/06/22 
+            Last updated: 04/26/22 
           </div>
           <div>
             <div>
@@ -89,7 +110,7 @@ exports[`download packet component defined checks if component renders 1`] = `
               </span>
             </div>
             <a
-              data-cy="shapefile-link"
+              data-cy="tsd-link"
               download=""
               href="//"
               rel="noreferrer"
@@ -100,15 +121,15 @@ exports[`download packet component defined checks if component renders 1`] = `
                 data-testid="button"
                 type="button"
               >
-                <div>
+                <span>
                   <img
                     alt="download icon for download package"
                     src="test-file-stub"
                   />
-                </div>
+                </span>
-                <div>
+                <span>
                   Download technical support document
-                </div>
+                </span>
               </button>
             </a>
           </div>

client/src/components/DownloadPacket/downloadPacket.module.scss

@@ -47,9 +47,8 @@
           @include u-text('semibold');
         }
 
-        // Data source text
+        .downloadSourceText {
-        .dataSourceText {
+          @include u-margin-top(2);
-          @include baseTextStyle();
         }
 
         // Last updated
@@ -59,49 +58,57 @@
           @include u-margin-top(1);
         }
 
-        // Data source button
+        // Data source button (scoped)
-        .dataSourceButtonContainer {
+        .downloadButtonContainer {
-          @include baseButtonContainerStyles();
-
-          .dataSourceButtonText {
-            @include baseButtonTextStyle();
-          }
-        }
-        
-        // Shapefile text
-        .shapeFileText {
-          @include baseTextStyle();
-          @include u-margin-top(7);
-        }
-        // Shapefile button
-        .shapefileButtonContainer{
           display: flex;
           flex-direction: column;
           @include baseButtonContainerStyles();
+          text-align: center;
 
-          .shapeFileButtonText {
+          .downloadButtonText {
             @include baseButtonTextStyle();
-            @include u-margin-right(3);
+            @include u-margin-right(1);
-          }
           }
 
+          .downloadButtonIconSpan {
+            display: contents;
+            max-width: 1.5em;
+          }
+
+          .downloadButtonIcon {
+            width: 1.5em;
+            height: 1.5em;
+          }
+        }
       }
     }
   }
 
-  .downloadBoxButton{
+  .downloadBoxButton {
     @include u-bg('white');
     @include u-color('blue-80v');
     display: flex;
+    width: 16em;
   }
 
-  .newTagContainer {
+  .tagContainer {
     align-self: end;
     @include u-margin-bottom(-1);
     z-index: 2;
   }
 
-  .newtag {
+  .newTag {
-    @include u-text("blue-70v");
+    @include u-text('bold');
-    @include u-bg("yellow-20v");
+    @include u-text("blue-80v");
+    @include u-bg("gold-20v");
+  }
+
+  .updateTag {
+    @include u-text('bold');
+    @include u-text("blue-80v");
+    @include u-bg("gray-10");
+  }
+
+  .newCalloutFontColor {
+    @include u-text("gold-20v");
   }

client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts

@@ -4,15 +4,16 @@ declare namespace DownloadPacketModuleScssNamespace {
         downloadBox: string;
         downloadBoxTextBox: string;
         downloadBoxTitle: string;
-        dataSourceText: string;
+        downloadSourceText: string;
-        dataSourceButtonContainer: string;
+        downloadButtonContainer: string;
-        shapefileButtonContainer: string;
         downloadBoxButton: string;
-        dataSourceButtonText: string;
+        downloadButtonText: string;
-        shapeFileText: string;
+        downloadButtonIconSpan: string;
-        shapeFileButtonText: string;
+        downloadButtonIcon: string;
-        newTagContainer: string;
+        tagContainer: string;
-        newtag: string;
+        newTag: string;
+        updateTag: string;
+        newCalloutFontColor: string;
         lastUpdated:string;
     }
   }

client/src/components/J40Header/J40Header.tsx

@@ -233,6 +233,13 @@ const J40Header = () => {
 
       {/* Alert */}
       {isAlertValid && <J40MainGridContainer>
+        <Alert
+          className={styles.alert}
+          type="info"
+          heading={intl.formatMessage(COMMON_COPY.ALERTS.ALERT_2_TITLE.TITLE)}>
+          {COMMON_COPY.ALERTS.ALERT_2_DESCRIPTION}
+        </Alert>
+
         <Alert
           className={styles.alert}
           type="info"

client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap

@@ -305,6 +305,35 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <div
+        class="usa-alert usa-alert--info"
+        data-testid="alert"
+      >
+        <div
+          class="usa-alert__body"
+        >
+          <h4
+            class="usa-alert__heading"
+          >
+            Additional documentation now available
+          </h4>
+          <p
+            class="usa-alert__text"
+          >
+            Download new technical support and other documentation and 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="mailto:Screeningtool-Support@omb.eop.gov"
+              rel="noreferrer"
+              target="_blank"
+            >
+              send feedback
+            </a>
+            .
+          </p>
+        </div>
+      </div>
       <div
         class="usa-alert usa-alert--info"
         data-testid="alert"

client/src/data/copy/common.tsx

@@ -61,6 +61,22 @@ export const ALERTS = {
       />,
     }}
   />,
+
+  ALERT_2_TITLE: defineMessages({
+    TITLE: {
+      id: 'common.pages.alerts.additional_docs_available.title',
+      defaultMessage: 'Additional documentation now available',
+      description: 'Alert title that appears at the top of pages.',
+    },
+  }),
+  ALERT_2_DESCRIPTION: <FormattedMessage
+    id={'common.pages.alerts.additional_docs_available.description'}
+    defaultMessage={`Download new technical support and other documentation and <link2>send feedback</link2>.`}
+    description={`Alert title that appears at the top of pages.`}
+    values={{
+      link2: linkFn(`mailto:${FEEDBACK_EMAIL}`, false, true),
+    }}
+  />,
 };
 
 // Header

client/src/data/copy/methodology.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {defineMessages} from 'react-intl';
 import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
 import {boldFn, linkFn, simpleLink} from './common';
+import * as styles from '../../components/DownloadPacket/downloadPacket.module.scss';
 
 export const PAGE = defineMessages({
   TILE: {
@@ -72,11 +73,11 @@ export const FORMULA = {
 };
 
 // Download Package
-export const DOWNLOAD_FILE_SIZE = 52;
+export const DOWNLOAD_FILE_SIZE = 53;
 export const DOWNLOAD_SHAPE_FILE_SIZE = 742;
-export const DOWNLOAD_TSD_FILE_SIZE = 913; // in KB
+export const DOWNLOAD_TSD_FILE_SIZE = 2.5;
-export const DOWNLOAD_ZIP_LAST_UPDATED = new Date('4/6/2022').getTime();
+export const DOWNLOAD_ZIP_LAST_UPDATED = new Date('4/26/2022').getTime();
-export const DOWNLOAD_SHAPE_LAST_UPDATED = new Date('4/6/2022').getTime();
+export const DOWNLOAD_SHAPE_LAST_UPDATED = new Date('4/26/2022').getTime();
 export const DOWNLOAD_TSD_LAST_UPDATED = new Date('4/19/2022').getTime();
 export const VERSION_NUMBER = 0.1;
 
@@ -99,17 +100,23 @@ export const DOWNLOAD_TSD_URL = [
   process.env.GATSBY_TSD_DOWNLOAD_FILE_PATH,
 ].join('/');
 
+const newCalloutFontColorFn = (str:string) => <span className={styles.newCalloutFontColor}>{str}</span>;
+
 export const DOWNLOAD_PACKAGE = {
   TITLE: <FormattedMessage
     id={'methodology.page.downloadPacket.header.text'}
-    defaultMessage={`Files available for download`}
+    defaultMessage={`<callout>NEW</callout> files available for download`}
     description={'Navigate to the methodology page. This is the download packet header text'}
+    values= {{
+      callout: newCalloutFontColorFn,
+    }}
   />,
   DESCRIPTION1: <FormattedMessage
     id={ 'methodology.page.downloadPacket.info.text1'}
-    defaultMessage= {`Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped), the shapefile, along with a codebook (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize}).`}
+    defaultMessage= {`Download the data sources used in the CEJST (.csv, .xlxs, <callout>.pdf</callout> that describes how to use the list, and a codebook, {downloadFileSize} unzipped), the shapefile, along with a <callout>codebook</callout> (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize} unzipped).`}
     description= {'Navigate to the methodology page. This is the download packet info text'}
     values= {{
+      callout: newCalloutFontColorFn,
       downloadFileSize: <FormattedNumber
         value={DOWNLOAD_FILE_SIZE}
         style="unit"
@@ -125,7 +132,7 @@ export const DOWNLOAD_PACKAGE = {
       tsdFileSize: <FormattedNumber
         value={DOWNLOAD_TSD_FILE_SIZE}
         style="unit"
-        unit="kilobyte"
+        unit="megabyte"
         unitDisplay="narrow"
       />,
     }}
@@ -192,6 +199,14 @@ export const DOWNLOAD_PACKAGE = {
       boldtag: boldFn,
     }}
   />,
+  UPDATED_TAG: <FormattedMessage
+    id={ 'methodology.page.downloadPacket.updated.tag.text'}
+    defaultMessage= {`<boldtag>Updated</boldtag>`}
+    description= {'Navigate to the methodology page. This is the update callout tag text that overlaps the button'}
+    values={{
+      boldtag: boldFn,
+    }}
+  />,
 };
 
 export const CATEGORY= {

client/src/intl/en.json

@@ -91,6 +91,14 @@
     "defaultMessage": "About",
     "description": "Navigate to the About page. This is the about page title text"
   },
+  "common.pages.alerts.additional_docs_available.description": {
+    "defaultMessage": "Download new technical support and other documentation and <link2>send feedback</link2>.",
+    "description": "Alert title that appears at the top of pages."
+  },
+  "common.pages.alerts.additional_docs_available.title": {
+    "defaultMessage": "Additional documentation now available",
+    "description": "Alert title that appears at the top of pages."
+  },
   "common.pages.alerts.public_comment_period.description": {
     "defaultMessage": "The public comment period for <link1>sending feedback</link1> has been extended to {expDate1}.",
     "description": "Alert body that appears on landing page."
@@ -1212,7 +1220,7 @@
     "description": "Navigate to the methodology page. This is the download technical support document spreadsheet"
   },
   "methodology.page.downloadPacket.header.text": {
-    "defaultMessage": "Files available for download",
+    "defaultMessage": "<callout>NEW</callout> files available for download",
     "description": "Navigate to the methodology page. This is the download packet header text"
   },
   "methodology.page.downloadPacket.info.shape.last.updated": {
@@ -1220,7 +1228,7 @@
     "description": "Navigate to the methodology page. This is the download packet info last updated"
   },
   "methodology.page.downloadPacket.info.text1": {
-    "defaultMessage": "Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped), the shapefile, along with a codebook (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize}).",
+    "defaultMessage": "Download the data sources used in the CEJST (.csv, .xlxs, <callout>.pdf</callout> that describes how to use the list, and a codebook, {downloadFileSize} unzipped), the shapefile, along with a <callout>codebook</callout> (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize} unzipped).",
     "description": "Navigate to the methodology page. This is the download packet info text"
   },
   "methodology.page.downloadPacket.info.tsd.last.updated": {
@@ -1235,6 +1243,10 @@
     "defaultMessage": "<boldtag>NEW</boldtag>",
     "description": "Navigate to the methodology page. This is the new tag text"
   },
+  "methodology.page.downloadPacket.updated.tag.text": {
+    "defaultMessage": "<boldtag>Updated</boldtag>",
+    "description": "Navigate to the methodology page. This is the update callout tag text that overlaps the button"
+  },
   "methodology.page.formula.first": {
     "defaultMessage": "<boldtag>IF</boldtag> the census tract is above the threshold for one or more environmental or climate indicators",
     "description": "Navigate to the methodology page. This is the first part of the formula used in the methodology"

client/src/pages/tests/__snapshots__/about.test.tsx.snap

@@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <div
+        class="usa-alert usa-alert--info"
+        data-testid="alert"
+      >
+        <div
+          class="usa-alert__body"
+        >
+          <h4
+            class="usa-alert__heading"
+          >
+            Additional documentation now available
+          </h4>
+          <p
+            class="usa-alert__text"
+          >
+            Download new technical support and other documentation and 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="mailto:Screeningtool-Support@omb.eop.gov"
+              rel="noreferrer"
+              target="_blank"
+            >
+              send feedback
+            </a>
+            .
+          </p>
+        </div>
+      </div>
       <div
         class="usa-alert usa-alert--info"
         data-testid="alert"

client/src/pages/tests/__snapshots__/contact.test.tsx.snap

@@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <div
+        class="usa-alert usa-alert--info"
+        data-testid="alert"
+      >
+        <div
+          class="usa-alert__body"
+        >
+          <h4
+            class="usa-alert__heading"
+          >
+            Additional documentation now available
+          </h4>
+          <p
+            class="usa-alert__text"
+          >
+            Download new technical support and other documentation and 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="mailto:Screeningtool-Support@omb.eop.gov"
+              rel="noreferrer"
+              target="_blank"
+            >
+              send feedback
+            </a>
+            .
+          </p>
+        </div>
+      </div>
       <div
         class="usa-alert usa-alert--info"
         data-testid="alert"

client/src/pages/tests/__snapshots__/downloads.test.tsx.snap

@@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <div
+        class="usa-alert usa-alert--info"
+        data-testid="alert"
+      >
+        <div
+          class="usa-alert__body"
+        >
+          <h4
+            class="usa-alert__heading"
+          >
+            Additional documentation now available
+          </h4>
+          <p
+            class="usa-alert__text"
+          >
+            Download new technical support and other documentation and 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="mailto:Screeningtool-Support@omb.eop.gov"
+              rel="noreferrer"
+              target="_blank"
+            >
+              send feedback
+            </a>
+            .
+          </p>
+        </div>
+      </div>
       <div
         class="usa-alert usa-alert--info"
         data-testid="alert"

client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap

@@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <div
+        class="usa-alert usa-alert--info"
+        data-testid="alert"
+      >
+        <div
+          class="usa-alert__body"
+        >
+          <h4
+            class="usa-alert__heading"
+          >
+            Additional documentation now available
+          </h4>
+          <p
+            class="usa-alert__text"
+          >
+            Download new technical support and other documentation and 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="mailto:Screeningtool-Support@omb.eop.gov"
+              rel="noreferrer"
+              target="_blank"
+            >
+              send feedback
+            </a>
+            .
+          </p>
+        </div>
+      </div>
       <div
         class="usa-alert usa-alert--info"
         data-testid="alert"

client/src/pages/tests/__snapshots__/methodology.test.tsx.snap

@@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <div
+        class="usa-alert usa-alert--info"
+        data-testid="alert"
+      >
+        <div
+          class="usa-alert__body"
+        >
+          <h4
+            class="usa-alert__heading"
+          >
+            Additional documentation now available
+          </h4>
+          <p
+            class="usa-alert__text"
+          >
+            Download new technical support and other documentation and 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="mailto:Screeningtool-Support@omb.eop.gov"
+              rel="noreferrer"
+              target="_blank"
+            >
+              send feedback
+            </a>
+            .
+          </p>
+        </div>
+      </div>
       <div
         class="usa-alert usa-alert--info"
         data-testid="alert"
@@ -447,12 +476,33 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
               <div>
                 <div>
                   <div>
-                    Files available for download
+                    <span>
+                      NEW
+                    </span>
+                     files available for download
                   </div>
                   <div>
-                    Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped), the shapefile, along with a codebook (.zip, 742MB unzipped) or the technical support document (.pdf, 913kB).
+                    Download the data sources used in the CEJST (.csv, .xlxs, 
+                    <span>
+                      .pdf
+                    </span>
+                     that describes how to use the list, and a codebook, 53MB unzipped), the shapefile, along with a 
+                    <span>
+                      codebook
+                    </span>
+                     (.zip, 742MB unzipped) or the technical support document (.pdf, 2.5MB unzipped).
                   </div>
                   <div>
+                    <div>
+                      <span
+                        class="usa-tag"
+                        data-testid="tag"
+                      >
+                        <strong>
+                          Updated
+                        </strong>
+                      </span>
+                    </div>
                     <a
                       data-cy="download-link"
                       download=""
@@ -463,20 +513,20 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                         data-testid="button"
                         type="button"
                       >
-                        <div>
+                        <span>
                           <img
                             alt="download icon for download package"
                             src="test-file-stub"
                           />
-                        </div>
+                        </span>
-                        <div>
+                        <span>
                           Download data sources
-                        </div>
+                        </span>
                       </button>
                     </a>
                   </div>
                   <div>
-                    Last updated: 04/06/22 
+                    Last updated: 04/26/22 
                   </div>
                   <div>
                     <div>
@@ -485,7 +535,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                         data-testid="tag"
                       >
                         <strong>
-                          NEW
+                          Updated
                         </strong>
                       </span>
                     </div>
@@ -499,20 +549,20 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                         data-testid="button"
                         type="button"
                       >
-                        <div>
+                        <span>
                           <img
                             alt="download icon for download package"
                             src="test-file-stub"
                           />
-                        </div>
+                        </span>
-                        <div>
+                        <span>
                           Download shapefile
-                        </div>
+                        </span>
                       </button>
                     </a>
                   </div>
                   <div>
-                    Last updated: 04/06/22 
+                    Last updated: 04/26/22 
                   </div>
                   <div>
                     <div>
@@ -526,7 +576,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       </span>
                     </div>
                     <a
-                      data-cy="shapefile-link"
+                      data-cy="tsd-link"
                       download=""
                       href="//"
                       rel="noreferrer"
@@ -537,15 +587,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                         data-testid="button"
                         type="button"
                       >
-                        <div>
+                        <span>
                           <img
                             alt="download icon for download package"
                             src="test-file-stub"
                           />
-                        </div>
+                        </span>
-                        <div>
+                        <span>
                           Download technical support document
-                        </div>
+                        </span>
                       </button>
                     </a>
                   </div>

client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap

@@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <div
+        class="usa-alert usa-alert--info"
+        data-testid="alert"
+      >
+        <div
+          class="usa-alert__body"
+        >
+          <h4
+            class="usa-alert__heading"
+          >
+            Additional documentation now available
+          </h4>
+          <p
+            class="usa-alert__text"
+          >
+            Download new technical support and other documentation and 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="mailto:Screeningtool-Support@omb.eop.gov"
+              rel="noreferrer"
+              target="_blank"
+            >
+              send feedback
+            </a>
+            .
+          </p>
+        </div>
+      </div>
       <div
         class="usa-alert usa-alert--info"
         data-testid="alert"

client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap

@@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <div
+        class="usa-alert usa-alert--info"
+        data-testid="alert"
+      >
+        <div
+          class="usa-alert__body"
+        >
+          <h4
+            class="usa-alert__heading"
+          >
+            Additional documentation now available
+          </h4>
+          <p
+            class="usa-alert__text"
+          >
+            Download new technical support and other documentation and 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="mailto:Screeningtool-Support@omb.eop.gov"
+              rel="noreferrer"
+              target="_blank"
+            >
+              send feedback
+            </a>
+            .
+          </p>
+        </div>
+      </div>
       <div
         class="usa-alert usa-alert--info"
         data-testid="alert"