Merge pull request #5944 from uswds/release-3.8.1

USWDS 3.8.1

.tool-versions

@@ -1 +1 @@
-nodejs 20.9.0
+nodejs 20.13.1

README.md

@@ -165,7 +165,7 @@ There are two ways to install the design system on a project:
 **We recommend using npm to make it as straightforward as possible to install the design system and update it as we release new versions.**
 
 ### Install using Node and npm
-npm is a package manager for Node-based projects. USWDS maintains the [`@uswds/uswds` package](https://www.npmjs.com/package/uswds) that includes both the pre-compiled and compiled files. npm packages make it easy to update and install the design system from the command line.
+Use the npm package manager for Node-based projects. USWDS maintains the [`@uswds/uswds` package](https://www.npmjs.com/package/uswds) that includes both the pre-compiled and compiled files. We rely on npm packages to easily update and install the design system from the command line.
 
 1. Install `Node/npm`. Below is a link to find the install method that coincides with your operating system:
 
@@ -214,6 +214,11 @@ If you’re using a framework or package manager that doesn’t support npm, you
 
    You'll notice in our example above that we also outline a `stylesheets`, `images` and `javascript` folder in your `assets` folder. These folders are to help organize any assets that are unique to your project and separate from the design system assets.
 
+    <!-- 
+      This note also exists on the USWDS Site download page, which is maintained in the USWDS-Site repo. 
+      If any changes are made, make sure to update there as well. 
+    -->
+    **Note:** Files in the downloadable USWDS package will show a "last modified" date of October 26, 1985. This is [intentional](https://github.com/npm/npm/issues/20439#issuecomment-385121133). This default date is set by npm on all its packages to ensure builds will be identical.
 
 ## Using USWDS CSS and JavaScript in your project
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uswds/uswds",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "description": "Open source UI components and visual style guide for U.S. government websites",
   "engines": {
     "node": ">= 4"
@@ -110,9 +110,9 @@
     "resolve-id-refs": "0.1.0"
   },
   "devDependencies": {
-    "@18f/identity-stylelint-config": "2.0.0",
-    "@babel/core": "7.23.6",
-    "@babel/preset-env": "7.23.6",
+    "@18f/identity-stylelint-config": "4.0.0",
+    "@babel/core": "7.24.5",
+    "@babel/preset-env": "7.24.5",
     "@chanzuckerberg/axe-storybook-testing": "6.3.1",
     "@material-design-icons/svg": "0.14.13",
     "@storybook/addon-a11y": "6.5.16",
@@ -121,20 +121,20 @@
     "@storybook/builder-webpack5": "6.5.16",
     "@storybook/html": "6.5.16",
     "@storybook/manager-webpack5": "6.5.16",
-    "@types/node": "20.10.4",
+    "@types/node": "20.12.11",
     "ansi-colors": "4.1.3",
-    "autoprefixer": "10.4.16",
-    "axe-core": "4.8.2",
+    "autoprefixer": "10.4.19",
+    "axe-core": "4.9.1",
     "babel-loader": "9.1.3",
     "babelify": "10.0.0",
     "browserify": "17.0.0",
     "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.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-no-unsanitized": "4.0.2",
     "fancy-log": "2.0.0",
     "file-loader": "6.2.0",
@@ -150,39 +150,39 @@
     "gulp-sourcemaps": "3.0.0",
     "gulp-svgstore": "9.0.0",
     "gulp-uglify": "3.0.2",
-    "html-webpack-plugin": "5.5.4",
+    "html-webpack-plugin": "5.6.0",
     "jsdom": "22.1.0",
     "jsdom-global": "3.0.2",
     "lodash.merge": "4.6.2",
     "merge-stream": "2.0.0",
-    "mocha": "10.2.0",
+    "mocha": "10.4.0",
     "mq-polyfill": "1.1.8",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
-    "postcss": "8.4.32",
+    "postcss": "8.4.38",
     "postcss-csso": "6.0.1",
-    "postcss-discard-comments": "6.0.0",
+    "postcss-discard-comments": "6.0.2",
     "postcss-import": "15.1.0",
     "postcss-loader": "7.3.3",
-    "postcss-preset-env": "9.3.0",
-    "prettier": "2.8.8",
+    "postcss-preset-env": "9.5.11",
+    "prettier": "3.2.5",
     "react-dom": "17.0.2",
     "resolve-url-loader": "5.0.0",
-    "sass": "1.69.5",
-    "sass-embedded": "1.69.5",
+    "sass": "1.77.0",
+    "sass-embedded": "1.77.0",
     "sass-loader": "13.3.2",
     "sass-true": "6.0.1",
     "sinon": "12.0.1",
-    "snyk": "1.1262.0",
+    "snyk": "1.1291.0",
     "style-loader": "3.3.3",
-    "stylelint": "15.11.0",
-    "svgo": "3.1.0",
+    "stylelint": "16.5.0",
+    "svgo": "3.3.2",
     "twig-html-loader": "0.1.9",
     "twigjs-loader": "1.0.3",
-    "typescript": "5.3.3",
+    "typescript": "5.4.5",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
-    "webpack": "5.89.0",
+    "webpack": "5.91.0",
     "webpack-cli": "5.1.4"
   }
 }

packages/templates/usa-base/includes/_identifier.twig

@@ -5,7 +5,8 @@
     'masthead': {
       'aria_label': 'Agency identifier',
       'description': 'Agency description',
-      'content': 'An official website of the',
+      'content_prefix': 'An',
+      'content': 'official website of the',
       'parent': {
         'name': '<Parent agency>',
         'shortname': '<Parent shortname>',

packages/usa-accordion/src/index.js

@@ -94,7 +94,7 @@ const accordion = behavior(
     hide: hideButton,
     toggle: toggleButton,
     getButtons: getAccordionButtons,
-  }
+  },
 );
 
 module.exports = accordion;

packages/usa-banner/src/index.js

@@ -33,5 +33,5 @@ module.exports = behavior(
         toggle(button, expanded);
       });
     },
