Upgrade lb dependencies

- upgrade uswds to 2.13.3 - upgrade trussworks to 3.1.0 - fix breaking changes on Accordion, Search, SummaryBox, Collections,
2025-02-22 17:44:20 -08:00 · 2022-07-19 09:29:30 -07:00 · 2022-07-19 09:29:30 -07:00 · 49df74a28e
commit 49df74a28e
parent 8d2f3d26b1
8 changed files with 111 additions and 162 deletions
--- a/client/README.md
+++ b/client/README.md
@ -222,5 +222,5 @@ The following attemps to explain why certain packages versions have been chosen
 | gatsby     | 3.14.6          | 4.14.2         | No            | when attempting to update - breaks all unit tests. Compatibility warning come up with all plugins but this doesn't seems to effect functionality. This is the latest version we can release without investigating unit tests. |    
 | gatsby-cli | 3.14.2          | 4.15.2         | No            | when attempting to update - breaks all unit tests. Compatibility warning come up with all plugins but this doesn't seems to effect functionality. This is the latest version we can release without investigating unit tests.|  
 | sass       | 1.32.12         | 1.52.3         | No            | This version is needed to surpress the dart warnings on / as division for each component. See [here](https://github.com/twbs/bootstrap/issues/34051#issuecomment-845884423) for more information |
-| uswds      | 2.11.2          | 3.0.2          | No            | Needs to stay at 2.11 for peer dependency on trussworks|   
-| trussworks | 2.9.0           | 3.0.2          | No            | Needs to stay at 2.9 as 3.0 is breaking change |
+| uswds      | 2.13.3          | 3.0.2          | No            | Needs to stay at 2.13.3 for peer dependency on trussworks|   
+| trussworks | 3.1.0           | 3.1.0          | No            | latest! |
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -11,7 +11,7 @@
      "dependencies": {
        "-": "^0.0.1",
        "@sentry/gatsby": "^7.7.0",
-        "@trussworks/react-uswds": "^2.9.0",
+        "@trussworks/react-uswds": "^3.1.0",
        "@turf/bbox": "^6.5.0",
        "d3-ease": "^3.0.1",
        "gatsby-plugin-env-variables": "^2.2.0",
@ -27,7 +27,7 @@
        "react-intl": "^5.24.7",
        "react-map-gl": "^6.1.19",
        "react-use": "^17.3.2",
-        "uswds": "^2.11.2"
+        "uswds": "^2.13.3"
      },
      "devDependencies": {
        "@formatjs/cli": "^4.8.2",
@ -3579,16 +3579,16 @@
      }
    },
    "node_modules/@trussworks/react-uswds": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.9.0.tgz",
-      "integrity": "sha512-qv5twPgzLJulWsZew3No3W45FTp3WrYGwG/3B+w/mPFuAMHmAX7VAiigmg+k2kHFvrpjyAiKZHREpHyhkZIbig==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-3.1.0.tgz",
+      "integrity": "sha512-4krdLn8LGgr3EwOsizUF6cBLnwDS6x0WgJjjGk59kNBpgH4qiv8YGzic3HYaVr8xWBq36VpEEfGeQZnjYGMegw==",
      "engines": {
-        "node": "10.x - 16.x"
+        "node": "10.x - 18.x"
      },
      "peerDependencies": {
        "react": "^16.x || ^17.x",
        "react-dom": "^16.x || ^17.x",
-        "uswds": "2.11.2"
+        "uswds": "2.13.3"
      }
    },
    "node_modules/@trysound/sax": {
@ -6622,9 +6622,9 @@
      }
    },
    "node_modules/classlist-polyfill": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
-      "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz",
+      "integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q=="
    },
    "node_modules/clean-stack": {
      "version": "2.2.0",
@ -8877,11 +8877,6 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz",
      "integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw=="
    },
-    "node_modules/elem-dataset": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/elem-dataset/-/elem-dataset-2.0.0.tgz",
-      "integrity": "sha512-e7gieGopWw5dMdEgythH3lUS7nMizutPDTtkzfQW/q2gCvFnACyNnK3ytCncAXKxdBXQWcXeKaYTTODiMnp8mw=="
-    },
    "node_modules/element-closest": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
@ -25238,57 +25233,20 @@
      }
    },
    "node_modules/uswds": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.11.2.tgz",
-      "integrity": "sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==",
+      "version": "2.13.3",
+      "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.13.3.tgz",
+      "integrity": "sha512-qCblljeaRvS3+PrSxoHqQwmMnp746+Y1YZA34BkTzJknvo2bhhdzGE21yJaInumzIqV3glLD13TFdRwrwikMMQ==",
      "dependencies": {
-        "classlist-polyfill": "^1.0.3",
-        "del": "^6.0.0",
-        "domready": "^1.0.8",
-        "elem-dataset": "^2.0.0",
-        "object-assign": "^4.1.1",
-        "receptor": "^1.0.0",
-        "resolve-id-refs": "^0.1.0"
+        "classlist-polyfill": "1.0.3",
+        "domready": "1.0.8",
+        "object-assign": "4.1.1",
+        "receptor": "1.0.0",
+        "resolve-id-refs": "0.1.0"
      },
      "engines": {
        "node": ">= 4"
      }
    },
