mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-30 00:41:18 -07:00
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
This commit is contained in:
Vim
GitHub
parent
a1605cbaf2
commit
952f97a20d
11 changed files with 243 additions and 23 deletions
|
|
@ -620,9 +620,6 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
alt={'tbd'}
|
||||
/>
|
||||
</div>
|
||||
{/* <div>
|
||||
<img src={mailIcon} alt={'mail icon for email'}/>
|
||||
</div> */}
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
17
client/src/components/PublicVideoBox/PublicVideoBox.module.scss.d.ts
vendored
Normal file
17
client/src/components/PublicVideoBox/PublicVideoBox.module.scss.d.ts
vendored
Normal file
|
|
@ -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;
|
||||
16
client/src/components/PublicVideoBox/PublicVideoBox.test.tsx
Normal file
16
client/src/components/PublicVideoBox/PublicVideoBox.test.tsx
Normal file
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
45
client/src/components/PublicVideoBox/PublicVideoBox.tsx
Normal file
45
client/src/components/PublicVideoBox/PublicVideoBox.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
`;
|
||||
3
client/src/components/PublicVideoBox/index.tsx
Normal file
3
client/src/components/PublicVideoBox/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import PublicVideoBox from './PublicVideoBox';
|
||||
|
||||
export default PublicVideoBox;
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}}>
|
||||
<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 row>
|
||||
<Grid desktop={{col: 8}}>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{/* Empty Spacer */}
|
||||
<Grid row gap={6}>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue