@newjersey/njwds 2.9.0 → 2.9.1

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

@@ -0,0 +1,57 @@
+@use "uswds-core" as *;
+
+.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;
+
+  &__header {
+    @include u-padding-y(1);
+    @include set-text-from-bg($theme-banner-background-color);
+    // display: flex;
+
+    a {
+      @include set-text-from-bg($theme-banner-background-color);
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    } // a
+
+    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);
+
+      &:last-child {
+        display: inline;
+        @include u-margin-right(0);
+        @include u-padding-right(0);
+        @include u-border-right(0);
+      }
+    } // li
+
+    &-seal {
+      padding-right: units(1);
+    } // .nj-banner__header-seal
+  } // .nj-banner__header
+
+  &__inner {
+    @include grid-row;
+    @include u-flex("align-center");
+    padding-right: units(0);
+  } // .nj-banner__inner
+}

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

@@ -0,0 +1,6 @@
+@forward "nj-button";
+@forward "nj-button-icon";
+@forward "nj-button-outline";
+@forward "nj-button-primary";
+@forward "nj-button-secondary";
+@forward "nj-button-unstyled";

package/src/sass/theme/nj-button/nj-button-icon.scss

@@ -0,0 +1,12 @@
+@use "uswds-core" as *;
+
+.usa-button {
+  &.nj-button--icon {
+    padding-top: units(1.5);
+    padding-bottom: 0.875rem;
+
+    svg {
+      vertical-align: sub;
+    }
+  } // .nj-button--icon
+} // .usa-button

package/src/sass/theme/nj-button/nj-button-outline.scss

@@ -0,0 +1,55 @@
+@use "uswds-core" as *;
+
+// Outline 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--hover,
+  &:hover {
+    color: color($theme-color-primary-darker);
+    box-shadow: inset 0 0 0 2px color($theme-color-primary-darker);
+  }
+
+  &.usa-button--active,
+  &:active {
+    color: color($theme-color-primary-darkest);
+    box-shadow: inset 0 0 0 2px color($theme-color-primary-darkest);
+  }
+
+  // Secondary Buttons (dark)
+  &.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--inverse.usa-button--hover:not(:disabled),
+  &.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--inverse.usa-button--active:not(:disabled),
+  &.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)
+  &.nj-button--outline-danger:not(:disabled) {
+    color: color($theme-color-error);
+    box-shadow: inset 0 0 0 2px color($theme-color-error);
+  }
+} // .usa-button--outline
+
+.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);
+}

package/src/sass/theme/nj-button/nj-button-primary.scss

@@ -0,0 +1,22 @@
+@use "uswds-core" as *;
+
+// Buttons
+.usa-button {
+  // Primary Buttons (dark)
+  &.nj-button--primary-dark:not(:disabled) {
+    color: color($theme-text-color);
+    background-color: color($theme-color-base-lightest);
+  }
+
+  &.nj-button--primary-dark.usa-button--hover:not(:disabled),
+  &.nj-button--primary-dark:hover:not(:disabled) {
+    color: color($theme-text-color);
+    background-color: color($theme-color-base-lighter);
+  }
+
+  &.nj-button--primary-dark.usa-button--active:not(:disabled),
+  &.nj-button--primary-dark:active:not(:disabled) {
+    color: color($theme-text-color);
+    background-color: color($theme-color-base-light);
+  }
+} // .usa-button

package/src/sass/theme/nj-button/nj-button-secondary.scss

@@ -0,0 +1,15 @@
+@use "uswds-core" as *;
+
+.usa-button--secondary {
+  background-color: color($theme-color-error);
+
+  &.usa-button--hover,
+  &:hover {
+    background-color: color($theme-color-error-dark);
+  }
+
+  &.usa-button--active,
+  &:active {
+    background-color: color($theme-color-error-darker);
+  }
+} // .usa-button--secondary

package/src/sass/theme/nj-button/nj-button-unstyled.scss

@@ -0,0 +1,48 @@
+@use "uswds-core" as *;
+
+// 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);
+}

package/src/sass/theme/nj-button/nj-button.scss

@@ -0,0 +1,12 @@
+@use "uswds-core" as *;
+
+// Buttons
+.usa-button {
+  height: units(6);
+  padding: units(2) units(2.5);
+
+  &:focus,
+  &.usa-focus {
+    outline-color: color($theme-color-primary-vivid);
+  }
+} // .usa-button

