Website copy layout styling updates for Tuesday launch (#685)

* Add basic accordion in AreaDetail

* Refactor AreaDetail to use a Grid layout

- adds useWindowSize to detect window resizes for mobile view
- Map and AreaDetail to use Grid
- removes some component styling from J40
- updates snapshot
- MapWrapper to use Grid

* Add custom Accordion styling

- make J40 map a 9:3 Grid layout split
- override native Accordion heading styles
- make the Accordion multi-selectable
- add some dummy data for indicators

* Update AreaDetail to match design

- remove styles in AreaDetail
- increase height of MapInfoPanel
- add Accordian items (indicators)
- updates snapshot

* Add a Beta Tag to the logo

* Change the line height on indicators descriptions

* Update package-lock after the rebase

* Remove threshold from MapLegend

- move feature selected border color to utils
- remove all tooltip logic
- remove all styles associated with tooltips
- add legend label and descript to constants
- refactor tests to be snapshots

* Add borders between additional indicators

* Modify copy and update styles

- add the ordinal superscript back
- update the copy
- update the snapshots

* Add additional indicators keys

* Connect indicator keys to the UI

- update the areaDetail snapshot

* Render additional indicators accordion open onLoad

- update snapshot

* Update copy on About page

* Update copy on indicator descriptions

- update snapshots

* Update the "How you can help section"

- update the snapshot

* Add a comma to "ZIP file will contain..."

* Add the Datasets section to the methodology page

- update snapshot

* Update Methodology process list to trussworks

- remove custom process list
- remove custom CSS from global file
- change copy

* Modify layout of Methodology to using Grid

- modify Dataset section to use Grid
- remove outdated component CSS
- update the snapshot

* Update copy based on product feedback

- update snapshots

* Remove Accordions

- updates snapshots
- white CBG groups will show "Not community of focus"

client/src/components/MapWrapper/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {useIntl} from 'gatsby-plugin-intl';
 import {defineMessages} from 'react-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 import J40Map from '../J40Map';
 
@@ -17,25 +18,37 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
   const messages = defineMessages({
     downloadLinkText: {
       id: 'mapwrapper.download.link',
-      defaultMessage: 'Download the draft list of prioritized communities (pre-decisional) and datasets used',
+      defaultMessage: 'Download the draft list of communities of focus and datasets used',
       description: 'download link for datasets',
     },
     downloadContents: {
       id: 'mapwrapper.download.contents',
-      defaultMessage: 'ZIP file will contain one .xlsx, one .csv and one .pdf (30 MB).',
+      defaultMessage: 'ZIP file will contain one .xlsx, one .csv, and one .pdf (30 MB).',
       description: 'download link contents',
     },
   });
   return (
     <>
-      <AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
-      <J40Map location={location}/>
-      <div className={styles.mapCaptionTextLink}>
-        <a href={constants.DOWNLOAD_ZIP_URL}>
-          {intl.formatMessage(messages.downloadLinkText)}
-        </a>
-      </div>
-      <div>{intl.formatMessage(messages.downloadContents)}</div>
+      <Grid row>
+        <Grid col={12}>
+          <AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
+        </Grid>
+      </Grid>
+
+      <Grid row>
+        <J40Map location={location}/>
+      </Grid>
+
+      <Grid row>
+        <Grid col={6}>
+          <div className={styles.mapCaptionTextLink}>
+            <a href={constants.DOWNLOAD_ZIP_URL}>
+              {intl.formatMessage(messages.downloadLinkText)}
+            </a>
+          </div>
+          <div>{intl.formatMessage(messages.downloadContents)}</div>
+        </Grid>
+      </Grid>
     </>
   );
 };