Merge pull request #1941 from NYPL/development

Release v4.1.1

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.1 (December 11, 2025)
+
+### Adds
+
+- Adds `Text case` to the `Style Guide`.
+- Adds the `"utilityGridView"` and `"utilityListView"` options to the `Icon` component.
+
+### Updates
+
+- Updates to `Reservoir v4 Migration Guide` to include details about the `Hero` component.
+- Updates the docs for the `Hero` component to no longer show `backgroundColor` in the props table.
+
 ## 4.1.0 (November 20, 2025)
 
 ### Adds

icons/svg/utility-list-view.svg

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

package-lock.json

@@ -283,10 +283,15 @@ as expected on smaller screen sizes and will need to be adjusted.
   </Box>
 </Flex>
 
+#### If using `Hero`, rename `backgroundColor` to `textBackgroundColor`.
+
+We updated the `backgroundColor` prop in `Hero` to `textBackgroundColor` so the
+name of the prop aligns more closely with the way it is used in the component.
+
 #### If using `Table`, rename `tableTextSize` to `fontSize`.
 
 We updated the `tableTextSize` prop in `Table` to `fontSize` to align more
-closely with the CSS property.
+closely with the native CSS property.
 
 #### If using the `onMixedStateChange` function, update the argument to use object destructuring.
 

package.json

@@ -381,6 +381,20 @@ the `backgroundImageSrc` will take precedence.
 Use the `textBackgroundColor` prop to set a custom background color for the text
 content.
 
+<Banner
+  content={
+    <>
+      <strong>IMPORTANT:</strong> The <code>textBackgroundColor</code> prop
+      should be used where the <code>backgroundColor</code> prop was used
+      previously to set the color behind the text in the <code>Hero</code>{" "}
+      component.
+    </>
+  }
+  mt="l"
+  mb="l"
+  variant="informative"
+/>
+
 <Story of={HeroStories.TextBackgroundColor} />
 
 <Source
@@ -389,7 +403,7 @@ content.
     backgroundImageSrc="https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg"
     heading={
       <Heading
-        id="primary-hero"
+        id="primary-hero-textbackgroundcolor"
         level="h1"
         overline="Hero Example"
         subtitle="Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam."
@@ -410,13 +424,12 @@ content.
     heading={
       <Heading
         level="h1"
-        id="tertiary-hero-subtitle-subheading"
-        size="heading2"
-        subtitle="This is the subtitle"
-        text="Hero Tertiary with Subtitle & Sub-Heading"
+        id="tertiary-hero-textbackgroundcolor"
+        overline="Hero Example"
+        text="Hero Tertiary"
       />
     }
-    subHeaderText={otherSubHeaderText}
+    subHeaderText="Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam."
     textColor="ui.white"
     textBackgroundColor="brand.primary"
     variant="tertiary"
@@ -428,11 +441,12 @@ content.
 <Source
   code={`
   <Hero
-    backgroundImageSrc={getPlaceholderImage()}
+    backgroundImageSrc="https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg"
     heading={
       <Heading
         level="h1"
-        id="campaign-hero-default-heading"
+        id="campaign-hero-textbackgroundcolor"
+        overline="Hero Example"
         text="Hero Campaign"
         mb="s"
       />
@@ -441,7 +455,8 @@ content.
       alt: "",
       src: "https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg",
     }}
-    subHeaderText={otherSubHeaderText}
+    isDarkBackgroundImage
+    subHeaderText="Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam."
     textColor="ui.white"
     textBackgroundColor="brand.primary"
     variant="campaign"

src/components/DevelopmentGuide/V4MigrationGuide.mdx

@@ -65,7 +65,7 @@ const meta: Meta<typeof Hero> = {
   component: Hero,
   argTypes: {
     backdropBackgroundColor: { control: { type: "color" } },
-    backgroundColor: { control: { type: "color" } },
+    backgroundColor: { table: { disable: true } },
     foregroundColor: { control: { type: "color" } },
     heading: { control: false },
     imageProps: { control: false },
@@ -98,7 +98,6 @@ type Story = StoryObj<typeof Hero>;
 export const WithControls: Story = {
   args: {
     backdropBackgroundColor: undefined,
-    backgroundColor: undefined,
     backgroundImageSrc: undefined,
     foregroundColor: undefined,
     heading: undefined,
@@ -326,7 +325,7 @@ export const TextBackgroundColor: Story = {
           backgroundImageSrc="https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg"
           heading={
             <Heading
-              id="primary-hero"
+              id="primary-hero-textbackgroundcolor"
               level="h1"
               overline="Hero Example"
               subtitle="Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam."
@@ -343,25 +342,25 @@ export const TextBackgroundColor: Story = {
           heading={
             <Heading
               level="h1"
-              id="tertiary-hero-subtitle-subheading"
-              size="heading2"
-              subtitle="This is the subtitle"
-              text="Hero Tertiary with Subtitle & Sub-Heading"
+              id="tertiary-hero-textbackgroundcolor"
+              overline="Hero Example"
+              text="Hero Tertiary"
             />
           }
-          subHeaderText={otherSubHeaderText}
+          subHeaderText="Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam."
           textBackgroundColor="brand.primary"
           textColor="ui.white"
           variant="tertiary"
         />
       </div>
       <div>
         <Hero
-          backgroundImageSrc={getPlaceholderImage()}
+          backgroundImageSrc="https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg"
           heading={
             <Heading
               level="h1"
-              id="campaign-hero-default-heading"
+              id="campaign-hero-textbackgroundcolor"
+              overline="Hero Example"
               text="Hero Campaign"
               mb="s"
             />
@@ -370,7 +369,8 @@ export const TextBackgroundColor: Story = {
             alt: "",
             src: "https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg",
           }}
-          subHeaderText={otherSubHeaderText}
+          isDarkBackgroundImage
+          subHeaderText="Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam."
           textBackgroundColor="brand.primary"
           textColor="ui.white"
           variant="campaign"

src/components/Hero/Hero.mdx

@@ -19,7 +19,7 @@ import { changelogData } from "./iconChangelogData";
   componentName="Icon"
   summary="Renders commonly used icons in SVG format"
   versionAdded="0.0.4"
-  versionLatest="4.0.2"
+  versionLatest="4.1.1"
 />
 
 <Canvas of={IconStories.WithControls} />

src/components/Hero/Hero.stories.tsx

@@ -82,6 +82,7 @@ import utilityAccountFilled from "../../../icons/svg/utility-account-filled.svg"
 import utilityAccountUnfilled from "../../../icons/svg/utility-account-unfilled.svg";
 import utilityCheck from "../../../icons/svg/utility-check.svg";
 import utilityHamburger from "../../../icons/svg/utility-hamburger.svg";
+import utilityListView from "../../../icons/svg/utility-list-view.svg";
 import utilitySearch from "../../../icons/svg/search.svg";
 
 export default {
@@ -167,6 +168,8 @@ export default {
   utilityAccountFilled,
   utilityAccountUnfilled,
   utilityCheck,
+  utilityGridView: navigationApps, // Reusing existing icon
   utilityHamburger,
+  utilityListView,
   utilitySearch,
 };

src/components/Icons/Icon.mdx

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2025-12-11",
+    version: "4.1.1",
+    type: "Update",
+    affects: ["Functionality"],
+    notes: ["Added the `utilityGridView` and `utilityListView` icons."],
+  },
   {
     date: "2025-09-30",
     version: "4.0.2",