-    "node_modules/uswds/node_modules/del": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
-      "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
-      "dependencies": {
-        "globby": "^11.0.1",
-        "graceful-fs": "^4.2.4",
-        "is-glob": "^4.0.1",
-        "is-path-cwd": "^2.2.0",
-        "is-path-inside": "^3.0.2",
-        "p-map": "^4.0.0",
-        "rimraf": "^3.0.2",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/uswds/node_modules/p-map": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-      "dependencies": {
-        "aggregate-error": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/util": {
      "version": "0.10.4",
      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
@ -29128,9 +29086,9 @@
      "dev": true
    },
    "@trussworks/react-uswds": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.9.0.tgz",
-      "integrity": "sha512-qv5twPgzLJulWsZew3No3W45FTp3WrYGwG/3B+w/mPFuAMHmAX7VAiigmg+k2kHFvrpjyAiKZHREpHyhkZIbig==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-3.1.0.tgz",
+      "integrity": "sha512-4krdLn8LGgr3EwOsizUF6cBLnwDS6x0WgJjjGk59kNBpgH4qiv8YGzic3HYaVr8xWBq36VpEEfGeQZnjYGMegw==",
      "requires": {}
    },
    "@trysound/sax": {
@ -31616,9 +31574,9 @@
      }
    },
    "classlist-polyfill": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
-      "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz",
+      "integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q=="
    },
    "clean-stack": {
      "version": "2.2.0",
@ -33405,11 +33363,6 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz",
      "integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw=="
    },
-    "elem-dataset": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/elem-dataset/-/elem-dataset-2.0.0.tgz",
-      "integrity": "sha512-e7gieGopWw5dMdEgythH3lUS7nMizutPDTtkzfQW/q2gCvFnACyNnK3ytCncAXKxdBXQWcXeKaYTTODiMnp8mw=="
-    },
    "element-closest": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
@ -45704,42 +45657,15 @@
      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
    },
    "uswds": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.11.2.tgz",
-      "integrity": "sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==",
+      "version": "2.13.3",
+      "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.13.3.tgz",
+      "integrity": "sha512-qCblljeaRvS3+PrSxoHqQwmMnp746+Y1YZA34BkTzJknvo2bhhdzGE21yJaInumzIqV3glLD13TFdRwrwikMMQ==",
      "requires": {
-        "classlist-polyfill": "^1.0.3",
-        "del": "^6.0.0",
-        "domready": "^1.0.8",
-        "elem-dataset": "^2.0.0",
-        "object-assign": "^4.1.1",
-        "receptor": "^1.0.0",
-        "resolve-id-refs": "^0.1.0"
-      },
-      "dependencies": {
-        "del": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
-          "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
-          "requires": {
-            "globby": "^11.0.1",
-            "graceful-fs": "^4.2.4",
-            "is-glob": "^4.0.1",
-            "is-path-cwd": "^2.2.0",
-            "is-path-inside": "^3.0.2",
-            "p-map": "^4.0.0",
-            "rimraf": "^3.0.2",
-            "slash": "^3.0.0"
-          }
-        },
-        "p-map": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-          "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-          "requires": {
-            "aggregate-error": "^3.0.0"
-          }
-        }
+        "classlist-polyfill": "1.0.3",
+        "domready": "1.0.8",
+        "object-assign": "4.1.1",
+        "receptor": "1.0.0",
+        "resolve-id-refs": "0.1.0"
      }
    },
    "util": {
--- a/client/package.json
+++ b/client/package.json
@ -77,7 +77,7 @@
  "dependencies": {
    "-": "^0.0.1",
    "@sentry/gatsby": "^7.7.0",
-    "@trussworks/react-uswds": "^2.9.0",
+    "@trussworks/react-uswds": "^3.1.0",
    "@turf/bbox": "^6.5.0",
    "d3-ease": "^3.0.1",
    "gatsby-plugin-env-variables": "^2.2.0",
@ -93,7 +93,7 @@
    "react-intl": "^5.24.7",
    "react-map-gl": "^6.1.19",
    "react-use": "^17.3.2",
-    "uswds": "^2.11.2"
+    "uswds": "^2.13.3"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false
--- a/client/src/components/AreaDetail/AreaDetail.tsx
+++ b/client/src/components/AreaDetail/AreaDetail.tsx
@ -500,6 +500,15 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
  // component to render the actual Indicator
  const categoryItems = categories.map((category) => ({
    id: category.id,
+
+    /*
+    As of trussworks 3.0.0, there were some breaking changes. This new prop of headingLevel
+    is required, however, the title prop is already defining the category styling, so this
+    is placed here to satisfy the requirement of the AccordionItems API, however it's not
+    being used.
+    */
+    headingLevel: 'h4',
+
    title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />,
    content: (
      <>
--- a/client/src/components/MapSearch/snapshots/MapSearch.test.tsx.snap
+++ b/client/src/components/MapSearch/snapshots/MapSearch.test.tsx.snap
@ -31,11 +31,11 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
        data-testid="button"
        type="submit"
      >
-        <span
-          class="usa-sr-only"
-        >
-          Search
-        </span>
+        <img
+          alt="Search"
+          class="usa-search__submit-icon"
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6Ii8+PC9zdmc+"
+        />
      </button>
    </form>
  </div>
--- a/client/src/components/PublicEvent/PublicEvent.tsx
+++ b/client/src/components/PublicEvent/PublicEvent.tsx
@ -43,7 +43,7 @@ const PublicEvent = ({event}:IPublicEvent) => {
      }>

      {/* Heading */}
-      <CollectionHeading>
+      <CollectionHeading headingLevel='h3'>
        {isEventExpired ? eventName : <LinkTypeWrapper
          linkText={eventName}
          internal={false}
--- a/client/src/components/PublicVideoBox/PublicVideoBox.tsx
+++ b/client/src/components/PublicVideoBox/PublicVideoBox.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, SummaryBox} from '@trussworks/react-uswds';
+import {Button, SummaryBox, SummaryBoxContent, SummaryBoxHeading} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';

 import * as PUBLIC_COPY from '../../data/copy/publicEngage';
@ -15,52 +15,58 @@ const PublicVideoBox = () => {

  return (
    <SummaryBox
-      className={styles.publicVideoContainer}
-      heading={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.TITLE)}>
-      {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BODY)}
-      <a
-        className={styles.publicVideoLink}
-        href={`https://www.youtube.com/watch?v=QwHWcXbhw28`}
-        target={'_blank'}
-        rel="noreferrer"
-      >
-        <Button
-          type="button"
-          className={styles.youTubeBtn}
+      className={styles.publicVideoContainer}>
+
+      <SummaryBoxHeading headingLevel='h3'>
+        {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.TITLE)}
+      </SummaryBoxHeading>
+
+      <SummaryBoxContent>
+        {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BODY)}
+        <a
+          className={styles.publicVideoLink}
+          href={`https://www.youtube.com/watch?v=QwHWcXbhw28`}
+          target={'_blank'}
+          rel="noreferrer"
        >
-          <div className={styles.buttonContainer}>
-            <div className={styles.buttonText}>
-              {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON1_TEXT)}
+          <Button
+            type="button"
+            className={styles.youTubeBtn}
+          >
+            <div className={styles.buttonContainer}>
+              <div className={styles.buttonText}>
+                {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON1_TEXT)}
+              </div>
+              <img
+                className={styles.buttonImage}
+                src={launchIcon}
+                alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT1)}
+              />
            </div>
