Release v3.5.1

CHANGELOG.md

@@ -8,11 +8,21 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 3.5.1 (December 19, 2024)
+
+### Adds
+
+- Adds `jest-transformer-svg` to mock SVGs more accurately in our tests
+
+### Fixes
+
+- Fixes `TextInput`'s conflicting internal and external ref values for the clearable button focus management.
+
 ## 3.5.0 (December 5, 2024)
 
 ### Adds
 
-- Adds the `SubNav` component.
+- Adds the `"SubNav"`component.
 - Adds the `useScrollFadeStyles` hook.
 
 ### Updates

jest.config.js

@@ -16,7 +16,7 @@ export default {
   coverageDirectory: "coverage",
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/src/__tests__/fileMock.ts",
     // Handle CSS imports (with CSS modules)
     // https://jestjs.io/docs/webpack#mocking-css-modules
@@ -38,6 +38,7 @@ export default {
   // A map from regular expressions to paths to transformers
   transform: {
     "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.svg$": "jest-transformer-svg",
   },
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   transformIgnorePatterns: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",

src/__tests__/fileMock.ts

@@ -1,6 +1,5 @@
 /**
- * This file is use to mock asset imports in TSX files, mostly
- * used in our case to mock SVG files.
+ * This file is used to mock asset imports in TSX files.
  */
 
 export default "div";

src/components/Accordion/Accordion.test.tsx

@@ -156,12 +156,22 @@ describe("Accordion", () => {
     expect(accordionLabel).toHaveAttribute("aria-expanded", "false");
     // The panel's content should not be in the DOM unless the Accordion is open.
     expect(accordionPanelContent).not.toBeInTheDocument();
+    expect(screen.getByTitle("plus icon")).toBeInTheDocument();
+    expect(screen.getByTitle("plus icon")).toHaveAttribute(
+      "data-file-name",
+      "SvgPlus"
+    );
 
     userEvent.click(accordionLabel);
 
     accordionPanelContent = screen.queryByText(/operates the village store/i);
     expect(accordionLabel).toHaveAttribute("aria-expanded", "true");
     expect(accordionPanelContent).toBeInTheDocument();
+    expect(screen.getByTitle("minus icon")).toBeInTheDocument();
+    expect(screen.getByTitle("minus icon")).toHaveAttribute(
+      "data-file-name",
+      "SvgMinus"
+    );
   });
 
   it("closes the accordion when the button is in focus and the 'esc' key is pressed", async () => {

src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -27,36 +27,13 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
       </span>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-q3eg3a"
+        className="chakra-icon css-1nreziu"
+        data-file-name="SvgPlus"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
         title="plus icon"
-        viewBox="0 0 24 24"
-      >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
-        >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+      />
     </button>
   </div>
 </div>
@@ -89,36 +66,13 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
       </span>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-q3eg3a"
+        className="chakra-icon css-1nreziu"
+        data-file-name="SvgPlus"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
         title="plus icon"
-        viewBox="0 0 24 24"
-      >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
-        >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+      />
     </button>
   </div>
 </div>
@@ -151,36 +105,13 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
       </span>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-q3eg3a"
+        className="chakra-icon css-1nreziu"
+        data-file-name="SvgPlus"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
         title="plus icon"
-        viewBox="0 0 24 24"
-      >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
-        >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+      />
     </button>
   </div>
 </div>
@@ -214,36 +145,13 @@ exports[`Accordion Renders the UI snapshot correctly 4`] = `
       </span>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-q3eg3a"
+        className="chakra-icon css-1nreziu"
+        data-file-name="SvgPlus"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
         title="plus icon"
-        viewBox="0 0 24 24"
-      >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
-        >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+      />
     </button>
   </div>
 </div>
@@ -276,36 +184,13 @@ exports[`Accordion Renders the UI snapshot correctly 5`] = `
       </span>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-q3eg3a"
+        className="chakra-icon css-1nreziu"
+        data-file-name="SvgPlus"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
         title="plus icon"
-        viewBox="0 0 24 24"
-      >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
-        >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+      />
     </button>
   </div>
 </div>
@@ -338,36 +223,13 @@ exports[`Accordion Renders the UI snapshot correctly 6`] = `
       </span>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-q3eg3a"
+        className="chakra-icon css-1nreziu"
+        data-file-name="SvgPlus"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
         title="plus icon"
-        viewBox="0 0 24 24"
-      >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
-        >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+      />
     </button>
   </div>
 </div>
@@ -400,36 +262,13 @@ exports[`Accordion Renders the UI snapshot correctly 7`] = `
       </span>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-q3eg3a"
+        className="chakra-icon css-1nreziu"
+        data-file-name="SvgPlus"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
         title="plus icon"
-        viewBox="0 0 24 24"
-      >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
-        >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+      />
     </button>
   </div>
 </div>

src/components/Banner/Banner.test.tsx

@@ -77,6 +77,11 @@ describe("Banner", () => {
     // by its "img" role.
     const icon = screen.getByTestId("bannerID-banner-icon");
     expect(icon).toBeInTheDocument();
+
+    expect(screen.getByTitle("Banner neutral icon")).toHaveAttribute(
+      "data-file-name",
+      "SvgErrorOutline"
+    );
   });
 
   it("renders a custom Icon component", () => {
@@ -100,6 +105,11 @@ describe("Banner", () => {
 
     const customIcon = screen.getByTestId("custom-icon");
     expect(customIcon).toBeInTheDocument();
+
+    expect(screen.getByTitle("check icon")).toHaveAttribute(
+      "data-file-name",
+      "SvgCheck"
+    );
   });
 
   it("renders with an aria-label attribute", () => {
@@ -121,6 +131,10 @@ describe("Banner", () => {
 
     expect(screen.getByTestId("bannerID-dismissible-icon")).toBeInTheDocument();
     expect(screen.getByTitle("Banner close icon")).toBeInTheDocument();
+    expect(screen.getByTitle("Banner close icon")).toHaveAttribute(
+      "data-file-name",
+      "SvgClose"
+    );
   });
 
   it("renders the informative Banner type", () => {