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/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;