-            <img
-              className={styles.buttonImage}
-              src={launchIcon}
-              alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT1)}
-            />
-          </div>
-        </Button>
-      </a>
-      <a
-        className={styles.publicVideoLink}
-        href={`https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/technical-training-slides.pptx`}
-        download
-      >
-        <Button
-          type="button"
-          className={styles.youTubeBtn}
+          </Button>
+        </a>
+        <a
+          className={styles.publicVideoLink}
+          href={`https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/technical-training-slides.pptx`}
+          download
        >
-          <div className={styles.buttonContainer}>
-            <div className={styles.buttonText}>
-              {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON2_TEXT)}
+          <Button
+            type="button"
+            className={styles.youTubeBtn}
+          >
+            <div className={styles.buttonContainer}>
+              <div className={styles.buttonText}>
+                {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON2_TEXT)}
+              </div>
+              <img
+                className={styles.buttonImage}
+                src={fileDownloadIcon}
+                alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT2)}
+              />
            </div>
-            <img
-              className={styles.buttonImage}
-              src={fileDownloadIcon}
-              alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT2)}
-            />
-          </div>
-        </Button>
-      </a>
+          </Button>
+        </a>
+      </SummaryBoxContent>
    </SummaryBox>
  );
 };
--- a/client/src/components/RequestForInfo/RequestForInfo.tsx
+++ b/client/src/components/RequestForInfo/RequestForInfo.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import {SummaryBox} from '@trussworks/react-uswds';
+import {SummaryBox, SummaryBoxContent, SummaryBoxHeading} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';

 import * as CONTACT_COPY from '../../data/copy/contact';
@ -9,8 +9,16 @@ const RequestForInfo = () => {
  const intl = useIntl();

  return (
-    <SummaryBox className={styles.rfiBox} heading={intl.formatMessage(CONTACT_COPY.RFI_BOX.TITLE)}>
-      <p>{CONTACT_COPY.RFI_BOX_BODY}</p>
+    <SummaryBox className={styles.rfiBox}>
+
+      <SummaryBoxHeading headingLevel='h3'>
+        {intl.formatMessage(CONTACT_COPY.RFI_BOX.TITLE)}
+      </SummaryBoxHeading>
+
+      <SummaryBoxContent>
+        <p>{CONTACT_COPY.RFI_BOX_BODY}</p>
+      </SummaryBoxContent>
+
    </SummaryBox>
  );
 };