From e7ab0f8ff70ba1a9b47b2fe2a87e3c86f0114007 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Thu, 31 Mar 2022 11:31:39 -0400
Subject: [PATCH] Add RFI to contact page (#1515)
* 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
---
.../RequestForInfo/RequestForInfo.module.scss | 12 ++++++
.../RequestForInfo.module.scss.d.ts | 12 ++++++
.../RequestForInfo/RequestForInfo.test.tsx | 16 ++++++++
.../RequestForInfo/RequestForInfo.tsx | 18 +++++++++
.../RequestForInfo.test.tsx.snap | 35 +++++++++++++++++
.../src/components/RequestForInfo/index.tsx | 3 ++
client/src/data/copy/contact.tsx | 17 +++++++++
client/src/intl/en.json | 8 ++++
.../pages/__snapshots__/contact.test.tsx.snap | 38 ++++++++++++++++++-
client/src/pages/contact.tsx | 24 ++++++++----
client/src/styles/global.scss | 16 +++++++-
11 files changed, 188 insertions(+), 11 deletions(-)
create mode 100644 client/src/components/RequestForInfo/RequestForInfo.module.scss
create mode 100644 client/src/components/RequestForInfo/RequestForInfo.module.scss.d.ts
create mode 100644 client/src/components/RequestForInfo/RequestForInfo.test.tsx
create mode 100644 client/src/components/RequestForInfo/RequestForInfo.tsx
create mode 100644 client/src/components/RequestForInfo/__snapshots__/RequestForInfo.test.tsx.snap
create mode 100644 client/src/components/RequestForInfo/index.tsx
diff --git a/client/src/components/RequestForInfo/RequestForInfo.module.scss b/client/src/components/RequestForInfo/RequestForInfo.module.scss
new file mode 100644
index 00000000..f2d56b19
--- /dev/null
+++ b/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);
+
+}
\ No newline at end of file
diff --git a/client/src/components/RequestForInfo/RequestForInfo.module.scss.d.ts b/client/src/components/RequestForInfo/RequestForInfo.module.scss.d.ts
new file mode 100644
index 00000000..a73df67a
--- /dev/null
+++ b/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;
diff --git a/client/src/components/RequestForInfo/RequestForInfo.test.tsx b/client/src/components/RequestForInfo/RequestForInfo.test.tsx
new file mode 100644
index 00000000..c016c225
--- /dev/null
+++ b/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(
+
+
+ ,
+ );
+
+ it('checks if component renders', () => {
+ expect(asFragment()).toMatchSnapshot();
+ });
+});
diff --git a/client/src/components/RequestForInfo/RequestForInfo.tsx b/client/src/components/RequestForInfo/RequestForInfo.tsx
new file mode 100644
index 00000000..4619d6ad
--- /dev/null
+++ b/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 (
+
+ {CONTACT_COPY.RFI_BOX_BODY}
+
+ );
+};
+
+export default RequestForInfo;
diff --git a/client/src/components/RequestForInfo/__snapshots__/RequestForInfo.test.tsx.snap b/client/src/components/RequestForInfo/__snapshots__/RequestForInfo.test.tsx.snap
new file mode 100644
index 00000000..bfec58d3
--- /dev/null
+++ b/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`] = `
+
+
+
+
+ Request for Infomation
+
+
+ During the beta period, comments may be submitted on the Climate and Economic Justice Screening Tool via CEQ’s Request for Information available on
+
+ federalregister.gov
+
+ .
+
+
+
+
+`;
diff --git a/client/src/components/RequestForInfo/index.tsx b/client/src/components/RequestForInfo/index.tsx
new file mode 100644
index 00000000..48fe35df
--- /dev/null
+++ b/client/src/components/RequestForInfo/index.tsx
@@ -0,0 +1,3 @@
+import RequestForInfo from './RequestForInfo';
+
+export default RequestForInfo;
diff --git a/client/src/data/copy/contact.tsx b/client/src/data/copy/contact.tsx
index 798b54de..db6b0bf2 100644
--- a/client/src/data/copy/contact.tsx
+++ b/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 = federalregister.gov.`}
+ 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: federalregister.gov.",
+ "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"
diff --git a/client/src/pages/__snapshots__/contact.test.tsx.snap b/client/src/pages/__snapshots__/contact.test.tsx.snap
index 981fabe3..4cb7b151 100644
--- a/client/src/pages/__snapshots__/contact.test.tsx.snap
+++ b/client/src/pages/__snapshots__/contact.test.tsx.snap
@@ -339,11 +339,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
@@ -399,6 +399,40 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
+
+
+
+
+ Request for Infomation
+
+
+ During the beta period, comments may be submitted on the Climate and Economic Justice Screening Tool via CEQ’s Request for Information available on
+
+ federalregister.gov
+
+ .
+
+
+
+
diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx
index e14686d2..42d7260c 100644
--- a/client/src/pages/contact.tsx
+++ b/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) => {
-
-
+
+
+ {/* First column */}
+
+
+ {/* Second Column */}
+
+
+
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index f35128fe..e2516f48 100644
--- a/client/src/styles/global.scss
+++ b/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
*/
@@ -145,7 +146,8 @@ components include:
******************************
*/
.j40-footer {
-
+ @include u-margin-top(4);
+
.usa-footer__primary-section.pb2{
@include u-padding-bottom(2);
}
@@ -367,3 +369,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);
+}
\ No newline at end of file