Merge branch 'release' into gh-pages

Author: bigfishdesign13

CHANGELOG.md

@@ -8,6 +8,13 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 4.1.4 (February 26, 2026)
+
+### Updates
+
+- Updates the `StatusBadge` component to allow the label text to wrap onto multiple lines.
+- Updates the `Hero` component to add the `isBlurredBackgroundImage` prop for applying a blur effect to the background image in the "campaign" variant.
+
 ## 4.1.3 (February 12, 2026)
 
 ### Updates

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "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.1.3"
+  versionLatest="4.1.4"
 />
 
 <Canvas of={HeroStories.WithControls} />
@@ -205,9 +205,10 @@ The `"campaign"` hero variant should be used with `backgroundImageSrc`,
 `heading`, and `imageProps` props. `backdropBackgroundColor`, `subHeaderText`,
 `textBackgroundColor`, and `textColor` props may also be used.
 
-The `"campaign"` variant is special in that it has both a background and foreground.
-We understand that this naming can be confusing, but it helps to think of this
-variant having two layers.
+The `"campaign"` variant is special in that it has both a foreground and a
+background and it helps to think of this variant having two layers.
+
+#### Foreground
 
 To modify the foreground, the `textBackgroundColor`, `textColor`, and
 `imageProps` props should be used.
@@ -298,78 +299,120 @@ To modify the foreground, the `textBackgroundColor`, `textColor`, and
 `}
   language="jsx"
 />
-#### isDarkBackgroundImage
+#### Background
+
+To modify the background, either the `backdropBackgroundColor` or
+`backgroundImageSrc` prop should be used. If both are set, the
+`backgroundImageSrc` prop will take precedence.
+
+For clarification, the component background is sometimes referred to as the
+"backdrop."
+
+##### backdropBackgroundColor
+
+The `backdropBackgroundColor` prop is used to set the background color behind
+the featured image and text content. It is recommended to use DS color design
+tokens to set this value.
+
+##### backgroundImageSrc
+
+The `backgroundImageSrc` prop is used to set a background image behind the
+featured image and text content.
+
+For additional configuration, the `isDarkBackgroundImage` and
+`isBlurredBackgroundImage` props can be used to control the color and blur
+treatment of the background image.
+
+If `isDarkBackgroundImage` is true, the background image will be converted to
+black &amp; white and darkened moderately.
 
-The `isDarkBackgroundImage` prop can be used in the `"campaign"` hero to toggle
-the visual treatment of the background image. If true, the background image will
-be converted to black & white and darkened to 60% black.
+If `isBlurredBackgroundImage` is true, the background image will be blurred
+heavily and darkened slightly.
 
-<Story of={HeroStories.CampaignDarkBackgroundImage} />
+These two props may be used independently or together to achieve the desired
+background treatment.
+
+<Story of={HeroStories.CampaignBackgroundTreatment} />
 
 <Source
   code={`
   <Hero
-    backgroundImageSrc="https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg"
+    backdropBackgroundColor="section.research.primary"
     heading={
       <Heading
         level="h1"
-        id="campaign-hero-default-heading"
         text="Hero Campaign"
       />
     }
     imageProps={
       alt: "Image example",
-      src: "https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg",
+      src: "https://www.nypl.org/scout/_next/image?url=https%3A%2F%2Fdrupal.nypl.org%2Fsites-drupal%2Fdefault%2Ffiles%2Fstyles%2F2_1_960%2Fpublic%2F2023-04%2F2023_04_17_030%2520%25281%2529.jpg%3Fh%3Dc9a3a702%26itok%3DZIuDnI6f&w=2048&q=90",
+    }
+    subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
+    variant="campaign"
+  />
+`}
+  language="jsx"
+/>
+<Source
+  code={`
+  <Hero
+    backgroundImageSrc="https://www.nypl.org/scout/_next/image?url=https%3A%2F%2Fdrupal.nypl.org%2Fsites-drupal%2Fdefault%2Ffiles%2Fstyles%2F2_1_960%2Fpublic%2F2023-04%2F2023_04_17_030%2520%25281%2529.jpg%3Fh%3Dc9a3a702%26itok%3DZIuDnI6f&w=2048&q=90"
+    heading={
+      <Heading
+        level="h1"
+        text="Hero Campaign"
+      />
+    }
+    imageProps={
+      alt: "Image example",
+      src: "https://www.nypl.org/scout/_next/image?url=https%3A%2F%2Fdrupal.nypl.org%2Fsites-drupal%2Fdefault%2Ffiles%2Fstyles%2F2_1_960%2Fpublic%2F2023-04%2F2023_04_17_030%2520%25281%2529.jpg%3Fh%3Dc9a3a702%26itok%3DZIuDnI6f&w=2048&q=90",
     }
     isDarkBackgroundImage
