Merge pull request #5782 from anselmbradford/ans_update_linters

USWDS - Dependencies: Update eslint, prettier, stylelint and dependencies
uswds · May 23, 2024 · 33316d6 · 33316d6
2 parents f257168 + 8b0bb1e
commit 33316d6
Show file tree

Hide file tree

Showing 89 changed files with 2,398 additions and 2,670 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -110,7 +110,7 @@
     "resolve-id-refs": "0.1.0"
   },
   "devDependencies": {
-    "@18f/identity-stylelint-config": "2.0.0",
+    "@18f/identity-stylelint-config": "4.0.0",
     "@babel/core": "7.24.4",
     "@babel/preset-env": "7.24.4",
     "@chanzuckerberg/axe-storybook-testing": "6.3.1",
@@ -131,7 +131,7 @@
     "cross-spawn": "7.0.3",
     "css-loader": "6.8.1",
     "del": "6.0.0",
-    "eslint": "8.55.0",
+    "eslint": "8.56.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
@@ -165,7 +165,7 @@
     "postcss-import": "15.1.0",
     "postcss-loader": "7.3.3",
     "postcss-preset-env": "9.5.4",
-    "prettier": "2.8.8",
+    "prettier": "3.2.5",
     "react-dom": "17.0.2",
     "resolve-url-loader": "5.0.0",
     "sass": "1.74.1",
@@ -175,7 +175,7 @@
     "sinon": "12.0.1",
     "snyk": "1.1287.0",
     "style-loader": "3.3.3",
-    "stylelint": "15.11.0",
+    "stylelint": "16.5.0",
     "svgo": "3.2.0",
     "twig-html-loader": "0.1.9",
     "twigjs-loader": "1.0.3",

diff --git a/packages/usa-accordion/src/index.js b/packages/usa-accordion/src/index.js
@@ -94,7 +94,7 @@ const accordion = behavior(
     hide: hideButton,
     toggle: toggleButton,
     getButtons: getAccordionButtons,
-  }
+  },
 );
 
 module.exports = accordion;
diff --git a/packages/usa-banner/src/index.js b/packages/usa-banner/src/index.js
@@ -33,5 +33,5 @@ module.exports = behavior(
         toggle(button, expanded);
       });
     },
-  }
+  },
 );
diff --git a/packages/usa-character-count/src/index.js b/packages/usa-character-count/src/index.js
@@ -69,7 +69,7 @@ const createStatusMessages = (characterCountEl) => {
   statusMessage.classList.add(`${STATUS_MESSAGE_CLASS}`, "usa-hint");
   srStatusMessage.classList.add(
     `${STATUS_MESSAGE_SR_ONLY_CLASS}`,
-    "usa-sr-only"
+    "usa-sr-only",
   );
 
   statusMessage.setAttribute("aria-hidden", true);
@@ -127,11 +127,11 @@ const updateCountMessage = (inputEl) => {
   const currentLength = inputEl.value.length;
   const maxLength = parseInt(
     characterCountEl.getAttribute("data-maxlength"),
-    10
+    10,
   );
   const statusMessage = characterCountEl.querySelector(STATUS_MESSAGE);
   const srStatusMessage = characterCountEl.querySelector(
-    STATUS_MESSAGE_SR_ONLY
+    STATUS_MESSAGE_SR_ONLY,
   );
   const currentStatusMessage = getCountMessage(currentLength, maxLength);
 
@@ -191,7 +191,7 @@ const characterCount = behavior(
     createStatusMessages,
     getCountMessage,
     updateCountMessage,
-  }
+  },
 );
 
 module.exports = characterCount;
diff --git a/packages/usa-character-count/src/test/character-count.spec.js b/packages/usa-character-count/src/test/character-count.spec.js
@@ -6,7 +6,7 @@ const CharacterCount = require("../index");
 const { VALIDATION_MESSAGE, MESSAGE_INVALID_CLASS } = CharacterCount;
 
 const TEMPLATE = fs.readFileSync(
-  path.join(__dirname, "/character-count.template.html")
+  path.join(__dirname, "/character-count.template.html"),
 );
 
 const EVENTS = {};
