publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move survey button to footer (#897)

Browse source 
* 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
This commit is contained in:
Vim 2021-11-19 13:01:47 -05:00 • committed by GitHub
parent 474d010bf4
commit fff9b86d7a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 177 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js
View file

@ -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',

2
client/src/components/J40Footer.tsx
View file

@ -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>
);
};

26
client/src/components/SurveyButton/SurveyButton.module.scss Normal file
View file

@ -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");
}
}
}

13
client/src/components/SurveyButton/SurveyButton.module.scss.d.ts vendored Normal file
View file

@ -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;

10
client/src/components/SurveyFab/SurveyFab.test.tsx → client/src/components/SurveyButton/SurveyButton.test.tsx
View file

@ -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();

27
client/src/components/SurveyButton/SurveyButton.tsx Normal file
View file

@ -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;

18
client/src/components/SurveyButton/__snapshots__/SurveyButton.test.tsx.snap Normal file
View file

@ -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>
`;

3
client/src/components/SurveyButton/index.tsx Normal file
View file

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

18
client/src/components/SurveyFab/SurveyFab.module.scss
View file

@ -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');
}
}

12
client/src/components/SurveyFab/SurveyFab.module.scss.d.ts vendored
View file

@ -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;

24
client/src/components/SurveyFab/SurveyFab.tsx
View file

@ -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;

13
client/src/components/SurveyFab/__snapshots__/SurveyFab.test.tsx.snap
View file

@ -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>
`;

3
client/src/components/SurveyFab/index.tsx
View file

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

12
client/src/components/__snapshots__/J40Footer.spec.tsx.snap
View file

@ -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>
`;

9
client/src/components/layout.tsx
View file

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

2
client/src/data/copy/contact.tsx
View file

@ -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',
},
});

25
client/src/pages/__snapshots__/contact.test.tsx.snap
View file

@ -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>
`;

19
client/src/pages/__snapshots__/index.test.tsx.snap
View file

@ -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>
`;

19
client/src/pages/__snapshots__/methodology.test.tsx.snap
View file

@ -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>
`;

2
client/src/pages/cejst.tsx
View file

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

7
client/src/pages/contact.tsx
View file

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

2
client/src/pages/index.tsx
View file

@ -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'}

2
client/src/pages/methodology.tsx
View file

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