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

client/src/components/AreaDetail/AreaDetail.tsx

@@ -620,9 +620,6 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
                 alt={'tbd'}
               />
             </div>
-            {/* <div>
-                <img src={mailIcon} alt={'mail icon for email'}/>
-              </div> */}
           </Button>
         </a>
 

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%);
+        }
+      }
+    }
+  }
+};

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;

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

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 (
+    <SummaryBox
+      className={styles.publicVideoContainer}
+      heading={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.TITLE)}>
+      {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BODY)}
+      <a
+        className={styles.publicVideoLink}
+        href={`https://www.youtube.com/watch?v=QwHWcXbhw28`}
+        target={'_blank'}
+        rel="noreferrer"
+      >
+        <Button
+          type="button"
+          className={styles.youTubeBtn}
+        >
+          <div className={styles.buttonContainer}>
+            <div className={styles.buttonText}>
+              {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON_TEXT)}
+            </div>
+            <img
+              className={styles.buttonImage}
+              src={launchIcon}
+              alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT)}
+            />
+          </div>
+        </Button>
+      </a>
+    </SummaryBox>
+  );
+};
+
+export default PublicVideoBox;

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`] = `
+<DocumentFragment>
+  <div
+    class="usa-summary-box"
+    data-testid="summary-box"
+  >
+    <div
+      class="usa-summary-box__body"
+    >
+      <h3
+        class="usa-summary-box__heading"
+      >
+        Can't make an upcoming session?
+      </h3>
+      <div
+        class="usa-summary-box__text"
+      >
+        Watch a recorded version of the CEJST training on YouTube.
+        <a
+          href="https://www.youtube.com/watch?v=QwHWcXbhw28"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <button
+            class="usa-button"
+            data-testid="button"
+            type="button"
+          >
+            <div>
+              <div>
+                Watch on YouTube
+              </div>
+              <img
+                alt="the icon to show that this button will open in a new tab"
+                src="test-file-stub"
+              />
+            </div>
+          </button>
+        </a>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

client/src/components/PublicVideoBox/index.tsx

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

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',

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"

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 (
     <Layout location={location} title={intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_TILE)}>
 
@@ -26,16 +23,18 @@ const PublicEngagementPage = ({location}: IPublicEngagementPageProps) => {
 
         <h1>{intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_HEADING1)}</h1>
 
-        <Grid row tablet={{col: 8}} desktop={{col: 7}}>
+        <Grid row>
-          <p>
+          <Grid desktop={{col: 8}}>
-            {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION1)}
+            <p>
-          </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_DESCRIPTION2)}
-          <p>
+            </p>
-            {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION3)}
+            <p>
-          </p>
+              {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION3)}
+            </p>
+          </Grid>
         </Grid>
 
         <Grid row>
@@ -44,13 +43,18 @@ const PublicEngagementPage = ({location}: IPublicEngagementPageProps) => {
           </h2>
         </Grid>
 
-        <Collection>
-          {futureEvents.map((event, index) => <PublicEvent key={index} event={event} />)}
-        </Collection>
 
-        <Grid row>
+        <Grid row gap={6}>
-          {/* Empty Spacer */}
+          <Grid desktop={{col: 8}}>
+            <Collection>
+              {PUBLIC_ENG_COPY.EVENTS.map((event, index) => <PublicEvent key={index} event={event} />)}
+            </Collection>
+          </Grid>
+          <Grid desktop={{col: 4}}>
+            <PublicVideoBox />
+          </Grid>
         </Grid>
+
       </J40MainGridContainer>
     </Layout>
   );

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);
+}