@phillips/seldon 1.83.0 → 1.84.1

package/dist/components/SeldonImage/SeldonImage.js

@@ -1,64 +1,72 @@
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
-import { forwardRef as h, useRef as I, useState as v, useEffect as x } from "react";
-import { getCommonProps as y } from "../../utils/index.js";
-import n from "../../node_modules/classnames/index.js";
-const E = h(
+import { jsxs as S, jsx as l } from "react/jsx-runtime";
+import { forwardRef as h, useRef as y, useState as E, useCallback as v, useEffect as w } from "react";
+import { getCommonProps as x } from "../../utils/index.js";
+import m from "../../node_modules/classnames/index.js";
+function C(i) {
+  return new Promise((a) => {
+    const r = document.createElement("img");
+    r.onerror = () => a(!1), r.onload = () => a(!0), r.src = i;
+  });
+}
+const P = h(
   ({
-    className: f,
+    className: i,
     aspectRatio: d = "none",
-    objectFit: l = "none",
-    hasBlurBackground: $ = !1,
+    objectFit: a = "none",
+    hasBlurBackground: r = !1,
     imageClassName: u,
-    imageStyle: p,
-    src: s,
-    alt: m,
-    errorText: N = "Error loading image",
-    ...i
-  }, S) => {
-    const { className: e, ...t } = y(i, "SeldonImage"), g = I(null), [r, o] = v("loading");
-    return x(() => {
-      var c;
-      (c = g.current) != null && c.complete && o("loaded");
-    }, []), /* @__PURE__ */ b(
+    imageStyle: $,
+    src: n,
+    alt: t,
+    errorText: p = "Error loading image",
+    ...g
+  }, N) => {
+    const { className: e, ...c } = x(g, "SeldonImage"), b = y(null), [o, s] = E("loading"), f = v(async () => {
+      const I = await C(n);
+      s(I ? "loaded" : "error");
+    }, [n]);
+    return w(() => {
+      f();
+    }, [f]), /* @__PURE__ */ S(
       "div",
       {
-        ref: S,
-        className: n(e, f, {
-          [`${e}--hidden`]: r === "loading" || r === "error",
+        ref: N,
+        className: m(e, i, {
+          [`${e}--hidden`]: o === "loading" || o === "error",
           [`${e}--aspect-ratio-${d.replace("/", "-")}`]: d !== "none"
         }),
         role: "img",
-        "aria-label": m,
-        ...i,
-        ...t,
+        "aria-label": t,
+        ...g,
+        ...c,
         children: [
-          $ && /* @__PURE__ */ a(
+          r && /* @__PURE__ */ l(
             "div",
             {
-              className: n(`${e}-blur`, {
-                [`${e}-blur--hidden`]: r === "loading" || r === "error"
+              className: m(`${e}-blur`, {
+                [`${e}-blur--hidden`]: o === "loading" || o === "error"
               }),
-              style: { backgroundImage: `url(${s})` }
+              style: { backgroundImage: `url(${n})` }
             }
           ),
-          r === "error" && /* @__PURE__ */ a("div", { className: `${e}--error`, children: `${N}` }),
-          /* @__PURE__ */ a(
+          o === "error" && /* @__PURE__ */ l("div", { className: `${e}--error`, children: `${p}` }),
+          /* @__PURE__ */ l(
             "img",
             {
-              className: n(`${e}-img`, u, {
-                [`${e}-img--hidden`]: r === "loading" || r === "error",
-                [`${e}-img--object-fit-${l}`]: l !== "none"
+              className: m(`${e}-img`, u, {
+                [`${e}-img--hidden`]: o !== "loaded",
+                [`${e}-img--object-fit-${a}`]: a !== "none"
               }),
-              style: p,
-              src: s,
-              alt: m,
-              "data-testid": `${t["data-testid"]}-img`,
-              ref: g,
+              style: $,
+              src: n,
+              alt: t,
+              "data-testid": `${c["data-testid"]}-img`,
+              ref: b,
               onLoad: () => {
-                o("loaded");
+                s("loaded");
               },
               onError: () => {
-                o("error");
+                s("error");
               }
             }
           )
@@ -67,7 +75,7 @@ const E = h(
     );
   }
 );
-E.displayName = "SeldonImage";
+P.displayName = "SeldonImage";
 export {
-  E as default
+  P as default
 };

package/dist/components/SeldonImage/SeldonImage.stories.d.ts

@@ -34,3 +34,12 @@ export declare const BlurBackground: {
     };
     argTypes: {};
 };
+export declare const BrokenImage: {
+    (props: SeldonImageProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        src: string;
+        aspectRatio: string;
+        objectFit: string;
+    };
+    argTypes: {};
+};

package/dist/scss/_type.scss

@@ -37,9 +37,10 @@
   font-family: Distinct, sans-serif;
 }
 
-@mixin underline($padding: 0, $width: 0.0625rem, $color: $pure-black) {
-  border-bottom: $width solid $color;
-  padding-bottom: $padding;
+@mixin underline($offset: $spacing-xsm, $thickness: 1px, $color: $pure-black) {
+  text-decoration: underline;
+  text-decoration-thickness: $thickness;
+  text-underline-offset: $offset;
 }
 
 @mixin hText(

package/dist/scss/components/Link/_link.scss

@@ -55,10 +55,7 @@
 
     &:hover,
     &:focus-visible {
-      @include underline(
-        $color: $dark-gray,
-        $padding: 0.5rem 0.625rem calc(0.5rem + 2px)
-      ); // 1 px so that the bottom border of the nav counts as part of the button
+      @include underline($color: $dark-gray); // 1 px so that the bottom border of the nav counts as part of the button
 
       color: $dark-gray;
     }

package/dist/scss/patterns/UserManagement/_userManagement.scss

@@ -31,7 +31,7 @@
     padding-bottom: $padding-xsm;
 
     &:hover {
-      @include underline($padding-xsm);
+      @include underline;
     }
 
     @include isHeaderMobile {

package/package.json

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