From bc1aad4608e4fbbee4a5632dadc4681e062c5162 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Thu, 31 Mar 2022 15:11:43 -0400 Subject: [PATCH 1/5] - Update copy of WHEJAC meetings (#1521) - make all events one day ahead to account for timezones - update --- .../components/PublicEvent/PublicEvent.tsx | 1 + client/src/data/copy/publicEngage.tsx | 19 ++++++++++--------- client/src/intl/en.json | 4 ++-- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/client/src/components/PublicEvent/PublicEvent.tsx b/client/src/components/PublicEvent/PublicEvent.tsx index 6a9c8b65..c5354a9a 100644 --- a/client/src/components/PublicEvent/PublicEvent.tsx +++ b/client/src/components/PublicEvent/PublicEvent.tsx @@ -36,6 +36,7 @@ const PublicEvent = ({event}:IPublicEvent) => { const isEventExpired = new Date() > event.DATE; + console.log('event and date: ', event.NAME, event.DATE, isEventExpired); return ( Date: Thu, 31 Mar 2022 15:35:22 -0400 Subject: [PATCH 2/5] adding geojson and ArcGIS links --- DATASETS.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/DATASETS.md b/DATASETS.md index 03728ef7..a3b47795 100644 --- a/DATASETS.md +++ b/DATASETS.md @@ -6,6 +6,8 @@ This page contains web links to the datasets that are uploaded as part of our da - Census data, generated by the [Generate Census Github Action](https://github.com/usds/justice40-tool/blob/main/.github/workflows/generate-census.yml): - Score data, generated by the [Generate Score Github Action](https://github.com/usds/justice40-tool/blob/main/.github/workflows/generate-score.yml): +- GeoJSON data: +- Shapefile data: - EJScreen: - Census ACS 2019: - Housing and Transportation Index: From a1605cbaf2a62fa68f2578bc042a2d18adbcc7ca Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Thu, 31 Mar 2022 16:14:49 -0400 Subject: [PATCH 3/5] Update copy bug on heart disease (#1522) --- .../tests/__snapshots__/areaDetail.test.tsx.snap | 6 +----- client/src/data/copy/explore.tsx | 9 +++------ client/src/intl/en.json | 4 ++-- 3 files changed, 6 insertions(+), 13 deletions(-) diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index c19f07bb..44408c9a 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -1649,11 +1649,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
Heart disease
- - Navigate to the explore the tool page. When the map is in view, click on the map. The side panel - will show an indicator desciption of Weighted percent of people ages 18 years and older who have - been told they have heart disease - + People ages 18 years and older who have been told they have heart disease
diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index aee64e47..5d6d1280 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -677,12 +677,9 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({ }, HEART_DISEASE: { id: 'explore.tool.page.side.panel.indicator.description.heartDisease', - defaultMessage: ` - Navigate to the explore the tool page. When the map is in view, click on the map. The side panel - will show an indicator desciption of Weighted percent of people ages 18 years and older who have - been told they have heart disease - `, - description: `People ages 18 years and older who have been told they have heart disease`, + defaultMessage: `People ages 18 years and older who have been told they have heart disease`, + description: `Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show an indicator desciption of Weighted percent of people ages 18 years and older who have + been told they have heart disease`, }, LOW_LIFE_EXPECT: { id: 'explore.tool.page.side.panel.indicator.description.lifeExpect', diff --git a/client/src/intl/en.json b/client/src/intl/en.json index 27cee641..eb926986 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -420,8 +420,8 @@ "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show an indicator desciption of Economic loss rate to the population in fatalities and \n injuries resulting from natural hazards" }, "explore.tool.page.side.panel.indicator.description.heartDisease": { - "defaultMessage": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show an indicator desciption of Weighted percent of people ages 18 years and older who have been told they have heart disease", - "description": "People ages 18 years and older who have been told they have heart disease" + "defaultMessage": "People ages 18 years and older who have been told they have heart disease", + "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show an indicator desciption of Weighted percent of people ages 18 years and older who have \n been told they have heart disease" }, "explore.tool.page.side.panel.indicator.description.high.ed": { "defaultMessage": "Percent of the census tract's population 15 or older not enrolled in college, university, or graduate school", From 952f97a20d729b69ce5590038bcc96b6daa8d382 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Fri, 1 Apr 2022 11:13:40 -0400 Subject: [PATCH 4/5] Add video to PEC (#1524) * Add video to PEC - new component - update snapshot * Fix a11y issue - move SummaryBox below H2 - create PublicEvents component to place a margin-bottom * Remove PublicEvents component --- .../src/components/AreaDetail/AreaDetail.tsx | 3 -- .../PublicVideoBox/PublicVideoBox.module.scss | 43 +++++++++++++++++ .../PublicVideoBox.module.scss.d.ts | 17 +++++++ .../PublicVideoBox/PublicVideoBox.test.tsx | 16 +++++++ .../PublicVideoBox/PublicVideoBox.tsx | 45 ++++++++++++++++++ .../PublicVideoBox.test.tsx.snap | 46 +++++++++++++++++++ .../src/components/PublicVideoBox/index.tsx | 3 ++ client/src/data/copy/publicEngage.tsx | 23 ++++++++++ client/src/intl/en.json | 16 +++++++ client/src/pages/public-engagement.tsx | 44 ++++++++++-------- client/src/styles/global.scss | 10 ++++ 11 files changed, 243 insertions(+), 23 deletions(-) create mode 100644 client/src/components/PublicVideoBox/PublicVideoBox.module.scss create mode 100644 client/src/components/PublicVideoBox/PublicVideoBox.module.scss.d.ts create mode 100644 client/src/components/PublicVideoBox/PublicVideoBox.test.tsx create mode 100644 client/src/components/PublicVideoBox/PublicVideoBox.tsx create mode 100644 client/src/components/PublicVideoBox/__snapshots__/PublicVideoBox.test.tsx.snap create mode 100644 client/src/components/PublicVideoBox/index.tsx diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index f6a4872f..a72f47f2 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -620,9 +620,6 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { alt={'tbd'} />
- {/*
- {'mail -
*/} diff --git a/client/src/components/PublicVideoBox/PublicVideoBox.module.scss b/client/src/components/PublicVideoBox/PublicVideoBox.module.scss new file mode 100644 index 00000000..c140cfc6 --- /dev/null +++ b/client/src/components/PublicVideoBox/PublicVideoBox.module.scss @@ -0,0 +1,43 @@ +@use "../../styles/design-system.scss" as *; + +.publicVideoContainer { + @include u-margin-top(3); + + @include at-media-max('desktop'){ + @include u-margin-bottom(3); + } + + .publicVideoLink { + display: flex; + text-decoration: none; + + .youTubeBtn { + @include u-text("blue-70v"); + @include u-bg("yellow-20v"); + height: 40px; + @include u-margin-top(3); + margin-left: auto; + margin-right: auto; + + + &:hover { + @include u-bg("yellow-20"); + @include u-text("gray-90"); + } + .buttonContainer { + display: flex; + + .buttonText { + @include u-margin-right(1); + } + + .buttonImage { + width: 21px; + margin-top: -3px; + + filter: invert(13%) sepia(76%) saturate(5142%) hue-rotate(192deg) brightness(80%) contrast(106%); + } + } + } + } +}; diff --git a/client/src/components/PublicVideoBox/PublicVideoBox.module.scss.d.ts b/client/src/components/PublicVideoBox/PublicVideoBox.module.scss.d.ts new file mode 100644 index 00000000..753c957c --- /dev/null +++ b/client/src/components/PublicVideoBox/PublicVideoBox.module.scss.d.ts @@ -0,0 +1,17 @@ +declare namespace PublicVideoBoxNamespace { + export interface IPublicVideoBoxScss { + publicVideoContainer: string; + publicVideoLink: string; + youTubeBtn: string; + buttonContainer: string; + buttonText: string; + buttonImage: string; + } + } + +declare const PublicVideoBoxScssModule: PublicVideoBoxNamespace.IPublicVideoBoxScss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: PublicVideoBoxNamespace.IPublicVideoBoxScss; + }; + + export = PublicVideoBoxScssModule; diff --git a/client/src/components/PublicVideoBox/PublicVideoBox.test.tsx b/client/src/components/PublicVideoBox/PublicVideoBox.test.tsx new file mode 100644 index 00000000..29cb944f --- /dev/null +++ b/client/src/components/PublicVideoBox/PublicVideoBox.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../test/testHelpers'; +import PublicVideoBox from './PublicVideoBox'; + +describe('rendering of the PublicVideoBox', () => { + const {asFragment} = render( + + + , + ); + + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/PublicVideoBox/PublicVideoBox.tsx b/client/src/components/PublicVideoBox/PublicVideoBox.tsx new file mode 100644 index 00000000..296c0ab0 --- /dev/null +++ b/client/src/components/PublicVideoBox/PublicVideoBox.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import {Button, SummaryBox} from '@trussworks/react-uswds'; +import {useIntl} from 'gatsby-plugin-intl'; + +import * as PUBLIC_COPY from '../../data/copy/publicEngage'; +import * as styles from './PublicVideoBox.module.scss'; + +// @ts-ignore +import launchIcon from '/node_modules/uswds/dist/img/usa-icons/launch.svg'; + +const PublicVideoBox = () => { + const intl = useIntl(); + + return ( + + {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BODY)} + + + + + ); +}; + +export default PublicVideoBox; diff --git a/client/src/components/PublicVideoBox/__snapshots__/PublicVideoBox.test.tsx.snap b/client/src/components/PublicVideoBox/__snapshots__/PublicVideoBox.test.tsx.snap new file mode 100644 index 00000000..a814db3b --- /dev/null +++ b/client/src/components/PublicVideoBox/__snapshots__/PublicVideoBox.test.tsx.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the PublicVideoBox checks if component renders 1`] = ` + +
+
+

+ Can't make an upcoming session? +

+
+ Watch a recorded version of the CEJST training on YouTube. + + + +
+
+
+ +`; diff --git a/client/src/components/PublicVideoBox/index.tsx b/client/src/components/PublicVideoBox/index.tsx new file mode 100644 index 00000000..2a520165 --- /dev/null +++ b/client/src/components/PublicVideoBox/index.tsx @@ -0,0 +1,3 @@ +import PublicVideoBox from './PublicVideoBox'; + +export default PublicVideoBox; diff --git a/client/src/data/copy/publicEngage.tsx b/client/src/data/copy/publicEngage.tsx index 3d5de568..a0682c7e 100644 --- a/client/src/data/copy/publicEngage.tsx +++ b/client/src/data/copy/publicEngage.tsx @@ -64,6 +64,29 @@ export const PAGE_INTRO = defineMessages({ }, }); +export const PUBLIC_ENG_VIDEO = defineMessages({ + TITLE: { + id: 'public.eng.page.video.box.title.text', + defaultMessage: `Can't make an upcoming session?`, + description: 'Navigate to the the public engagement page, there will be box that allows users to watch previously recorded videos. This is that box title text.', + }, + BODY: { + id: 'public.eng.page.video.box.body.text', + defaultMessage: `Watch a recorded version of the CEJST training on YouTube.`, + description: 'Navigate to the the public engagement page, there will be box that allows users to watch previously recorded videos. This is that box body text.', + }, + BUTTON_TEXT: { + id: 'public.eng.page.video.box.button.text', + defaultMessage: `Watch on YouTube`, + description: 'Navigate to the the public engagement page, there will be box that allows users to watch previously recorded videos. This is that box button text.', + }, + IMG_ALT_TEXT: { + id: 'public.eng.page.video.box.button.img.alt.text', + defaultMessage: `the icon to show that this button will open in a new tab`, + description: 'Navigate to the the public engagement page, there will be box that allows users to watch previously recorded videos. This is alt tag of the image in the button.', + }, +}); + export const PUBLIC_ENG_BUTTON = defineMessages({ LABEL: { id: 'public.eng.page.button.label', diff --git a/client/src/intl/en.json b/client/src/intl/en.json index eb926986..3f0f61f5 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -1323,6 +1323,22 @@ "defaultMessage": "Public engagement opportunities", "description": "Navigate to the the public engagement page, this will be the publiceng page title text" }, + "public.eng.page.video.box.body.text": { + "defaultMessage": "Watch a recorded version of the CEJST training on YouTube.", + "description": "Navigate to the the public engagement page, there will be box that allows users to watch previously recorded videos. This is that box body text." + }, + "public.eng.page.video.box.button.img.alt.text": { + "defaultMessage": "the icon to show that this button will open in a new tab", + "description": "Navigate to the the public engagement page, there will be box that allows users to watch previously recorded videos. This is alt tag of the image in the button." + }, + "public.eng.page.video.box.button.text": { + "defaultMessage": "Watch on YouTube", + "description": "Navigate to the the public engagement page, there will be box that allows users to watch previously recorded videos. This is that box button text." + }, + "public.eng.page.video.box.title.text": { + "defaultMessage": "Can't make an upcoming session?", + "description": "Navigate to the the public engagement page, there will be box that allows users to watch previously recorded videos. This is that box title text." + }, "public.eng.page.whejac.meeting.day.1.info": { "defaultMessage": "March 31th (3:00 - 7:30 PM EST)", "description": "public engagement page event WHEJAC" diff --git a/client/src/pages/public-engagement.tsx b/client/src/pages/public-engagement.tsx index c9ff2f6b..f46722ec 100644 --- a/client/src/pages/public-engagement.tsx +++ b/client/src/pages/public-engagement.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import {Grid, Collection} from '@trussworks/react-uswds'; +import {Collection, Grid} 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 PublicVideoBox from '../components/PublicVideoBox'; import * as PUBLIC_ENG_COPY from '../data/copy/publicEngage'; @@ -15,10 +16,6 @@ interface IPublicEngagementPageProps { const PublicEngagementPage = ({location}: IPublicEngagementPageProps) => { const intl = useIntl(); - // TODO: filter events by date - const futureEvents = PUBLIC_ENG_COPY.EVENTS; - // const pastEvents - return ( @@ -26,16 +23,18 @@ const PublicEngagementPage = ({location}: IPublicEngagementPageProps) => {

{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_DESCRIPTION1)} +

+

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

+

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

+ @@ -44,13 +43,18 @@ const PublicEngagementPage = ({location}: IPublicEngagementPageProps) => { - - {futureEvents.map((event, index) => )} - - - {/* Empty Spacer */} + + + + {PUBLIC_ENG_COPY.EVENTS.map((event, index) => )} + + + + + + ); diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index f35128fe..c6424d95 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 + -- Summary box */ @@ -367,3 +368,12 @@ a.mapboxgl-ctrl-logo { } } } + +/* +****************************** +* SUMMARY BOX STYLES +****************************** +*/ +.usa-summary-box__heading { + @include u-margin-bottom(2); +} \ No newline at end of file From 69edbe520e1065691b048993aca7acdd12aa65ee Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Tue, 5 Apr 2022 11:11:14 -0400 Subject: [PATCH 5/5] 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 tag - fix local cypress tess --- client/cypress/integration/Contact.feature | 8 ++-- .../src/components/DownloadPacket/index.tsx | 2 +- .../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 ++++++++++++++++++- .../__snapshots__/methodology.test.tsx.snap | 1 + client/src/pages/contact.tsx | 24 ++++++++---- client/src/styles/global.scss | 3 +- 14 files changed, 181 insertions(+), 16 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/cypress/integration/Contact.feature b/client/cypress/integration/Contact.feature index 1a26d887..db39d5bc 100644 --- a/client/cypress/integration/Contact.feature +++ b/client/cypress/integration/Contact.feature @@ -5,10 +5,10 @@ Feature: The Contact page will open from all other pages When I click on the "Contact" page in the navigation Then I see "Contact" in the title - Scenario: Contact page open when navigating from Explore the tool page - Given I am on the "Explore the tool" page - When I click on the "Contact" page in the navigation - Then I see "Contact" in the title + # Scenario: Contact page open when navigating from Explore the tool page + # Given I am on the "Explore the tool" page + # When I click on the "Contact" page in the navigation + # Then I see "Contact" in the title Scenario: Contact page open when navigating from Methodology page Given I am on the "Methodology" page diff --git a/client/src/components/DownloadPacket/index.tsx b/client/src/components/DownloadPacket/index.tsx index 8ca03a0e..fc6486d9 100644 --- a/client/src/components/DownloadPacket/index.tsx +++ b/client/src/components/DownloadPacket/index.tsx @@ -24,7 +24,7 @@ const DownloadPacket = () => {
- +
diff --git a/client/src/pages/__snapshots__/methodology.test.tsx.snap b/client/src/pages/__snapshots__/methodology.test.tsx.snap index 91c5624d..810971eb 100644 --- a/client/src/pages/__snapshots__/methodology.test.tsx.snap +++ b/client/src/pages/__snapshots__/methodology.test.tsx.snap @@ -420,6 +420,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis