Move survey button to footer (#897)

* Move survey button to header

- remove SurveyFab component as it's no longer a FAB
- place button in heading
- add tests
- add pageStyles module

* Add retry and timeout to failing test

* Move survey button to bottom of page

* Fix surveyButton failing a11y

- udpate snapshots

* Align survey button to Contact nav link

client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js

@@ -9,12 +9,25 @@ describe('Does the map zoom and adjust to lat/long correctly?', () => {
     cy.get('.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in').click();
     cy.url().should('include', '#4');
   });
-  it('should show the correct lat/lng coordinates in the URL', () => {
-    cy.getMap().then((map) => {
-      cy.panTo(map, [-77.9, 35.04]);
-      cy.url().should('include', '#4/35.04/-77.9');
-    });
-  });
+  it('should show the correct lat/lng coordinates in the URL',
+      {
+        retries: {
+          runMode: 3,
+          openMode: 3,
+        },
+        defaultCommandTimeout: 4000,
+        execTimeout: 10000,
+        taskTimeout: 10000,
+        pageLoadTimeout: 10000,
+        requestTimeout: 5000,
+        responseTimeout: 10000,
+      },
+      () => {
+        cy.getMap().then((map) => {
+          cy.panTo(map, [-77.9, 35.04]);
+          cy.url().should('include', '#4/35.04/-77.9');
+        });
+      });
 
   // This test hangs intermittently (30% of the time) need to investigate why
   // it('allows user to specify alternative starting URL',

client/src/components/J40Footer.tsx

@@ -8,6 +8,7 @@ import {useIntl} from 'gatsby-plugin-intl';
 
 import J40MainGridContainer from './J40MainGridContainer';
 import {hyphenizeString} from '../../cypress/integration/common/helpers';
+import SurveyButton from './SurveyButton';
 
 // @ts-ignore
 import whitehouseIcon from '../images/eop-seal.svg';
@@ -111,6 +112,7 @@ const J40Footer = () => {
           />
         </J40MainGridContainer>
       </div>
+      <SurveyButton />
     </footer>
   );
 };

client/src/components/SurveyButton/SurveyButton.module.scss

@@ -0,0 +1,26 @@
+@use '../../styles/design-system.scss' as *;
+
+.surveyButtonContainer {
+  position: relative;
+
+  .surveyButton {
+    position: absolute;
+    bottom: 0;
+    right: 2.2rem;
+
+    @include at-media-max("desktop") {
+      right: 0;
+    }
+    border-radius: 5px 5px 0 0;
+    @include u-height(6);
+    z-index: 2;
+
+    @include u-text("gray-90");
+    @include u-bg("yellow-20v");
+
+    &:hover {
+      @include u-bg("yellow-20");
+      @include u-text("gray-90");
+    }
+  }
+}

client/src/components/SurveyButton/SurveyButton.module.scss.d.ts

@@ -0,0 +1,13 @@
+declare namespace SurveyButtonNamespace {
+    export interface ISurveyButtonScss {
+        surveyButton: string;
+        surveyButtonContainer: string;
+    }
+  }
+
+declare const SurveyButtonScssModule: SurveyButtonNamespace.ISurveyButtonScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: SurveyButtonNamespace.ISurveyButtonScss;
+  };
+
+  export = SurveyButtonScssModule;

client/src/components/SurveyButton/SurveyButton.test.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import {render} from '@testing-library/react';
 import {LocalizedComponent} from '../../test/testHelpers';
