@phillips/seldon 1.222.0 → 1.223.0

package/dist/components/SeldonImage/SeldonImage.js

@@ -1,85 +1,87 @@
-import { jsxs as w, jsx as t } from "react/jsx-runtime";
-import { memo as x, forwardRef as C, useRef as P, useState as S, useCallback as j, useEffect as k } from "react";
+import { jsxs as w, jsx as l } from "react/jsx-runtime";
+import { memo as L, forwardRef as C, useRef as S, useState as T, useCallback as V, useEffect as j } from "react";
 import d from "../../node_modules/classnames/index.js";
-import { getCommonProps as R } from "../../utils/index.js";
-import V from "../Icon/Icon.js";
-import { isImageValid as B } from "./utils.js";
-const H = typeof window > "u", M = x(
+import { getCommonProps as k } from "../../utils/index.js";
+import { TextVariants as M } from "../Text/types.js";
+import P from "../Text/Text.js";
+import { isImageValid as R } from "./utils.js";
+const B = typeof window > "u", H = L(
   C(
     ({
       className: I,
       aspectRatio: s = "none",
       objectFit: g = "none",
-      hasBlurBackground: b = !1,
-      imageClassName: h,
-      imageStyle: y,
-      src: o,
-      alt: c,
-      srcSet: a,
+      hasBlurBackground: y = !1,
+      imageClassName: N,
+      imageStyle: b,
+      src: a,
+      alt: f,
+      srcSet: o,
       sizes: r,
-      loading: N,
-      fetchPriority: E,
-      errorText: v = "Error loading image",
-      ...f
-    }, L) => {
-      const { className: e, ...u } = R(f, "SeldonImage"), p = P(null), [n, i] = S(() => {
-        if (H)
+      loading: h,
+      fetchPriority: v,
+      errorText: x = "Image Unavailable",
+      ...c
+    }, E) => {
+      const { className: e, ...u } = k(c, "SeldonImage"), p = S(null), [n, i] = T(() => {
+        if (B)
           return "loading";
-        const l = document.getElementById(o);
-        if (l instanceof HTMLImageElement && !l.classList.contains(`${e}-img--hidden`))
+        const t = document.getElementById(a);
+        if (t instanceof HTMLImageElement && !t.classList.contains(`${e}-img--hidden`))
           return "loaded";
         const m = document.createElement("img");
-        return a && (m.srcset = a), r && (m.sizes = r), m.src = o, m.complete ? "loaded" : "loading";
-      }), $ = j(async () => {
-        const l = await B({
+        return o && (m.srcset = o), r && (m.sizes = r), m.src = a, m.complete ? "loaded" : "loading";
+      }), $ = V(async () => {
+        const t = await R({
           img: p.current,
-          src: o,
-          srcSet: a,
+          src: a,
+          srcSet: o,
           sizes: r
         });
-        i(l ? "loaded" : "error");
-      }, [o, a, r]);
-      return k(() => {
+        i(t ? "loaded" : "error");
+      }, [a, o, r]);
+      return j(() => {
         $();
       }, [$]), /* @__PURE__ */ w(
         "div",
         {
-          ref: L,
+          ref: E,
           className: d(e, I, {
-            [`${e}--aspect-ratio-${s.replace("/", "-")}`]: s !== "none"
+            [`${e}--aspect-ratio-${s.replace("/", "-")}`]: s !== "none",
+            [`${e}--error-image`]: n === "error"
           }),
           role: "img",
-          "aria-label": c,
-          ...f,
+          "aria-label": f,
+          ...c,
           ...u,
           children: [
-            b && /* @__PURE__ */ t(
+            y && /* @__PURE__ */ l(
               "div",
               {
                 className: d(`${e}-blur`, {
                   [`${e}-blur--hidden`]: n === "loading" || n === "error"
                 }),
-                style: { backgroundImage: `url(${o})` }
+                style: { backgroundImage: `url(${a})` }
               }
             ),
-            n === "error" ? /* @__PURE__ */ t("div", { className: `${e}--error`, children: /* @__PURE__ */ t(V, { icon: "PhillipsLogo", "aria-label": v, role: "img" }) }) : null,
-            /* @__PURE__ */ t(
+            n === "error" ? /* @__PURE__ */ l("div", { className: `${e}--error`, children: /* @__PURE__ */ l(P, { variant: M.displayMedium, className: `${e}--error-text`, children: x }) }) : null,
+            /* @__PURE__ */ l(
               "img",
               {
-                className: d(`${e}-img`, h, {
+                className: d(`${e}-img`, N, {
                   [`${e}-img--hidden`]: n === "error",
                   [`${e}-img--object-fit-${g}`]: g !== "none"
                 }),
-                id: o,
-                style: y,
-                src: o,
-                srcSet: a,
+                id: a,
+                style: b,
+                src: a,
+                srcSet: o,
                 sizes: r,
-                alt: c,
+                alt: f,
                 "data-testid": `${u["data-testid"]}-img`,
                 ref: p,
-                loading: N,
-                fetchpriority: E,
+                loading: h,
+                fetchpriority: v,
                 onLoad: () => {
                   i("loaded");
                 },
@@ -94,7 +96,7 @@ const H = typeof window > "u", M = x(
     }
   )
 );
-M.displayName = "SeldonImage";
+H.displayName = "SeldonImage";
 export {
-  M as default
+  H as default
 };

package/dist/scss/components/SeldonImage/_seldonImage.scss

@@ -15,14 +15,16 @@
   &--error {
     width: 100%;
 
-    .phillips-logo {
-      fill: $medium-gray;
+    &-image {
+      background-color: $bg-soft;
     }
 
-    svg {
+    &-text {
+      color: $black-50;
       left: 50%;
-      max-width: 50%;
       position: absolute;
+      text-align: center;
+      text-transform: uppercase;
       top: 50%;
       transform: translate(-50%, -50%);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.222.0",
+  "version": "1.223.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"