-    subHeaderText={
-      <>
-        With 92 locations across the Bronx, Manhattan, and Staten Island,{" "}
-        <Link href="https://www.nypl.org/locations/snfl/childrens">
-          The New York Public Library
-        </Link>{" "}
-        is an essential part of neighborhoods across the city. Visit us today.
-      </>
+    subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
+    variant="campaign"
+  />
+`}
+  language="jsx"
+/>
+<Source
+  code={`
+  <Hero
+    backgroundImageSrc="https://www.nypl.org/scout/_next/image?url=https%3A%2F%2Fdrupal.nypl.org%2Fsites-drupal%2Fdefault%2Ffiles%2Fstyles%2F2_1_960%2Fpublic%2F2023-04%2F2023_04_17_030%2520%25281%2529.jpg%3Fh%3Dc9a3a702%26itok%3DZIuDnI6f&w=2048&q=90"
+    heading={
+      <Heading
+        level="h1"
+        text="Hero Campaign"
+      />
     }
+    imageProps={
+      alt: "Image example",
+      src: "https://www.nypl.org/scout/_next/image?url=https%3A%2F%2Fdrupal.nypl.org%2Fsites-drupal%2Fdefault%2Ffiles%2Fstyles%2F2_1_960%2Fpublic%2F2023-04%2F2023_04_17_030%2520%25281%2529.jpg%3Fh%3Dc9a3a702%26itok%3DZIuDnI6f&w=2048&q=90",
+    }
+    isBlurredBackgroundImage
+    subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
     variant="campaign"
   />
 `}
   language="jsx"
 />
-
-#### backdropBackgroundColor
-
-The "backdrop" is what we call the background and that can be set through either
-the `backdropBackgroundColor` or `backgroundImageSrc` props. When both are set,
-the `backgroundImageSrc` will take precedence.
-
-<Story of={HeroStories.CampaignBackgroundColors} />
-
 <Source
   code={`
   <Hero
-    backdropBackgroundColor="section.research.primary"
+    backgroundImageSrc="https://www.nypl.org/scout/_next/image?url=https%3A%2F%2Fdrupal.nypl.org%2Fsites-drupal%2Fdefault%2Ffiles%2Fstyles%2F2_1_960%2Fpublic%2F2023-04%2F2023_04_17_030%2520%25281%2529.jpg%3Fh%3Dc9a3a702%26itok%3DZIuDnI6f&w=2048&q=90"
     heading={
       <Heading
         level="h1"
-        id="campaign-hero-long-text-heading"
         text="Hero Campaign"
       />
     }
     imageProps={
       alt: "Image example",
-      src: "https://images.nypl.org/index.php?id=swope_244712&t=w",
+      src: "https://www.nypl.org/scout/_next/image?url=https%3A%2F%2Fdrupal.nypl.org%2Fsites-drupal%2Fdefault%2Ffiles%2Fstyles%2F2_1_960%2Fpublic%2F2023-04%2F2023_04_17_030%2520%25281%2529.jpg%3Fh%3Dc9a3a702%26itok%3DZIuDnI6f&w=2048&q=90",
     }
+    isBlurredBackgroundImage
     isDarkBackgroundImage
-    subHeaderText={
-      <>
-        With 92 locations across the Bronx, Manhattan, and Staten Island,{" "}
-        <Link href="https://www.nypl.org/locations/snfl/childrens">
-          The New York Public Library
-        </Link>{" "}
-        is an essential part of neighborhoods across the city. Visit us today.
-      </>
-    }
+    subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
     variant="campaign"
   />
 `}

src/components/Hero/Hero.mdx

@@ -59,6 +59,10 @@ const imageProps = {
   alt: "Image example",
   src: getPlaceholderImage(),
 };
+const imagePropsColorful = {
+  alt: "Colorful image example",
+  src: "https://www.nypl.org/scout/_next/image?url=https%3A%2F%2Fdrupal.nypl.org%2Fsites-drupal%2Fdefault%2Ffiles%2Fstyles%2F2_1_960%2Fpublic%2F2023-04%2F2023_04_17_030%2520%25281%2529.jpg%3Fh%3Dc9a3a702%26itok%3DZIuDnI6f&w=2048&q=90",
+};
 
 const meta: Meta<typeof Hero> = {
   title: "Components/Basic Elements/Hero",
@@ -69,6 +73,10 @@ const meta: Meta<typeof Hero> = {
     foregroundColor: { control: { type: "color" } },
     heading: { control: false },
     imageProps: { control: false },
+    isBlurredBackgroundImage: {
+      control: { type: "boolean" },
+      table: { defaultValue: { summary: "false" } },
+    },
     isDarkBackgroundImage: {
       control: { type: "boolean" },
       table: { defaultValue: { summary: "false" } },
@@ -104,6 +112,7 @@ export const WithControls: Story = {
     imageProps,
     "imageProps.alt": "",
     "imageProps.src": "",
+    isBlurredBackgroundImage: undefined,
     isDarkBackgroundImage: undefined,
     isDarkText: undefined,
     subHeaderText: undefined,
@@ -235,7 +244,7 @@ export const Campaign: Story = {
           text="Campaign Hero at Default Height"
         />
         <Hero
-          backgroundImageSrc={getPlaceholderImage()}
+          backgroundImageSrc="https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg"
           variant="campaign"
           heading={
             <Heading
@@ -280,23 +289,73 @@ export const Campaign: Story = {
     </Stack>
   ),
 };
-export const CampaignDarkBackgroundImage: Story = {
+
+export const CampaignBackgroundTreatment: Story = {
   render: () => (
-    <Hero
-      backgroundImageSrc="https://iiif.nypl.org/iiif/2/5164274/full/!900,900/0/default.jpg"
-      variant="campaign"
-      heading={
+    <Stack spacing="l">
+      <Stack spacing="s">
+        <Heading level="h3" size="heading8" text="Backdrop background color" />
+        <Hero
+          backdropBackgroundColor="ui.warning.secondary"
+          variant="campaign"
+          heading={<Heading level="h1" mb="s" text="Hero Campaign" />}
+          imageProps={imagePropsColorful}
+          subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
+        />
+      </Stack>
+      <Stack spacing="s">
+        <Heading level="h3" size="heading8" text="Dark background image" />
+        <Hero
+          backgroundImageSrc={imagePropsColorful.src}
+          variant="campaign"
+          heading={<Heading level="h1" mb="s" text="Hero Campaign" />}
+          imageProps={imagePropsColorful}
+          isDarkBackgroundImage
+          subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
+        />
+      </Stack>
+      <Stack spacing="s">
+        <Heading level="h3" size="heading8" text="Blurred background image" />
+        <Hero
+          backgroundImageSrc={imagePropsColorful.src}
+          variant="campaign"
+          heading={<Heading level="h1" mb="s" text="Hero Campaign" />}
+          imageProps={imagePropsColorful}
+          isBlurredBackgroundImage
+          subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
+        />
+      </Stack>
+      <Stack spacing="s">
         <Heading
-          level="h1"
-          id="campaign-hero-default-heading"
-          mb="s"
-          text="Hero Campaign"
+          level="h3"
+          size="heading8"
+          text="Dark and blurred background image"
         />
-      }
-      imageProps={imageProps}
-      isDarkBackgroundImage
-      subHeaderText={otherSubHeaderText}
-    />
+        <Hero
+          backgroundImageSrc={imagePropsColorful.src}
+          variant="campaign"
+          heading={<Heading level="h1" mb="s" text="Hero Campaign" />}
+          imageProps={imagePropsColorful}
+          isBlurredBackgroundImage
+          isDarkBackgroundImage
+          subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
+        />
+      </Stack>
+      <Stack spacing="s">
+        <Heading
+          level="h3"
+          size="heading8"
+          text="Unstyled background image (for comparison)"
+        />
+        <Hero
+          backgroundImageSrc={imagePropsColorful.src}
+          variant="campaign"
+          heading={<Heading level="h1" mb="s" text="Hero Campaign" />}
+          imageProps={imagePropsColorful}
+          subHeaderText="Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis."
+        />
+      </Stack>
+    </Stack>
   ),
 };
 export const CampaignBackgroundColors: Story = {