From 03939b524a6d5931721c396f110d94eb5bdd9cd9 Mon Sep 17 00:00:00 2001
From: Leo Singer <leo.singer@ligo.org>
Date: Mon, 27 May 2024 17:46:25 -0400
Subject: [PATCH] Return to stable uswds and nasawds releases

- https://github.com/uswds/uswds/issues/5825 has been fixed.
- https://github.com/lpsinger/react-uswds/tree/gcn is the same as
  https://github.com/trussworks/react-uswds/pull/2726, but rebased.
- I had to update some CSS where we have heavily customized the
  appearance of some USWDS components.
---
 app/components/CredentialCard.tsx             | 53 ++++++++-------
 app/components/tabs/index.module.scss         |  5 ++
 app/img/checkbox-indeterminate.svg            | 10 ---
 .../route.tsx                                 |  9 ++-
 .../DateSelectorMenu.tsx                      |  7 +-
 .../SortSelectorButton.tsx                    |  7 +-
 .../circulars._archive._index/route.tsx       |  6 +-
 .../RichEditor/index.tsx                      |  2 +-
 app/theme.scss                                | 25 -------
 package-lock.json                             | 66 +++++++++++++++----
 package.json                                  |  4 +-
 11 files changed, 108 insertions(+), 86 deletions(-)
 delete mode 100644 app/img/checkbox-indeterminate.svg

