Gherkin cypress spike (#673)

* integrate gherkin/cucumber w/ cypress

- change cypress.json config from e2e back to standard integration
- add cypress-cucumber-preprocessor
- add integration test of about page

* add a title to each page

* add intl to the 404 page

* Refactor explore tool page

- add intl to static strings
- replace component css with <Grid> layout

* Add title to contact page

* add intl to title of page

* Add gherkin tests for nav to about page

- navigate from any page to the about page
- ensure each link has the title correct on that page

client/src/pages/404.tsx

@@ -1,19 +1,11 @@
 import * as React from 'react';
-import Layout from '../components/layout';
-import J40MainGridContainer from '../components/J40MainGridContainer';
+import {defineMessages} from 'react-intl';
 import {Link} from 'gatsby-plugin-intl';
+import {useIntl} from 'gatsby-plugin-intl';
 import {Grid} from '@trussworks/react-uswds';
 
-// styles
-const headingStyles = {
-  marginTop: 32,
-  marginBottom: 64,
-  maxWidth: 320,
-};
-
-const paragraphStyles = {
-  marginBottom: 48,
-};
+import J40MainGridContainer from '../components/J40MainGridContainer';
+import Layout from '../components/layout';
 
 const codeStyles = {
   color: '#8A6534',
@@ -29,33 +21,76 @@ interface I404PageProps {
 
 // markup
 const NotFoundPage =({location}: I404PageProps) => {
-  return (<Layout location={location}>
-    <J40MainGridContainer>
-      <Grid row><Grid col>
-        <h1 style={headingStyles}>Page not found</h1>
-      </Grid></Grid>
-      <Grid row><Grid col>
-        <p style={paragraphStyles}>
-            Sorry{' '}
-          <span role="img" aria-label="Pensive emoji">
+  const intl = useIntl();
+  const messages = defineMessages({
+    pageNotFoundTitle: {
+      id: 'pageNotFound.title.text',
+      defaultMessage: 'Page not found',
+      description: 'page not found title text',
+    },
+    pageNotFoundHeading: {
+      id: 'pageNotFound.heading.text',
+      defaultMessage: 'Page not found',
+      description: 'page not found heading text',
+    },
+    pageNotFoundApology: {
+      id: 'pageNotFound.apology.text',
+      defaultMessage: 'Sorry',
+      description: 'page not found apology text',
+    },
+    pageNotFoundApologyDescription: {
+      id: 'pageNotFound.apology.description.text',
+      defaultMessage: 'we couldn’t find what you were looking for.',
+      description: 'page not found apology description text',
+    },
+    pageNotFoundGuidance: {
+      id: 'pageNotFound.Guidance.text',
+      defaultMessage: 'Try creating a page in',
+      description: 'page not found guidance text',
+    },
+    pageNotFoundLinkToGoHome: {
+      id: 'pageNotFound.link.to.go.home.text',
+      defaultMessage: 'Go home',
+      description: 'page not found link to go home text',
+    },
+  });
+
+  return (
+    <Layout location={location} title={intl.formatMessage(messages.pageNotFoundTitle)}>
+      <J40MainGridContainer>
+
+        <Grid row>
+          <h1>{intl.formatMessage(messages.pageNotFoundHeading)}</h1>
+        </Grid>
+
+        <Grid row>
+          <p>
+            {intl.formatMessage(messages.pageNotFoundApology)}
+            {' '}
+            <span role="img" aria-label="Pensive emoji">
             😔
-          </span>{' '}
-            we couldn’t find what you were looking for.
-          <br/>
+            </span>{' '}
+            {intl.formatMessage(messages.pageNotFoundApologyDescription)}
+          </p>
+        </Grid>
+
+        <Grid row>
           {process.env.NODE_ENV === 'development' ? (
-              <>
-                <br/>
-                Try creating a page
-                in <code style={codeStyles}>src/pages/</code>.
-                <br/>
-              </>
+              <p>
+                {intl.formatMessage(messages.pageNotFoundGuidance)}
+                <code style={codeStyles}>src/pages/</code>.
+              </p>
             ) : null}
-          <br/>
-          <Link to="/">Go home</Link>.
-        </p>
-      </Grid></Grid>
-    </J40MainGridContainer>
-  </Layout>
+        </Grid>
+
+        <Grid>
+          <p>
+            <Link to="/">{intl.formatMessage(messages.pageNotFoundLinkToGoHome)}</Link>.
+          </p>
+        </Grid>
+
+      </J40MainGridContainer>
+    </Layout>
   );
 };
 

client/src/pages/cejst.module.scss

@@ -1,13 +0,0 @@
-@import "../components/utils.scss";
-
-.explorePageSubHeader {
-  display: flex;
-  flex-wrap: wrap;
-  line-height: 25px;
-  color: $headingFontColor;
-
-  .explorePageHeaderText {
-    max-width: 34rem;
-    font-size: large;
-  }
-}

client/src/pages/cejst.module.scss.d.ts

@@ -1,13 +0,0 @@
-declare namespace CejstModuleScssNamespace {
-  export interface ICejstModuleScss {
-    explorePageHeader;
-    explorePageHeaderText: string;
-  }
-}
-
-declare const CejstModuleScssModule: CejstModuleScssNamespace.ICejstModuleScss & {
-  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: CejstModuleScssNamespace.ICejstModuleScss;
-};
-
-export = CejstModuleScssModule;

client/src/pages/cejst.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import {defineMessages} from 'react-intl';
 import {Link} from 'gatsby-plugin-intl';
+import {useIntl} from 'gatsby-plugin-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 import AlertWrapper from '../components/AlertWrapper';
 import HowYouCanHelp from '../components/HowYouCanHelp';
@@ -8,10 +11,6 @@ import Layout from '../components/layout';
 import MapWrapper from '../components/MapWrapper';
 import MapLegend from '../components/MapLegend';
 
-import * as styles from './cejst.module.scss';
-import {Grid} from '@trussworks/react-uswds';
-
-
 interface IMapPageProps {
   location: Location;
 }
@@ -19,33 +18,52 @@ interface IMapPageProps {
 const CEJSTPage = ({location}: IMapPageProps) => {
   // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now
   //   We will bring back later when we have interactive controls.
-  return (<Layout location={location}>
+
+  const intl = useIntl();
+  const messages = defineMessages({
+    exploreToolTitleText: {
+      id: 'exploreTool.title.text',
+      defaultMessage: 'Explore the tool',
+      description: 'explore the tool title text',
+    },
+    exploreToolHeadingText: {
+      id: 'exploreTool.heading.text',
+      defaultMessage: 'Explore the tool',
+      description: 'explore the tool heading text',
+    },
+    exploreToolPageText: {
+      id: 'exploreTool.page.text',
+      defaultMessage: 'Zoom into the map to see which communities the tool has currently'+
+      'identified as prioritized (the top 25% of communities) or on the'+
+      'threshold. Learn more about the formula and datasets that were'+
+      'used to prioritize these communities on the',
+      description: 'explore the tool page text',
+    },
+
+  });
+
+  return (<Layout location={location} title={intl.formatMessage(messages.exploreToolTitleText)}>
     <J40MainGridContainer>
       <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
     </J40MainGridContainer>
 
     <J40MainGridContainer>
+      <h1>{intl.formatMessage(messages.exploreToolTitleText)}</h1>
       <Grid row className={'j40-mb-5'}>
-        <Grid col>
+        <Grid col={12} tablet={{col: 6}}>
           <section>
-            <h1 className={styles.explorePageHeader}>Explore the tool</h1>
-            <div className={styles.explorePageSubHeader}>
-              <div className={styles.explorePageHeaderText}>
-                <p>
-              Zoom into the map to see which communities the tool has currently
-              identified as prioritized (the top 25% of communities) or on the
-              threshold. Learn more about the formula and datasets that were
-              used to prioritize these communities on the
-                  {` `}
-                  <Link to={'/methodology'}>Data & methodology</Link>
-                  {` `}
-              page.
-                </p>
-              </div>
-              <MapLegend />
-            </div>
+            <p>
+              {intl.formatMessage(messages.exploreToolPageText)}
+              {` `}
+              <Link to={'/methodology'}>Data & methodology</Link>
+              {` `}
+                  page.
+            </p>
           </section>
         </Grid>
+        <Grid col={12} tablet={{col: 6}}>
+          <MapLegend />
+        </Grid>
       </Grid>
 
       <Grid row>

client/src/pages/contact.tsx

@@ -14,7 +14,7 @@ const ContactPage = ({location}: ContactPageProps) => {
   const generalEmail = 'screeningtool.feedback@usds.gov';
 
   return (
-    <Layout location={location}>
+    <Layout location={location} title={'Contact'}>
 
       <J40MainGridContainer>
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>

client/src/pages/index.tsx

@@ -74,7 +74,7 @@ const IndexPage = ({location}: IndexPageProps) => {
   });
 
   return (
-    <Layout location={location}>
+    <Layout location={location} title={'About'}>
       <J40MainGridContainer>
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
       </J40MainGridContainer>

client/src/pages/methodology.tsx

@@ -18,6 +18,11 @@ interface MethodPageProps {
 const IndexPage = ({location}: MethodPageProps) => {
   const intl = useIntl();
   const messages = defineMessages({
+    methodologyPageTitle: {
+      id: 'methodology.page.title.text',
+      defaultMessage: 'Data and Methodology',
+      description: 'methodology page title text',
+    },
     methodologyPageHeader: {
       id: 'methodology.page.header.text',
       defaultMessage: 'Methodology',
@@ -32,7 +37,7 @@ const IndexPage = ({location}: MethodPageProps) => {
   });
 
   return (
-    <Layout location={location}>
+    <Layout location={location} title={intl.formatMessage(messages.methodologyPageTitle)}>
 
       <J40MainGridContainer>
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>

client/src/pages/timeline.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Layout from '../components/layout';
 
-
 // THIS COMPONENT IS NOT BEING USED
 
 // @ts-ignore
@@ -12,7 +11,7 @@ interface TimelinePageProps {
 }
 
 const TimelinePage = ({location}: TimelinePageProps) => {
-  return (<Layout location={location}>
+  return (<Layout location={location} title={'Timeline'}>
     <section>
       {/* <h1>Timelin</h1>
       <h2>Throughout the Process</h2>