From b32fd6ddcbfb0bdc70a8afe6e693c2c228a91ad2 Mon Sep 17 00:00:00 2001 From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com> Date: Wed, 25 Aug 2021 08:34:18 -0700 Subject: [PATCH] Refactor alerts (#562) * Refactor alerts * Remove J40Alert and classes * Make AlertWrapper the primary component. * Props to show one or both alerts * Unit tests to verify one or both works correctly * Update pages to use AlertWrapper * Remove unused J40Aside. * Remove dead code from index --- client/package.json | 2 +- client/src/components/AlertWrapper/index.tsx | 84 +++++++++++++------ .../AlertWrapper/tests/alertWrapper.test.tsx | 52 ++++++++++++ .../src/components/DatasetContainer/index.tsx | 14 ++-- .../datasetContainer.test.tsx.snap | 39 ++++++--- client/src/components/J40Alert/index.tsx | 31 ------- .../components/J40Alert/j40Alert.module.scss | 21 ----- .../J40Alert/j40Alert.module.scss.d.ts | 14 ---- .../__snapshots__/j40Alert.test.tsx.snap | 21 ----- .../J40Alert/tests/j40Alert.test.tsx | 26 ------ client/src/components/J40Aside.tsx | 49 ----------- client/src/components/MapWrapper/index.tsx | 4 +- client/src/pages/cejst.tsx | 4 +- client/src/pages/contact.tsx | 4 +- client/src/pages/index.tsx | 35 +------- client/src/pages/methodology.tsx | 4 +- client/src/styles/global.scss | 22 ----- 17 files changed, 154 insertions(+), 272 deletions(-) create mode 100644 client/src/components/AlertWrapper/tests/alertWrapper.test.tsx delete mode 100644 client/src/components/J40Alert/index.tsx delete mode 100644 client/src/components/J40Alert/j40Alert.module.scss delete mode 100644 client/src/components/J40Alert/j40Alert.module.scss.d.ts delete mode 100644 client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap delete mode 100644 client/src/components/J40Alert/tests/j40Alert.test.tsx delete mode 100644 client/src/components/J40Aside.tsx diff --git a/client/package.json b/client/package.json index 7fb14a20..0978686c 100644 --- a/client/package.json +++ b/client/package.json @@ -16,8 +16,8 @@ "clean": "gatsby clean", "cy:open": "CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open", "cy:run": "cypress run", - "test": "jest", "licenses": "license-checker --production --onlyAllow 'Apache-2.0;BSD;BSD-2-Clause;BSD-3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;Public Domain;Unlicense;UNLICENSED;ODC-By-1.0;WTFPL;MPL-2.0'", + "test": "jest", "test:e2e": "start-server-and-test develop http://localhost:8000 cy:open", "test:e2e:ci": "start-server-and-test develop http://localhost:8000 cy:run", "test:update": "npm test -- -u", diff --git a/client/src/components/AlertWrapper/index.tsx b/client/src/components/AlertWrapper/index.tsx index 7297574d..8538e19f 100644 --- a/client/src/components/AlertWrapper/index.tsx +++ b/client/src/components/AlertWrapper/index.tsx @@ -1,41 +1,71 @@ import React from 'react'; import {Alert} from '@trussworks/react-uswds'; -import {FormattedMessage} from 'gatsby-plugin-intl'; +import {useIntl} from 'gatsby-plugin-intl'; import * as styles from './alertWrapper.module.scss'; +import {defineMessages} from 'react-intl'; interface IAlertWrapperProps { - hideWarningAlert?: boolean + showBetaAlert?: boolean, // defaults to true + showLimitedDataAlert?: boolean, // defaults to false } -const AlertWrapper = ({hideWarningAlert}:IAlertWrapperProps) => { +// use like this: +// +// + +const AlertWrapper = ({ + showBetaAlert = false, + showLimitedDataAlert = false, +}: IAlertWrapperProps) => { + const intl = useIntl(); + const messages = defineMessages({ + alertBetaTitle: { + id: 'alert.alertBetaTitle', + defaultMessage: + 'Public beta', + description: 'Title for an alert inform users that datasets may change', + }, + alertBetaBody: { + id: 'alert.alertBetaBody', + defaultMessage: + 'This website may be continuously updated', + description: 'Body for an alert inform users that datasets may change', + }, + alertDataLimitedTitle: { + id: 'alert.alertDataLimitedTitle', + defaultMessage: + 'Limited data sources', + description: 'Title for an alert inform users that datasets may change', + }, + alertDataLimitedBody: { + id: 'alert.alertDataLimitedBody', + defaultMessage: + 'Datasets may be added, updated, or removed.', + description: 'Body for an alert inform users that datasets may change', + }, + }); + + return (
- - - - - - -
- - - Limited data sources — - This tool currently includes 16 datasets. Over time, datasets could be - added, updated, or removed. The datasets come from a variety of sources - based on availability, quality, and relevance to environmental, energy, - and climate issues. Each dataset has limitations, such as how recently - the data was updated. - + {showBetaAlert && ( + + {intl.formatMessage(messages.alertBetaTitle)} + — {intl.formatMessage(messages.alertBetaBody)} +
+ + )} + + {showLimitedDataAlert && ( + + {intl.formatMessage(messages.alertDataLimitedTitle)} + — {intl.formatMessage(messages.alertDataLimitedBody)} +
+ + )}
); -}; ; +}; export default AlertWrapper; diff --git a/client/src/components/AlertWrapper/tests/alertWrapper.test.tsx b/client/src/components/AlertWrapper/tests/alertWrapper.test.tsx new file mode 100644 index 00000000..01f42688 --- /dev/null +++ b/client/src/components/AlertWrapper/tests/alertWrapper.test.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../../test/testHelpers'; +import AlertWrapper from '../../AlertWrapper'; + +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; + +const PUBLIC_BETA_REGEX = /Public beta/; +const LIMITED_DATA_REGEX = /Limited data sources/; + +describe('rendering full the AlertWrapper', () => { + it('checks if component renders both alerts', () => { + const component = render( + + + , + ); + + expect(component.container).toHaveTextContent(PUBLIC_BETA_REGEX); + expect(component.container).toHaveTextContent(LIMITED_DATA_REGEX); + }); +}); + +describe('rendering showBetaAlert the AlertWrapper', () => { + it('checks if component renders only beta alert', () => { + const component = render( + + + , + ); + + expect(component.container).toHaveTextContent(PUBLIC_BETA_REGEX); + expect(component.container).not.toHaveTextContent(LIMITED_DATA_REGEX); + }); +}); + +describe('rendering showLimitedDataAlert the AlertWrapper', () => { + it('checks if component renders only limited data alert', () => { + const component = render( + + + , + ); + + expect(component.container).not.toHaveTextContent(PUBLIC_BETA_REGEX); + expect(component.container).toHaveTextContent(LIMITED_DATA_REGEX); + }); +}); diff --git a/client/src/components/DatasetContainer/index.tsx b/client/src/components/DatasetContainer/index.tsx index 55f00152..4186e4f8 100644 --- a/client/src/components/DatasetContainer/index.tsx +++ b/client/src/components/DatasetContainer/index.tsx @@ -2,8 +2,8 @@ import React from 'react'; import {useIntl} from 'gatsby-plugin-intl'; import {defineMessages} from 'react-intl'; import DatasetCard from '../DatasetCard'; -import J40Alert from '../J40Alert'; import * as styles from './dsContainer.module.scss'; +import AlertWrapper from '../AlertWrapper'; export const cards = [ { @@ -67,23 +67,21 @@ const DatasetContainer = () => { subTitle: { id: 'datasetContainer.subTitle', defaultMessage: 'The datasets come from a variety of sources and ' + - 'were selected after considering relevance, availability, recency and quality.', + 'were selected after considering relevance, availability, recency and quality.', description: 'description of the dataset section', }, }); return (
-
-
- -
-

