From fff9b86d7ae9d9e07b23841e6af77e4829778371 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Fri, 19 Nov 2021 13:01:47 -0500 Subject: [PATCH] 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 --- .../LegacyTests/mapZoomLatLong.spec.js | 25 ++++++++++++----- client/src/components/J40Footer.tsx | 2 ++ .../SurveyButton/SurveyButton.module.scss | 26 ++++++++++++++++++ .../SurveyButton.module.scss.d.ts | 13 +++++++++ .../SurveyButton.test.tsx} | 10 +++---- .../components/SurveyButton/SurveyButton.tsx | 27 +++++++++++++++++++ .../__snapshots__/SurveyButton.test.tsx.snap | 18 +++++++++++++ client/src/components/SurveyButton/index.tsx | 3 +++ .../SurveyFab/SurveyFab.module.scss | 18 ------------- .../SurveyFab/SurveyFab.module.scss.d.ts | 12 --------- client/src/components/SurveyFab/SurveyFab.tsx | 24 ----------------- .../__snapshots__/SurveyFab.test.tsx.snap | 13 --------- client/src/components/SurveyFab/index.tsx | 3 --- .../__snapshots__/J40Footer.spec.tsx.snap | 12 +++++++++ client/src/components/layout.tsx | 9 +++---- client/src/data/copy/contact.tsx | 2 +- .../pages/__snapshots__/contact.test.tsx.snap | 25 ++++++++++------- .../pages/__snapshots__/index.test.tsx.snap | 19 ++++++++----- .../__snapshots__/methodology.test.tsx.snap | 19 ++++++++----- client/src/pages/cejst.tsx | 2 ++ client/src/pages/contact.tsx | 7 +++-- client/src/pages/index.tsx | 2 ++ client/src/pages/methodology.tsx | 2 ++ 23 files changed, 177 insertions(+), 116 deletions(-) create mode 100644 client/src/components/SurveyButton/SurveyButton.module.scss create mode 100644 client/src/components/SurveyButton/SurveyButton.module.scss.d.ts rename client/src/components/{SurveyFab/SurveyFab.test.tsx => SurveyButton/SurveyButton.test.tsx} (73%) create mode 100644 client/src/components/SurveyButton/SurveyButton.tsx create mode 100644 client/src/components/SurveyButton/__snapshots__/SurveyButton.test.tsx.snap create mode 100644 client/src/components/SurveyButton/index.tsx delete mode 100644 client/src/components/SurveyFab/SurveyFab.module.scss delete mode 100644 client/src/components/SurveyFab/SurveyFab.module.scss.d.ts delete mode 100644 client/src/components/SurveyFab/SurveyFab.tsx delete mode 100644 client/src/components/SurveyFab/__snapshots__/SurveyFab.test.tsx.snap delete mode 100644 client/src/components/SurveyFab/index.tsx diff --git a/client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js b/client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js index cf9f7e8b..4e723d31 100644 --- a/client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js +++ b/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', diff --git a/client/src/components/J40Footer.tsx b/client/src/components/J40Footer.tsx index db82f4a8..b428080d 100644 --- a/client/src/components/J40Footer.tsx +++ b/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 = () => { /> + ); }; diff --git a/client/src/components/SurveyButton/SurveyButton.module.scss b/client/src/components/SurveyButton/SurveyButton.module.scss new file mode 100644 index 00000000..8ee60be5 --- /dev/null +++ b/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"); + } + } +} diff --git a/client/src/components/SurveyButton/SurveyButton.module.scss.d.ts b/client/src/components/SurveyButton/SurveyButton.module.scss.d.ts new file mode 100644 index 00000000..b8c5cbc2 --- /dev/null +++ b/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; diff --git a/client/src/components/SurveyFab/SurveyFab.test.tsx b/client/src/components/SurveyButton/SurveyButton.test.tsx similarity index 73% rename from client/src/components/SurveyFab/SurveyFab.test.tsx rename to client/src/components/SurveyButton/SurveyButton.test.tsx index 5e6a37b2..efa8a6c9 100644 --- a/client/src/components/SurveyFab/SurveyFab.test.tsx +++ b/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( - + , ); @@ -15,7 +14,6 @@ describe('rendering of the SurveyFab', () => { expect(asFragment()).toMatchSnapshot(); }); }); - describe('test clickHandler', () => { it('clickHandler should fire successfully', () => { onClickHandler(); diff --git a/client/src/components/SurveyButton/SurveyButton.tsx b/client/src/components/SurveyButton/SurveyButton.tsx new file mode 100644 index 00000000..f2663706 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default SurveyButton; diff --git a/client/src/components/SurveyButton/__snapshots__/SurveyButton.test.tsx.snap b/client/src/components/SurveyButton/__snapshots__/SurveyButton.test.tsx.snap new file mode 100644 index 00000000..4b985711 --- /dev/null +++ b/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`] = ` + +
+ +
+ +`; diff --git a/client/src/components/SurveyButton/index.tsx b/client/src/components/SurveyButton/index.tsx new file mode 100644 index 00000000..b1094098 --- /dev/null +++ b/client/src/components/SurveyButton/index.tsx @@ -0,0 +1,3 @@ +import SurveyButton from './SurveyButton'; + +export default SurveyButton; diff --git a/client/src/components/SurveyFab/SurveyFab.module.scss b/client/src/components/SurveyFab/SurveyFab.module.scss deleted file mode 100644 index 0be05b8b..00000000 --- a/client/src/components/SurveyFab/SurveyFab.module.scss +++ /dev/null @@ -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'); - } -} \ No newline at end of file diff --git a/client/src/components/SurveyFab/SurveyFab.module.scss.d.ts b/client/src/components/SurveyFab/SurveyFab.module.scss.d.ts deleted file mode 100644 index ace15def..00000000 --- a/client/src/components/SurveyFab/SurveyFab.module.scss.d.ts +++ /dev/null @@ -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; diff --git a/client/src/components/SurveyFab/SurveyFab.tsx b/client/src/components/SurveyFab/SurveyFab.tsx deleted file mode 100644 index 1963a07a..00000000 --- a/client/src/components/SurveyFab/SurveyFab.tsx +++ /dev/null @@ -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 ( - - ); -}; - -export default SurveyFab; diff --git a/client/src/components/SurveyFab/__snapshots__/SurveyFab.test.tsx.snap b/client/src/components/SurveyFab/__snapshots__/SurveyFab.test.tsx.snap deleted file mode 100644 index 376b7320..00000000 --- a/client/src/components/SurveyFab/__snapshots__/SurveyFab.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`rendering of the SurveyFab checks if component renders 1`] = ` - - - -`; diff --git a/client/src/components/SurveyFab/index.tsx b/client/src/components/SurveyFab/index.tsx deleted file mode 100644 index d9a7003d..00000000 --- a/client/src/components/SurveyFab/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import SurveyFab from './SurveyFab'; - -export default SurveyFab; diff --git a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap index 722c366f..eda1acfe 100644 --- a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap +++ b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap @@ -176,6 +176,18 @@ exports[`J40Footer renders correctly 1`] = ` +
+ +
`; diff --git a/client/src/components/layout.tsx b/client/src/components/layout.tsx index 911e3ae3..5fd78d59 100644 --- a/client/src/components/layout.tsx +++ b/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) => {
{children} -
diff --git a/client/src/data/copy/contact.tsx b/client/src/data/copy/contact.tsx index a2899a15..23cf7328 100644 --- a/client/src/data/copy/contact.tsx +++ b/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', }, }); diff --git a/client/src/pages/__snapshots__/contact.test.tsx.snap b/client/src/pages/__snapshots__/contact.test.tsx.snap index a68fbea7..59258649 100644 --- a/client/src/pages/__snapshots__/contact.test.tsx.snap +++ b/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" > +

+ Contact +

-

- Contact -

Email us

@@ -336,13 +336,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
-
+
+ +
`; diff --git a/client/src/pages/__snapshots__/index.test.tsx.snap b/client/src/pages/__snapshots__/index.test.tsx.snap index 9c2410b4..0fbe0dc6 100644 --- a/client/src/pages/__snapshots__/index.test.tsx.snap +++ b/client/src/pages/__snapshots__/index.test.tsx.snap @@ -656,13 +656,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis -
+
+ +
`; diff --git a/client/src/pages/__snapshots__/methodology.test.tsx.snap b/client/src/pages/__snapshots__/methodology.test.tsx.snap index b50699ff..c10ee409 100644 --- a/client/src/pages/__snapshots__/methodology.test.tsx.snap +++ b/client/src/pages/__snapshots__/methodology.test.tsx.snap @@ -1116,13 +1116,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis -
+
+ +
`; diff --git a/client/src/pages/cejst.tsx b/client/src/pages/cejst.tsx index cba6cee1..c0ac1c0a 100644 --- a/client/src/pages/cejst.tsx +++ b/client/src/pages/cejst.tsx @@ -23,7 +23,9 @@ const CEJSTPage = ({location}: IMapPageProps) => { return ( +

{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}

+
diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx index 1ddefaff..43fbb39c 100644 --- a/client/src/pages/contact.tsx +++ b/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) => { + +

{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}

+ -

- {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)} -

{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_SUB_HEADING)}

diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index 186d655b..d7f562d6 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -37,7 +37,9 @@ const IndexPage = ({location}: IndexPageProps) => { +

{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}

+ { +

{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}

+