Merge pull request #1952 from NYPL/development

Release v4.1.3

Author: bigfishdesign13

CHANGELOG.md

@@ -8,6 +8,18 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 4.1.3 (February 12, 2026)
+
+### Updates
+
+- Updates the `TagSet` component to add semantic color variants.
+- Updates the hex color value for `ui.warning.tertiary` for better accessibility compliance.
+- Updates the `Hero` component to alter the validation of the background props in the `"campaign"` variant.
+
+### Fixes
+
+- Fixes the hex color value for `dark.ui.warning.secondary`.
+
 ## 4.1.2 (January 29, 2026)
 
 ### Updates

package-lock.json

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

package.json

@@ -21,7 +21,7 @@ import { changelogData } from "./heroChangelogData";
   componentName="Hero"
   summary="A full-width banner at the top of a page"
   versionAdded="0.2.0"
-  versionLatest="4.0.2"
+  versionLatest="4.1.3"
 />
 
 <Canvas of={HeroStories.WithControls} />

src/components/Hero/Hero.mdx

@@ -261,7 +261,7 @@ describe("Hero", () => {
     const heading = (
       <Heading level="h1" id="hero-errors" text="Hero with Error Warnings" />
     );
-    const { rerender } = render(
+    render(
       <Hero
         variant="campaign"
         heading={heading}
@@ -270,22 +270,8 @@ describe("Hero", () => {
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Hero: It is recommended to use either the " +
-        "`backdropBackgroundColor`, `backgroundImageSrc`, or `imageProps.src` " +
-        "prop for the `'campaign'` variant."
-    );
-
-    rerender(
-      <Hero
-        variant="campaign"
-        heading={heading}
-        subHeaderText={otherSubHeaderText}
-        backgroundImageSrc={getPlaceholderImage("smaller", 0)}
-      />
-    );
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Hero: It is recommended to use either the " +
-        "`backdropBackgroundColor`, `backgroundImageSrc`, or `imageProps.src` " +
+      "NYPL Reservoir Hero: It is recommended to use either the" +
+        "`backdropBackgroundColor` prop or the `backgroundImageSrc` " +
         "prop for the `'campaign'` variant."
     );
   });

src/components/Hero/Hero.test.tsx

@@ -162,12 +162,13 @@ export const Hero: ChakraComponent<
       }
       if (
         variant === "campaign" &&
-        (!backdropBackgroundColor || !backgroundImageSrc || !imageProps.src)
+        !backdropBackgroundColor &&
+        !backgroundImageSrc
       ) {
         console.warn(
-          "NYPL Reservoir Hero: It is recommended to use either the " +
-            "`backdropBackgroundColor`, `backgroundImageSrc`, or " +
-            "`imageProps.src` prop for the `'campaign'` variant."
+          "NYPL Reservoir Hero: It is recommended to use either the" +
+            "`backdropBackgroundColor` prop or the `backgroundImageSrc` " +
+            "prop for the `'campaign'` variant."
         );
       }
       if (variant !== "campaign" && backdropBackgroundColor) {

src/components/Hero/Hero.tsx

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2026-02-12",
+    version: "4.1.3",
+    type: "Update",
+    affects: ["Functionality"],
+    notes: [
+      'Updates the validation of the background props in the "campaign" variant.',
+    ],
+  },
   {
     date: "2025-09-30",
     version: "4.0.2",

src/components/Hero/heroChangelogData.ts

@@ -4,8 +4,10 @@ import {
   Description,
   Meta,
   Source,
+  Unstyled,
 } from "@storybook/addon-docs/blocks";
 
+import Banner from "../Banner/Banner";
 import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as TagSetStories from "./TagSet.stories";
 import Link from "../Link/Link";
@@ -19,7 +21,7 @@ import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
   componentName="TagSet"
   summary="Group of tags that allow content to be explored or filtered"
   versionAdded="1.2.0"
-  versionLatest="4.0.0"
+  versionLatest="4.1.3"
 />
 
 <Canvas of={TagSetStories.ExploreVariant} />
@@ -31,6 +33,7 @@ import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
 - [Accessibility](#accessibility)
 - [Explore variant](#explore-variant)
 - [Filter variant](#filter-variant)
+- [Semantic variants](#semantic-variants)
 - [Examples](#examples)
 - [Changelog](#changelog)
 
@@ -200,7 +203,7 @@ consuming application may need for logic filtering.
 <Source
   code={`
   const tagSetData = [
-    { iconName: "utilityAccountFilled", label: "Abbey Road", id: "abby-road" },
+    { iconName: "utilityAccountFilled", label: "Abbey Road", id: "abbey-road" },
     { iconName: "actionLaunch", label: "The Beatles", id: "the-beatles" },
     { iconName: "alertWarningOutline", label: "Revolver", id: "revolver" },
     { iconName: "check", label: "Sgt. Pepper's Lonely Hearts Club Band", id: "sgt-pepper" },
@@ -213,6 +216,26 @@ Resources:
 
 - [W3C WAI-ARIA Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
 
+## Semantic variants
+
+Semantic variants align with specific uses.
+
+<Unstyled>
+  <Banner
+    content={
+      <>
+        <strong>RECOMMENDATION:</strong> Avoid using the "informative" variant
+        for "filter" tags as the colors are similar to the default colors of
+        "explore" tags and imply that tags are links.
+      </>
+    }
+    my="s"
+    variant="recommendation"
+  />
+</Unstyled>
+
+<Canvas of={TagSetStories.SemanticVariants} />
+
 ## Examples
 
 <Canvas of={TagSetStories.FormattingExamples} />