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

Display SurveyMonkey survey (#867)

Browse source 
* Display SurveyMonkey survey via FAB

- add Floating Action Button lib: react-tiny-fab
- enable Internal Page Survey with ?flags=ips
- update snapshots

* Add location to state

- update snapshots

* Fix build error

- remove react-tiny-fab
- remove location state
- create custom FAB component
- remove feature flag
- update snapshots

* Add SurveyFab snapshot test

* Remove embedded survey page

- add intl

* Remove conditional render logic on SurveyFab

* Remove cypress test around starting map via URL

- increase component code coverage to 83%
This commit is contained in:
Vim 2021-11-12 12:39:04 -05:00 • committed by GitHub
commit 54bdda0f02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 161 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,18 @@
@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 Normal file
View file

@ -0,0 +1,12 @@
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;

23
client/src/components/SurveyFab/SurveyFab.test.tsx Normal file
View file

@ -0,0 +1,23 @@
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', () => {
const {asFragment} = render(
<LocalizedComponent>
<SurveyFab />
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});
describe('test clickHandler', () => {
it('clickHandler should fire successfully', () => {
onClickHandler();
});
});

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

@ -0,0 +1,24 @@
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 Normal file
View file

@ -0,0 +1,13 @@
// 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 Normal file
View file

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

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

@ -3,6 +3,7 @@ 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,
@ -17,16 +18,20 @@ const Layout = ({children, location, title}: ILayoutProps) => {
<Helmet defer={false}>
<html lang="en"/>
<title>{title}</title>
{/* DAP Tag */}
<script async
type="text/javascript"
id="_fed_an_ua_tag"
src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=DOI&sitetopic=cejst&enhlink=true">
</script>
</Helmet>
<URLFlagProvider location={location}>
<J40Header />
<main id={'main-content'}>
{children}
<SurveyFab />
</main>
<J40Footer/>
</URLFlagProvider>