Add RFI to contact page

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,34 @@
+// 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 on 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 on 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 on 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-7"
           data-testid="grid"
         >
           <h2>
@@ -399,6 +399,39 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
     
           </p>
         </div>
+        <div
+          class="grid-col-12 desktop:grid-col-5"
+          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 on 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/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,9 @@ const ContactPage = ({location}: IContactPageProps) => {
           <PublicEngageButton />
         </section>
 
-        <Grid row>
-          <Grid col>
+        <Grid row gap={6}>
+
+          <Grid desktop={{col: 7}} col={12}>
             <h2>
               {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_SUB_HEADING)}
             </h2>
@@ -38,12 +40,12 @@ const ContactPage = ({location}: IContactPageProps) => {
                 defaultMessage={CONTACT_COPY.CONTACT_VIA_EMAIL.DEFAULT_MESSAGE}
                 values={{
                   general_email_address:
-                  <LinkTypeWrapper
-                    linkText= {COMMON_COPY.FEEDBACK_EMAIL}
-                    internal= {false}
-                    url= {`mailto:${COMMON_COPY.FEEDBACK_EMAIL}`}
-                    openUrlNewTab= {true}
-                  />,
+                <LinkTypeWrapper
+                  linkText= {COMMON_COPY.FEEDBACK_EMAIL}
+                  internal= {false}
+                  url= {`mailto:${COMMON_COPY.FEEDBACK_EMAIL}`}
+                  openUrlNewTab= {true}
+                />,
                 }}/>
             </p>
             <h3>{CONTACT_COPY.CENSUS_TRACT_FEEDBACK.TITLE}</h3>
@@ -51,6 +53,9 @@ const ContactPage = ({location}: IContactPageProps) => {
             <p>{CONTACT_COPY.CENSUS_TRACT_FEEDBACK.PARAGRAPH2}</p>
             <p>{CONTACT_COPY.CENSUS_TRACT_FEEDBACK.PARAGRAPH3}</p>
           </Grid>
+          <Grid desktop={{col: 5}} col={12}>
+            <RequestForInfo />
+          </Grid>
         </Grid>
       </J40MainGridContainer>
     </Layout>

client/src/styles/global.scss

@@ -26,6 +26,7 @@ There are 3 things that should be included in this file:
     -- Map styles
     -- Public Event styles
     -- About styles
+    -- Request for Info styles
 */
 
 
@@ -367,3 +368,15 @@ a.mapboxgl-ctrl-logo {
     }
   }
 }
+
+
+/* 
+******************************
+*     REQUEST FOR INFO STYLES
+****************************** 
+*/
+
+// Overide the Request for Info heading bottom margin:
+div[class*="RequestForInfo"] .usa-summary-box__heading{
+  @include u-margin-bottom(3);
+}