package/src/sass/theme/nj-error-message/index.scss

@@ -0,0 +1 @@
+@forward "nj-error-message";

package/src/sass/theme/nj-error-message/nj-error-message.scss

@@ -0,0 +1,19 @@
+@use "uswds-core" as *;
+
+.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);
+}

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

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

package/src/sass/theme/nj-forms/nj-forms.scss

@@ -0,0 +1,39 @@
+@use "uswds-core" as *;
+
+// 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;
+}
+
+.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);
+}

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

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

package/src/sass/theme/nj-header/nj-header.scss

@@ -0,0 +1,8 @@
+@use "uswds-core" as *;
+
+// Header - prevent wrapping of logo text
+.usa-header--extended {
+  .usa-logo {
+    max-width: 50%;
+  }
+} // .usa-header--extended

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

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

package/src/sass/theme/nj-hero/nj-hero.scss

@@ -0,0 +1,6 @@
+@use "uswds-core" as *;
+
+// hero
+.usa-hero__callout {
+  background-color: color("secondary-darker");
+}

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

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

package/src/sass/theme/nj-icon/nj-icon.scss

@@ -0,0 +1,21 @@
+@use "uswds-core" as *;
+
+.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;
+  }
+
+  &.nj-icon--size-scale {
+    height: 1em;
+    width: 1em;
+  }
+} // .usa-icon

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

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

package/src/sass/theme/nj-intro/nj-intro.scss

@@ -0,0 +1,5 @@
+@use "uswds-core" as *;
+
+.usa-intro {
+  letter-spacing: -0.4px;
+}

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

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

package/src/sass/theme/nj-nav/nj-nav.scss

@@ -0,0 +1,7 @@
+@use "uswds-core" as *;
+
+.usa-nav__secondary-links {
+  a {
+    color: color("base-darker");
+  }
+} // .usa-nav__secondary-links

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

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

package/src/sass/theme/nj-prose/nj-prose.scss

@@ -0,0 +1,14 @@
+@use "uswds-core" as *;
+
+.usa-prose {
+  // Tighten letter spacing for h1 and intro text
+  > h1 {
+    letter-spacing: -0.4px;
+  }
+
+  // Wrap long links that would break page container
+  a {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  }
+} // .usa-prose

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

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

package/src/sass/theme/nj-section/nj-section.scss

@@ -0,0 +1,6 @@
+@use "uswds-core" as *;
+
+// Section
+.usa-section--dark {
+  background-color: color("secondary-darker");
+}

