From 88d50748eb25faa2052443ecc8f7969e39cd30bf Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Fri, 4 Mar 2022 16:16:07 -0500 Subject: [PATCH] Public Engagement Page (#1372) * Add public engagement page - modifies sitemap config - creates PublicEvent component - adds SVGs for dates - all copy is in intl * Add Public Engagement button to each page - create new PublicEng component - add to each page - update snapshots - modify CEJST and Meth page to give button more space * Make mobile compliant and fix DOM validation error - transform each

's descendent into a - fix a mobile rendering issue with library - format registration links so they render on mobile - update snapshots * Add spacing to descriptions and fix links * Add Gherkin tests for testing links - all zoom links should be functional - ensure all legacy tests, test the new page - add data-cy tag for cypress - update snapshots * Refactor to pass accessibility on all pages - update snapshots * Correct registration links * Make registration links into buttons * Make new tag bold * Update copy based on feedback from Corey --- .../LegacyTests/accessibility.test.js | 1 + .../integration/LegacyTests/allLinks.spec.js | 1 + .../integration/LegacyTests/constants.js | 1 + .../integration/PublicEngLinks.feature | 32 +++ .../support/step_definitions/commonSteps.js | 4 + client/gatsby-config.js | 1 + .../DownloadPacket/downloadPacket.module.scss | 2 + .../PublicEngageButton.module.scss | 22 ++ .../PublicEngageButton.module.scss.d.ts | 15 ++ .../PublicEngageButton.test.tsx | 16 ++ .../PublicEngageButton/PublicEngageButton.tsx | 28 +++ .../PublicEngageButton.test.tsx.snap | 27 +++ .../components/PublicEngageButton/index.tsx | 3 + .../PublicEvent/PublicEvent.module.scss | 5 + .../PublicEvent/PublicEvent.module.scss.d.ts | 12 + .../PublicEvent/PublicEvent.test.tsx | 18 ++ .../components/PublicEvent/PublicEvent.tsx | 77 +++++++ .../__snapshots__/PublicEvent.test.tsx.snap | 71 ++++++ client/src/components/PublicEvent/index.tsx | 3 + client/src/data/copy/publicEngage.tsx | 206 ++++++++++++++++++ client/src/images/eventDates/apr15.svg | 1 + client/src/images/eventDates/mar10.svg | 1 + client/src/images/eventDates/mar15.svg | 1 + client/src/images/eventDates/mar16.svg | 1 + client/src/images/eventDates/mar22.svg | 1 + client/src/images/eventDates/mar9.svg | 1 + .../pages/__snapshots__/contact.test.tsx.snap | 31 ++- .../pages/__snapshots__/index.test.tsx.snap | 33 ++- .../__snapshots__/methodology.test.tsx.snap | 33 ++- client/src/pages/cejst.tsx | 8 +- client/src/pages/contact.tsx | 6 +- client/src/pages/index.tsx | 7 +- client/src/pages/methodology.tsx | 11 +- client/src/pages/public-engagement.tsx | 59 +++++ client/src/styles/global.scss | 30 ++- 35 files changed, 742 insertions(+), 27 deletions(-) create mode 100644 client/cypress/integration/PublicEngLinks.feature create mode 100644 client/src/components/PublicEngageButton/PublicEngageButton.module.scss create mode 100644 client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts create mode 100644 client/src/components/PublicEngageButton/PublicEngageButton.test.tsx create mode 100644 client/src/components/PublicEngageButton/PublicEngageButton.tsx create mode 100644 client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap create mode 100644 client/src/components/PublicEngageButton/index.tsx create mode 100644 client/src/components/PublicEvent/PublicEvent.module.scss create mode 100644 client/src/components/PublicEvent/PublicEvent.module.scss.d.ts create mode 100644 client/src/components/PublicEvent/PublicEvent.test.tsx create mode 100644 client/src/components/PublicEvent/PublicEvent.tsx create mode 100644 client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap create mode 100644 client/src/components/PublicEvent/index.tsx create mode 100644 client/src/data/copy/publicEngage.tsx create mode 100644 client/src/images/eventDates/apr15.svg create mode 100644 client/src/images/eventDates/mar10.svg create mode 100644 client/src/images/eventDates/mar15.svg create mode 100644 client/src/images/eventDates/mar16.svg create mode 100644 client/src/images/eventDates/mar22.svg create mode 100644 client/src/images/eventDates/mar9.svg create mode 100644 client/src/pages/public-engagement.tsx diff --git a/client/cypress/integration/LegacyTests/accessibility.test.js b/client/cypress/integration/LegacyTests/accessibility.test.js index 7b7cc628..ad37379d 100644 --- a/client/cypress/integration/LegacyTests/accessibility.test.js +++ b/client/cypress/integration/LegacyTests/accessibility.test.js @@ -18,6 +18,7 @@ const endpoints = [ 'en/methodology', 'en/contact', 'en/404', + 'en/public-engagement', ]; // The violation callback will post the violations into the terminal diff --git a/client/cypress/integration/LegacyTests/allLinks.spec.js b/client/cypress/integration/LegacyTests/allLinks.spec.js index 1e398d3c..f0868b2f 100644 --- a/client/cypress/integration/LegacyTests/allLinks.spec.js +++ b/client/cypress/integration/LegacyTests/allLinks.spec.js @@ -6,6 +6,7 @@ describe('Do all the English pages have all links with a defined href attribute? 'cejst', 'methodology', 'contact', + 'public-engagement', ]; pages.forEach((page) => { diff --git a/client/cypress/integration/LegacyTests/constants.js b/client/cypress/integration/LegacyTests/constants.js index 3ae562fb..ee5d77c4 100644 --- a/client/cypress/integration/LegacyTests/constants.js +++ b/client/cypress/integration/LegacyTests/constants.js @@ -3,4 +3,5 @@ export const ENDPOINTS = { EXPLORE_THE_TOOL: '/en/cejst', METHODOLOGY: '/en/methodology', CONTACT: 'en/contact', + PUBLIC: 'en/public-engagement', }; diff --git a/client/cypress/integration/PublicEngLinks.feature b/client/cypress/integration/PublicEngLinks.feature new file mode 100644 index 00000000..0345a5e5 --- /dev/null +++ b/client/cypress/integration/PublicEngLinks.feature @@ -0,0 +1,32 @@ +Feature: All links on Public Eng page are functional + + Scenario: Anyone should be able to register on Mar 9th + Given I am on the "Public" page + When I look for the "Mar 9 Reg Link" CTA + And I click on the "Mar 9 Reg Link" event + Then the link should respond successfully + + Scenario: Anyone should be able to register on Mar 10th + Given I am on the "Public" page + When I look for the "Mar 10 Reg Link" CTA + And I click on the "Mar 10 Reg Link" event + Then the link should respond successfully + + Scenario: Anyone should be able to register on Mar 16th + Given I am on the "Public" page + When I look for the "Mar 16 Reg Link" CTA + And I click on the "Mar 16 Reg Link" event + Then the link should respond successfully + + Scenario: Anyone should be able to register on Mar 22th + Given I am on the "Public" page + When I look for the "Mar 22 Reg Link" CTA + And I click on the "Mar 22 Reg Link" event + Then the link should respond successfully + + Scenario: Anyone should be able to register on Apr 15th + Given I am on the "Public" page + When I look for the "Apr 15 Reg Link" CTA + And I click on the "Apr 15 Reg Link" event + Then the link should respond successfully + diff --git a/client/cypress/support/step_definitions/commonSteps.js b/client/cypress/support/step_definitions/commonSteps.js index 191d9285..8bd0be33 100644 --- a/client/cypress/support/step_definitions/commonSteps.js +++ b/client/cypress/support/step_definitions/commonSteps.js @@ -62,3 +62,7 @@ And(`I click on the {string} {string} link`, (ctaString, type) => { And(`I click on the {string} footer link`, (string) => { cy.get(`[data-cy="${hyphenizeString(string)}"]`).as('externalLink'); }); + +And(`I click on the {string} event`, (string) => { + cy.get(`[data-cy="${hyphenizeString(string)}-block"]`).as('externalLink'); +}); diff --git a/client/gatsby-config.js b/client/gatsby-config.js index 0d6499e6..d852e981 100644 --- a/client/gatsby-config.js +++ b/client/gatsby-config.js @@ -87,6 +87,7 @@ module.exports = { '/contact', '/methodology', '/404', + 'public-engagement', ], }, }, diff --git a/client/src/components/DownloadPacket/downloadPacket.module.scss b/client/src/components/DownloadPacket/downloadPacket.module.scss index b8b1fa30..1b9b00d2 100644 --- a/client/src/components/DownloadPacket/downloadPacket.module.scss +++ b/client/src/components/DownloadPacket/downloadPacket.module.scss @@ -4,10 +4,12 @@ color: whitesmoke; margin: auto; + @include u-margin-top(2.5); .downloadBox { @include u-bg('blue-80v'); border-radius: 6px 6px; + // @include u-margin-top(3); .downloadBoxTextBox { padding: 25px 25px; diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss new file mode 100644 index 00000000..434e5905 --- /dev/null +++ b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss @@ -0,0 +1,22 @@ +@use '../../styles/design-system.scss' as *; + +.tagContainer { + @include u-margin-bottom(1); + @include u-margin-right(1); + .tag { + @include u-bg("yellow-20v"); + color: black; + border-radius: 5px; + @include u-text('bold'); + } +} + +.container { + @include u-padding-top(2.5); + + .link, .link:visited { + color:white; + text-decoration: none; + } + +} \ No newline at end of file diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts new file mode 100644 index 00000000..7e3a3c81 --- /dev/null +++ b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts @@ -0,0 +1,15 @@ +declare namespace PublicEngagementButton { + export interface IPublicEventScss { + tag: string; + tagContainer: string; + container: string; + link: string; + } + } + +declare const PublicEventScssModule: PublicEngagementButton.IPublicEventScss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: PublicEngagementButton.IPublicEventScss; + }; + + export = PublicEventScssModule; diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.test.tsx b/client/src/components/PublicEngageButton/PublicEngageButton.test.tsx new file mode 100644 index 00000000..cb5ac86a --- /dev/null +++ b/client/src/components/PublicEngageButton/PublicEngageButton.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../test/testHelpers'; +import PublicEngageButton from './PublicEngageButton'; + +describe('rendering of the PublicEngageButton', () => { + const {asFragment} = render( + + + , + ); + + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.tsx b/client/src/components/PublicEngageButton/PublicEngageButton.tsx new file mode 100644 index 00000000..74ade4f0 --- /dev/null +++ b/client/src/components/PublicEngageButton/PublicEngageButton.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import {Link} from 'gatsby'; +import {useIntl} from 'gatsby-plugin-intl'; +import {Button, Tag} from '@trussworks/react-uswds'; + +import * as styles from './PublicEngageButton.module.scss'; +import * as PUBLIC_ENG_COPY from '../../data/copy/publicEngage'; + +const PublicEngageButton = () => { + const intl = useIntl(); + + return ( +

+
+ + {intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.TAG_LABEL)} + +
+ + + +
+ ); +}; + +export default PublicEngageButton; diff --git a/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap b/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap new file mode 100644 index 00000000..b30721d2 --- /dev/null +++ b/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the PublicEngageButton checks if component renders 1`] = ` + +
+
+ + NEW + +
+ + + +
+ +`; diff --git a/client/src/components/PublicEngageButton/index.tsx b/client/src/components/PublicEngageButton/index.tsx new file mode 100644 index 00000000..87b318ec --- /dev/null +++ b/client/src/components/PublicEngageButton/index.tsx @@ -0,0 +1,3 @@ +import PublicEngageButton from './PublicEngageButton'; + +export default PublicEngageButton; diff --git a/client/src/components/PublicEvent/PublicEvent.module.scss b/client/src/components/PublicEvent/PublicEvent.module.scss new file mode 100644 index 00000000..c64a1afb --- /dev/null +++ b/client/src/components/PublicEvent/PublicEvent.module.scss @@ -0,0 +1,5 @@ +@use '../../styles/design-system.scss' as *; + +.description { + @include u-margin-top(2); +} diff --git a/client/src/components/PublicEvent/PublicEvent.module.scss.d.ts b/client/src/components/PublicEvent/PublicEvent.module.scss.d.ts new file mode 100644 index 00000000..99f65c76 --- /dev/null +++ b/client/src/components/PublicEvent/PublicEvent.module.scss.d.ts @@ -0,0 +1,12 @@ +declare namespace PublicEventNamespace { + export interface IPublicEventScss { + description: string; + } + } + +declare const PublicEventScssModule: PublicEventNamespace.IPublicEventScss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: PublicEventNamespace.IPublicEventScss; + }; + + export = PublicEventScssModule; diff --git a/client/src/components/PublicEvent/PublicEvent.test.tsx b/client/src/components/PublicEvent/PublicEvent.test.tsx new file mode 100644 index 00000000..d9f07272 --- /dev/null +++ b/client/src/components/PublicEvent/PublicEvent.test.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../test/testHelpers'; +import PublicEvent from './PublicEvent'; + +import * as PUBLIC_ENG_COPY from '../../data/copy/publicEngage'; + +describe('rendering of the PublicEvent', () => { + const {asFragment} = render( + + + , + ); + + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/PublicEvent/PublicEvent.tsx b/client/src/components/PublicEvent/PublicEvent.tsx new file mode 100644 index 00000000..77b0694e --- /dev/null +++ b/client/src/components/PublicEvent/PublicEvent.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import {useIntl} from 'gatsby-plugin-intl'; +import { + CollectionDescription, + CollectionHeading, + CollectionItem, + CollectionThumbnail, + Button, +} from '@trussworks/react-uswds'; + +import LinkTypeWrapper from '../LinkTypeWrapper'; +import * as PUBLIC_ENGAGE_COPY from '../../data/copy/publicEngage'; +import * as styles from './PublicEvent.module.scss'; + +export interface IPublicEvent { + event: { + DATE: Date, + NAME: JSX.Element, + DESC: JSX.Element, + NUMBER: Number, + IMAGE: React.ReactElement | string, + FIELDS: JSX.Element, + REG_LINK: string, + DATA_CY: string, + } +} + + +const PublicEvent = ({event}:IPublicEvent) => { + const intl = useIntl(); + + return ( + + }> + + {/* Heading */} + + + + + {/* Description */} + + {intl.formatMessage(event.DESC)} + + + {/* Event info */} + + + {intl.formatMessage(PUBLIC_ENGAGE_COPY.EVENT_FIELDS.EVENT_INFO)} + + {`: ${intl.formatMessage(event.FIELDS.INFO)}`} + + + {/* Registration Link */} + + + + + + + ); +}; + +export default PublicEvent; diff --git a/client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap b/client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap new file mode 100644 index 00000000..e29ea5c5 --- /dev/null +++ b/client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap @@ -0,0 +1,71 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the PublicEvent checks if component renders 1`] = ` + +
  • + Alt text +
    +

    + + CEJST + training session + #1 + + +

    +

    + + The White House Council on Environmental Quality (CEQ), in partnership with the U.S. Digital + Service, is hosting a series of 'Training Webinars' for users of the Climate and Economic + Justice Screening Tool. These webinars are an opportunity for members of the public to learn how to + use the current version of the tool. The presenters at these webinars will be available to + provide technical support and address issues related to accessing and using the tool. + +

    +

    + + Event info + + : March 9th (4:00 - 5:00 PM EST) +

    +

    + + + +

    +
    +
    • +     +`; diff --git a/client/src/components/PublicEvent/index.tsx b/client/src/components/PublicEvent/index.tsx new file mode 100644 index 00000000..c1340045 --- /dev/null +++ b/client/src/components/PublicEvent/index.tsx @@ -0,0 +1,3 @@ +import PublicEvent from './PublicEvent'; + +export default PublicEvent; diff --git a/client/src/data/copy/publicEngage.tsx b/client/src/data/copy/publicEngage.tsx new file mode 100644 index 00000000..a0df64f8 --- /dev/null +++ b/client/src/data/copy/publicEngage.tsx @@ -0,0 +1,206 @@ +import {defineMessages} from 'react-intl'; +import mar9 from '../../images/eventDates/mar9.svg'; +import mar10 from '../../images/eventDates/mar10.svg'; +import mar16 from '../../images/eventDates/mar16.svg'; +import mar22 from '../../images/eventDates/mar22.svg'; +import apr15 from '../../images/eventDates/apr15.svg'; + + +export const PAGE_INTRO = defineMessages({ + PAGE_TILE: { + id: 'publiceng.page.title.text', + defaultMessage: 'Public engagement opportunities', + description: 'publiceng page title text', + }, + PAGE_HEADING1: { + id: 'publiceng.page.heading1.text', + defaultMessage: 'Public engagement opportunities', + description: 'publiceng page header text', + }, + PAGE_HEADING2: { + id: 'publiceng.page.sub.header2.text', + defaultMessage: 'Find an event', + description: 'publiceng page sub header text', + }, + PAGE_DESCRIPTION1: { + id: 'publiceng.page.description1.text', + defaultMessage: ` + CEQ is hosting engagement opportunities to connect with the public about the current version of the + tool. These sessions are an opportunity to obtain training on the tool or to provide feedback on the + beta version of the tool. CEQ hopes that members of the public will join these engagements to learn + about the tool, have their questions answered, and share feedback. + `, + description: 'publiceng page description 1 text', + }, + PAGE_DESCRIPTION2: { + id: 'publiceng.page.description2.text', + defaultMessage: ` + Pre-registration is required to participate and speak at the sessions. + `, + description: 'publiceng page description 2 text', + }, + PAGE_DESCRIPTION3: { + id: 'publiceng.page.description3.text', + defaultMessage: ` + As they become available, additional public trainings and engagement opportunities on the Climate + and Economic Justice Screening Tool will also be posted on this page. + `, + description: 'publiceng page description 3 text', + }, + SURVEY_TEXT: { + id: 'fab.survey.text', + defaultMessage: `Help improve the site & data`, + description: 'text for floating action button', + }, +}); + +export const PUBLIC_ENG_BUTTON = defineMessages({ + LABEL: { + id: 'public.eng.page.button.label', + defaultMessage: `Public Engagement`, + description: 'public engagement button label', + }, + TAG_LABEL: { + id: 'public.eng.page.tag.label', + defaultMessage: `NEW`, + description: 'public engagement tag label', + }, +}); + +export const EVENT_TYPES = { + TRAINING_SESS: defineMessages({ + NAME: { + id: 'public.eng.page.event.training.sess.name', + defaultMessage: `training session`, + description: 'public engagement page event training session name', + }, + DESCRIPTION: { + id: 'public.eng.page.event.training.description', + defaultMessage: ` + The White House Council on Environmental Quality (CEQ), in partnership with the U.S. Digital + Service, is hosting a series of 'Training Webinars' for users of the Climate and Economic + Justice Screening Tool. These webinars are an opportunity for members of the public to learn how to + use the current version of the tool. The presenters at these webinars will be available to + provide technical support and address issues related to accessing and using the tool. + `, + description: 'public engagement page event training session description', + }, + }), + LISTENING_SESS: defineMessages({ + NAME: { + id: 'public.eng.page.event.listening.sess.name', + defaultMessage: `listening session`, + description: 'public engagement page event listening session name', + }, + DESCRIPTION: { + id: 'public.eng.page.event.listening.sess.description', + defaultMessage: ` + CEQ is hosting public listening sessions to seek input and feedback on the beta version of the + tool, including on the datasets it includes and the methodology it uses. This feedback is critical + to the development and enhancement of the tool. This feedback will help CEQ update and refine the + tool to ensure that it reflects the environmental, climate and other challenges that communities + are experiencing. + `, + description: 'public engagement page event listening session description', + }, + }), +}; + +export const EVENT_FIELDS = defineMessages({ + EVENT_INFO: { + id: 'publiceng.page.event.info.label', + defaultMessage: 'Event info', + description: 'public engagement page event info label', + }, + REG_LINK: { + id: 'publiceng.page.event.reglink.label', + defaultMessage: 'Registration link', + description: 'public engagment page event registration link label', + }, +}); + +export const EVENTS = [ + { + DATE: new Date(2022, 9, 3), + NAME: EVENT_TYPES.TRAINING_SESS.NAME, + DESC: EVENT_TYPES.TRAINING_SESS.DESCRIPTION, + NUMBER: 1, + IMAGE: mar9, + FIELDS: defineMessages({ + INFO: { + id: 'public.eng.page.event.training.1.info', + defaultMessage: `March 9th (4:00 - 5:00 PM EST)`, + description: 'public engagement page event training session 1 date', + }, + }), + REG_LINK: `https://pitc.zoomgov.com/webinar/register/WN_D-Om_xXhTtiLv71y3Rr1CQ`, + DATA_CY: `mar-9-reg-link-block`, + }, + { + DATE: new Date(2022, 10, 3), + NAME: EVENT_TYPES.TRAINING_SESS.NAME, + DESC: EVENT_TYPES.TRAINING_SESS.DESCRIPTION, + NUMBER: 2, + IMAGE: mar10, + FIELDS: defineMessages({ + INFO: { + id: 'public.eng.page.event.training.2.info', + defaultMessage: `March 10th (4:00 - 5:00 PM EST)`, + description: 'public engagement page event training session 2 date', + }, + }), + REG_LINK: `https://pitc.zoomgov.com/webinar/register/WN_QsSqshI4TpmRBkI6nVlWxQ`, + DATA_CY: `mar-10-reg-link-block`, + + }, + { + DATE: new Date(2022, 16, 3), + NAME: EVENT_TYPES.TRAINING_SESS.NAME, + DESC: EVENT_TYPES.TRAINING_SESS.DESCRIPTION, + NUMBER: 3, + IMAGE: mar16, + FIELDS: defineMessages({ + INFO: { + id: 'public.eng.page.event.training.3.info', + defaultMessage: `March 16th (4:00 - 5:00 PM EST)`, + description: 'public engagement page event training session 3 date', + }, + }), + REG_LINK: `https://pitc.zoomgov.com/webinar/register/WN_q86iMtpwTESYa6f0xpIk7g`, + DATA_CY: `mar-16-reg-link-block`, + + }, + { + DATE: new Date(2022, 22, 3), + NAME: EVENT_TYPES.LISTENING_SESS.NAME, + DESC: EVENT_TYPES.LISTENING_SESS.DESCRIPTION, + NUMBER: 1, + IMAGE: mar22, + FIELDS: defineMessages({ + INFO: { + id: 'public.eng.page.event.listening.1.info', + defaultMessage: `March 22nd (4:00 - 5:00 PM EST)`, + description: 'public engagement page event listening session 1 date', + }, + }), + REG_LINK: `https://pitc.zoomgov.com/webinar/register/WN_YT7_uLZqScGHgyAcTCuJjA`, + DATA_CY: `mar-22-reg-link-block`, + + }, + { + DATE: new Date(2022, 15, 4), + NAME: EVENT_TYPES.LISTENING_SESS.NAME, + DESC: EVENT_TYPES.LISTENING_SESS.DESCRIPTION, + NUMBER: 2, + IMAGE: apr15, + FIELDS: defineMessages({ + INFO: { + id: 'public.eng.page.event.listening.2.info', + defaultMessage: `April 15th (4:00 - 5:00 PM EST)`, + description: 'public engagement page event listening session 2 date', + }, + }), + REG_LINK: `https://pitc.zoomgov.com/webinar/register/WN_dLw3xChiTlaOLGdHXQWk0w`, + DATA_CY: `apr-15-reg-link-block`, + }, +]; diff --git a/client/src/images/eventDates/apr15.svg b/client/src/images/eventDates/apr15.svg new file mode 100644 index 00000000..8c45c75d --- /dev/null +++ b/client/src/images/eventDates/apr15.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/eventDates/mar10.svg b/client/src/images/eventDates/mar10.svg new file mode 100644 index 00000000..0b2572e6 --- /dev/null +++ b/client/src/images/eventDates/mar10.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/eventDates/mar15.svg b/client/src/images/eventDates/mar15.svg new file mode 100644 index 00000000..ce828a37 --- /dev/null +++ b/client/src/images/eventDates/mar15.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/eventDates/mar16.svg b/client/src/images/eventDates/mar16.svg new file mode 100644 index 00000000..ec96b4dc --- /dev/null +++ b/client/src/images/eventDates/mar16.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/eventDates/mar22.svg b/client/src/images/eventDates/mar22.svg new file mode 100644 index 00000000..e3ebd7ab --- /dev/null +++ b/client/src/images/eventDates/mar22.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/eventDates/mar9.svg b/client/src/images/eventDates/mar9.svg new file mode 100644 index 00000000..b8fbb63a --- /dev/null +++ b/client/src/images/eventDates/mar9.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/pages/__snapshots__/contact.test.tsx.snap b/client/src/pages/__snapshots__/contact.test.tsx.snap index d35e0a72..aa7f451c 100644 --- a/client/src/pages/__snapshots__/contact.test.tsx.snap +++ b/client/src/pages/__snapshots__/contact.test.tsx.snap @@ -276,9 +276,34 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="grid-container-desktop-lg" data-testid="gridContainer" > -

    - Contact -

    +
    +

    + Contact +

    +
    +
    + + NEW + +
    + + + +
    +
    -

    - About -

    +

    + About +

    +
    +
    + + NEW + +
    + + + +
    +
    -

    - Methodology -

    +
    +

    + Methodology +

    +
    +
    + + NEW + +
    + + + +
    +
    { -

    {intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}

    +
    +

    {intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}

    + +
    - +

    diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx index b3b25581..3e268da7 100644 --- a/client/src/pages/contact.tsx +++ b/client/src/pages/contact.tsx @@ -5,6 +5,7 @@ import {useIntl, FormattedMessage} from 'gatsby-plugin-intl'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; import LinkTypeWrapper from '../components/LinkTypeWrapper'; +import PublicEngageButton from '../components/PublicEngageButton'; import * as CONTACT_COPY from '../data/copy/contact'; interface IContactPageProps { @@ -19,7 +20,10 @@ const ContactPage = ({location}: IContactPageProps) => { -

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

    +
    +

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

    + +
    diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index 67578f14..29046ee8 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -5,6 +5,7 @@ import AboutCard from '../components/AboutCard/AboutCard'; import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; +import PublicEngageButton from '../components/PublicEngageButton'; import * as ABOUT_COPY from '../data/copy/about'; import * as CONTACT_COPY from '../data/copy/contact'; @@ -37,8 +38,10 @@ const IndexPage = ({location}: IndexPageProps) => { - -

    {intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}

    +
    +

    {intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}

    + +
    { -

    {intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}

    +
    +

    {intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}

    + +
    - {/* First column */} - + + + {/* First column */}

    diff --git a/client/src/pages/public-engagement.tsx b/client/src/pages/public-engagement.tsx new file mode 100644 index 00000000..c9ff2f6b --- /dev/null +++ b/client/src/pages/public-engagement.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import {Grid, Collection} from '@trussworks/react-uswds'; +import {useIntl} from 'gatsby-plugin-intl'; + +import J40MainGridContainer from '../components/J40MainGridContainer'; +import Layout from '../components/layout'; +import PublicEvent from '../components/PublicEvent'; + +import * as PUBLIC_ENG_COPY from '../data/copy/publicEngage'; + +interface IPublicEngagementPageProps { + location: Location; +} + +const PublicEngagementPage = ({location}: IPublicEngagementPageProps) => { + const intl = useIntl(); + + // TODO: filter events by date + const futureEvents = PUBLIC_ENG_COPY.EVENTS; + // const pastEvents + + return ( + + + + +

    {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_HEADING1)}

    + + +

    + {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION1)} +

    +

    + {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION2)} +

    +

    + {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION3)} +

    +     + + +

    + {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_HEADING2)} +

    +     + + + {futureEvents.map((event, index) => )} + + + + {/* Empty Spacer */} + + + + ); +}; + +export default PublicEngagementPage; diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 0159ecfc..23f943d1 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -24,7 +24,7 @@ There are 3 things that should be included in this file: -- Footer styles - Component styles -- Map styles - -- Timeline/process list styles + -- Public Event styles -- About styles */ @@ -83,12 +83,12 @@ p.flush { // 24 pixel margin-bottom .j40-mb-3 { - @include u-margin-bottom(3) + @include u-margin-bottom(3); } // 40 pixel margin-bottom .j40-mb-5 { - @include u-margin-bottom(5) + } .j40-footer-ceq-font { @@ -120,8 +120,22 @@ components include: } #main-content { - border-top: 0; - min-height: 60vh; + border-top: 0; // The main content has border this removes it + min-height: 60vh; // Contact page's content is not enough to fill page so this keeps the footer low + + .page-heading { + display: flex; + justify-content: space-between; + + @include at-media-max("tablet"){ + flex-direction: column; + } + } + + .j40-mb5-mt3 { + @include u-margin-bottom(5); + @include u-margin-top(3); + } } @@ -296,12 +310,12 @@ This section will outline styles that are component specific /* *************************************** -* TIMELINE / PROCESS LIST STYLES +* PUBLIC EVENT STYLES *************************************** */ -.usa-process-list__item{ - @include u-border-left('base-lightest'); +.usa-collection__body{ + width: 0; }