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 215712dc..4fe3cf5b 100644
--- a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
+++ b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
@@ -11,7 +11,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
-
+
Limited data sources — Datasets may be added, updated, or removed.
diff --git a/client/src/components/J40Alert/index.tsx b/client/src/components/J40Alert/index.tsx
index d529c034..1c67f3fc 100644
--- a/client/src/components/J40Alert/index.tsx
+++ b/client/src/components/J40Alert/index.tsx
@@ -1,25 +1,28 @@
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 {
- alertStyle?: {[key:string]: string};
+ isPaddedLeft: boolean;
}
-const J40Alert = ({alertStyle}:IJ40AlertProps) => {
+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.',
+ 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)}
);
diff --git a/client/src/components/J40Alert/j40Alert.module.scss b/client/src/components/J40Alert/j40Alert.module.scss
index fbd2589c..1bc320e1 100644
--- a/client/src/components/J40Alert/j40Alert.module.scss
+++ b/client/src/components/J40Alert/j40Alert.module.scss
@@ -11,3 +11,11 @@
.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
index 2a46ae2b..4594230b 100644
--- a/client/src/components/J40Alert/j40Alert.module.scss.d.ts
+++ b/client/src/components/J40Alert/j40Alert.module.scss.d.ts
@@ -1,7 +1,8 @@
declare namespace J40AlertScssNamespace {
export interface IJ40AlertScss {
- j40Alert: string;
- j40AlertLeftPad: string;
+ j40Alert: string;
+ j40AlertPaddedLeft: string;
+ j40AlertNoPaddingLeft: 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 069a9776..0a4716fe 100644
--- a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap
+++ b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap
@@ -1,8 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`rendering of the J40Alert tests the rendering of J40Alert 1`] = `
+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
index 497b09a4..0c5ab660 100644
--- a/client/src/components/J40Alert/tests/j40Alert.test.tsx
+++ b/client/src/components/J40Alert/tests/j40Alert.test.tsx
@@ -4,10 +4,20 @@ import {LocalizedComponent} from '../../../test/testHelpers';
import J40Alert from '../index';
describe('rendering of the J40Alert', () => {
- it('tests the rendering of 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(
+
+
,
);
diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx
index f3d89b9d..e90a00ec 100644
--- a/client/src/components/J40Map.tsx
+++ b/client/src/components/J40Map.tsx
@@ -22,7 +22,7 @@ import {useFlags} from '../contexts/FlagContext';
// Components:
import TerritoryFocusControl from './territoryFocusControl';
import MapInfoPanel from './mapInfoPanel';
-import AreaDetail from './areaDetail';
+import AreaDetail from './AreaDetail';
// Styles and constants
import {makeMapStyle} from '../data/mapStyle';
@@ -104,7 +104,6 @@ const J40Map = ({location}: IJ40Interface) => {
}
};
-
const onLoad = () => {
if (typeof window !== 'undefined' && window.Cypress && mapRef.current) {
window.underlyingMap = mapRef.current.getMap();
diff --git a/client/src/components/MapWrapper/index.tsx b/client/src/components/MapWrapper/index.tsx
index ec90d656..5f7c8c13 100644
--- a/client/src/components/MapWrapper/index.tsx
+++ b/client/src/components/MapWrapper/index.tsx
@@ -28,7 +28,7 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
});
return (
<>
-
+