package/src/tests/banner/banner.accessibility.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+// The base URL for your locally served components.
+const BASE_URL = "http://localhost:3000";
+
+// The specific page URL for the Banner component preview.
+const PAGE_URL = `${BASE_URL}/components/preview/banner`;
+
+// Group all accessibility tests for the Banner component under a single describe block.
+test.describe("Banner – accessibility", () => {
+  // Primary axe-core scan for this component.
+  test("has no detectable a11y violations", async ({ page }) => {
+    // Open the page at the URL defined above.
+    // Using `networkidle` ensures that all network requests (CSS, fonts, JS) have
+    // finished before running the accessibility scan.
+    await page.goto(PAGE_URL);
+    await page.waitForLoadState("networkidle");
+
+    // .include(".nj-banner") ensures the scan is scoped to the Banner itself.
+    const accessibilityScanResults = await new AxeBuilder({ page }).include(".nj-banner").analyze();
+
+    // If axe finds any violations, this test will fail, and Playwright will
+    // report detailed information about each issue (impact, rule, affected nodes).
+    // The empty array assertion ensures only a clean, violation-free component passes.
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/src/tests/banner/banner.visual.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from "@playwright/test";
+
+const BASE_URL = "http://localhost:3000";
+const PAGE_URL = `${BASE_URL}/components/preview/banner`;
+
+const viewports = [
+  { name: "narrow", width: 393, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Banner - visual regression", () => {
+  for (const viewport of viewports) {
+    test(`renders correctly (${viewport.name})`, async ({ page }) => {
+      await page.setViewportSize({
+        width: viewport.width,
+        height: viewport.height,
+      });
+
+      // Stabilize rendering:
+      await page.emulateMedia({ reducedMotion: "reduce" });
+
+      // Open the page at the URL defined above.
+      // Using `networkidle` ensures that all network requests (CSS, fonts, JS) have
+      // finished before running the test.
+      await page.goto(PAGE_URL);
+      await page.waitForLoadState("networkidle");
+
+      // Full-page screenshot
+      await expect(page).toHaveScreenshot(`banner-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/accessibility/button-danger.accessibility.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+// The base URL for your locally served components.
+const BASE_URL = "http://localhost:3000";
+
+// The specific page URL for the Button component preview.
+const PAGE_URL = `${BASE_URL}/components/preview/buttons--primary-(danger)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, danger - accessibility", () => {
+  // Primary axe-core scan for this component.
+  test("has no detectable a11y violations", async ({ page }) => {
+    // Open the page at the URL defined above.
+    // Using `networkidle` ensures that all network requests (CSS, fonts, JS) have
+    // finished before running the accessibility scan.
+    await page.goto(PAGE_URL);
+    await page.waitForLoadState("networkidle");
+
+    // .include(".usa-button") ensures the scan is scoped to the Button itself.
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .include(".usa-button")
+      .analyze();
+
+    // If axe finds any violations, this test will fail, and Playwright will
+    // report detailed information about each issue (impact, rule, affected nodes).
+    // The empty array assertion ensures only a clean, violation-free component passes.
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/src/tests/button/accessibility/button-dark.accessibility.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+// The base URL for your locally served components.
+const BASE_URL = "http://localhost:3000";
+
+// The specific page URL for the Button component preview.
+const PAGE_URL = `${BASE_URL}/components/preview/buttons--primary-(dark)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, dark - accessibility", () => {
+  // Primary axe-core scan for this component.
+  test("has no detectable a11y violations", async ({ page }) => {
+    // Open the page at the URL defined above.
+    // Using `networkidle` ensures that all network requests (CSS, fonts, JS) have
+    // finished before running the accessibility scan.
+    await page.goto(PAGE_URL);
+    await page.waitForLoadState("networkidle");
+
+    // .include(".usa-button") ensures the scan is scoped to the Button itself.
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .include(".usa-button")
+      .analyze();
+
+    // If axe finds any violations, this test will fail, and Playwright will
+    // report detailed information about each issue (impact, rule, affected nodes).
+    // The empty array assertion ensures only a clean, violation-free component passes.
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/src/tests/button/accessibility/button-secondary-danger.accessibility.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+// The base URL for your locally served components.
+const BASE_URL = "http://localhost:3000";
+
+// The specific page URL for the Button component preview.
+const PAGE_URL = `${BASE_URL}/components/preview/buttons--secondary-(danger)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, secondary danger - accessibility", () => {
+  // Primary axe-core scan for this component.
+  test("has no detectable a11y violations", async ({ page }) => {
+    // Open the page at the URL defined above.
+    // Using `networkidle` ensures that all network requests (CSS, fonts, JS) have
+    // finished before running the accessibility scan.
+    await page.goto(PAGE_URL);
+    await page.waitForLoadState("networkidle");
+
+    // .include(".usa-button") ensures the scan is scoped to the Button itself.
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .include(".usa-button")
+      .analyze();
+
+    // If axe finds any violations, this test will fail, and Playwright will
+    // report detailed information about each issue (impact, rule, affected nodes).
+    // The empty array assertion ensures only a clean, violation-free component passes.
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/src/tests/button/accessibility/button-secondary-dark.accessibility.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+// The base URL for your locally served components.
+const BASE_URL = "http://localhost:3000";
+
+// The specific page URL for the Button component preview.
+const PAGE_URL = `${BASE_URL}/components/preview/buttons--secondary-(dark)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, secondary dark - accessibility", () => {
+  // Primary axe-core scan for this component.
+  test("has no detectable a11y violations", async ({ page }) => {
+    // Open the page at the URL defined above.
+    // Using `networkidle` ensures that all network requests (CSS, fonts, JS) have
+    // finished before running the accessibility scan.
+    await page.goto(PAGE_URL);
+    await page.waitForLoadState("networkidle");
+
+    // .include(".usa-button") ensures the scan is scoped to the Button itself.
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .include(".usa-button")
+      .analyze();
+
+    // If axe finds any violations, this test will fail, and Playwright will
+    // report detailed information about each issue (impact, rule, affected nodes).
+    // The empty array assertion ensures only a clean, violation-free component passes.
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});