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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import SurveyButton from './SurveyButton';
+import {onClickHandler} from './SurveyButton';
+describe('rendering of the SurveyButton', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <SurveyButton />
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    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;