From 5cb265a93cc54f9cab409f75022150ea41d99b3a Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Tue, 5 Apr 2022 15:36:06 -0700 Subject: [PATCH] Add back public engagement button to all pages - add send button in area detail alt tag to i18n - modify public engagement button to have same CSS as send feedback button - update snapshots --- .../src/components/AreaDetail/AreaDetail.tsx | 2 +- .../__snapshots__/areaDetail.test.tsx.snap | 6 +-- .../PublicEngageButton.module.scss | 23 +++++++++++ .../PublicEngageButton.module.scss.d.ts | 4 ++ .../PublicEngageButton/PublicEngageButton.tsx | 19 ++++++++- .../PublicEngageButton.test.tsx.snap | 12 +++++- client/src/data/copy/explore.tsx | 7 ++++ client/src/data/copy/publicEngage.tsx | 7 +++- client/src/intl/en.json | 10 ++++- client/src/pages/about.tsx | 7 +++- client/src/pages/contact.tsx | 6 ++- client/src/pages/index.tsx | 6 ++- client/src/pages/methodology.tsx | 6 ++- .../tests/__snapshots__/about.test.tsx.snap | 41 +++++++++++++++++-- .../tests/__snapshots__/contact.test.tsx.snap | 39 ++++++++++++++++-- .../__snapshots__/methodology.test.tsx.snap | 39 ++++++++++++++++-- client/src/styles/global.scss | 9 ++++ 17 files changed, 219 insertions(+), 24 deletions(-) diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index a72f47f2..9215d267 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -617,7 +617,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { {'tbd'} 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 44408c9a..a61e2473 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -76,7 +76,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p Send feedback tbd @@ -429,7 +429,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present Send feedback tbd @@ -2133,7 +2133,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr Send feedback tbd diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss index 642f9801..950c73ca 100644 --- a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss +++ b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss @@ -20,6 +20,29 @@ .link, .link:visited { color:white; text-decoration: none; + + .engagementButton{ + // @include u-text("blue-70v"); + // @include u-bg("yellow-20v"); + height: 40px; + + // &:hover { + // @include u-bg("yellow-20"); + // @include u-text("gray-90"); + // } + + .buttonContainer{ + display: flex; + + .buttonImage{ + @include u-margin-right(1); + width: 21px; + margin-top: -3px; + + filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(119deg) brightness(105%) contrast(101%); + } + } + } } } \ 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 index 7e3a3c81..39ef4b86 100644 --- a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts +++ b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts @@ -4,6 +4,10 @@ declare namespace PublicEngagementButton { tagContainer: string; container: string; link: string; + engagementButton: string; + buttonContainer: string; + buttonImage: string; + } } diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.tsx b/client/src/components/PublicEngageButton/PublicEngageButton.tsx index 7a93b6c9..f30ff5d6 100644 --- a/client/src/components/PublicEngageButton/PublicEngageButton.tsx +++ b/client/src/components/PublicEngageButton/PublicEngageButton.tsx @@ -5,6 +5,9 @@ import {Button, Tag} from '@trussworks/react-uswds'; import * as styles from './PublicEngageButton.module.scss'; import * as PUBLIC_ENG_COPY from '../../data/copy/publicEngage'; +// @ts-ignore +import eventIcon from '/node_modules/uswds/dist/img/usa-icons/event.svg'; + const PublicEngageButton = () => { const intl = useIntl(); @@ -16,8 +19,20 @@ const PublicEngageButton = () => { - diff --git a/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap b/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap index bc6a88d8..7d572f0e 100644 --- a/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap +++ b/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap @@ -15,11 +15,19 @@ exports[`rendering of the PublicEngageButton checks if component renders 1`] = ` href="/en/public-engagement" > diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index 2c136a12..2ae29cbc 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -290,6 +290,13 @@ export const COMMUNITY = { defaultMessage={ 'Send feedback'} description={`Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show link to send feedback`} />, + IMG_ICON: defineMessages({ + ALT_TAG: { + id: 'explore.tool.page.side.panel.send.feedback.alt.img', + defaultMessage: 'Send feedback', + description: `Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show a send feedback icon, this is the images alt tag`, + }, + }), }, }; diff --git a/client/src/data/copy/publicEngage.tsx b/client/src/data/copy/publicEngage.tsx index a0682c7e..f223d980 100644 --- a/client/src/data/copy/publicEngage.tsx +++ b/client/src/data/copy/publicEngage.tsx @@ -90,7 +90,7 @@ export const PUBLIC_ENG_VIDEO = defineMessages({ export const PUBLIC_ENG_BUTTON = defineMessages({ LABEL: { id: 'public.eng.page.button.label', - defaultMessage: `Public Engagement`, + defaultMessage: `Public engagement`, description: 'Navigate to the the public engagement page, this will be the public engagement button label', }, TAG_LABEL: { @@ -98,6 +98,11 @@ export const PUBLIC_ENG_BUTTON = defineMessages({ defaultMessage: `UPDATED`, description: 'Navigate to the the public engagement page, this will be the public engagement tag label', }, + IMG_ICON_ALT_TAG: { + id: 'public.eng.page.button.img.alt.tag', + defaultMessage: `an icon that represents a calendar`, + description: 'Navigate to the the public engagement page, this will be the public engagement button icon alt tag text', + }, }); export const EVENT_TYPES = { diff --git a/client/src/intl/en.json b/client/src/intl/en.json index 04a6c5f4..5c91b50f 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -723,6 +723,10 @@ "defaultMessage": "At or above {numberOfThresholdExceed} thresholds", "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show how many thresholds are exceeded" }, + "explore.tool.page.side.panel.send.feedback.alt.img": { + "defaultMessage": "Send feedback", + "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show a send feedback icon, this is the images alt tag" + }, "explore.tool.page.side.panel.send.feedback.email.body": { "defaultMessage": "Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.", "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show link to send feedback\n" @@ -1287,8 +1291,12 @@ "defaultMessage": "Page not found", "description": "page not found title text" }, + "public.eng.page.button.img.alt.tag": { + "defaultMessage": "an icon that represents a calendar", + "description": "Navigate to the the public engagement page, this will be the public engagement button icon alt tag text" + }, "public.eng.page.button.label": { - "defaultMessage": "Public Engagement", + "defaultMessage": "Public engagement", "description": "Navigate to the the public engagement page, this will be the public engagement button label" }, "public.eng.page.description1.text": { diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index f736507b..4a865e70 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.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 COMMON_COPY from '../data/copy/common'; @@ -38,7 +39,11 @@ const AboutPage = ({location}: IAboutPageProps) => { -

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

+ +
+

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

+ +
{ -

{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 b6b089d6..7388238a 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -6,6 +6,7 @@ import HowYouCanHelp from '../components/HowYouCanHelp'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; import MapWrapper from '../components/MapWrapper'; +import PublicEngageButton from '../components/PublicEngageButton'; import * as EXPLORE_COPY from '../data/copy/explore'; @@ -23,7 +24,10 @@ const ExporeToolPage = ({location}: IMapPageProps) => { -

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

+
+

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

+ +
diff --git a/client/src/pages/methodology.tsx b/client/src/pages/methodology.tsx index d79cbe8a..b1797253 100644 --- a/client/src/pages/methodology.tsx +++ b/client/src/pages/methodology.tsx @@ -8,6 +8,7 @@ import DownloadPacket from '../components/DownloadPacket'; import J40MainGridContainer from '../components/J40MainGridContainer'; import MethodologyFormula from '../components/MethodologyFormula'; import Layout from '../components/layout'; +import PublicEngageButton from '../components/PublicEngageButton'; import * as METHODOLOGY_COPY from '../data/copy/methodology'; @@ -23,7 +24,10 @@ const IndexPage = ({location}: MethodPageProps) => { -

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

+
+

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

+ +
diff --git a/client/src/pages/tests/__snapshots__/about.test.tsx.snap b/client/src/pages/tests/__snapshots__/about.test.tsx.snap index 8533aa39..7d745fe9 100644 --- a/client/src/pages/tests/__snapshots__/about.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/about.test.tsx.snap @@ -310,11 +310,44 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="grid-container-desktop-lg" data-testid="gridContainer" > -

- About -

+

+ About +

+ +
-

- Contact -

+
+

+ Contact +

+ +
-

- Methodology -

+
+

+ Methodology +

+ +