@newjersey/njwds 2.9.0 → 2.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newjersey/njwds",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "NJ Web Design Standards",
   "main": "index.js",
   "scripts": {
@@ -13,7 +13,10 @@
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "lint": "eslint",
-    "test": "echo \"Warn: no test specified\" && exit 0"
+    "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",
@@ -29,10 +32,12 @@
     "@uswds/uswds": "3.10.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.0",
     "@eslint/js": "^9.39.2",
-    "@frctl/fractal": "^1.5.1",
+    "@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",
@@ -42,7 +47,7 @@
     "eslint-plugin-lit": "^2.1.1",
     "eslint-plugin-lit-a11y": "^5.1.1",
     "eslint-plugin-wc": "^3.0.2",
-    "gh-pages": "^3.1.0",
+    "gh-pages": "^6.3.0",
     "globals": "^17.0.0",
     "gulp": "^4.0.2",
     "gulp-postcss": "^9.0.1",
@@ -50,7 +55,7 @@
     "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",
@@ -65,6 +70,14 @@
   "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/sass/_uswds-theme-custom-styles.scss

@@ -1,328 +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: 46rem) {
-    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";

package/src/sass/icon.scss

@@ -1,72 +1,5 @@
-/*
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-========================================
-========================================
-========================================
-*/
-
-// -------------------------------------
-// Import individual theme settings
+// Index file for icon styles
 @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";

package/src/sass/styles.scss

@@ -1,68 +1,4 @@
-/*
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-========================================
-========================================
-========================================
-*/
-
-// -------------------------------------
-// Import individual theme settings
+// Sass index file that imports all necessary USWDS styles and themes
 @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';
-
-// Then import individual component packages...
-// @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";

package/src/sass/theme/nj-banner/index.scss

@@ -0,0 +1 @@
+@forward "nj-banner";