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/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>