-import SurveyFab from './SurveyFab';
-import {onClickHandler} from './SurveyFab';
-
-describe('rendering of the SurveyFab', () => {
+import SurveyButton from './SurveyButton';
+import {onClickHandler} from './SurveyButton';
+describe('rendering of the SurveyButton', () => {
   const {asFragment} = render(
       <LocalizedComponent>
-        <SurveyFab />
+        <SurveyButton />
       </LocalizedComponent>,
   );
 
@@ -15,7 +14,6 @@ describe('rendering of the SurveyFab', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
-
 describe('test clickHandler', () => {
   it('clickHandler should fire successfully', () => {
     onClickHandler();

client/src/components/SurveyButton/SurveyButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+import {Button} from '@trussworks/react-uswds';
+
+import * as styles from './SurveyButton.module.scss';
+import * as CONTACT_COPY from '../../data/copy/contact';
+import J40MainGridContainer from '../J40MainGridContainer';
+
+export const onClickHandler = () => {
+  Object.assign(document.createElement('a'), {target: '_blank', href: 'https://www.surveymonkey.com/r/cejst-survey'}).click();
+};
+
+const SurveyButton = () => {
+  const intl = useIntl();
+  return (
+    <J40MainGridContainer className={styles.surveyButtonContainer}>
+      <Button
+        type='button'
+        className={styles.surveyButton}
+        onClick={() => onClickHandler()}>
+        {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.SURVEY_TEXT)}
+      </Button>
+    </J40MainGridContainer>
+  );
+};
+
+export default SurveyButton;

client/src/components/SurveyButton/__snapshots__/SurveyButton.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the SurveyButton checks if component renders 1`] = `
+<DocumentFragment>
+  <div
+    class="grid-container-desktop-lg"
+    data-testid="gridContainer"
+  >
+    <button
+      class="usa-button"
+      data-testid="button"
+      type="button"
+    >
+      Tell us how we're doing
+    </button>
+  </div>
+</DocumentFragment>
+`;

client/src/components/SurveyButton/index.tsx

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

client/src/components/SurveyFab/SurveyFab.module.scss

@@ -1,18 +0,0 @@
-@use '../../styles/design-system.scss' as *;
-
-.surveyFabContainer {
-  position:fixed;
-  z-index: 1;
-  @include u-bottom(3);
-  @include u-right(3);
-  @include u-radius(1);
-  box-shadow: 1.2px 2.4px 2.4px hsl(0deg 0% 0% / 0.46);
-
-  @include u-text('gray-90');
-  @include u-bg('yellow-20v');
-  
-  &:hover {
-    @include u-bg('yellow-20');
-    @include u-text('gray-90');
-  }
-}

client/src/components/SurveyFab/SurveyFab.module.scss.d.ts

@@ -1,12 +0,0 @@
-declare namespace SurveyFabNamespace {
-    export interface ISurveyFabScss {
-        surveyFabContainer: string;
-    }
-  }
-
-declare const SurveyFabScssModule: SurveyFabNamespace.ISurveyFabScss & {
-    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-    locals: SurveyFabNamespace.ISurveyFabScss;
-  };
-
-  export = SurveyFabScssModule;

client/src/components/SurveyFab/SurveyFab.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import {useIntl} from 'gatsby-plugin-intl';
-import {Button} from '@trussworks/react-uswds';
-
-import * as styles from './SurveyFab.module.scss';
-import * as CONTACT_COPY from '../../data/copy/contact';
-
-export const onClickHandler = () => {
-  Object.assign(document.createElement('a'), {target: '_blank', href: 'https://www.surveymonkey.com/r/cejst-survey'}).click();
-};
-
-const SurveyFab = () => {
-  const intl = useIntl();
-  return (
-    <Button
-      type='button'
-      className={styles.surveyFabContainer}
-      onClick={() => onClickHandler()}>
-      {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.SURVEY_TEXT)}
-    </Button>
-  );
-};
-
-export default SurveyFab;

client/src/components/SurveyFab/__snapshots__/SurveyFab.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`rendering of the SurveyFab checks if component renders 1`] = `
-<DocumentFragment>
-  <button
-    class="usa-button"
-    data-testid="button"
-    type="button"
-  >
-    Take our survey!
-  </button>
-</DocumentFragment>
-`;

client/src/components/SurveyFab/index.tsx

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

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -176,6 +176,18 @@ exports[`J40Footer renders correctly 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="grid-container-desktop-lg"
+      data-testid="gridContainer"
+    >
+      <button
+        class="usa-button"
+        data-testid="button"
+        type="button"
+      >
+        Tell us how we're doing
+      </button>
+    </div>
   </footer>
 </DocumentFragment>
 `;

client/src/components/layout.tsx

@@ -1,10 +1,10 @@
 import React, {ReactNode} from 'react';
+import {Helmet} from 'react-helmet';
+
+import {URLFlagProvider} from '../contexts/FlagContext';
+
 import J40Header from './J40Header';
 import J40Footer from './J40Footer';
-import {URLFlagProvider} from '../contexts/FlagContext';
-import {Helmet} from 'react-helmet';
-import SurveyFab from './SurveyFab';
-
 interface ILayoutProps {
   children: ReactNode,
   location: Location,
@@ -31,7 +31,6 @@ const Layout = ({children, location, title}: ILayoutProps) => {
         <J40Header />
         <main id={'main-content'}>
           {children}
-          <SurveyFab />
         </main>
         <J40Footer/>
       </URLFlagProvider>

client/src/data/copy/contact.tsx

@@ -23,7 +23,7 @@ export const PAGE_INTRO = defineMessages({
   },
   SURVEY_TEXT: {
     id: 'fab.survey.text',
-    defaultMessage: 'Take our survey!',
+    defaultMessage: `Tell us how we're doing`,
     description: 'text for floating action button',
   },
 });

client/src/pages/__snapshots__/contact.test.tsx.snap

@@ -309,6 +309,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
+      <h1>
+        Contact
+      </h1>
       <div
         class="grid-row"
         data-testid="grid"
@@ -317,9 +320,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           class="grid-col"
           data-testid="grid"
         >
-          <h1>
-            Contact
-          </h1>
           <h2>
             Email us
           </h2>
@@ -336,13 +336,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </div>
       </div>
     </div>
-    <button
-      class="usa-button"
-      data-testid="button"
-      type="button"
-    >
-      Take our survey!
-    </button>
   </main>
   <footer
     class="j40-footer"
@@ -518,6 +511,18 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </div>
       </div>
     </div>
+    <div
+      class="grid-container-desktop-lg"
+      data-testid="gridContainer"
+    >
+      <button
+        class="usa-button"
+        data-testid="button"
+        type="button"
+      >
+        Tell us how we're doing
+      </button>
+    </div>
   </footer>
 </DocumentFragment>
 `;

client/src/pages/__snapshots__/index.test.tsx.snap

@@ -656,13 +656,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </div>
       </div>
     </div>
-    <button
-      class="usa-button"
-      data-testid="button"
-      type="button"
-    >
-      Take our survey!
-    </button>
   </main>
   <footer
     class="j40-footer"
@@ -838,6 +831,18 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </div>
       </div>
     </div>
+    <div
+      class="grid-container-desktop-lg"
+      data-testid="gridContainer"
+    >
+      <button
+        class="usa-button"
+        data-testid="button"
+        type="button"
+      >
+        Tell us how we're doing
+      </button>
+    </div>
   </footer>
 </DocumentFragment>
 `;

client/src/pages/__snapshots__/methodology.test.tsx.snap

@@ -1116,13 +1116,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </div>
       </div>
     </div>
-    <button
-      class="usa-button"
-      data-testid="button"
-      type="button"
-    >
-      Take our survey!
-    </button>
   </main>
   <footer
     class="j40-footer"
@@ -1298,6 +1291,18 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </div>
       </div>
     </div>
+    <div
+      class="grid-container-desktop-lg"
+      data-testid="gridContainer"
+    >
+      <button
+        class="usa-button"
+        data-testid="button"
+        type="button"
+      >
+        Tell us how we're doing
+      </button>
+    </div>
   </footer>
 </DocumentFragment>
 `;

client/src/pages/cejst.tsx

@@ -23,7 +23,9 @@ const CEJSTPage = ({location}: IMapPageProps) => {
   return (<Layout location={location} title={intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_TILE)}>
 
     <J40MainGridContainer>
+
       <h1>{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
+
       <Grid row className={'j40-mb-5'}>
         <Grid col={12} tablet={{col: 6}}>
           <section>

client/src/pages/contact.tsx

@@ -6,7 +6,6 @@ import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 
 import * as CONTACT_COPY from '../data/copy/contact';
-
 interface IContactPageProps {
   location: Location;
 }
@@ -18,11 +17,11 @@ const ContactPage = ({location}: IContactPageProps) => {
     <Layout location={location} title={intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_TILE)}>
 
       <J40MainGridContainer>
+
+        <h1>{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
+
         <Grid row>
           <Grid col>
-            <h1>
-              {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}
-            </h1>
             <h2>
               {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_SUB_HEADING)}
             </h2>

client/src/pages/index.tsx

@@ -37,7 +37,9 @@ const IndexPage = ({location}: IndexPageProps) => {
     <Layout location={location} title={intl.formatMessage(ABOUT_COPY.PAGE.TILE)}>
 
       <J40MainGridContainer>
+
         <h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1>
+
         <AboutCardsContainer>
           <AboutCard
             size={'large'}

client/src/pages/methodology.tsx

@@ -22,7 +22,9 @@ const IndexPage = ({location}: MethodPageProps) => {
     <Layout location={location} title={intl.formatMessage(METHODOLOGY_COPY.PAGE.TILE)}>
 
       <J40MainGridContainer>
+
         <h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
+
         <Grid row gap className={'j40-mb-5'}>
           <Grid col={12} tablet={{col: 6}}>
             <section>