Upgrade trussworks/react-uswds v9 and uswds v3.8 (#7650)

* Upgrade trussworks/react-uswds v9 and uswds v3.8 Co-authored-by: fzhao99 <[email protected]> * Adjust styles for tooltip and buttons with icons * update snapshots * add newline for new scss file * Fix more styling for button w/ icon * Fix disabled input style --------- Co-authored-by: fzhao99 <[email protected]>
CDCgov · May 7, 2024 · 9714147 · 9714147
1 parent 5a4880a
commit 9714147
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 58 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,12 +15,12 @@
     "@szhsin/react-menu": "^4.1.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@trussworks/react-uswds": "5.1.1",
+    "@trussworks/react-uswds": "9.0.0",
     "@types/google-libphonenumber": "^7.4.23",
     "@types/history": "^4.7.10",
     "@types/react-transition-group": "^4.4.5",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@uswds/uswds": "3.1.0",
+    "@uswds/uswds": "^3.8.0",
     "apollo-upload-client": "^17.0.0",
     "browserslist": "4.21.10",
     "classnames": "^2.2.6",
@@ -209,6 +209,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.2.0",
     "eslint-plugin-unused-imports": "3.1.0",
+    "focus-trap-react": "^10.2.3",
     "jest": "29.7.0",
     "jest-axe": "^8.0.0",
     "jest-fetch-mock": "^3.0.3",

diff --git a/frontend/src/app/Settings/ManageSelfRegistrationLinks.scss b/frontend/src/app/Settings/ManageSelfRegistrationLinks.scss
@@ -10,8 +10,9 @@
   }
 
   .sr-organization-link-copy-button {
-    width: 100%;
     border-radius: 0 0 4px 4px;
+    column-gap: 0;
+    width: 100%;
   }
 
   @media (min-width: 480px) {

diff --git a/frontend/src/app/commonComponents/ComboBox.tsx b/frontend/src/app/commonComponents/ComboBox.tsx
@@ -1,5 +1,9 @@
-import { ComboBox as TrussComboBox, Label } from "@trussworks/react-uswds";
-import React, { ComponentPropsWithRef, forwardRef } from "react";
+import {
+  ComboBox as TrussComboBox,
+  ComboBoxRef,
+  Label,
+} from "@trussworks/react-uswds";
+import React, { ComponentPropsWithRef, forwardRef, RefAttributes } from "react";
 
 import Required from "./Required";
 
@@ -8,9 +12,11 @@ export type ComboBoxProps = TrussComponentProps & {
   required?: boolean;
 };
 
+type ComboBoxRefProps = Omit<ComboBoxProps, "ref"> & RefAttributes<ComboBoxRef>;
+
 // props here are only the required ones from Truss and can be extended
 // as needed with additional values.
-const ComboBox: React.FC<ComboBoxProps> = forwardRef(function (
+const ComboBox: React.FC<ComboBoxRefProps> = forwardRef(function (
   { id, name, required, options, onChange, disabled }: ComboBoxProps,
   ref
 ) {

diff --git a/frontend/src/app/commonComponents/TextWithTooltip.scss b/frontend/src/app/commonComponents/TextWithTooltip.scss
@@ -15,10 +15,6 @@
     padding: 1em;
   }
 
-  .info-circle-icon {
-    margin-left: 5px;
-  }
-
   svg {
     color: #005ea2;
     display: inline-block !important;

diff --git a/frontend/src/app/patients/Components/ManageEmails.tsx b/frontend/src/app/patients/Components/ManageEmails.tsx
@@ -169,7 +169,7 @@ const ManageEmails: React.FC<Props> = ({
         </div>
       ))}
       <Button
-        className="margin-top-2"
+        className="margin-top-2 sr-add-another-button"
         onClick={onAddEmail}
         variant="unstyled"
         label={t("patient.form.contact.addEmail")}

diff --git a/frontend/src/app/patients/Components/ManagePhoneNumbers.tsx b/frontend/src/app/patients/Components/ManagePhoneNumbers.tsx
@@ -293,7 +293,7 @@ const ManagePhoneNumbers: React.FC<Props> = ({
         <div>
           {generatePhoneNumberRows()}
           <Button
-            className="margin-top-2"
+            className="margin-top-2 sr-add-another-button"
             onClick={onAddPhoneNumber}
             variant="unstyled"
             label={t("patient.form.contact.addNumber")}

diff --git a/frontend/src/app/patients/Components/PersonForm.scss b/frontend/src/app/patients/Components/PersonForm.scss
@@ -1,8 +1,14 @@
-.sr-patient-sub-header {
-  font-weight: bold;
-  display: block;
-  margin-block-start: 1.33em;
-  margin-block-end: 1.33em;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
+.prime-edit-patient {
+  .sr-add-another-button {
+    column-gap: 0;
+  }
+
+  .sr-patient-sub-header {
+    font-weight: bold;
+    display: block;
+    margin-block-start: 1.33em;
+    margin-block-end: 1.33em;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
 }
diff --git a/frontend/src/app/patients/__snapshots__/EditPatient.test.tsx.snap b/frontend/src/app/patients/__snapshots__/EditPatient.test.tsx.snap
@@ -2094,7 +2094,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                     </div>
                   </div>
                   <button
-                    class="usa-button usa-button--unstyled margin-top-2"
+                    class="usa-button usa-button--unstyled margin-top-2 sr-add-another-button"
                     id="add-phone-number-btn"
                     type="button"
                   >
@@ -2213,7 +2213,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                     </div>
                   </div>
                   <button
-                    class="usa-button usa-button--unstyled margin-top-2"
+                    class="usa-button usa-button--unstyled margin-top-2 sr-add-another-button"
                     id="add-email-btn"
                     type="button"
                   >

diff --git a/frontend/src/app/signUp/IdentityVerification/NextSteps.tsx b/frontend/src/app/signUp/IdentityVerification/NextSteps.tsx
@@ -21,7 +21,7 @@ const NextSteps = () => {
           verified.
         </p>
         <a
-          className="usa-button width-full margin-top-3"
+          className="usa-button width-full margin-top-3 display-block"
           href="https://calendly.com/simplereport-id-verification-sessions/simplereport-id-verification-sessions?back=1&month=2022-05"
         >
           Schedule identity verification

diff --git a/...testResults/viewResults/actionMenuModals/__snapshots__/TestResultPrintModal.test.tsx.snap b/...testResults/viewResults/actionMenuModals/__snapshots__/TestResultPrintModal.test.tsx.snap
@@ -12,7 +12,7 @@ Object {
           lang="es"
         >
           <button
-            class="usa-button usa-button--unstyled"
+            class="usa-button sr-language-toggler usa-button--unstyled"
             type="button"
           >
             <svg
@@ -289,7 +289,7 @@ Object {
         lang="es"
       >
         <button
-          class="usa-button usa-button--unstyled"
+          class="usa-button sr-language-toggler usa-button--unstyled"
           type="button"
         >
           <svg
@@ -623,7 +623,7 @@ Object {
           lang="es"
         >
           <button
-            class="usa-button usa-button--unstyled"
+            class="usa-button sr-language-toggler usa-button--unstyled"
             type="button"
           >
             <svg
@@ -968,7 +968,7 @@ Object {
         lang="es"
       >
         <button
-          class="usa-button usa-button--unstyled"
+          class="usa-button sr-language-toggler usa-button--unstyled"
           type="button"
         >
           <svg
@@ -1370,7 +1370,7 @@ Object {
           lang="es"
         >
           <button
-            class="usa-button usa-button--unstyled"
+            class="usa-button sr-language-toggler usa-button--unstyled"
             type="button"
           >
             <svg
@@ -1726,7 +1726,7 @@ your local health department.
         lang="es"
       >
         <button
-          class="usa-button usa-button--unstyled"
+          class="usa-button sr-language-toggler usa-button--unstyled"
           type="button"
         >
           <svg
@@ -2139,7 +2139,7 @@ Object {
           lang="es"
         >
           <button
-            class="usa-button usa-button--unstyled"
+            class="usa-button sr-language-toggler usa-button--unstyled"
             type="button"
           >
             <svg
@@ -2545,7 +2545,7 @@ Object {
         lang="es"
       >
         <button
-          class="usa-button usa-button--unstyled"
+          class="usa-button sr-language-toggler usa-button--unstyled"
           type="button"
         >
           <svg
@@ -3005,7 +3005,7 @@ exports[`TestResultPrintModal with only COVID results matches screenshot 1`] = `
       lang="es"
     >
       <button
-        class="usa-button usa-button--unstyled"
+        class="usa-button sr-language-toggler usa-button--unstyled"
         type="button"
       >
         <svg

diff --git a/frontend/src/patientApp/LanguageToggler.scss b/frontend/src/patientApp/LanguageToggler.scss
@@ -0,0 +1,5 @@
+.sr-language-toggler {
+  &.usa-button--unstyled {
+    column-gap: 0;
+  }
+}
diff --git a/frontend/src/patientApp/LanguageToggler.tsx b/frontend/src/patientApp/LanguageToggler.tsx
@@ -1,13 +1,14 @@
 import Button from "../app/commonComponents/Button/Button";
 import i18n from "../i18n";
 import { setLanguage } from "../app/utils/languages";
+import "./LanguageToggler.scss";
 
 export default function LanguageToggler() {
   return (
     <div lang={i18n.language === "en" ? "es" : "en"}>
       <Button
         icon={"globe"}
-        className="usa-button--unstyled"
+        className="sr-language-toggler usa-button--unstyled"
         onClick={() => {
           const displayLanguage = i18n.language === "en" ? "es" : "en";
           setLanguage(displayLanguage);

diff --git a/frontend/src/scss/base/_prime-styles.scss b/frontend/src/scss/base/_prime-styles.scss
@@ -1133,13 +1133,6 @@ $results-dropdown-spacing: #{units(4)} - #{units(2)} - 22px - #{units(4)}; // he
   border: 2px solid #dfe1e2;
 }
 
-.usa-checkbox__input:disabled + .usa-checkbox__label::before,
-.usa-radio__input:disabled + .usa-radio__label::before {
-  background: #e6e6e6;
-  box-shadow: 0 0 0 2px #c9c9c9;
-  cursor: not-allowed;
-}
-
 .sr-element__sr-only {
   position: absolute;
   width: 1px;

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -4648,10 +4648,10 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
-"@trussworks/react-uswds@5.1.1":
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/@trussworks/react-uswds/-/react-uswds-5.1.1.tgz#77b536132adf0e893c0738f4e7db5012af6130e2"
-  integrity sha512-SAlgEIFGCIKyV5aQjIi8dBUwLGdqNkbDHDvXPPWyySlhJkut5MNmZQ73BpFTxke6WqJreljkApPubMWUPiynlw==
+"@trussworks/react-uswds@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@trussworks/react-uswds/-/react-uswds-9.0.0.tgz#640d798e3fe99a03caf8c2442ef17eb7e1f88408"
+  integrity sha512-zAUuQf6QYZFqS6321F/mFHgFSTz7Fi5VFdxcwel7mv2gFdIry6+sJOu7gzaXTZLxaWXArMfH/36uzzicOjyhfQ==
 
 "@trysound/[email protected]":
   version "0.2.0"
@@ -5595,13 +5595,12 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@uswds/uswds@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@uswds/uswds/-/uswds-3.1.0.tgz#764d6053ea6d2a3b80bd4023d408f726608a2a97"
-  integrity sha512-6XTeaQD/ipc3x4713mud4Rrr+lRc4nJ1Qw5Oy35dbVEXuKr7DjN4EBoAkbze9OoV0UdmAIvoxolBF/UcpFVKOg==
+"@uswds/uswds@^3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@uswds/uswds/-/uswds-3.8.0.tgz#dba0b0b38182053779276f9ae6809474bd31d548"
+  integrity sha512-rMwCXe/u4HGkfskvS1Iuabapi/EXku3ChaIFW7y/dUhc7R1TXQhbbfp8YXEjmXPF0yqJnv9T08WPgS0fQqWZ8w==
   dependencies:
-    classlist-polyfill "1.0.3"
-    domready "1.0.8"
+    classlist-polyfill "1.2.0"
     object-assign "4.1.1"
     receptor "1.0.0"
     resolve-id-refs "0.1.0"
@@ -7308,10 +7307,10 @@ cjs-module-lexer@^1.2.3:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
-classlist-polyfill@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz#7cd5a9207c8d6932f592fdeaa6b45352ed71690d"
-  integrity sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q==
+classlist-polyfill@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
+  integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==
 
 classnames@*, classnames@^2.2.6:
   version "2.3.2"
@@ -8417,11 +8416,6 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-[email protected]:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
-  integrity sha512-uIzsOJUNk+AdGE9a6VDeessoMCzF8RrZvJCX/W8QtyfgdR6Uofn/MvRonih3OtCO79b2VDzDOymuiABrQ4z3XA==
-
 domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@@ -9543,6 +9537,21 @@ flow-parser@0.*:
   resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.218.0.tgz#ec2e446b00eba373c661b4f5ccd9705996278c0a"
   integrity sha512-mk4e7UK4P/W3tjrJyto6oxPuCjwvRMyzBh72hTl8T0dOcTzkP0M2JJHpncgyhKphMFi9pnjwHfc8e0oe4Uk3LA==
 
+focus-trap-react@^10.2.3:
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.2.3.tgz#a5a2ea7fbb042ffa4337fde72758325ed0fb793a"
+  integrity sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==
+  dependencies:
+    focus-trap "^7.5.4"
+    tabbable "^6.2.0"
+
+focus-trap@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.4.tgz#6c4e342fe1dae6add9c2aa332a6e7a0bbd495ba2"
+  integrity sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==
+  dependencies:
+    tabbable "^6.2.0"
+
 follow-redirects@^1.0.0, follow-redirects@^1.14.8:
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
@@ -16269,6 +16278,11 @@ [email protected]:
     buffer "^5.7.0"
     node-fetch "^2.6.1"
 
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 table@^6.6.0:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"