@nypl/design-system-react-components 3.4.0-rc-hero-1 → 3.4.0-rc-hero-2

package/dist/design-system-react-components.js

@@ -38701,7 +38701,21 @@ const db = [
         variant: v
       }), O = R.heading, P = d && X.cloneElement(d, { __css: O });
       let I = {}, Y = {};
-      L.src && !L.alt && console.warn(
+      const A = L.component || /* @__PURE__ */ H.jsx(
+        ua,
+        {
+          alt: L.alt,
+          fallbackSrc: L.fallbackSrc,
+          id: L.id,
+          onError: L.onError,
+          src: L.src
+        }
+      );
+      if (L.component) {
+        const { src: e1, id: c1, alt: v1, fallbackSrc: w1, onError: y1 } = L.component.props;
+        Object.assign(L, { src: e1, id: c1, alt: v1, fallbackSrc: w1, onError: y1 });
+      }
+      console.log("pre check", L), L.src && !L.alt && console.warn(
         'NYPL Reservoir Hero: The "imageProps.src" prop was passed but the "imageProps.alt" props was not. This will make the rendered image inaccessible.'
       ), v === "primary" ? (i || console.warn(
         "NYPL Reservoir Hero: It is recommended to use the `backgroundImageSrc` prop for the `'primary'` `heroType` variant."
@@ -38722,7 +38736,7 @@ const db = [
       ), v !== "campaign" && E && console.warn(
         "NYPL Reservoir Hero: The `isDarkBackgroundImage` prop has been passed, but the `'campaign'` `heroType` variant was not set. It will be ignored."
       );
-      const A = {
+      const $ = {
         primary: a5("ui.black", "dark.ui.bg.default"),
         secondary: a5("ui.bg.default", "dark.ui.bg.default"),
         tertiary: a5("ui.gray.x-dark", "dark.ui.bg.default"),
@@ -38732,14 +38746,14 @@ const db = [
           "dark.ui.bg.active"
         ),
         fiftyFifty: a5("ui.bg.default", "dark.ui.bg.default")
-      }, $ = A[v];
+      }, j = $[v];
       if (v === "primary")
         I = i ? {
-          bgColor: $,
+          bgColor: j,
           backgroundImage: `/**/url("${i}")`
         } : {};
       else if (v === "secondary")
-        I = { bgColor: $ };
+        I = { bgColor: j };
       else if (v === "campaign") {
         const e1 = {
           content: '""',
@@ -38771,33 +38785,19 @@ const db = [
         } : {
           _before: {
             ...e1,
-            bgColor: A.campaignBackdrop
+            bgColor: $.campaignBackdrop
           }
         };
       } else
-        (v === "tertiary" || v === "fiftyFifty") && (I = s ? { bgColor: s } : { bgColor: s || $ });
+        (v === "tertiary" || v === "fiftyFifty") && (I = s ? { bgColor: s } : { bgColor: s || j });
       db.includes(v) ? (p || s || o) && console.warn(
         "NYPL Reservoir Hero: The `foregroundColor`, `backgroundColor`, or `backdropBackgroundColor` props have been passed, but the `'secondary'` `heroType` variant will not use them."
       ) : Y = {
         ...p && { color: p },
-        ...s ? { backgroundColor: s } : { bgColor: $ }
+        ...s ? { backgroundColor: s } : { bgColor: j }
       }, p && M && console.warn(
         "NYPL Reservoir Hero: The `foregroundColor` and `isDarkText` props have both been passed. Thse props can not be used at the same time, so the `foregroundColor` prop will override the `isDarkText` prop."
       );
-      const j = L.component || /* @__PURE__ */ H.jsx(
-        ua,
-        {
-          alt: L.alt,
-          fallbackSrc: L.fallbackSrc,
-          id: L.id,
-          onError: L.onError,
-          src: L.src
-        }
-      );
-      if (L.component) {
-        const { src: e1, id: c1, alt: v1, fallbackSrc: w1, onError: y1 } = L.component.props;
-        Object.assign(L, { src: e1, id: c1, alt: v1, fallbackSrc: w1, onError: y1 });
-      }
       const i1 = v === "campaign" ? /* @__PURE__ */ H.jsxs(H.Fragment, { children: [
         /* @__PURE__ */ H.jsx(
           g1,
@@ -38808,7 +38808,7 @@ const db = [
             style: {
               backgroundImage: `/**/url("${L.src}")`
             },
-            children: j
+            children: A
           }
         ),
         /* @__PURE__ */ H.jsxs(g1, { __css: R.interior, children: [
@@ -38825,7 +38825,7 @@ const db = [
             style: {
               backgroundImage: v === "fiftyFifty" ? `/**/url("${L.src}")` : void 0
             },
-            children: j
+            children: A
           }
         ),
         P,

package/dist/src/components/Hero/Hero.d.ts

@@ -29,13 +29,12 @@ export interface HeroProps {
     heroType?: HeroTypes;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** Object used to create and render the `Image` component. Note that only
-     * `alt`, `component`, and `src` are the available attributes to pass. If
-     * `imageProps.alt` is left blank, a warning will be logged to the console and
+    /** Object used to create and render the `Image` component. You can pass either `component`
+     * (with its own internal props) or `src`, `alt`, and `id`.
+     * You can also pass `fallBackSrc` and `onError` (only needed for the "campaign" variant).
+     * If `imageProps.alt` is left blank, a warning will be logged to the console and
      * will cause accessibility issues. For `imageProps.src`, it will only work for
-     * the "secondary", "fiftyFifty" and "campaign" `Hero` types; Note: `imageProps.src`
-     * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
-     * `Hero` type. Note: not all `Hero` variations utilize this prop. */
+     * the "secondary", "fiftyFifty" and "campaign" `Hero` types. */
     imageProps?: ComponentImageProps;
     /** Optional boolean used to toggle the default text color from light to dark.
      * Set isDarkText to `true` if the backgroundColor is set to a light color. */

package/package.json

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