@@ -55,21 +55,21 @@ tests.forEach(({ name, selector: containerSelector }) => {
     it("hides the requirements hint for screen readers", () => {
       assert.strictEqual(
         requirementsMessage.classList.contains("usa-sr-only"),
-        true
+        true,
       );
     });
 
     it("creates a visual status message on init", () => {
       const visibleStatus = document.querySelectorAll(
-        ".usa-character-count__status"
+        ".usa-character-count__status",
       );
 
       assert.strictEqual(visibleStatus.length, 1);
     });
 
     it("creates a screen reader status message on init", () => {
       const srStatus = document.querySelectorAll(
-        ".usa-character-count__sr-status"
+        ".usa-character-count__sr-status",
       );
 
       assert.strictEqual(srStatus.length, 1);
@@ -78,7 +78,7 @@ tests.forEach(({ name, selector: containerSelector }) => {
     it("adds initial status message for the character count component", () => {
       assert.strictEqual(
         statusMessageVisual.innerHTML,
-        "20 characters allowed"
+        "20 characters allowed",
       );
       assert.strictEqual(statusMessageSR.innerHTML, "20 characters allowed");
     });
@@ -106,7 +106,7 @@ tests.forEach(({ name, selector: containerSelector }) => {
 
       assert.strictEqual(
         statusMessageVisual.innerHTML,
-        "1 character over limit"
+        "1 character over limit",
       );
     });
 
@@ -117,7 +117,7 @@ tests.forEach(({ name, selector: containerSelector }) => {
 
       assert.strictEqual(
         statusMessageVisual.innerHTML,
-        "5 characters over limit"
+        "5 characters over limit",
       );
     });
 
@@ -129,7 +129,7 @@ tests.forEach(({ name, selector: containerSelector }) => {
       assert.strictEqual(input.validationMessage, "");
       assert.strictEqual(
         statusMessageVisual.classList.contains(MESSAGE_INVALID_CLASS),
-        false
+        false,
       );
     });
 
@@ -141,7 +141,7 @@ tests.forEach(({ name, selector: containerSelector }) => {
       assert.strictEqual(input.validationMessage, VALIDATION_MESSAGE);
       assert.strictEqual(
         statusMessageVisual.classList.contains(MESSAGE_INVALID_CLASS),
-        true
+        true,
       );
     });
 

diff --git a/packages/usa-character-count/src/test/invalid-template-no-message.spec.js b/packages/usa-character-count/src/test/invalid-template-no-message.spec.js
@@ -4,7 +4,7 @@ const assert = require("assert");
 const CharacterCount = require("../index");
 
 const INVALID_TEMPLATE_NO_MESSAGE = fs.readFileSync(
-  path.join(__dirname, "/invalid-template-no-message.template.html")
+  path.join(__dirname, "/invalid-template-no-message.template.html"),
 );
 
 const tests = [

diff --git a/packages/usa-character-count/src/test/invalid-template-no-wrapper.spec.js b/packages/usa-character-count/src/test/invalid-template-no-wrapper.spec.js
@@ -4,7 +4,7 @@ const assert = require("assert");
 const CharacterCount = require("../index");
 
 const INVALID_TEMPLATE_NO_WRAPPER = fs.readFileSync(
-  path.join(__dirname, "/invalid-template-no-wrapper.template.html")
+  path.join(__dirname, "/invalid-template-no-wrapper.template.html"),
 );
 
 const tests = [

diff --git a/packages/usa-character-count/src/test/valid-template-multiple-validators.spec.js b/packages/usa-character-count/src/test/valid-template-multiple-validators.spec.js
@@ -4,7 +4,7 @@ const assert = require("assert");
 const CharacterCount = require("../index");
 
 const TEMPLATE = fs.readFileSync(
-  path.join(__dirname, "/valid-template-multiple-validators.template.html")
+  path.join(__dirname, "/valid-template-multiple-validators.template.html"),
 );
 
 const EVENTS = {};
@@ -85,7 +85,7 @@ tests.forEach(({ name, selector: containerSelector }) => {
 
       assert.strictEqual(
         input.validationMessage,
-        CharacterCount.VALIDATION_MESSAGE
+        CharacterCount.VALIDATION_MESSAGE,
       );
 
       input.value = "abcde";

diff --git a/packages/usa-character-count/src/test/valid-template-no-maxlength.spec.js b/packages/usa-character-count/src/test/valid-template-no-maxlength.spec.js
@@ -4,7 +4,7 @@ const assert = require("assert");
 const CharacterCount = require("../index");
 
 const TEMPLATE = fs.readFileSync(
-  path.join(__dirname, "/valid-template-no-maxlength.template.html")
+  path.join(__dirname, "/valid-template-no-maxlength.template.html"),
 );
 
 const EVENTS = {};

diff --git a/packages/usa-checkbox/src/styles/_usa-checkbox.scss b/packages/usa-checkbox/src/styles/_usa-checkbox.scss
@@ -23,8 +23,9 @@
       padding: units(1.5) units(2) units(1.5) units(5);
 
       &::before {
-        left: units(5) - units($input-select-margin-right) -
-          units($theme-input-select-size);
+        left: units(5) - units($input-select-margin-right) - units(
+            $theme-input-select-size
+          );
       }
     }
   }
@@ -67,8 +68,9 @@
     margin-top: math.div(
       (
         line-height($theme-form-font-family, $theme-input-line-height) *
-          font-size($theme-form-font-family, $theme-body-font-size) -
-          units($theme-input-select-size)
+          font-size($theme-form-font-family, $theme-body-font-size) - units(
+            $theme-input-select-size
+          )
       ),
       2
     );

diff --git a/packages/usa-combo-box/src/index.js b/packages/usa-combo-box/src/index.js
@@ -199,7 +199,7 @@ const enhanceComboBox = (_comboBoxEl) => {
    */
   if (!selectLabel || !selectLabel.matches(`label[for="${selectId}"]`)) {
     throw new Error(
-      `${COMBO_BOX} for ${selectId} is either missing a label or a "for" attribute`
+      `${COMBO_BOX} for ${selectId} is either missing a label or a "for" attribute`,
     );
   } else {
     selectLabel.setAttribute("id", listIdLabel);
@@ -237,7 +237,7 @@ const enhanceComboBox = (_comboBoxEl) => {
     Object.keys(attr).forEach((key) => {
       const value = Sanitizer.escapeHTML`${attr[key]}`;
       input.setAttribute(key, value);
-    })
+    }),
   );
 
   comboBoxEl.insertAdjacentElement("beforeend", input);
@@ -264,7 +264,7 @@ const enhanceComboBox = (_comboBoxEl) => {
       <span id="${assistiveHintID}" class="usa-sr-only">
         When autocomplete results are available use up and down arrows to review and enter to select.
         Touch device users, explore by touch or with swipe gestures.
-      </span>`
+      </span>`,
   );
 
   if (selectedOption) {
@@ -453,7 +453,7 @@ const displayList = (el) => {
   if (numOptions) {
     listEl.innerHTML = "";
     optionHtml.forEach((item) =>
-      listEl.insertAdjacentElement("beforeend", item)
+      listEl.insertAdjacentElement("beforeend", item),
     );
   } else {
     listEl.innerHTML = "";
@@ -691,7 +691,7 @@ const handleEnterFromListOption = (event) => {
  */
 const handleUpFromListOption = (event) => {
   const { comboBoxEl, listEl, focusedOptionEl } = getComboBoxContext(
-    event.target
+    event.target,
   );
   const nextOptionEl = focusedOptionEl && focusedOptionEl.previousSibling;
   const listShown = !listEl.hidden;
@@ -715,7 +715,7 @@ const handleUpFromListOption = (event) => {
  */
 const handleMouseover = (listOptionEl) => {
   const isCurrentlyFocused = listOptionEl.classList.contains(
-    LIST_OPTION_FOCUSED_CLASS
+    LIST_OPTION_FOCUSED_CLASS,
   );
 
   if (isCurrentlyFocused) return;
@@ -829,7 +829,7 @@ const comboBox = behavior(
     displayList,
     hideList,
     COMBO_BOX_CLASS,
-  }
+  },
 );
 
 module.exports = comboBox;