Add TSD and RFI to alert, add link to download slides and reverse events in PEC (#1633)

* Add TSD link to alert

- refactor LinkTypeWrapper API to take a defineMessage as URL
- remove legacy console.log statements
- update snapshots

* Add slides under YouTube link

* Render events in DESC order on PEC

* Add RFI to alert and update snapshots

client/src/components/Indicator/Indicator.test.tsx

@@ -93,7 +93,6 @@ describe('test rendering of Indicator value sub-text', () => {
         </LocalizedComponent>,
     );
     expect(asFragment()).toMatchSnapshot();
-    console.log(asFragment());
   });
   it('renders the "below 90 percentile"', () => {
     const {asFragment} = render(

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

@@ -320,7 +320,17 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
           <p
             class="usa-alert__text"
           >
-            Download new technical support and other documentation and 
+            Download new 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/cejst_technical_support_document.pdf"
+              rel="noreferrer"
+              target="_blank"
+            >
+              technical support
+            </a>
+             and other documentation and 
             <a
               class="usa-link usa-link--external"
               data-cy=""
@@ -359,7 +369,7 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
             >
               sending feedback
             </a>
-             has been extended to May 25, 2022.
+             via the Request for Information has been extended to May 25, 2022.
           </p>
         </div>
       </div>

client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import {Link} from 'gatsby-plugin-intl';
+import {Link, useIntl} from 'gatsby-plugin-intl';
 import {Link as TrussLink} from '@trussworks/react-uswds';
 
+import {IDefineMessage} from '../../data/copy/common';
+
 interface ILinkTypeWrapper {
     linkText?: string;
     internal?: boolean;
-    url?: string;
+    url: string | IDefineMessage;
     openUrlNewTab?: boolean;
     className?: string;
     dataCy?: string;
@@ -29,9 +31,16 @@ interface ILinkTypeWrapper {
  * @returns
  */
 const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
+  const intl = useIntl();
+  let {url} = props;
+
+  if (url && typeof url !== `string`) {
+    url = intl.formatMessage(url);
+  }
+
   if (props.internal) {
     return (
-      <Link to={`${props.url}`}
+      <Link to={`${url}`}
         className={props.className}
       >
         {props.linkText}
@@ -42,7 +51,7 @@ const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
     <TrussLink
       variant={'external'}
       className={props.className}
-      href={`${props.url}`}
+      href={`${url}`}
       target="_blank"
       rel="noreferrer"
       data-cy={props.dataCy ? props.dataCy : ''}
@@ -51,7 +60,7 @@ const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
     </TrussLink> :
     <a
       className={props.className}
-      href={props.url}
+      href={url}
       data-cy={props.dataCy? props.dataCy : ''}
     >
       {props.linkText}

client/src/components/PublicEvent/PublicEvent.tsx

@@ -36,7 +36,6 @@ const PublicEvent = ({event}:IPublicEvent) => {
 
   const isEventExpired = new Date() > event.DATE;
 
-  console.log('event and date: ', event.NAME, event.DATE, isEventExpired);
   return (
     <CollectionItem
       variantComponent={

client/src/components/PublicVideoBox/PublicVideoBox.module.scss

@@ -18,7 +18,7 @@
         @include u-margin-top(3);
         margin-left: auto;
         margin-right: auto;
-
+        width: 14rem;
         
         &:hover {
           @include u-bg("yellow-20");

client/src/components/PublicVideoBox/PublicVideoBox.tsx

@@ -7,6 +7,8 @@ import * as styles from './PublicVideoBox.module.scss';
 
 // @ts-ignore
 import launchIcon from '/node_modules/uswds/dist/img/usa-icons/launch.svg';
+// @ts-ignore
+import fileDownloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
 
 const PublicVideoBox = () => {
   const intl = useIntl();
@@ -28,12 +30,33 @@ const PublicVideoBox = () => {
         >
           <div className={styles.buttonContainer}>
             <div className={styles.buttonText}>
-              {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON_TEXT)}
+              {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON1_TEXT)}
             </div>
             <img
               className={styles.buttonImage}
               src={launchIcon}
-              alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT)}
+              alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT1)}
+            />
+          </div>
+        </Button>
+      </a>
+      <a
+        className={styles.publicVideoLink}
+        href={`https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/technical-training-slides.pptx`}
+        download
+      >
+        <Button
+          type="button"
+          className={styles.youTubeBtn}
+        >
+          <div className={styles.buttonContainer}>
+            <div className={styles.buttonText}>
+              {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON2_TEXT)}
+            </div>
+            <img
+              className={styles.buttonImage}
+              src={fileDownloadIcon}
+              alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT2)}
             />
           </div>
         </Button>

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

@@ -39,6 +39,26 @@ exports[`rendering of the PublicVideoBox checks if component renders 1`] = `
             </div>
           </button>
         </a>
+        <a
+          download=""
+          href="https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/technical-training-slides.pptx"
+        >
+          <button
+            class="usa-button"
+            data-testid="button"
+            type="button"
+          >
+            <div>
+              <div>
+                Download slide deck
+              </div>
+              <img
+                alt="the icon to show that this button will download the file"
+                src="test-file-stub"
+              />
+            </div>
+          </button>
+        </a>
       </div>
     </div>
   </div>

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

@@ -41,7 +41,7 @@ exports[`rendering of the RequestForInfo checks if component renders 1`] = `
           >
             sending feedback
           </a>
-           has been extended to May 25, 2022.
+           via the Request for Information has been extended to May 25, 2022.
         </p>
       </div>
     </div>