-  }
+  },
 );

packages/usa-button-group/src/styles/_usa-button-group.scss

@@ -18,6 +18,26 @@
     align-items: stretch;
     flex-direction: row;
   }
+
+  // Styles for nested button groups
+  .usa-button-group {
+    height: 100%;
+
+    .usa-button-group__item {
+      @include at-media("mobile-lg") {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    // Styles for nested segmented button groups
+    &--segmented {
+      .usa-button-group__item {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 .usa-button-group__item {

packages/usa-button-group/src/test/test-patterns/test-usa-button-group--nested.twig

@@ -0,0 +1,49 @@
+<div class="usa-prose measure-5 padding-2 border-1px border-gray-20 margin-bottom-4">
+  <p class="font-body-lg text-bold margin-top-0">Test nested button groups</p>
+  <p>Confirm that buttons inside nested button groups are:</p>
+  <ul>
+    <li>The same height as their sibling buttons</li>
+    <li>The same height as their parent buttons</li>
+  </ul>
+</div>
+
+<h3>Nested button group</h3>
+<ul class="usa-button-group">
+  <li class="usa-button-group__item">
+    <button type="button" class="usa-button usa-button--outline">Button</button>
+  </li>
+  <li class="usa-button-group__item">
+    <button type="button" class="usa-button usa-button--outline mobile-lg:width-15">Button with long text </button>
+  </li>
+  <li class="usa-button-group__item">
+    <ul class="usa-button-group">
+      <li class="usa-button-group__item ">
+        <a href="#" class="usa-button usa-button--outline mobile-lg:width-10">Nested Link</a>
+      </li>
+      <li class="usa-button-group__item">
+        <button type="button" class="usa-button">Nested Button</button>
+      </li>
+    </ul>
+  </li>
+</ul>
+
+<h3>Nested button group - Segmented</h3>
+<ul class="usa-button-group usa-button-group--segmented">
+  <li class="usa-button-group__item">
+    <button type="button" class="usa-button usa-button--outline">Button</button>
+  </li>
+  <li class="usa-button-group__item">
+    <button type="button" class="usa-button usa-button--outline">Button with long text </button>
+  </li>
+  <li class="usa-button-group__item">
+    <ul class="usa-button-group usa-button-group--segmented">
+      <li class="usa-button-group__item">
+        <a href="#" class="usa-button usa-button--outline">Nested Link</a>
+      </li>
+      <li class="usa-button-group__item">
+        <button type="button" class="usa-button">Nested Button</button>
+      </li>
+    </ul>
+  </li>
+</ul>
+

packages/usa-button-group/src/usa-button-group.stories.js

@@ -1,5 +1,6 @@
 import Component from "./usa-button-group.twig";
-import TestTextWrappingComponent from "./test/test-patterns/usa-button-group--test-text-wrapping.twig";
+import TestTextWrappingComponent from "./test/test-patterns/test-usa-button-group--text-wrapping.twig";
+import TestNestedGroupsComponent from "./test/test-patterns/test-usa-button-group--nested.twig";
 import { DefaultContent, SegmentedContent } from "./content";
 
 export default {
@@ -24,6 +25,7 @@ export default {
 
 const Template = (args) => Component(args);
 const TestTextWrappingTemplate = (args) => TestTextWrappingComponent(args);
+const TestNestedGroupsTemplate = (args) => TestNestedGroupsComponent(args);
 
 export const Default = Template.bind({});
 Default.args = DefaultContent;
@@ -32,3 +34,15 @@ export const Segmented = Template.bind({});
 Segmented.args = SegmentedContent;
 
 export const TestTextWrapping = TestTextWrappingTemplate.bind({});
+TestTextWrapping.argTypes = {
+  disabled_state: {
+    table: { disable: true },
+  },
+};
+
+export const TestNestedButtonGroups = TestNestedGroupsTemplate.bind({});
+TestNestedButtonGroups.argTypes = {
+  disabled_state: {
+    table: { disable: true },
+  },
+};

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;

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,
       );
     });
 

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 = [

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 = [