@newjersey/njwds 2.7.0 → 2.9.0

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.7.0",
+  "version": "2.9.0",
   "description": "NJ Web Design Standards",
   "main": "index.js",
   "scripts": {
@@ -9,7 +9,11 @@
     "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"
   },
   "repository": {
     "type": "git",
@@ -25,10 +29,21 @@
     "@uswds/uswds": "3.10.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@frctl/fractal": "^1.5.1",
     "@frctl/nunjucks": "^2.0.5",
+    "@html-eslint/eslint-plugin": "^0.52.1",
+    "@types/node": "^22.19.6",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
     "autoprefixer": "^10.4.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": "^3.1.0",
+    "globals": "^17.0.0",
     "gulp": "^4.0.2",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
@@ -36,11 +51,20 @@
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-svg-sprite": "^1.5.0",
+    "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"
+  },
   "files": [
     "dist",
     "src",

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/banner/banner.njk

@@ -9,7 +9,14 @@
           <a href="https://nj.gov">{{ banner.stateOfNjText }}</a>
         </div>
         <ul class="grid-col-auto display-flex flex-align-center">
-          <li>{{ banner.governorName }} &bull; {{ banner.ltGovernorName }}</li>
+          <li>
+            <a
+              href="https://nj.gov/governor/" 
+              target="_blank"
+            >
+              {{ banner.governorName }} &bull; {{ banner.ltGovernorName }}
+            </a>
+          </li>
           <li class="grid-col-auto">
             <a 
               class="display-flex flex-align-center"

package/src/components/feedback-widget/feedback-widget.config.yml

@@ -2,7 +2,7 @@ label: Feedback widget
 default: success
 
 context:
-  mockFetchScriptSrc: "/public/js/mockFetch.js"
+  mockFetchScriptSrc: "../../public/js/mockFetch.js"
   widgetVersion: "latest"
   feedbackApiUrl: "https://innovation.nj.gov/app/feedback/dev"
   mockSuccessResponse: { status: 200, body: { message: "Success", feedbackId: 1 } }

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

@@ -46,7 +46,7 @@ i.e.
 
   // Set min-width so the names are hidden before the stateOfNjText wraps to
   // 3 lines
-  @media (min-width: 43rem) {
+  @media (min-width: 46rem) {
     display: inline;
   }
   @include u-margin-right(1);
@@ -256,14 +256,14 @@ i.e.
 }
 
 .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
-  ) {
+  .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;
 }
@@ -292,9 +292,11 @@ i.e.
 .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;
+.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 {