diff --git a/app/components/CredentialCard.tsx b/app/components/CredentialCard.tsx
index a27d7960f4..b296e5d304 100644
--- a/app/components/CredentialCard.tsx
+++ b/app/components/CredentialCard.tsx
@@ -9,6 +9,7 @@ import { Form, useFetcher } from '@remix-run/react'
 import type { ModalRef } from '@trussworks/react-uswds'
 import {
   Button,
+  ButtonGroup,
   Grid,
   Icon,
   Modal,
@@ -54,33 +55,35 @@ export default function CredentialCard({
           </div>
         </div>
         <div className="tablet:grid-col flex-auto margin-y-auto">
-          <ModalToggleButton
-            opener
-            disabled={disabled}
-            modalRef={ref}
-            type="button"
-            className="usa-button--secondary"
-          >
-            <Icon.Delete
-              role="presentation"
-              className="bottom-aligned margin-right-05"
-            />
-            Delete
-          </ModalToggleButton>
-          <Form
-            method="GET"
-            action="/quickstart/alerts"
-            className="display-inline"
-          >
-            <input type="hidden" name="clientId" value={client_id} />
-            <Button disabled={disabled} type="submit">
-              Select
-              <Icon.ArrowForward
+          <ButtonGroup>
+            <ModalToggleButton
+              opener
+              disabled={disabled}
+              modalRef={ref}
+              type="button"
+              className="usa-button--secondary"
+            >
+              <Icon.Delete
                 role="presentation"
-                className="bottom-aligned margin-left-05"
+                className="bottom-aligned margin-right-05"
               />
-            </Button>
-          </Form>
+              Delete
+            </ModalToggleButton>
+            <Form
+              method="GET"
+              action="/quickstart/alerts"
+              className="display-inline"
+            >
+              <input type="hidden" name="clientId" value={client_id} />
+              <Button disabled={disabled} type="submit">
+                Select
+                <Icon.ArrowForward
+                  role="presentation"
+                  className="bottom-aligned margin-left-05"
+                />
+              </Button>
+            </Form>
+          </ButtonGroup>
         </div>
       </Grid>
       <Modal
diff --git a/app/components/tabs/index.module.scss b/app/components/tabs/index.module.scss
index 7f3fa6a34d..b48b8b8358 100644
--- a/app/components/tabs/index.module.scss
+++ b/app/components/tabs/index.module.scss
@@ -7,6 +7,11 @@
  */
 
 .tabs {
+  &,
+  & :global(.usa-button-group.usa-button-group--segmented) {
+    align-items: end;
+  }
+
   :global(.usa-button-group__item) {
     :global(.usa-button) {
       box-shadow: 0px 0px 0px 0px;
diff --git a/app/img/checkbox-indeterminate.svg b/app/img/checkbox-indeterminate.svg
deleted file mode 100644
index 9c11529839..0000000000
--- a/app/img/checkbox-indeterminate.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-</style>
-<path class="st0" d="M2.9,35.9c0,1.1,0.4,2,1.2,2.8c0.8,0.8,1.7,1.2,2.8,1.2h7.9h42.3c1.1,0,2-0.4,2.8-1.2s1.2-1.7,1.2-2.8l0,0V28
-	c0-1.1-0.4-2-1.2-2.8S58.2,24,57.1,24H6.9c-1.1,0-2,0.4-2.8,1.2S2.9,26.9,2.9,28V35.9z"/>
-</svg>
diff --git a/app/routes/circulars.$circularId.($version)/route.tsx b/app/routes/circulars.$circularId.($version)/route.tsx
index 5e8922f2d0..e6f77721c7 100644
--- a/app/routes/circulars.$circularId.($version)/route.tsx
+++ b/app/routes/circulars.$circularId.($version)/route.tsx
@@ -72,8 +72,11 @@ export default function () {
   }`
   return (
     <>
-      <ButtonGroup>
-        <Link to={`/circulars${searchString}`} className="usa-button">
+      <ButtonGroup className="flex-wrap">
+        <Link
+          to={`/circulars${searchString}`}
+          className="usa-button flex-align-stretch"
+        >
           <div className="position-relative">
             <Icon.ArrowBack
               role="presentation"
@@ -118,7 +121,7 @@ export default function () {
         </ButtonGroup>
         {useSubmitterStatus() && (
           <Link
-            className="usa-button usa-button--outline"
+            className="usa-button usa-button--outline text-no-wrap"
             to={`/circulars/correction/${circularId}`}
           >
             Request Correction
diff --git a/app/routes/circulars._archive._index/DateSelectorMenu.tsx b/app/routes/circulars._archive._index/DateSelectorMenu.tsx
index c18d76f5a9..cc3fa1ba3d 100644
--- a/app/routes/circulars._archive._index/DateSelectorMenu.tsx
+++ b/app/routes/circulars._archive._index/DateSelectorMenu.tsx
@@ -42,11 +42,14 @@ function DateSelectorButton({
   endDate?: string
   expanded?: boolean
 } & Omit<Parameters<typeof ButtonGroup>[0], 'segmented' | 'children'>) {
-  const slimClasses = 'height-4 padding-y-0'
+  const slimClasses = 'padding-y-1'
 
   return (
     <ButtonGroup type="segmented" {...props}>
-      <Button type="button" className={`${slimClasses} padding-x-2`}>
+      <Button
+        type="button"
+        className={`${slimClasses} text-no-wrap padding-x-2`}
+      >
         {(startDate && dateSelectorLabels[startDate]) ||
           (startDate && endDate && (
             <>
diff --git a/app/routes/circulars._archive._index/SortSelectorButton.tsx b/app/routes/circulars._archive._index/SortSelectorButton.tsx
index 9f26823ad4..12c01664d8 100644
--- a/app/routes/circulars._archive._index/SortSelectorButton.tsx
+++ b/app/routes/circulars._archive._index/SortSelectorButton.tsx
@@ -31,11 +31,14 @@ function SortButton({
   sort?: string
   expanded?: boolean
 } & Omit<Parameters<typeof ButtonGroup>[0], 'segmented' | 'children'>) {
-  const slimClasses = 'height-4 padding-y-0'
+  const slimClasses = 'padding-y-1'
 
   return (
     <ButtonGroup type="segmented" {...props}>
-      <Button type="button" className={`${slimClasses} padding-x-2`}>
+      <Button
+        type="button"
+        className={`${slimClasses} text-no-wrap padding-x-2`}
+      >
         Sort by{' '}
         {sortOptions[sort as keyof typeof sortOptions] ||
           sortOptions.circularID}
diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx
index 8d2a3a6e0f..9de9a0493b 100644
--- a/app/routes/circulars._archive._index/route.tsx
+++ b/app/routes/circulars._archive._index/route.tsx
@@ -197,6 +197,7 @@ export default function () {
           </Label>
           <TextInput
             autoFocus
+            className="minw-15"
             id="query"
             name="query"
             type="search"
@@ -223,10 +224,7 @@ export default function () {
         />
         {query && <SortSelector form={formId} defaultValue={sort} />}
         <Link to={`/circulars/new${searchString}`}>
-          <Button
-            type="button"
-            className="height-4 padding-top-0 padding-bottom-0"
-          >
+          <Button type="button" className="padding-y-1">
             <Icon.Edit role="presentation" /> New
           </Button>
         </Link>
diff --git a/app/routes/circulars.edit.$circularId/RichEditor/index.tsx b/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
index 7f6aeb9612..6d959849f5 100644
--- a/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
+++ b/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
@@ -44,7 +44,7 @@ import iconTable from '@gitlab/svgs/dist/sprite_icons/table.svg'
 function SlimButton({ className, ...props }: Parameters<typeof Button>[0]) {
   return (
     <Button
-      className={classNames(className, 'height-4 padding-y-0 padding-x-105')}
+      className={classNames(className, 'height-4 padding-y-1 padding-x-105')}
       {...props}
     />
   )
diff --git a/app/theme.scss b/app/theme.scss
index 90b9beb9d9..c7bb21afd1 100644
--- a/app/theme.scss
+++ b/app/theme.scss
@@ -283,31 +283,6 @@ input.react-tags__combobox-input:focus {
   font-weight: bold;
 }
 
-/*
- * Indeterminate checkboxes.
- * FIXME: remove if/when https://github.com/uswds/uswds/pull/5549 is merged
- */
-
-.usa-checkbox__input:indeterminate {
-  &:not(:disabled) {
-    @include format-input {
-      @include add-background-svg('checkbox-indeterminate', '~/img');
-      background-size: 75%;
-      background-position: center;
-      background-color: #0050d8;
-      box-shadow: 0 0 0 2px #0050d8;
-    }
-  }
-  &:disabled {
-    @include format-input {
-      @include add-background-svg('checkbox-indeterminate', '~/img');
-      background-size: 75%;
-      background-position: center;
-      background-color: rgba(27, 27, 27, 0.3);
-    }
-  }
-}
-
 /*
  * Hero formatting
  */
diff --git a/package-lock.json b/package-lock.json
index 01fc44adde..c20ddc40d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@remix-run/css-bundle": "^2.8.1",
         "@remix-run/node": "^2.8.1",
         "@remix-run/react": "^2.8.1",
-        "@trussworks/react-uswds": "github:lpsinger/react-uswds#dateFormat",
+        "@trussworks/react-uswds": "github:lpsinger/react-uswds#gcn",
         "@xmldom/xmldom": "^0.8.10",
         "aws-lambda-ses-forwarder": "github:lpsinger/aws-lambda-ses-forwarder#aws-sdk-v3",
         "classnames": "^2.5.1",
@@ -112,7 +112,7 @@
         "jest-transform-stub": "^2.0.0",
         "lint-staged": "^15.2.2",
         "lowlight": "^3.0.0",
-        "nasawds": "^4.0.2-beta.1",
+        "nasawds": "^4.0.63",
         "npm-run-all": "^4.1.5",
         "oidc-provider": "^8.4.3",
         "postcss-csso": "^6.0.1",
@@ -9141,14 +9141,15 @@
       }
     },
     "node_modules/@trussworks/react-uswds": {
-      "version": "6.2.0",
-      "resolved": "git+ssh://git@github.com/lpsinger/react-uswds.git#03b023640a08afaf246873665a2f5ca5433b8056",
+      "version": "9.0.0",
+      "resolved": "git+ssh://git@github.com/lpsinger/react-uswds.git#58e47925d5a213e291302c272b7375b7460d28f5",
       "license": "Apache-2.0",
       "engines": {
-        "node": ">= 16.20.0"
+        "node": ">= 18"
       },
       "peerDependencies": {
         "@uswds/uswds": "^3.7.1",
+        "focus-trap-react": "^10.2.3",
         "react": "^16.x || ^17.x || ^18.x",
         "react-dom": "^16.x || ^17.x || ^18.x"
       }
@@ -9785,9 +9786,10 @@
       "dev": true
     },
     "node_modules/@uswds/uswds": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.7.1.tgz",
-      "integrity": "sha512-32u2S50bf5dwIujebqL+f1Jgx2rmRrpxcaccSZzdo3Qv9HaDUdcmeavlrxHqN30edHc7p8kRPjvjevOmOJKB7w==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.8.0.tgz",
+      "integrity": "sha512-rMwCXe/u4HGkfskvS1Iuabapi/EXku3ChaIFW7y/dUhc7R1TXQhbbfp8YXEjmXPF0yqJnv9T08WPgS0fQqWZ8w==",
+      "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
         "classlist-polyfill": "1.2.0",
@@ -11463,6 +11465,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
       "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
+      "license": "Unlicense",
       "peer": true
     },
     "node_modules/classnames": {
@@ -12813,6 +12816,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
       "integrity": "sha512-QCqAWP3kwj8Gz9UXncVXQGdrhnWxD8SQBSeZp5pOsyCcQ6RpL738L1/tfuwBiMi6F1fYkxqPnBrFBR4L+f49Cg==",
+      "license": "CC0-1.0",
       "peer": true,
       "engines": {
         "node": ">=4.0.0"
@@ -14569,6 +14573,32 @@
       "integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
       "dev": true
     },
+    "node_modules/focus-trap": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+      "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
+    "node_modules/focus-trap-react": {
+      "version": "10.2.3",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.2.3.tgz",
+      "integrity": "sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "focus-trap": "^7.5.4",
+        "tabbable": "^6.2.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.8.1",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -18129,6 +18159,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keyboardevent-key-polyfill/-/keyboardevent-key-polyfill-1.1.0.tgz",
       "integrity": "sha512-NTDqo7XhzL1fqmUzYroiyK2qGua7sOMzLav35BfNA/mPUSCtw8pZghHFMTYR9JdnJ23IQz695FcaM6EE6bpbFQ==",
+      "license": "CC0-1.0",
       "peer": true
     },
     "node_modules/keygrip": {
@@ -19336,6 +19367,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.2.0.tgz",
       "integrity": "sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/mdast-util-definitions": {
@@ -20840,10 +20872,11 @@
       "optional": true
     },
     "node_modules/nasawds": {
-      "version": "4.0.2-beta.1",
-      "resolved": "https://registry.npmjs.org/nasawds/-/nasawds-4.0.2-beta.1.tgz",
-      "integrity": "sha512-iLfAarVN3Q4UdG2Chfl6Ay1qoq2QPeGWupaFXf+7UO3Uaaqxihl6T2jn+/gofPckg5RN9vrx3aVlfRjStA+b5w==",
-      "dev": true
+      "version": "4.0.63",
+      "resolved": "https://registry.npmjs.org/nasawds/-/nasawds-4.0.63.tgz",
+      "integrity": "sha512-3nZn1ZZuTGteaiuDB0E56EEk0c9OmbSgZsUkNIE6/lGz7a7ebvzmptgow1KXBBjjGykLZx/jf1aUhyuvC10QSg==",
+      "dev": true,
+      "license": "CC0-1.0"
     },
     "node_modules/natural-compare": {
       "version": "1.4.0",
@@ -22806,6 +22839,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/receptor/-/receptor-1.0.0.tgz",
       "integrity": "sha512-yvVEqVQDNzEmGkluCkEdbKSXqZb3WGxotI/VukXIQ+4/BXEeXVjWtmC6jWaR1BIsmEAGYQy3OTaNgDj2Svr01w==",
+      "license": "CC0-1.0",
       "peer": true,
       "dependencies": {
         "element-closest": "^2.0.1",
@@ -23544,6 +23578,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/resolve-id-refs/-/resolve-id-refs-0.1.0.tgz",
       "integrity": "sha512-hNS03NEmVpJheF7yfyagNh57XuKc0z+NkSO0oBbeO67o6IJKoqlDfnNIxhjp7aTWwjmSWZQhtiGrOgZXVyM90w==",
+      "license": "CC0-1.0",
       "peer": true
     },
     "node_modules/resolve-pkg-maps": {
@@ -24919,6 +24954,13 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index 853fa2cff6..6617e5ecaa 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@remix-run/css-bundle": "^2.8.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@trussworks/react-uswds": "github:lpsinger/react-uswds#dateFormat",
+    "@trussworks/react-uswds": "github:lpsinger/react-uswds#gcn",
     "@xmldom/xmldom": "^0.8.10",
     "aws-lambda-ses-forwarder": "github:lpsinger/aws-lambda-ses-forwarder#aws-sdk-v3",
     "classnames": "^2.5.1",
@@ -130,7 +130,7 @@
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^15.2.2",
     "lowlight": "^3.0.0",
-    "nasawds": "^4.0.2-beta.1",
+    "nasawds": "^4.0.63",
     "npm-run-all": "^4.1.5",
     "oidc-provider": "^8.4.3",
     "postcss-csso": "^6.0.1",