{intl.formatMessage(messages.alertMsg)}
);
diff --git a/client/src/components/J40Alert/j40Alert.module.scss b/client/src/components/J40Alert/j40Alert.module.scss
index 9e057e0c..fbd2589c 100644
--- a/client/src/components/J40Alert/j40Alert.module.scss
+++ b/client/src/components/J40Alert/j40Alert.module.scss
@@ -1,5 +1,13 @@
-.j40Alert {
+@import "../utils.scss";
+
+@mixin j40AlertBase {
font-size: large;
- font-weight: 600;
- padding: 1rem 0;
+ background-color: $j40AlertWarningColor;
+ margin-top: 2rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.j40Alert {
+ @include j40AlertBase;
}
diff --git a/client/src/components/J40Alert/j40Alert.module.scss.d.ts b/client/src/components/J40Alert/j40Alert.module.scss.d.ts
index 6de09e5c..2a46ae2b 100644
--- a/client/src/components/J40Alert/j40Alert.module.scss.d.ts
+++ b/client/src/components/J40Alert/j40Alert.module.scss.d.ts
@@ -1,6 +1,7 @@
declare namespace J40AlertScssNamespace {
export interface IJ40AlertScss {
j40Alert: string;
+ j40AlertLeftPad: string;
}
}
diff --git a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap
index 4cdcea95..069a9776 100644
--- a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap
+++ b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`rendering of the J40Alert checks if various text fields are visible 1`] = `
+exports[`rendering of the J40Alert tests the rendering of J40Alert 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
index 96506b63..497b09a4 100644
--- a/client/src/components/J40Alert/tests/j40Alert.test.tsx
+++ b/client/src/components/J40Alert/tests/j40Alert.test.tsx
@@ -1,16 +1,16 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../../test/testHelpers';
-import J40Alert from '../../J40Alert';
+import J40Alert from '../index';
describe('rendering of the J40Alert', () => {
- const {asFragment} = render(
-
- ,
- );
+ it('tests the rendering of J40Alert', () => {
+ const {asFragment} = render(
+
+ ,
+ );
- it('checks if various text fields are visible', () => {
expect(asFragment()).toMatchSnapshot();
});
});
diff --git a/client/src/components/J40Header.tsx b/client/src/components/J40Header.tsx
index f082f06f..ec1d6c59 100644
--- a/client/src/components/J40Header.tsx
+++ b/client/src/components/J40Header.tsx
@@ -1,7 +1,6 @@
import React, {useState} from 'react';
-import {FormattedMessage, Link, useIntl} from 'gatsby-plugin-intl';
+import {Link, useIntl} from 'gatsby-plugin-intl';
import {
- Alert,
Header,
NavMenuButton,
PrimaryNav,
@@ -11,11 +10,7 @@ import {defineMessages} from 'react-intl';
// @ts-ignore
import siteLogo from '../../src/images/icon.png';
-interface IJ40HeaderProps {
- location: Location
-}
-const J40Header = ({location}:IJ40HeaderProps) => {
- const isMethodologyPage = location.pathname.match(/methodology\/?/);
+const J40Header = () => {
const intl = useIntl();
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const messages = defineMessages({
@@ -119,29 +114,6 @@ const J40Header = ({location}:IJ40HeaderProps) => {
- -
+//
+// ) :
+// (
+// {intl.formatMessage(messages.priorityHeader)}
+//{intl.formatMessage(messages.priorityText)}
+//
+//
+// );
+// };
+
+const MapLegend = () => {
+ const intl = useIntl();
+
+ // Type definitions required for @trussworks tooltip. This type defines the div that wraps the icon.
+ // This allows to pass children and other attributes.
+ type IconWrapperProps = React.PropsWithChildren<{
+ className?: string
+ }> &
+ JSX.IntrinsicElements['div'] &
+ React.RefAttributes{intl.formatMessage(messages.thresholdHeader)}
+//{intl.formatMessage(messages.thresholdText)}
+//
+ {children}
+
+ ),
+ );
+ IconWrapper.displayName = 'custom info wrapper';
+
+ return (
+
+
+ );
+};
+
+export default MapLegend;
diff --git a/client/src/components/MapLegend/mapLegend.module.scss b/client/src/components/MapLegend/mapLegend.module.scss
new file mode 100644
index 00000000..fdc28565
--- /dev/null
+++ b/client/src/components/MapLegend/mapLegend.module.scss
@@ -0,0 +1,96 @@
+@import "../utils.scss";
+
+$min-color: #fafaf8;
+$med-color: rgba(26, 68, 128, 0.2);
+$max-color: rgba(26, 68, 128, 0.6);
+$alertInfoColor: #e7f6f8;
+
+.legendContainer {
+ margin: 1rem 1.2rem 1rem 2.5rem;
+ font-size: 0.8em;
+ border: 1px solid #8c9297;
+ padding: 0 1.8rem;
+ flex: 1;
+ color: $headingFontColor;
+
+ .legendTooltipText {
+ max-width: 14rem;
+ font-size: medium;
+ }
+
+ @media screen and (max-width: $mobileBreakpoint) {
+ margin: 1rem 0;
+ }
+}
+
+.legendHeader {
+ margin-bottom: 0;
+}
+
+.swatchContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ @media screen and (max-width: $mobileBreakpoint) {
+ flex-wrap: wrap;
+ }
+}
+
+.legendItem {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ span {
+ font-size: medium;
+ }
+
+ .infoIconWrapper {
+ margin-left: 0.8rem;
+ .infoIcon {
+ width: 2rem;
+ height: 2rem;
+ margin-top: 0.4rem;
+ }
+ }
+
+ @media screen and (max-width: $mobileBreakpoint) {
+ padding-left: 3rem;
+ }
+}
+
+.colorSwatch {
+ box-sizing: border-box;
+ height: 1.7rem;
+ width: 1.7rem;
+ margin-right: 10px;
+ border-radius: 50%;
+}
+
+#prioritized {
+ background-color: $max-color;
+}
+
+#threshold {
+ background-color: $med-color;
+}
+
+#nonPrioritized {
+ background-color: $min-color;
+}
+
+.legendTooltipTheme {
+ color: $headingFontColor !important;
+ background-color: white !important;
+ opacity: 1 !important;
+ border: $sidePanelBorder !important;
+ box-shadow: 0 0 11px rgba(33, 33, 33, 0.2) !important;
+ &.place-top {
+ &:after {
+ border-top-color: white !important;
+ border-top-style: solid !important;
+ border-top-width: 6px !important;
+ }
+ }
+}
diff --git a/client/src/components/mapLegend.module.scss.d.ts b/client/src/components/MapLegend/mapLegend.module.scss.d.ts
similarity index 81%
rename from client/src/components/mapLegend.module.scss.d.ts
rename to client/src/components/MapLegend/mapLegend.module.scss.d.ts
index 852606f9..9ab2f103 100644
--- a/client/src/components/mapLegend.module.scss.d.ts
+++ b/client/src/components/MapLegend/mapLegend.module.scss.d.ts
@@ -7,7 +7,11 @@ declare namespace HowYouCanHelpModuleScssNamespace {
prioritized: string,
threshold: string,
nonPrioritized: string,
- legendItem: string
+ legendItem: string,
+ infoIcon: string,
+ legendTooltipText: string,
+ legendTooltipTheme: string,
+ infoIconWrapper: string,
}
}
diff --git a/client/src/components/MapLegend/tests/mapLegend.test.tsx b/client/src/components/MapLegend/tests/mapLegend.test.tsx
new file mode 100644
index 00000000..f537736e
--- /dev/null
+++ b/client/src/components/MapLegend/tests/mapLegend.test.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+
+import {LocalizedComponent} from '../../../test/testHelpers';
+import MapLegend from '../index';
+import * as constants from '../../../data/constants';
+
+describe('rendering of the MapLegend', () => {
+ const {getAllByText} = render(
+ {intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}
+
+
+
+
+ {intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL)}
+
+ {/* Using @trussworks tooltip */}
+
+ label={`
+ Communities that have cumulative
+ index score of Xth percentile
+ and above
+ `}
+ position='left'
+ asCustom={IconWrapper}>
+ 
+
+
+
+
+
+ {intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.THRESHOLD_LABEL)}
+
+ {/* Using @trussworks tooltip */}
+
+ label={`
+ Communities with a cumulative
+ index score between Y - X.99th
+ percentile
+ `}
+ position='left'
+ asCustom={IconWrapper}>
+
+
+
+ {intl.formatMessage(messages.downloadContents)}
+
+ );
+};
+
+
+export default MapWrapper;
diff --git a/client/src/components/MapWrapper/mapWrapper.module.scss b/client/src/components/MapWrapper/mapWrapper.module.scss
new file mode 100644
index 00000000..6f48f73d
--- /dev/null
+++ b/client/src/components/MapWrapper/mapWrapper.module.scss
@@ -0,0 +1,4 @@
+.mapCaptionTextLink {
+ padding-top: 1rem;
+ padding-bottom: 0.4rem;
+}
diff --git a/client/src/components/MapWrapper/mapWrapper.module.scss.d.ts b/client/src/components/MapWrapper/mapWrapper.module.scss.d.ts
new file mode 100644
index 00000000..03b0ab9f
--- /dev/null
+++ b/client/src/components/MapWrapper/mapWrapper.module.scss.d.ts
@@ -0,0 +1,13 @@
+declare namespace MapWrapperScssNamespace {
+ export interface IMapWrapperScss {
+ mapCaptionTextLink: string;
+
+ }
+ }
+
+declare const MapWrapperScssModule: MapWrapperScssNamespace.IMapWrapperScss & {
+ /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+ locals: MapWrapperScssNamespace.IMapWrapperScss;
+ };
+
+ export = MapWrapperScssModule;
diff --git a/client/src/components/downloadPacket.tsx b/client/src/components/downloadPacket.tsx
index a9c72da9..74746ffa 100644
--- a/client/src/components/downloadPacket.tsx
+++ b/client/src/components/downloadPacket.tsx
@@ -1,10 +1,9 @@
import React from 'react';
import {Button} from '@trussworks/react-uswds';
-import * as styles from './downloadPacket.module.scss';
// @ts-ignore
import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
-
-export const cbgFileURL = 'https://justice40-data.s3.amazonaws.com/Score/usa.zip';
+import * as styles from './downloadPacket.module.scss';
+import * as constants from '../data/constants';
const DownloadPacket = () => {
return (
@@ -16,7 +15,7 @@ const DownloadPacket = () => {
prioritized communities (30,021 census block groups) and 18 datasets.