@newjersey/njwds 2.8.0 → 2.9.1

package/gulpfile.js

@@ -49,9 +49,9 @@ const JS_DEST = "./dist/js";
 // Compiled CSS destination
 const CSS_DEST = "./dist/css";
 
-const DIST_DIR = "./dist"
+const DIST_DIR = "./dist";
 
-const FRACTAL_STATIC_ASSETS_DIR = "./public"
+const FRACTAL_STATIC_ASSETS_DIR = "./public";
 
 // Site CSS destination
 // Like the _site/assets/css directory in Jekyll, if necessary.
@@ -65,9 +65,7 @@ TASKS
 */
 
 gulp.task("copy-uswds-setup", () => {
-  return gulp
-    .src(`${uswds}/scss/theme/**/**`)
-    .pipe(gulp.dest(`${PROJECT_SASS_SRC}`));
+  return gulp.src(`${uswds}/scss/theme/**/**`).pipe(gulp.dest(`${PROJECT_SASS_SRC}`));
 });
 
 gulp.task("copy-uswds-fonts", () => {
@@ -86,12 +84,12 @@ gulp.task("copy-uswds-js", () => {
   return gulp.src(`${uswds}/dist/js/**/**`).pipe(gulp.dest(`${JS_DEST}`));
 });
 
-gulp.task("build-sass", function(done) {
+gulp.task("build-sass", function (done) {
   var plugins = [
     // Autoprefix
     autoprefixer({
       cascade: false,
-      grid: true
+      grid: true,
     }),
     // Minify
     csso({ forceMediaMerge: false }),
@@ -102,12 +100,8 @@ gulp.task("build-sass", function(done) {
       .pipe(sourcemaps.init({ largeFile: true }))
       .pipe(
         sass({
-          includePaths: [
-            `${PROJECT_SASS_SRC}`,
-            `${uswds}`,
-            `${uswds}/packages`
-          ]
-        })
+          includePaths: [`${PROJECT_SASS_SRC}`, `${uswds}`, `${uswds}/packages`],
+        }),
       )
       .pipe(replace(/\buswds @version\b/g, "based on uswds v" + pkg.version))
       .pipe(postcss(plugins))
@@ -125,8 +119,8 @@ gulp.task(
     "copy-uswds-fonts",
     "copy-uswds-images",
     "copy-uswds-js",
-    "build-sass"
-  )
+    "build-sass",
+  ),
 );
 
 gulp.task(
@@ -136,22 +130,22 @@ gulp.task(
     "copy-uswds-images",
     "copy-src-images",
     "copy-uswds-js",
-    "build-sass"
-  )
+    "build-sass",
+  ),
 );
 
 gulp.task("copy-dist-to-fractal-assets", () => {
   return gulp.src(`${DIST_DIR}/**/**`).pipe(gulp.dest(`${FRACTAL_STATIC_ASSETS_DIR}/dist`));
 });
 
-gulp.task("watch-sass", function() {
-  gulp.watch(`${PROJECT_SASS_SRC}/**/*.scss`, gulp.series("copy-src-images", "build-sass", "copy-dist-to-fractal-assets",));
+gulp.task("watch-sass", function () {
+  gulp.watch(
+    `${PROJECT_SASS_SRC}/**/*.scss`,
+    gulp.series("copy-src-images", "build-sass", "copy-dist-to-fractal-assets"),
+  );
 });
 
-
-gulp.task("watch-fractal", gulp.series(
-  "copy-src-images",
-  "build-sass",
-  "copy-dist-to-fractal-assets",
-  "watch-sass",
-));
+gulp.task(
+  "watch-fractal",
+  gulp.series("copy-src-images", "build-sass", "copy-dist-to-fractal-assets", "watch-sass"),
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newjersey/njwds",
-  "version": "2.8.0",
+  "version": "2.9.1",
   "description": "NJ Web Design Standards",
   "main": "index.js",
   "scripts": {
@@ -9,7 +9,14 @@
     "import-components": "cp -nr node_modules/uswds/src/components ./src/",
     "build-docs": "gulp copy-dist-to-fractal-assets && fractal build",
     "start": "fractal start --sync & gulp watch-fractal",
-    "deploy": "npm ci && npm run build-docs && gh-pages -d build"
+    "deploy": "npm ci && npm run build-docs && gh-pages -d build",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
+    "lint": "eslint",
+    "test": "echo \"Warn: no test specified\" && exit 0",
+    "test:visual": "playwright test --project=visual",
+    "test:accessibility": "playwright test --project=accessibility",
+    "test:visual:update": "playwright test --project=visual --update-snapshots=all"
   },
   "repository": {
     "type": "git",
@@ -25,22 +32,52 @@
     "@uswds/uswds": "3.10.0"
   },
   "devDependencies": {
-    "@frctl/fractal": "^1.5.1",
+    "@axe-core/playwright": "^4.11.0",
+    "@eslint/js": "^9.39.2",
+    "@frctl/fractal": "^1.5.15",
     "@frctl/nunjucks": "^2.0.5",
+    "@html-eslint/eslint-plugin": "^0.52.1",
+    "@playwright/test": "^1.58.0",
+    "@types/node": "^22.19.6",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
     "autoprefixer": "^10.4.0",
-    "gh-pages": "^3.1.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-lit": "^2.1.1",
+    "eslint-plugin-lit-a11y": "^5.1.1",
+    "eslint-plugin-wc": "^3.0.2",
+    "gh-pages": "^6.3.0",
+    "globals": "^17.0.0",
     "gulp": "^4.0.2",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.1.3",
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
-    "gulp-svg-sprite": "^1.5.0",
+    "gulp-svg-sprite": "^2.0.3",
+    "husky": "^9.1.7",
+    "jiti": "^2.6.1",
+    "lint-staged": "^16.2.7",
     "postcss": "^8.3.11",
     "postcss-csso": "^5.0.1",
+    "prettier": "^3.7.4",
     "sass": "^1.51.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.0",
     "uswds-gulp": "github:uswds/uswds-gulp"
   },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  },
+  "overrides": {
+    "uswds-gulp": {
+      "gulp-svg-sprite": "$gulp-svg-sprite"
+    },
+    "inquirer": {
+      "lodash": "^4.17.19"
+    }
+  },
   "files": [
     "dist",
     "src",

package/src/components/02-buttons/buttons.njk

@@ -12,19 +12,19 @@
   <button class="{{ buttonClasses | trim }} usa-focus">Focus</button>
   <button class="{{ buttonClasses | trim }} nj-button--icon">
     Icon Trailing
-    <svg class="usa-icon usa-icon--size-3 margin-left-105" aria-hidden="true" focusable="false" role="img">
+    <svg class="usa-icon usa-icon--size-3 margin-left-105" aria-hidden="true" focusable="false" role="img" title="Accessibility icon">
       <use xlink:href="{{ uswds.path }}/img/sprite.svg#accessibility_new"></use>
     </svg>
   </button>
   <button class="{{ buttonClasses | trim }} nj-button--icon">
-    <svg class="usa-icon usa-icon--size-3 margin-right-105" aria-hidden="true" focusable="false" role="img">
+    <svg class="usa-icon usa-icon--size-3 margin-right-105" aria-hidden="true" focusable="false" role="img" title="Accessibility icon">
       <use xlink:href="{{ uswds.path }}/img/sprite.svg#accessibility_new"></use>
     </svg>
     Icon Leading
   </button>
   <button aria-label="icon-label" class="{{ buttonClasses | trim }} nj-button--icon">
-    <svg class="usa-icon usa-icon--size-3" focusable="false" role="img">
+    <svg class="usa-icon usa-icon--size-3" focusable="false" role="img" title="Accessibility icon">
       <use xlink:href="{{ uswds.path }}/img/sprite.svg#accessibility_new"></use>
     </svg>
   </button>
-</div>
+</div>

package/src/components/banner/banner.config.yml

@@ -14,5 +14,5 @@ context:
     # be updated when the banner text changes in order to keep the same
     # wrapping behavior.
     stateOfNjText: "Official Site of the State of New Jersey"
-    governorName: "Governor Phil Murphy"
-    ltGovernorName: "Lt. Governor Tahesha Way"
+    governorName: "Governor Mikie Sherrill"
+    ltGovernorName: "Lt. Governor Dr. Dale G. Caldwell"

package/src/components/identifier/identifier.njk

@@ -70,13 +70,13 @@
       <ul class="usa-identifier__required-links-list">
         <li class="usa-identifier__required-links-item">
           <a href="https://nj.gov/governor/admin/about/" class="usa-identifier__required-link">
-            Governor Phil Murphy
+            Governor Mikie Sherrill 
           </a>
         </li>
         <li class="usa-identifier__required-links-item">
           <a href="https://nj.gov/governor/admin/lt/"
             class="usa-identifier__required-link">
-            Lt. Governor Tahesha Way
+            Lt. Governor Dr. Dale G. Caldwell
           </a>
         </li>
         <li class="usa-identifier__required-links-item">

package/src/data/matched-colors.json

@@ -1,4 +1,5 @@
-[{
+[
+  {
     "yellow": {
       "value": "#ffe38e",
       "match": {

package/src/sass/_uswds-theme-custom-styles.scss

@@ -1,326 +1,14 @@
-/*
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-========================================
-========================================
-========================================
-----------------------------------------
-USWDS THEME CUSTOM STYLES
-----------------------------------------
-!! Copy this file to your project's
-   sass root. Don't edit the version
-   in node_modules.
-----------------------------------------
-Custom project SASS goes here.
-
-i.e.
-@include u-padding-right('05');
-----------------------------------------
-*/
+// Custom styles for NJWDS theme
 @use "uswds-core" as *;
-// Banner
-.nj-banner {
-  @include typeset($theme-banner-font-family);
-  @include border-box-sizing;
-  background-color: color($theme-banner-background-color);
-  font-size: font-size($theme-banner-font-family, "2xs");
-  line-height: line-height($theme-banner-font-family, 1);
-  min-height: units($size-touch-target);
-  position: relative;
-}
-.nj-banner__header {
-  @include u-padding-y(1);
-}
-.nj-banner__header,
-.nj-banner__header a {
-  @include set-text-from-bg($theme-banner-background-color);
-  text-decoration: none;
-}
-.nj-banner__header a:hover {
-  text-decoration: underline;
-}
-.nj-banner__header li {
-  display: none;
-
-  // Set min-width so the names are hidden before the stateOfNjText wraps to
-  // 3 lines
-  @media (min-width: 43rem) {
-    display: inline;
-  }
-  @include u-margin-right(1);
-  @include u-padding-right(1);
-  @include u-border-right(1px);
-}
-
-.nj-banner__header li:last-child {
-  display: inline;
-  @include u-margin-right(0);
-  @include u-padding-right(0);
-  @include u-border-right(0);
-}
-.nj-banner__inner {
-  @include grid-row;
-  @include u-flex("align-center");
-  padding-right: units(0);
-}
-.nj-banner__header-seal {
-  padding-right: units(1);
-}
-// hero
-.usa-hero__callout {
-  background-color: color("secondary-darker");
-}
-// Section
-.usa-section--dark {
-  background-color: color("secondary-darker");
-}
-
-// Tighten letter spacing for h1 and intro text
-.usa-prose > h1,
-.usa-intro {
-  letter-spacing: -0.4px;
-}
-
-// Wrap long links that would break page container
-.usa-prose a {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-}
-
-// Nav
-.usa-nav__secondary-links a {
-  color: color("base-darker");
-}
-
-// Header - prevent wrapping of logo text
-.usa-header--extended {
-  .usa-logo {
-    max-width: 50%;
-  }
-}
-
-// Buttons
-.usa-button {
-  height: units(6);
-  padding: units(2) units(2.5);
-  &.nj-button--icon {
-    padding-top: units(1.5);
-    padding-bottom: 0.875rem;
-  }
-}
-
-.nj-button--icon svg {
-  vertical-align: sub;
-  margin-bottom: -2px;
-}
-
-.usa-button:focus,
-.usa-button.usa-focus {
-  outline-color: color($theme-color-primary-vivid);
-}
-
-// Primary Buttons (dark)
-.usa-button.nj-button--primary-dark:not(:disabled) {
-  color: color($theme-text-color);
-  background-color: color($theme-color-base-lightest);
-}
-
-.usa-button.nj-button--primary-dark.usa-button--hover:not(:disabled),
-.usa-button.nj-button--primary-dark:hover:not(:disabled) {
-  color: color($theme-text-color);
-  background-color: color($theme-color-base-lighter);
-}
-
-.usa-button.nj-button--primary-dark.usa-button--active:not(:disabled),
-.usa-button.nj-button--primary-dark:active:not(:disabled) {
-  color: color($theme-text-color);
-  background-color: color($theme-color-base-light);
-}
-
-// Primary Buttons (danger)
-.usa-button--secondary {
-  background-color: color($theme-color-error);
-}
-
-.usa-button--secondary.usa-button--hover,
-.usa-button--secondary:hover {
-  background-color: color($theme-color-error-dark);
-}
-
-.usa-button--secondary.usa-button--active,
-.usa-button--secondary:active {
-  background-color: color($theme-color-error-darker);
-}
-
-// Secondary buttons (light)
-.usa-button--outline {
-  color: color($theme-color-primary-dark);
-  box-shadow: inset 0 0 0 2px color($theme-color-primary-dark);
-}
-
-.usa-button--outline.usa-button--hover,
-.usa-button--outline:hover {
-  color: color($theme-color-primary-darker);
-  box-shadow: inset 0 0 0 2px color($theme-color-primary-darker);
-}
-
-.usa-button--outline.usa-button--active,
-.usa-button--outline:active {
-  color: color($theme-color-primary-darkest);
-  box-shadow: inset 0 0 0 2px color($theme-color-primary-darkest);
-}
-
-// Secondary Buttons (dark)
-.usa-button--outline.usa-button--inverse:not(:disabled) {
-  color: color($theme-link-reverse-active-color);
-  box-shadow: inset 0 0 0 2px color($theme-link-reverse-active-color);
-}
-
-.usa-button--outline.usa-button--inverse.usa-button--hover:not(:disabled),
-.usa-button--outline.usa-button--inverse:hover:not(:disabled) {
-  color: color($theme-color-base-lighter);
-  box-shadow: inset 0 0 0 2px color($theme-color-base-lighter);
-}
-
-.usa-button--outline.usa-button--inverse.usa-button--active:not(:disabled),
-.usa-button--outline.usa-button--inverse:active:not(:disabled) {
-  color: color($theme-color-base-light);
-  box-shadow: inset 0 0 0 2px color($theme-color-base-light);
-}
-
-// Secondary Buttons (danger)
-.usa-button--outline.nj-button--outline-danger:not(:disabled) {
-  color: color($theme-color-error);
-  box-shadow: inset 0 0 0 2px color($theme-color-error);
-}
-
-.usa-button--hover.nj-button--outline-danger:not(:disabled),
-.usa-button--outline.nj-button--outline-danger:hover:not(:disabled) {
-  color: color($theme-color-error-dark);
-  box-shadow: inset 0 0 0 2px color($theme-color-error-dark);
-}
-
-.usa-button--active.nj-button--outline-danger:not(:disabled),
-.usa-button--outline.nj-button--outline-danger:active:not(:disabled) {
-  color: color($theme-color-error-darker);
-  box-shadow: inset 0 0 0 2px color($theme-color-error-darker);
-}
-
-// Unstyled buttons (light)
-.usa-button--unstyled {
-  border-radius: units(0.5);
-  padding: units(0.5);
-  font-weight: $theme-font-weight-bold;
-  height: auto;
-}
-.usa-button--unstyled.usa-button--hover,
-.usa-button--unstyled:hover {
-  color: color($theme-color-primary-darker);
-}
-
-.usa-button--unstyled.usa-button--active,
-.usa-button--unstyled:active {
-  color: color($theme-color-primary-darkest);
-}
-
-// Unstyled Buttons (dark)
-.usa-button--unstyled.nj-button--unstyled-dark {
-  color: color($theme-text-reverse-color);
-}
-
-.usa-button--unstyled.nj-button--unstyled-dark.usa-button--hover,
-.usa-button--unstyled.nj-button--unstyled-dark:hover {
-  color: color($theme-color-base-lighter);
-}
-
-.usa-button--unstyled.nj-button--unstyled-dark.usa-button--active,
-.usa-button--unstyled.nj-button--unstyled-dark:active {
-  color: color($theme-color-base-light);
-}
-
-// Unstyled Buttons (danger)
-.usa-button--unstyled.nj-button--unstyled-danger:not(:disabled) {
-  color: color($theme-color-error);
-}
-
-.usa-button--hover.nj-button--unstyled-danger:not(:disabled),
-.usa-button--unstyled.nj-button--unstyled-danger:hover:not(:disabled) {
-  color: color($theme-color-error-dark);
-}
-
-.usa-button--active.nj-button--unstyled-danger:not(:disabled),
-.usa-button--unstyled.nj-button--unstyled-danger:active:not(:disabled) {
-  color: color($theme-color-error-darker);
-}
-
-.usa-icon:not(
-    .usa-icon--size-3,
-    .usa-icon--size-4,
-    .usa-icon--size-5,
-    .usa-icon--size-6,
-    .usa-icon--size-7,
-    .usa-icon--size-8,
-    .usa-icon--size-9
-  ) {
-  height: 20px;
-  width: 20px;
-}
-
-.usa-icon.nj-icon--size-scale {
-  height: 1em;
-  width: 1em;
-}
-
-// Radio Buttons
-.usa-radio {
-  background: none;
-}
-
-.usa-radio__label::before {
-  box-shadow: 0 0 0 2px color($theme-color-base);
-}
-
-// Radio & Checkbox tile variants
-.usa-radio__input--tile:checked + [class*="__label"],
-.usa-checkbox__input--tile:checked + [class*="__label"] {
-  background-color: color($theme-color-primary-lighter);
-}
-
-.usa-radio__input--tile + [class*="__label"],
-.usa-checkbox__input--tile + [class*="__label"] {
-  border-color: color($theme-color-base-light);
-}
-.usa-radio__input.usa-radio__input--tile:checked + [class*="__label"]::before, 
-.usa-checkbox__input.usa-checkbox__input--tile:checked + [class*="__label"]::before{
-  box-shadow: 0 0 0 2px #005ea2, inset 0 0 0 2px #cfe8ff;
-}
-
-.nj-error-message-container {
-  margin-top: units(1.5);
-  display: flex;
-  align-items: flex-start;
-  color: color($theme-color-error-dark);
-}
-
-.nj-error-message-container > svg {
-  flex-shrink: 0;
-  margin-right: units(1);
-}
-
-.usa-error-message {
-  padding: units(0);
-}
-
-.usa-form-group--error {
-  padding-left: units(2.5);
-}
-
-.nj-checkbox--error > .usa-checkbox__label::before {
-  box-shadow: 0 0 0 2px color($theme-color-error-dark);
-}
 
-.nj-radio--error > .usa-radio__label::before {
-  box-shadow: 0 0 0 2px color($theme-color-error-dark);
-}
+@forward "theme/nj-banner";
+@forward "theme/nj-button";
+@forward "theme/nj-error-message";
+@forward "theme/nj-forms";
+@forward "theme/nj-header";
+@forward "theme/nj-hero";
+@forward "theme/nj-icon";
+@forward "theme/nj-intro";
+@forward "theme/nj-nav";
+@forward "theme/nj-prose";
+@forward "theme/nj-section";

package/src/sass/_uswds-theme.scss

@@ -6,8 +6,8 @@
  */
     // Base colors
   $theme-color-base-family: "gray-cool",
-  $theme-color-base-lightest: "gray-cool-1",
-  $theme-color-base-lighter: "gray-cool-5",
+  $theme-color-base-lightest: "gray-cool-5",
+  $theme-color-base-lighter: "gray-cool-10",
   $theme-color-base-light: "gray-cool-20",
   $theme-color-base: "gray-cool-50",
   $theme-color-base-dark: "gray-cool-60",

package/src/sass/button.scss

@@ -1,72 +1,7 @@
-/*
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-========================================
-========================================
-========================================
-*/
-
-// -------------------------------------
-// Import individual theme settings
+// src/sass/button.scss
 @forward "uswds-theme";
-
-// -------------------------------------
-// Import individual USWDS packages...
-// See https://designsystem.digital.gov/components/
-
-// First import required and global packages...
-// @forward "packages/required";
-// @forward "packages/global";
 @forward "packages/uswds-global";
-// @forward "packages/uswds-utilities";
-// @forward "packages/uswds-helpers";
-
-// Then import individual component packages...
 @forward "packages/usa-icon";
-// @forward 'packages/form-controls';
-// @forward 'packages/form-templates';
-// @forward 'packages/layout-grid';
-// @forward 'packages/typography';
-// @forward 'packages/validation';
-// @forward 'packages/usa-accordion';
-// @forward 'packages/usa-alert';
-// @forward 'packages/usa-identifier';
-// @forward 'packages/usa-banner';
-// @forward 'packages/usa-breadcrumb';
 @forward "packages/usa-button";
-// @forward 'packages/usa-button-group';
-// @forward 'packages/usa-card';
-// @forward 'packages/usa-checklist';
-// @forward 'packages/usa-footer';
-// @forward 'packages/usa-header';
-// @forward 'packages/usa-hero';
-// @forward 'packages/usa-identifier';
-// @forward 'packages/usa-layout';
-// @forward 'packages/usa-media-block';
-// @forward 'packages/usa-megamenu';
-// @forward 'packages/usa-nav-container';
-// @forward 'packages/usa-nav';
-// @forward 'packages/usa-navbar';
-// @forward 'packages/usa-search';
-// @forward 'packages/usa-section';
-// @forward 'packages/usa-sidenav';
-// @forward 'packages/usa-skipnav';
-// @forward 'packages/usa-step-indicator';
-// @forward 'packages/usa-table';
-// @forward 'packages/usa-tag';
-
-// or package sets...
-// @forward 'packages/uswds-components';
-// @forward 'packages/uswds-utilities';
-
-// -------------------------------------
-// ...or import the complete USWDS kit
-
-// @forward "uswds";
-
-// -------------------------------------
-// Import theme custom styles
-
-@forward "uswds-theme-custom-styles";
+@forward "theme/nj-icon";
+@forward "theme/nj-button";