publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-07-31 20:31:16 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Public Engagement Page (#1372)

Browse source 
* 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 <p>'s descendent into a <CollectionDescription>
- fix a mobile rendering issue with <Collection> 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
This commit is contained in:
Vim 2022-03-04 16:16:07 -05:00 • committed by GitHub
commit 88d50748eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 742 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/cypress/integration/LegacyTests/accessibility.test.js
View file

@ -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

1
client/cypress/integration/LegacyTests/allLinks.spec.js
View file

@ -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) => {

1
client/cypress/integration/LegacyTests/constants.js
View file

@ -3,4 +3,5 @@ export const ENDPOINTS = {
EXPLORE_THE_TOOL: '/en/cejst',
METHODOLOGY: '/en/methodology',
CONTACT: 'en/contact',
PUBLIC: 'en/public-engagement',
};

32
client/cypress/integration/PublicEngLinks.feature Normal file
View file

@ -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

4
client/cypress/support/step_definitions/commonSteps.js
View file

@ -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');
});

1
client/gatsby-config.js
View file

@ -87,6 +87,7 @@ module.exports = {
'/contact',
'/methodology',
'/404',
'public-engagement',
],
},
},

2
client/src/components/DownloadPacket/downloadPacket.module.scss
View file

@ -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;

22
client/src/components/PublicEngageButton/PublicEngageButton.module.scss Normal file
View file

@ -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;
}
}

15
client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts vendored Normal file
View file

@ -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;

16
client/src/components/PublicEngageButton/PublicEngageButton.test.tsx Normal file
View file

@ -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(
<LocalizedComponent>
<PublicEngageButton/>
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});

28
client/src/components/PublicEngageButton/PublicEngageButton.tsx Normal file
View file

@ -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 (
<div className={styles.container}>
<div className={styles.tagContainer}>
<Tag className={styles.tag}>
{intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.TAG_LABEL)}
</Tag>
</div>
<Link className={styles.link} to={'/public-engagement'}>
<Button type={'button'} icon={true}>
{intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.LABEL)}
</Button>
</Link>
</div>
);
};
export default PublicEngageButton;

27
client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap Normal file
View file

