RFI link to contact page (#1528)

* Add RFI to contact page

* Move to a 8:4 column layout for the contact page

- add margin above footer
- update snapshots

* Add period to copy

* add download attribute to <a> tag

- fix local cypress tess

client/cypress/integration/Contact.feature

@@ -5,10 +5,10 @@ Feature: The Contact page will open from all other pages
     When I click on the "Contact" page in the navigation
     Then I see "Contact" in the title
 
-  Scenario: Contact page open when navigating from Explore the tool page
-    Given I am on the "Explore the tool" page
-    When I click on the "Contact" page in the navigation
-    Then I see "Contact" in the title
+  # Scenario: Contact page open when navigating from Explore the tool page
+  #   Given I am on the "Explore the tool" page
+  #   When I click on the "Contact" page in the navigation
+  #   Then I see "Contact" in the title
     
   Scenario: Contact page open when navigating from Methodology page
     Given I am on the "Methodology" page

client/src/components/DownloadPacket/index.tsx

@@ -24,7 +24,7 @@ const DownloadPacket = () => {
               </span>
             </div>
             <div className={styles.downloadBoxButtonContainer}>
-              <a data-cy={'download-link'} href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
+              <a data-cy={'download-link'} download href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
                 <Button className={styles.downloadBoxButton} type="button">
                   <div>
                     <img src={downloadIcon} alt={'download icon for download package'}/>

client/src/components/RequestForInfo/RequestForInfo.module.scss

@@ -0,0 +1,12 @@
+@use '../../styles/design-system.scss' as *;
+
+.rfiBox {
+    @include at-media-max("desktop") {
+        @include u-margin-top(2);
+        @include u-margin-bottom(2);
+
+    };
+    
+    @include u-margin-top(10);
+
+}

client/src/components/RequestForInfo/RequestForInfo.module.scss.d.ts

@@ -0,0 +1,12 @@
+declare namespace RequestForInfoNamespace {
+    export interface IRequestForInfoScss {
+        rfiBox: string;
+    }
+  }
+
+declare const RequestForInfoScssModule: RequestForInfoNamespace.IRequestForInfoScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: RequestForInfoNamespace.IRequestForInfoScss;
+  };
+
+  export = RequestForInfoScssModule;

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import RequestForInfo from './RequestForInfo';
+
+describe('rendering of the RequestForInfo', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <RequestForInfo/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/RequestForInfo/RequestForInfo.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {SummaryBox} from '@trussworks/react-uswds';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import * as CONTACT_COPY from '../../data/copy/contact';
+import * as styles from './RequestForInfo.module.scss';
+
+const RequestForInfo = () => {
+  const intl = useIntl();
+
+  return (
+    <SummaryBox className={styles.rfiBox} heading={intl.formatMessage(CONTACT_COPY.RFI_BOX.TITLE)}>
+      {CONTACT_COPY.RFI_BOX_BODY}
+    </SummaryBox>
+  );
+};
+
+export default RequestForInfo;

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the RequestForInfo checks if component renders 1`] = `
+<DocumentFragment>
+  <div
+    class="usa-summary-box"
+    data-testid="summary-box"
+  >
+    <div
+      class="usa-summary-box__body"
+    >
+      <h3
+        class="usa-summary-box__heading"
+      >
+        Request for Infomation
+      </h3>
+      <div
+        class="usa-summary-box__text"
+      >
+        During the beta period, comments may be submitted on the Climate and Economic Justice Screening Tool via CEQ’s Request for Information available on 
+        <a
+          class="usa-link usa-link--external"
+          data-cy=""
+          href="https://www.federalregister.gov/d/2022-03920"
+          rel="noreferrer"
+          target="_blank"
+        >
+          federalregister.gov
+        </a>
+        .
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

client/src/components/RequestForInfo/index.tsx

@@ -0,0 +1,3 @@
+import RequestForInfo from './RequestForInfo';
+
+export default RequestForInfo;

client/src/data/copy/contact.tsx

@@ -32,6 +32,23 @@ export const PAGE_INTRO = defineMessages({
   },
 });
 
+export const RFI_BOX = defineMessages({
+  TITLE: {
+    id: 'contact.page.request.for.info.box.title',
+    defaultMessage: 'Request for Infomation',
+    description: 'Navigate to the contact page, this is the title of the request for information box',
+  },
+});
+
+export const RFI_BOX_BODY = <FormattedMessage
+  id={'contact.page.request.for.info.box.body'}
+  defaultMessage={`During the beta period, comments may be submitted on the Climate and Economic Justice Screening Tool via CEQ’s Request for Information available on <link1>federalregister.gov</link1>.`}
+  description={'Navigate to the contact page, this is the body of the request for information box'}
+  values={{
+    link1: COMMON_COPY.linkFn(`https://www.federalregister.gov/d/2022-03920`, false, true),
+  }}
+/>;
+
 export const CENSUS_TRACT_FEEDBACK = {
   TITLE: <FormattedMessage
     id={'contact.page.census.tract.feedback.title'}

client/src/intl/en.json

@@ -203,6 +203,14 @@
     "defaultMessage": "Contact",
     "description": "Navigate to the contact page, this is the contact page header text"
   },
+  "contact.page.request.for.info.box.body": {
+    "defaultMessage": "During the beta period, comments may be submitted on the Climate and Economic Justice Screening Tool via CEQ’s Request for Information available on <link1>federalregister.gov</link1>.",
+    "description": "Navigate to the contact page, this is the body of the request for information box"
+  },
+  "contact.page.request.for.info.box.title": {
+    "defaultMessage": "Request for Infomation",
+    "description": "Navigate to the contact page, this is the title of the request for information box"
+  },
   "contact.page.sub.header.text": {
     "defaultMessage": "Email us",
     "description": "Navigate to the contact page, this is the contact page sub header text"

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

@@ -339,11 +339,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </div>
       </section>
       <div
-        class="grid-row"
+        class="grid-row grid-gap-6"
         data-testid="grid"
       >
         <div
-          class="grid-col"
+          class="grid-col-12 desktop:grid-col-8"
           data-testid="grid"
         >
           <h2>
@@ -399,6 +399,40 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
     
           </p>
         </div>
+        <div
+          class="grid-col-12 desktop:grid-col-4"
+          data-testid="grid"
+        >
+          <div
+            class="usa-summary-box"
+            data-testid="summary-box"
+          >
+            <div
+              class="usa-summary-box__body"
+            >
+              <h3
+                class="usa-summary-box__heading"
+              >
+                Request for Infomation
+              </h3>
+              <div
+                class="usa-summary-box__text"
+              >
+                During the beta period, comments may be submitted on the Climate and Economic Justice Screening Tool via CEQ’s Request for Information available on 
+                <a
+                  class="usa-link usa-link--external"
+                  data-cy=""
+                  href="https://www.federalregister.gov/d/2022-03920"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  federalregister.gov
+                </a>
+                .
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </main>

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

@@ -420,6 +420,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   <div>
                     <a
                       data-cy="download-link"
+                      download=""
                       href="//"
                     >
                       <button

client/src/pages/contact.tsx

@@ -6,6 +6,7 @@ import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 import LinkTypeWrapper from '../components/LinkTypeWrapper';
 import PublicEngageButton from '../components/PublicEngageButton';
+import RequestForInfo from '../components/RequestForInfo';
 
 import * as CONTACT_COPY from '../data/copy/contact';
 import * as COMMON_COPY from '../data/copy/common';
@@ -26,8 +27,10 @@ const ContactPage = ({location}: IContactPageProps) => {
           <PublicEngageButton />
         </section>
 
-        <Grid row>
-          <Grid col>
+        <Grid row gap={6}>
+
+          {/* First column */}
+          <Grid desktop={{col: 8}} col={12}>
             <h2>
               {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_SUB_HEADING)}
             </h2>
@@ -51,6 +54,11 @@ const ContactPage = ({location}: IContactPageProps) => {
             <p>{CONTACT_COPY.CENSUS_TRACT_FEEDBACK.PARAGRAPH2}</p>
             <p>{CONTACT_COPY.CENSUS_TRACT_FEEDBACK.PARAGRAPH3}</p>
           </Grid>
+
+          {/* Second Column */}
+          <Grid desktop={{col: 4}} col={12}>
+            <RequestForInfo />
+          </Grid>
         </Grid>
       </J40MainGridContainer>
     </Layout>

client/src/styles/global.scss

@@ -146,6 +146,7 @@ components include:
 ****************************** 
 */ 
 .j40-footer {
+  @include u-margin-top(4);
   
   .usa-footer__primary-section.pb2{
     @include u-padding-bottom(2);