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