From 5416fe34edffacdd7063681a8d9a6e3456c73cde Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Wed, 30 Mar 2022 13:38:37 -0700 Subject: [PATCH] Add RFI to contact page --- .../RequestForInfo/RequestForInfo.module.scss | 12 ++++++ .../RequestForInfo.module.scss.d.ts | 12 ++++++ .../RequestForInfo/RequestForInfo.test.tsx | 16 ++++++++ .../RequestForInfo/RequestForInfo.tsx | 18 +++++++++ .../RequestForInfo.test.tsx.snap | 34 +++++++++++++++++ .../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 | 37 ++++++++++++++++++- client/src/pages/contact.tsx | 21 +++++++---- client/src/styles/global.scss | 13 +++++++ 11 files changed, 181 insertions(+), 10 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..9f5c92a7 --- /dev/null +++ b/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`] = ` + +
+
+

+ 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 on 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..af2df654 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..87f2c68d 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,39 @@ 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 on available on + + federalregister.gov + +
+
+
+
diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx index e14686d2..5a0e4c04 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,9 @@ const ContactPage = ({location}: IContactPageProps) => { - - + + +

{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_SUB_HEADING)}

@@ -38,12 +40,12 @@ const ContactPage = ({location}: IContactPageProps) => { defaultMessage={CONTACT_COPY.CONTACT_VIA_EMAIL.DEFAULT_MESSAGE} values={{ general_email_address: - , + , }}/>

{CONTACT_COPY.CENSUS_TRACT_FEEDBACK.TITLE}

@@ -51,6 +53,9 @@ const ContactPage = ({location}: IContactPageProps) => {

{CONTACT_COPY.CENSUS_TRACT_FEEDBACK.PARAGRAPH2}

{CONTACT_COPY.CENSUS_TRACT_FEEDBACK.PARAGRAPH3}

 + + + diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index f35128fe..b9d1947a 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 */ @@ -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); +} \ No newline at end of file