@newjersey/njwds 2.9.0 → 2.9.1

package/src/tests/button/accessibility/button-secondary.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-(light)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, secondary - 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-tertiary-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--tertiary-(danger)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, tertiary 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-tertiary-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--tertiary-(dark)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, tertiary 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-tertiary.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--tertiary-(light)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, tertiary - 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.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-(light)`;
+
+// Group all accessibility tests for the Button component under a single describe block.
+test.describe("Button, primary - 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/visual/button-danger.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/buttons--primary-(danger)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, danger - 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(`button-danger-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/visual/button-dark.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/buttons--primary-(dark)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, dark - 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(`button-dark-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/visual/button-secondary-danger.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/buttons--secondary-(danger)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, secondary danger - 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(`button-secondary-danger-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/visual/button-secondary-dark.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/buttons--secondary-(dark)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, secondary dark - 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(`button-secondary-dark-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/visual/button-secondary.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/buttons--secondary-(light)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, secondary - 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(`button-secondary-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/visual/button-tertiary-danger.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/buttons--tertiary-(danger)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, tertiary danger - 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(`button-tertiary-danger-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/visual/button-tertiary-dark.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/buttons--tertiary-(dark)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, tertiary dark - 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(`button-tertiary-dark-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/visual/button-tertiary.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/buttons--tertiary-(light)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, tertiary - 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(`button-tertiary-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});

package/src/tests/button/visual/button.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/buttons--primary-(light)`;
+
+const viewports = [
+  { name: "narrow", width: 375, height: 800 },
+  { name: "wide", width: 1280, height: 800 },
+];
+
+test.describe("Button, primary - 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(`button-${viewport.name}.png`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01, // allow a 1px difference
+      });
+    });
+  }
+});