{intl.formatMessage(messages.cumulativeScore)}

+

{intl.formatMessage(messages.subTitle)}

- {cards.map((card) => )} + {cards.map((card) => )}
diff --git a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap index 4fe3cf5b..fcbe6ccf 100644 --- a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap +++ b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap @@ -5,25 +5,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
-
-
-
- Limited data sources — Datasets may be added, updated, or removed. -
-
-

Datasets used in cumulative score

+
+
+
+

+ + Limited data sources + + + — Datasets may be added, updated, or removed. + +
+

+
+
+

The datasets come from a variety of sources and were selected after considering relevance, availability, recency and quality.

diff --git a/client/src/components/J40Alert/index.tsx b/client/src/components/J40Alert/index.tsx deleted file mode 100644 index 1c67f3fc..00000000 --- a/client/src/components/J40Alert/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import {useIntl} from 'gatsby-plugin-intl'; -import {defineMessages} from 'react-intl'; - -import * as styles from './j40Alert.module.scss'; - -// This prop follows an inversion of control pattern allowing the user of this component to specify -// how it's rendered. See more here: https://kentcdodds.com/blog/inversion-of-control -interface IJ40AlertProps { - isPaddedLeft: boolean; -} - -const J40Alert = ({isPaddedLeft}: IJ40AlertProps) => { - const intl = useIntl(); - const messages = defineMessages({ - alertMsg: { - id: 'datasetAlert.header.alertMsg', - defaultMessage: - 'Limited data sources — Datasets may be added, updated, or removed.', - description: 'an alert message to inform users that datasets may change', - }, - }); - - return ( -
- {intl.formatMessage(messages.alertMsg)} -
- ); -}; - -export default J40Alert; diff --git a/client/src/components/J40Alert/j40Alert.module.scss b/client/src/components/J40Alert/j40Alert.module.scss deleted file mode 100644 index 1bc320e1..00000000 --- a/client/src/components/J40Alert/j40Alert.module.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import "../utils.scss"; - -@mixin j40AlertBase { - font-size: large; - background-color: $j40AlertWarningColor; - margin-top: 2rem; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.j40Alert { - @include j40AlertBase; -} - -.j40AlertPaddedLeft { - padding-left: 1rem; -} - -.j40AlertNoPaddingLeft { - padding-left: 0; -} diff --git a/client/src/components/J40Alert/j40Alert.module.scss.d.ts b/client/src/components/J40Alert/j40Alert.module.scss.d.ts deleted file mode 100644 index 4594230b..00000000 --- a/client/src/components/J40Alert/j40Alert.module.scss.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -declare namespace J40AlertScssNamespace { - export interface IJ40AlertScss { - j40Alert: string; - j40AlertPaddedLeft: string; - j40AlertNoPaddingLeft: string; - } - } - -declare const J40AlertScssModule: J40AlertScssNamespace.IJ40AlertScss & { - /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ - locals: J40AlertScssNamespace.IJ40AlertScss; - }; - - export = J40AlertScssModule; diff --git a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap deleted file mode 100644 index 0a4716fe..00000000 --- a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`rendering of the J40Alert tests the rendering of J40Alert with padding 1`] = ` - -
- Limited data sources — Datasets may be added, updated, or removed. -
- -`; - -exports[`rendering of the J40Alert tests the rendering of J40Alert without padding 1`] = ` - -
- Limited data sources — Datasets may be added, updated, or removed. -
- -`; diff --git a/client/src/components/J40Alert/tests/j40Alert.test.tsx b/client/src/components/J40Alert/tests/j40Alert.test.tsx deleted file mode 100644 index 0c5ab660..00000000 --- a/client/src/components/J40Alert/tests/j40Alert.test.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import {render} from '@testing-library/react'; -import {LocalizedComponent} from '../../../test/testHelpers'; -import J40Alert from '../index'; - -describe('rendering of the J40Alert', () => { - it('tests the rendering of J40Alert without padding', () => { - const {asFragment} = render( - - - , - ); - - expect(asFragment()).toMatchSnapshot(); - }); - - it('tests the rendering of J40Alert with padding', () => { - const {asFragment} = render( - - - , - ); - - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/client/src/components/J40Aside.tsx b/client/src/components/J40Aside.tsx deleted file mode 100644 index 4441b7eb..00000000 --- a/client/src/components/J40Aside.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; - -// @ts-ignore -import chatIcon from '/node_modules/uswds/dist/img/usa-icons/chat.svg'; -// @ts-ignore -import githubIcon from '/node_modules/uswds/dist/img/usa-icons/github.svg'; - -const J40Aside = () => { - return ( - <> - - - ); -}; - -export default J40Aside; diff --git a/client/src/components/MapWrapper/index.tsx b/client/src/components/MapWrapper/index.tsx index 5f7c8c13..d2226f02 100644 --- a/client/src/components/MapWrapper/index.tsx +++ b/client/src/components/MapWrapper/index.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import {useIntl} from 'gatsby-plugin-intl'; import {defineMessages} from 'react-intl'; -import J40Alert from '../J40Alert'; import J40Map from '../J40Map'; import * as styles from './mapWrapper.module.scss'; import * as constants from '../../data/constants'; +import AlertWrapper from '../AlertWrapper'; interface IMapWrapperProps { location: Location @@ -28,7 +28,7 @@ const MapWrapper = ({location}: IMapWrapperProps) => { }); return ( <> - +
diff --git a/client/src/pages/cejst.tsx b/client/src/pages/cejst.tsx index fa6f4161..2e8f70f1 100644 --- a/client/src/pages/cejst.tsx +++ b/client/src/pages/cejst.tsx @@ -20,8 +20,8 @@ const CEJSTPage = ({location}: IMapPageProps) => { // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now // We will bring back later when we have interactive controls. return ( - - + + diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx index 7ba87e0d..77a715d9 100644 --- a/client/src/pages/contact.tsx +++ b/client/src/pages/contact.tsx @@ -16,8 +16,8 @@ const ContactPage = ({location}: ContactPageProps) => { return ( - - + + diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index 7d751d2b..9214fa91 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -65,7 +65,10 @@ const IndexPage = ({location}: IndexPageProps) => { return ( - + + + + @@ -129,36 +132,6 @@ const IndexPage = ({location}: IndexPageProps) => { - - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - - {/* */} - {/*

About the screening tool

*/} - {/* */} - {/* */} - {/* */} - - {/* */} - {/* */} - {/* */} - {/* */} - - {/* */} - {/*

About the Justice40 Initiative

*/} - {/* */} - {/* */} - {/* */} - {/* */} { return ( - - + + diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 055b7e4f..79cbb01a 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -114,28 +114,6 @@ $j40-blue-background-color: #EFF6FB; } } -.j40-aside { - background-color: #eff6fb; - padding-right: 1em; - padding-left: 1em; - - h2 { - font-weight: 100; - font-size: 2em; - } - - h3 { - font-weight: 100; - font-size: 1.4em; - } - - .j40-aside-icon { - display: flex; - margin-top: 3px; - margin-bottom: 12px; - } -} - .j40-footer { .j40-footer-logo { font-weight: bold;