@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the PublicEngageButton checks if component renders 1`] = `
<DocumentFragment>
<div>
<div>
<span
class="usa-tag"
data-testid="tag"
>
NEW
</span>
</div>
<a
href="/public-engagement"
>
<button
class="usa-button usa-button--icon"
data-testid="button"
type="button"
>
Public Engagement
</button>
</a>
</div>
</DocumentFragment>
`;

3
client/src/components/PublicEngageButton/index.tsx Normal file
View file

@ -0,0 +1,3 @@
import PublicEngageButton from './PublicEngageButton';
export default PublicEngageButton;

5
client/src/components/PublicEvent/PublicEvent.module.scss Normal file
View file

@ -0,0 +1,5 @@
@use '../../styles/design-system.scss' as *;
.description {
@include u-margin-top(2);
}

12
client/src/components/PublicEvent/PublicEvent.module.scss.d.ts vendored Normal file
View file

@ -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;

18
client/src/components/PublicEvent/PublicEvent.test.tsx Normal file
View file

@ -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(
<LocalizedComponent>
<PublicEvent event={PUBLIC_ENG_COPY.EVENTS[0]}/>
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});

77
client/src/components/PublicEvent/PublicEvent.tsx Normal file
View file

@ -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 (
<CollectionItem
variantComponent={
<CollectionThumbnail src={event.IMAGE} alt="Alt text" />
}>
{/* Heading */}
<CollectionHeading>
<LinkTypeWrapper
linkText={`CEJST
${intl.formatMessage(event.NAME)}
#${event.NUMBER}
`}
internal={false}
url={event.REG_LINK}
openUrlNewTab={true}
dataCy={event.DATA_CY}
/>
</CollectionHeading>
{/* Description */}
<CollectionDescription className={styles.description}>
{intl.formatMessage(event.DESC)}
</CollectionDescription>
{/* Event info */}
<CollectionDescription className={styles.description}>
<b>
{intl.formatMessage(PUBLIC_ENGAGE_COPY.EVENT_FIELDS.EVENT_INFO)}
</b>
{`: ${intl.formatMessage(event.FIELDS.INFO)}`}
</CollectionDescription>
{/* Registration Link */}
<CollectionDescription className={styles.description}>
<a href={event.REG_LINK} target={'_blank'} rel="noreferrer">
<Button type='button'>
{intl.formatMessage(PUBLIC_ENGAGE_COPY.EVENT_FIELDS.REG_LINK)}
</Button>
</a>
</CollectionDescription>
</CollectionItem>
);
};
export default PublicEvent;

71
client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap Normal file
View file

@ -0,0 +1,71 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the PublicEvent checks if component renders 1`] = `
<DocumentFragment>
<li
class="usa-collection__item"
>
<img
alt="Alt text"
class="usa-collection__img"
src="test-file-stub"
/>
<div
class="usa-collection__body"
>
<h3
class="usa-collection__heading"
>
<a
class="usa-link usa-link--external"
data-cy="mar-9-reg-link-block"
href="https://pitc.zoomgov.com/webinar/register/WN_D-Om_xXhTtiLv71y3Rr1CQ"
rel="noreferrer"
target="_blank"
>
CEJST
training session
#1
</a>
</h3>
<p
class="usa-collection__description"
>
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.
</p>
<p
class="usa-collection__description"
>
<b>
Event info
</b>
: March 9th (4:00 - 5:00 PM EST)
</p>
<p
class="usa-collection__description"
>
<a
href="https://pitc.zoomgov.com/webinar/register/WN_D-Om_xXhTtiLv71y3Rr1CQ"
rel="noreferrer"
target="_blank"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
Registration link
</button>
</a>
</p>
</div>
</li>
</DocumentFragment>
`;

3
client/src/components/PublicEvent/index.tsx Normal file
View file

@ -0,0 +1,3 @@
import PublicEvent from './PublicEvent';
export default PublicEvent;

206
client/src/data/copy/publicEngage.tsx Normal file
View file

