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;