Update dependencies, address breaking USWDS change (#474)

Update dependencies

gatsby-config.js

@@ -102,7 +102,17 @@ module.exports = {
   },
   pathPrefix: process.env.BASEURL || '/',
   plugins: [
-    `gatsby-plugin-sass`,
+    {
+      resolve: 'gatsby-plugin-sass',
+      options: {
+        cssLoaderOptions: {
+          esModule: false,
+          modules: {
+            namedExport: false,
+          },
+        },
+      },
+    },
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-source-filesystem`,

package.json

@@ -15,26 +15,26 @@
     "federalist:copy": "mkdir -p _site && rm -rf _site/* && cp -r public/* _site/"
   },
   "dependencies": {
-    "gatsby": "^2.29.3",
-    "gatsby-awesome-pagination": "^0.3.6",
-    "gatsby-plugin-manifest": "^2.12.0",
-    "gatsby-plugin-netlify-cms": "^4.7.0",
-    "gatsby-plugin-offline": "^3.7.1",
-    "gatsby-plugin-react-helmet": "^3.7.0",
-    "gatsby-plugin-sass": "^2.8.0",
-    "gatsby-source-filesystem": "^2.8.1",
-    "gatsby-transformer-remark": "^2.13.1",
-    "netlify-cms-app": "^2.14.8",
-    "node-sass": "^4.14.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "gatsby": "^4.9.3",
+    "gatsby-awesome-pagination": "^0.3.8",
+    "gatsby-plugin-manifest": "^4.9.1",
+    "gatsby-plugin-netlify-cms": "^6.9.0",
+    "gatsby-plugin-offline": "^5.9.1",
+    "gatsby-plugin-react-helmet": "^5.9.0",
+    "gatsby-plugin-sass": "^5.9.0",
+    "gatsby-source-filesystem": "^4.9.1",
+    "gatsby-transformer-remark": "^5.9.1",
+    "netlify-cms-app": "^2.15.68",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "uswds": "^2.10.0"
+    "sass": "^1.49.9",
+    "uswds": "^2.13.2"
   },
   "devDependencies": {
-    "eslint-config-react-app": "^5.2.1",
-    "prettier": "^2.2.1",
+    "eslint-config-react-app": "^7.0.0",
+    "prettier": "^2.5.1",
     "rimraf": "^3.0.2"
   },
   "engines": {

src/components/banner.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import flag from '../../node_modules/uswds/dist/img/us_flag_small.png';
-import dotGov from '../../node_modules/uswds/dist/img/icon-dot-gov.svg';
-import https from '../../node_modules/uswds/dist/img/icon-https.svg';
+import flag from 'uswds/img/us_flag_small.png';
+import dotGov from 'uswds/img/icon-dot-gov.svg';
+import https from 'uswds/img/icon-https.svg';
 
 const Banner = () => (
   <div className="usa-banner">

src/components/footer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import logo from '../../node_modules/uswds/dist/img/logo-img.png';
+import logo from 'uswds/img/logo-img.png';
 
 const Footer = () => (
   <footer className="usa-footer site-footer" role="contentinfo">

src/components/highlights.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import circle from '../../node_modules/uswds/dist/img/circle-124.png';
+import circle from 'uswds/img/circle-124.png';
 
 /*
   Use this section to highlight key elements of your site. Some sites will only have two while others may have six to eight. 

src/components/nav.js

@@ -1,7 +1,7 @@
 import { Link } from 'gatsby';
 import React from 'react';
 
-import close from '../../node_modules/uswds/dist/img/close.svg';
+import close from 'uswds/img/close.svg';
 import SearchForm from './search-form';
 
 const Nav = ({ navigation, secondaryLinks }) => (

src/components/search-form.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import { navigate } from '@reach/router';
+import search from 'uswds/img/usa-icons-bg/search--white.svg';
 
 const SearchForm = ({ navigation, secondaryLinks }) => {
   const { site } = useStaticQuery(
@@ -34,7 +35,7 @@ const SearchForm = ({ navigation, secondaryLinks }) => {
   };
 
   return (
-    <form className="usa-search usa-search-small" onSubmit={handleSubmit}>
+    <form className="usa-search usa-search--small" onSubmit={handleSubmit}>
       <div role="search">
         <label className="usa-sr-only" htmlFor="extended-search-field-small">
           Search small
@@ -46,8 +47,8 @@ const SearchForm = ({ navigation, secondaryLinks }) => {
           name="query"
           autoComplete="off"
         />
-        <button className="usa-button" type="submit">
-          <span className="usa-sr-only">Search</span>
+        <button class="usa-button" type="submit">
+          <img src={search} class="usa-search__submit-icon" alt="Search" />
         </button>
       </div>
     </form>

src/styles/index.scss

@@ -16,7 +16,7 @@ $theme-hero-image: '#{$theme-image-path}/hero.png';
 // Uncomment to see this working
 // $theme-color-primary-darker: 'black';
 
-@import 'uswds';
+@import '../../node_modules/uswds/dist/scss/uswds.scss';
 
 // Your custom SASS/CSS goes here
 @media screen and (min-width: 640px) {