@ -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`,
},
];

1
client/src/images/eventDates/apr15.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88 83.5"><defs><style>.cls-1,.cls-6{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{isolation:isolate;}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#005ea2;}.cls-6{stroke:#005ea2;stroke-miterlimit:10;}.cls-7{fill:#fff;}</style><clipPath id="clip-path" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="78" height="39"/></clipPath><clipPath id="clip-path-2" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="79" height="39"/></clipPath></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-2"><g class="cls-3"><g class="cls-4"><g class="cls-2"><rect class="cls-5" width="88" height="49"/></g></g></g></g><rect class="cls-6" x="5" y="5" width="78" height="78"/><g class="cls-3"><path class="cls-7" d="M19.68,26.5l4.66-13h2.77l4.65,13H29.14l-1.06-3H23.4l-1.09,3ZM24,21.19h3.46L25.73,16Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M33.72,26.5v-13H38.5a6.27,6.27,0,0,1,2.55.49,4.26,4.26,0,0,1,1.85,6,3.67,3.67,0,0,1-1.61,1.4,5.64,5.64,0,0,1-2.45.5H36.36V26.5Zm2.61-6.68h2.44a2.19,2.19,0,0,0,1.62-.63A2.16,2.16,0,0,0,41,17.62a2,2,0,0,0-.66-1.55,2.43,2.43,0,0,0-1.62-.57H36.33Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M55.56,26.5H52.83l-2.12-5H48.08v5H45.46v-13H51A5.71,5.71,0,0,1,53.5,14,3.22,3.22,0,0,1,55,15.35a4.16,4.16,0,0,1,.47,2,4.1,4.1,0,0,1-.32,1.74,3.49,3.49,0,0,1-.83,1.17,5.26,5.26,0,0,1-1.13.77Zm-5.08-7a2.41,2.41,0,0,0,1.67-.56,1.91,1.91,0,0,0,.62-1.46,1.77,1.77,0,0,0-.6-1.42,2.16,2.16,0,0,0-1.5-.53H48.08v4Z" transform="translate(4.5 4.5)"/></g><path class="cls-5" d="M33.41,66.5V56.75H31.09V55.27a6.34,6.34,0,0,0,1.8-.21,2.12,2.12,0,0,0,1-.62,1.75,1.75,0,0,0,.41-.95h1.74v13Z" transform="translate(4.5 4.5)"/><path class="cls-5" d="M40.17,53.49h8.36l-.1,2.16H42.25L42,58.78a6.15,6.15,0,0,1,1.38-.59A5.33,5.33,0,0,1,44.8,58a5.5,5.5,0,0,1,2.34.49,3.86,3.86,0,0,1,1.63,1.44,4.22,4.22,0,0,1,.61,2.3,4.38,4.38,0,0,1-.63,2.38A4,4,0,0,1,47,66.16a6.18,6.18,0,0,1-2.69.54,6.83,6.83,0,0,1-2.38-.4A6,6,0,0,1,40,65.22a4.81,4.81,0,0,1-1.21-1.58l2-1.22a6.51,6.51,0,0,0,.79,1.11,3.61,3.61,0,0,0,1,.77,3.06,3.06,0,0,0,1.36.28A2.72,2.72,0,0,0,45.91,64a2,2,0,0,0,.71-1.62,2.1,2.1,0,0,0-.32-1.13,2.25,2.25,0,0,0-.88-.79,2.8,2.8,0,0,0-1.3-.28,4.38,4.38,0,0,0-.75.06,2.61,2.61,0,0,0-.72.26,4.69,4.69,0,0,0-.81.52.49.49,0,0,1-.17.06.44.44,0,0,1-.19-.07l-1.91-.88Z" transform="translate(4.5 4.5)"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
client/src/images/eventDates/mar10.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88 83.5"><defs><style>.cls-1,.cls-6{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{isolation:isolate;}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#005ea2;}.cls-6{stroke:#005ea2;stroke-miterlimit:10;}.cls-7{fill:#fff;}</style><clipPath id="clip-path" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="78" height="39"/></clipPath><clipPath id="clip-path-2" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="79" height="39"/></clipPath></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-2"><g class="cls-3"><g class="cls-4"><g class="cls-2"><rect class="cls-5" width="88" height="49"/></g></g></g></g><rect class="cls-6" x="5" y="5" width="78" height="78"/><g class="cls-3"><path class="cls-7" d="M20.64,26.5v-13h3.81l3,9.28,3-9.28h3.81v13H31.59V16.56L28.46,26.5H26.4l-3.12-9.9v9.9Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M36.19,26.5l4.66-13h2.77l4.66,13H45.66l-1.06-3H39.92l-1.09,3Zm4.31-5.31H44L42.25,16Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M60.33,26.5H57.6l-2.12-5H52.85v5H50.23v-13h5.49a5.71,5.71,0,0,1,2.55.49,3.22,3.22,0,0,1,1.45,1.37,4.16,4.16,0,0,1,.47,2,4.1,4.1,0,0,1-.32,1.74A3.49,3.49,0,0,1,59,20.28a5.26,5.26,0,0,1-1.13.77Zm-5.08-7a2.41,2.41,0,0,0,1.67-.56,1.91,1.91,0,0,0,.62-1.46,1.77,1.77,0,0,0-.6-1.42,2.16,2.16,0,0,0-1.5-.53H52.85v4Z" transform="translate(4.5 4.5)"/></g><path class="cls-5" d="M33.68,66.5V56.75H31.36V55.27a6.42,6.42,0,0,0,1.81-.21,2.17,2.17,0,0,0,1-.62,1.74,1.74,0,0,0,.4-.95h1.75v13Z" transform="translate(4.5 4.5)"/><path class="cls-5" d="M44.11,53.31A4.38,4.38,0,0,1,47.77,55a8,8,0,0,1,1.34,5A8,8,0,0,1,47.79,65a4.81,4.81,0,0,1-7.38,0,8,8,0,0,1-1.33-5,9.65,9.65,0,0,1,.62-3.66,4.88,4.88,0,0,1,1.73-2.29A4.65,4.65,0,0,1,44.11,53.31Zm0,11.24a1.8,1.8,0,0,0,1.7-1A8.11,8.11,0,0,0,46.35,60a8.53,8.53,0,0,0-.55-3.57,1.81,1.81,0,0,0-1.7-1.08,1.84,1.84,0,0,0-1.72,1.09A8.32,8.32,0,0,0,41.82,60a7.71,7.71,0,0,0,.56,3.47A1.84,1.84,0,0,0,44.11,64.55Z" transform="translate(4.5 4.5)"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

1
client/src/images/eventDates/mar15.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88 83.5"><defs><style>.cls-1,.cls-6{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{isolation:isolate;}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#005ea2;}.cls-6{stroke:#005ea2;stroke-miterlimit:10;}.cls-7{fill:#fff;}</style><clipPath id="clip-path" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="78" height="39"/></clipPath><clipPath id="clip-path-2" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="79" height="39"/></clipPath></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-2"><g class="cls-3"><g class="cls-4"><g class="cls-2"><rect class="cls-5" width="88" height="49"/></g></g></g></g><rect class="cls-6" x="5" y="5" width="78" height="78"/><g class="cls-3"><path class="cls-7" d="M20.64,26.5v-13h3.81l3,9.27,3-9.27h3.81v13H31.59V16.55l-3.13,10H26.4l-3.12-9.9v9.9Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M36.19,26.5l4.66-13h2.77l4.66,13H45.66l-1.06-3H39.92l-1.09,3Zm4.31-5.31H44L42.25,16Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M60.33,26.5H57.6l-2.12-5H52.85v5H50.23v-13h5.49a5.71,5.71,0,0,1,2.55.49,3.3,3.3,0,0,1,1.46,1.37,4.27,4.27,0,0,1,.46,2,4.1,4.1,0,0,1-.32,1.74A3.49,3.49,0,0,1,59,20.28a5,5,0,0,1-1.13.77Zm-5.08-7a2.37,2.37,0,0,0,1.67-.57,1.87,1.87,0,0,0,.62-1.45,1.81,1.81,0,0,0-.6-1.43,2.21,2.21,0,0,0-1.5-.52H52.85v4Z" transform="translate(4.5 4.5)"/></g><path class="cls-5" d="M33.41,66.5V56.75H31.09V55.27a6.34,6.34,0,0,0,1.8-.21,2.12,2.12,0,0,0,1-.62,1.75,1.75,0,0,0,.41-.95h1.74v13Z" transform="translate(4.5 4.5)"/><path class="cls-5" d="M40.17,53.49h8.36l-.1,2.16H42.25L42,58.78a6.35,6.35,0,0,1,1.38-.59A5.33,5.33,0,0,1,44.8,58a5.5,5.5,0,0,1,2.34.49,3.86,3.86,0,0,1,1.63,1.44,4.22,4.22,0,0,1,.61,2.3,4.38,4.38,0,0,1-.63,2.38A4,4,0,0,1,47,66.16a6.18,6.18,0,0,1-2.69.54,6.83,6.83,0,0,1-2.38-.4A6,6,0,0,1,40,65.22a4.81,4.81,0,0,1-1.21-1.58l2-1.22a7.12,7.12,0,0,0,.79,1.11,3.61,3.61,0,0,0,1,.77,3.06,3.06,0,0,0,1.36.28A2.72,2.72,0,0,0,45.91,64a2,2,0,0,0,.71-1.62,2.1,2.1,0,0,0-.32-1.13,2.16,2.16,0,0,0-.88-.78,2.68,2.68,0,0,0-1.3-.29,4.56,4.56,0,0,0-.75.06,2.61,2.61,0,0,0-.72.26,5.39,5.39,0,0,0-.81.52.49.49,0,0,1-.17.06.44.44,0,0,1-.19-.07l-1.91-.88Z" transform="translate(4.5 4.5)"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

1
client/src/images/eventDates/mar16.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88 83.5"><defs><style>.cls-1,.cls-6{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{isolation:isolate;}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#005ea2;}.cls-6{stroke:#005ea2;stroke-miterlimit:10;}.cls-7{fill:#fff;}</style><clipPath id="clip-path" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="78" height="39"/></clipPath><clipPath id="clip-path-2" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="79" height="39"/></clipPath></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-2"><g class="cls-3"><g class="cls-4"><g class="cls-2"><rect class="cls-5" width="88" height="49"/></g></g></g></g><rect class="cls-6" x="5" y="5" width="78" height="78"/><g class="cls-3"><path class="cls-7" d="M20.64,26.5v-13h3.81l3,9.28,3-9.28h3.81v13H31.59V16.56L28.46,26.5H26.4l-3.12-9.9v9.9Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M36.19,26.5l4.66-13h2.77l4.66,13H45.66l-1.06-3H39.92l-1.09,3Zm4.31-5.31H44L42.25,16Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M60.33,26.5H57.6l-2.12-5H52.85v5H50.23v-13h5.49a5.71,5.71,0,0,1,2.55.49,3.3,3.3,0,0,1,1.46,1.37,4.27,4.27,0,0,1,.46,2,4.1,4.1,0,0,1-.32,1.74A3.49,3.49,0,0,1,59,20.28a5,5,0,0,1-1.13.77Zm-5.08-7a2.41,2.41,0,0,0,1.67-.56,1.91,1.91,0,0,0,.62-1.46,1.77,1.77,0,0,0-.6-1.42,2.16,2.16,0,0,0-1.5-.53H52.85v4Z" transform="translate(4.5 4.5)"/></g><path class="cls-5" d="M33.54,66.5V56.75H31.22V55.27a6.34,6.34,0,0,0,1.8-.21,2.12,2.12,0,0,0,1-.62,1.68,1.68,0,0,0,.41-.95H36.2v13Z" transform="translate(4.5 4.5)"/><path class="cls-5" d="M44.4,53.31a5.59,5.59,0,0,1,2.26.44A4.27,4.27,0,0,1,48.35,55a3.6,3.6,0,0,1,.72,2H46.66a2.3,2.3,0,0,0-.79-1.25,2.52,2.52,0,0,0-3,.11A3,3,0,0,0,42,57.4a6.08,6.08,0,0,0-.15,2.22,2.94,2.94,0,0,1,.76-.73,3.85,3.85,0,0,1,1-.46,4.2,4.2,0,0,1,1.18-.16,5.1,5.1,0,0,1,2.31.49,3.73,3.73,0,0,1,1.55,1.39,3.92,3.92,0,0,1,.55,2.1,4.2,4.2,0,0,1-.62,2.28,4.46,4.46,0,0,1-1.74,1.59,5.63,5.63,0,0,1-2.58.58,5.11,5.11,0,0,1-2.87-.8,5.22,5.22,0,0,1-1.85-2.25,8.32,8.32,0,0,1-.64-3.4,9.6,9.6,0,0,1,.65-3.7,5.31,5.31,0,0,1,1.88-2.4A5,5,0,0,1,44.4,53.31Zm-.19,6.92a2.49,2.49,0,0,0-1.07.24,2.66,2.66,0,0,0-.85.63,1.21,1.21,0,0,0-.33.78,3.62,3.62,0,0,0,.28,1.5,2.16,2.16,0,0,0,.79,1,2,2,0,0,0,1.17.34,2.3,2.3,0,0,0,1.14-.29,2.21,2.21,0,0,0,1.12-2,2.32,2.32,0,0,0-.29-1.2,1.8,1.8,0,0,0-.81-.71A2.66,2.66,0,0,0,44.21,60.23Z" transform="translate(4.5 4.5)"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
client/src/images/eventDates/mar22.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88 83.5"><defs><style>.cls-1,.cls-6{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{isolation:isolate;}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#005ea2;}.cls-6{stroke:#005ea2;stroke-miterlimit:10;}.cls-7{fill:#fff;}</style><clipPath id="clip-path" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="78" height="39"/></clipPath><clipPath id="clip-path-2" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="79" height="39"/></clipPath></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-2"><g class="cls-3"><g class="cls-4"><g class="cls-2"><rect class="cls-5" width="88" height="49"/></g></g></g></g><rect class="cls-6" x="5" y="5" width="78" height="78"/><g class="cls-3"><path class="cls-7" d="M20.64,26.5v-13h3.81l3,9.28,3-9.28h3.81v13H31.59V16.56L28.46,26.5H26.4l-3.12-9.9v9.9Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M36.19,26.5l4.66-13h2.77l4.66,13H45.66l-1.06-3H39.92l-1.09,3Zm4.31-5.31H44L42.25,16Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M60.33,26.5H57.6l-2.12-5H52.85v5H50.23v-13h5.49a5.71,5.71,0,0,1,2.55.49,3.22,3.22,0,0,1,1.45,1.37,4.16,4.16,0,0,1,.47,2,4.1,4.1,0,0,1-.32,1.74A3.49,3.49,0,0,1,59,20.28a5.26,5.26,0,0,1-1.13.77Zm-5.08-7a2.41,2.41,0,0,0,1.67-.56,1.91,1.91,0,0,0,.62-1.46,1.77,1.77,0,0,0-.6-1.42,2.16,2.16,0,0,0-1.5-.53H52.85v4Z" transform="translate(4.5 4.5)"/></g><path class="cls-5" d="M29.83,66.5v-2a3.73,3.73,0,0,1,.37-1.72,4.25,4.25,0,0,1,1-1.26,8.38,8.38,0,0,1,1.33-.94c.49-.27,1-.52,1.46-.76s.93-.48,1.33-.73a3.66,3.66,0,0,0,1-.81,1.59,1.59,0,0,0,.37-1.06A1.62,1.62,0,0,0,36.09,56a2.1,2.1,0,0,0-1.48-.5,2.52,2.52,0,0,0-1.67.57,2.6,2.6,0,0,0-.85,1.71H29.58a4.59,4.59,0,0,1,.58-2.25,4.11,4.11,0,0,1,1.69-1.61,6.09,6.09,0,0,1,2.83-.59,5.85,5.85,0,0,1,2.51.49,3.85,3.85,0,0,1,1.64,1.38A4.07,4.07,0,0,1,39,58.93a3.94,3.94,0,0,1-.95,1.22,7.5,7.5,0,0,1-1.31.88c-.47.26-.94.49-1.41.7s-.91.44-1.3.66a3.62,3.62,0,0,0-1,.76,1.51,1.51,0,0,0-.36,1v.12h6.64V66.5Z" transform="translate(4.5 4.5)"/><path class="cls-5" d="M41.26,66.5v-2a3.73,3.73,0,0,1,.37-1.72,4.25,4.25,0,0,1,1-1.26,8.38,8.38,0,0,1,1.33-.94c.49-.27,1-.52,1.46-.76s.93-.48,1.33-.73a3.66,3.66,0,0,0,1-.81,1.59,1.59,0,0,0,.37-1.06A1.62,1.62,0,0,0,47.52,56a2.1,2.1,0,0,0-1.48-.5,2.52,2.52,0,0,0-1.67.57,2.6,2.6,0,0,0-.85,1.71H41a4.59,4.59,0,0,1,.58-2.25,4.11,4.11,0,0,1,1.69-1.61,6.09,6.09,0,0,1,2.83-.59,5.85,5.85,0,0,1,2.51.49,3.85,3.85,0,0,1,1.64,1.38,4.07,4.07,0,0,1,.21,3.75,3.94,3.94,0,0,1-.95,1.22,7.5,7.5,0,0,1-1.31.88c-.47.26-.94.49-1.41.7s-.91.44-1.3.66a3.62,3.62,0,0,0-1,.76,1.51,1.51,0,0,0-.36,1v.12h6.63V66.5Z" transform="translate(4.5 4.5)"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
client/src/images/eventDates/mar9.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88 83.5"><defs><style>.cls-1,.cls-6{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{isolation:isolate;}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#005ea2;}.cls-6{stroke:#005ea2;stroke-miterlimit:10;}.cls-7{fill:#fff;}</style><clipPath id="clip-path" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="78" height="39"/></clipPath><clipPath id="clip-path-2" transform="translate(4.5 4.5)"><rect class="cls-1" x="0.5" y="0.5" width="79" height="39"/></clipPath></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-2"><g class="cls-3"><g class="cls-4"><g class="cls-2"><rect class="cls-5" width="88" height="49"/></g></g></g></g><rect class="cls-6" x="5" y="5" width="78" height="78"/><g class="cls-3"><path class="cls-7" d="M20.64,26.5v-13h3.81l3,9.28,3-9.28h3.81v13H31.59V16.56L28.46,26.5H26.4l-3.12-9.9v9.9Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M36.19,26.5l4.66-13h2.77l4.66,13H45.66l-1.06-3H39.92l-1.09,3Zm4.31-5.31H44L42.25,16Z" transform="translate(4.5 4.5)"/><path class="cls-7" d="M60.33,26.5H57.6l-2.12-5H52.85v5H50.23v-13h5.49a5.71,5.71,0,0,1,2.55.49,3.3,3.3,0,0,1,1.46,1.37,4.27,4.27,0,0,1,.46,2,4.1,4.1,0,0,1-.32,1.74A3.49,3.49,0,0,1,59,20.28a5,5,0,0,1-1.13.77Zm-5.08-7a2.41,2.41,0,0,0,1.67-.56,1.91,1.91,0,0,0,.62-1.46,1.77,1.77,0,0,0-.6-1.42,2.16,2.16,0,0,0-1.5-.53H52.85v4Z" transform="translate(4.5 4.5)"/></g><path class="cls-5" d="M39.88,66.7a5.56,5.56,0,0,1-2.27-.47,4.44,4.44,0,0,1-1.72-1.32,3.42,3.42,0,0,1-.74-2h2.5a2.21,2.21,0,0,0,.72,1.23,2.11,2.11,0,0,0,1.4.47,3,3,0,0,0,1.64-.44,2.66,2.66,0,0,0,1.07-1.41,6.16,6.16,0,0,0,.24-2.52,2.63,2.63,0,0,1-.69.84,3.56,3.56,0,0,1-1,.55,4.59,4.59,0,0,1-1.33.19,5.3,5.3,0,0,1-2.34-.5,3.87,3.87,0,0,1-1.6-1.42,4,4,0,0,1-.58-2.19,4.19,4.19,0,0,1,2.32-3.85A5.63,5.63,0,0,1,40,53.31a4.85,4.85,0,0,1,4.71,3,8.4,8.4,0,0,1,.64,3.39,10,10,0,0,1-.66,3.89,4.86,4.86,0,0,1-1.9,2.32A5.46,5.46,0,0,1,39.88,66.7Zm.23-7a2.37,2.37,0,0,0,1.07-.25,2.5,2.5,0,0,0,.85-.62,1.17,1.17,0,0,0,.33-.78,3.41,3.41,0,0,0-.27-1.5,2.09,2.09,0,0,0-2-1.3,2.12,2.12,0,0,0-1.1.29,2,2,0,0,0-.77.81A2.6,2.6,0,0,0,38,57.6a2.07,2.07,0,0,0,.6,1.58A2.17,2.17,0,0,0,40.11,59.74Z" transform="translate(4.5 4.5)"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

25
client/src/pages/__snapshots__/contact.test.tsx.snap
View file

@ -275,10 +275,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<section
class="page-heading"
>
<h1>
Contact
</h1>
<div>
<div>
<span
class="usa-tag"
data-testid="tag"
>
NEW
</span>
</div>
<a
href="/public-engagement"
>
<button
class="usa-button usa-button--icon"
data-testid="button"
type="button"
>
Public Engagement
</button>
</a>
</div>
</section>
<div
class="grid-row"
data-testid="grid"

25
client/src/pages/__snapshots__/index.test.tsx.snap
View file

@ -275,12 +275,37 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<section
class="page-heading"
>
<h1
data-cy="about-page-heading"
>
About
</h1>
<div>
<div>
<span
class="usa-tag"
data-testid="tag"
>
NEW
</span>
</div>
<a
href="/public-engagement"
>
<button
class="usa-button usa-button--icon"
data-testid="button"
type="button"
>
Public Engagement
</button>
</a>
</div>
</section>
<div
class="grid-row grid-gap-lg j40-aboutcard-container "
data-testid="grid"

27
client/src/pages/__snapshots__/methodology.test.tsx.snap
View file

@ -275,12 +275,37 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<section
class="page-heading"
>
<h1>
Methodology
</h1>
<div>
<div>
<span
class="usa-tag"
data-testid="tag"
>
NEW
</span>
</div>
<a
href="/public-engagement"
>
<button
class="usa-button usa-button--icon"
data-testid="button"
type="button"
>
Public Engagement
</button>
</a>
</div>
</section>
<div
class="grid-row grid-gap j40-mb-5"
class="grid-row grid-gap j40-mb5-mt3"
data-testid="grid"
>
<div

6
client/src/pages/cejst.tsx
View file

@ -7,6 +7,7 @@ import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
import MapWrapper from '../components/MapWrapper';
import MapLegend from '../components/MapLegend';
import PublicEngageButton from '../components/PublicEngageButton';
import * as EXPLORE_COPY from '../data/copy/explore';
@ -24,9 +25,12 @@ const CEJSTPage = ({location}: IMapPageProps) => {
<J40MainGridContainer>
<section className={'page-heading'}>
<h1>{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
<PublicEngageButton />
</section>
<Grid row className={'j40-mb-5'}>
<Grid row gap className={'j40-mb5-mt3'}>
<Grid col={12} tablet={{col: 6}}>
<section>
<p>

4
client/src/pages/contact.tsx
View file

@ -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) => {
<J40MainGridContainer>
<section className={'page-heading'}>
<h1>{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
<PublicEngageButton />
</section>
<Grid row>
<Grid col>

5
client/src/pages/index.tsx
View file

@ -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) => {
<Layout location={location} title={intl.formatMessage(ABOUT_COPY.PAGE.TILE)}>
<J40MainGridContainer>
<section className={'page-heading'}>
<h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1>
<PublicEngageButton />
</section>
<AboutCardsContainer>
<AboutCard

7
client/src/pages/methodology.tsx
View file

@ -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,10 +24,14 @@ const IndexPage = ({location}: MethodPageProps) => {
<J40MainGridContainer>
<section className={'page-heading'}>
<h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
<PublicEngageButton />
</section>
<Grid row gap className={'j40-mb5-mt3'}>
{/* First column */}
<Grid row gap className={'j40-mb-5'}>
<Grid col={12} tablet={{col: 8}}>
<section>
<p>

59
client/src/pages/public-engagement.tsx Normal file
View file

@ -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 (
<Layout location={location} title={intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_TILE)}>
<J40MainGridContainer>
<h1>{intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_HEADING1)}</h1>
<Grid row tablet={{col: 8}} desktop={{col: 7}}>
<p>
{intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION1)}
</p>
<p>
{intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION2)}
</p>
<p>
{intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION3)}
</p>
</Grid>
<Grid row>
<h2>
{intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_HEADING2)}
</h2>
</Grid>
<Collection>
{futureEvents.map((event, index) => <PublicEvent key={index} event={event} />)}
</Collection>
<Grid row>
{/* Empty Spacer */}
</Grid>
</J40MainGridContainer>
</Layout>
);
};
export default PublicEngagementPage;

30
client/src/styles/global.scss
View file

@ -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;
}