@phillips/seldon 1.274.0 → 1.275.0

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -1,21 +1,22 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { forwardRef as R } from "react";
+import { forwardRef as H } from "react";
 import { getCommonProps as D } from "../../utils/index.js";
 import F from "../../_virtual/index2.js";
-import { AuctionStatus as O } from "../../types/commonTypes.js";
-import { SSRMediaQuery as p } from "../../providers/SeldonProvider/utils.js";
+import { AuctionStatus as L } from "../../types/commonTypes.js";
+import { SSRMediaQuery as h } from "../../providers/SeldonProvider/utils.js";
 import n from "../../components/Banner/Banner.js";
 import { Breakpoints as f } from "../../utils/constants.js";
 import u from "../../components/Countdown/Countdown.js";
-import { BannerVariants as V, BannerMediaSize as q } from "../../components/Banner/types.js";
-import I from "../../components/PageContentWrapper/PageContentWrapper.js";
+import { BannerVariants as O, BannerMediaSize as V } from "../../components/Banner/types.js";
+import q from "../../components/PageContentWrapper/PageContentWrapper.js";
 import { TextVariants as r } from "../../components/Text/types.js";
 import t from "../../components/Text/Text.js";
-import L from "../../components/SeldonImage/SeldonImage.js";
-const Q = R(
+import I from "../../components/SeldonImage/SeldonImage.js";
+import { AspectRatio as Q } from "../../components/SeldonImage/types.js";
+const T = H(
   ({
-    auctionEndTime: l,
-    auctionTitle: o,
+    auctionEndTime: o,
+    auctionTitle: l,
     badgeText: s,
     imageSrcUrl: v,
     imageSrcSet: N,
@@ -27,45 +28,45 @@ const Q = R(
     countdownFormatDuration: M,
     auctionState: w,
     occurrenceInformation: C,
-    onClick: T,
+    onClick: W,
     children: k,
     className: x,
     footerElement: P,
     headerLabel: y,
     showTimer: m,
-    getCurrentDateTime: j,
+    getCurrentDateTime: A,
     ...c
-  }, z) => {
-    const { className: a, ...A } = D(c, "SaleHeaderBanner"), d = w === O.live, _ = {
-      endDateTime: l,
+  }, R) => {
+    const { className: a, ...j } = D(c, "SaleHeaderBanner"), d = w === L.live, p = {
+      endDateTime: o,
       label: B,
       formatDurationStr: M,
-      getCurrentDateTime: j
+      getCurrentDateTime: A
     };
-    return /* @__PURE__ */ i("div", { ...A, className: F(a, x), ...c, ref: z, children: [
-      d && l && m ? /* @__PURE__ */ e(p.Media, { lessThan: f.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ..._, showBottomBorder: !1, centerAlign: !0 }) }) }) : null,
-      /* @__PURE__ */ i(n, { variant: V.top, children: [
-        /* @__PURE__ */ e(n.Content, { children: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ i("div", { className: `${a}__stack`, children: [
-          d && l && m ? /* @__PURE__ */ e(p.Media, { greaterThanOrEqual: f.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ..._, centerAlign: !0 }) }) }) : null,
+    return /* @__PURE__ */ i("div", { ...j, className: F(a, x), ...c, ref: R, children: [
+      d && o && m ? /* @__PURE__ */ e(h.Media, { lessThan: f.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ...p, showBottomBorder: !1, centerAlign: !0 }) }) }) : null,
+      /* @__PURE__ */ i(n, { variant: O.top, children: [
+        /* @__PURE__ */ e(n.Content, { children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ i("div", { className: `${a}__stack`, children: [
+          d && o && m ? /* @__PURE__ */ e(h.Media, { greaterThanOrEqual: f.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ...p, centerAlign: !0 }) }) }) : null,
           /* @__PURE__ */ e(n.Eyebrow, { variant: r.labelMedium, className: `${a}__header-label`, children: y }),
-          /* @__PURE__ */ e(n.Title, { variant: r.headingLarge, element: "h1", className: `${a}__title`, children: o }),
+          /* @__PURE__ */ e(n.Title, { variant: r.headingLarge, element: "h1", className: `${a}__title`, children: l }),
           s && /* @__PURE__ */ e(t, { variant: r.badge, className: `${a}__badge`, children: s }),
           /* @__PURE__ */ e(t, { variant: r.labelMedium, className: `${a}__location`, children: b }),
           /* @__PURE__ */ i("div", { className: `${a}__occurrence-details`, children: [
-            C.map(({ date: h, occurrenceLabel: H }) => /* @__PURE__ */ i("div", { className: `${a}__occurrence-details-text`, children: [
-              /* @__PURE__ */ e(t, { variant: r.labelMedium, children: H }),
-              /* @__PURE__ */ e(t, { variant: r.labelMedium, className: `${a}__date`, children: h })
-            ] }, String(h))),
+            C.map(({ date: _, occurrenceLabel: z }) => /* @__PURE__ */ i("div", { className: `${a}__occurrence-details-text`, children: [
+              /* @__PURE__ */ e(t, { variant: r.labelMedium, children: z }),
+              /* @__PURE__ */ e(t, { variant: r.labelMedium, className: `${a}__date`, children: _ })
+            ] }, String(_))),
             k
           ] }),
           P
         ] }) }) }),
-        /* @__PURE__ */ e(n.Media, { size: q.half, className: `${a}__image`, children: /* @__PURE__ */ e(
-          L,
+        /* @__PURE__ */ e(n.Media, { size: V.half, className: `${a}__image`, children: /* @__PURE__ */ e(
+          I,
           {
-            aspectRatio: "16/9",
+            aspectRatio: Q.Landscape,
             src: v,
-            alt: String(o),
+            alt: String(l),
             objectFit: "cover",
             srcSet: N,
             sizes: g,
@@ -77,7 +78,7 @@ const Q = R(
     ] });
   }
 );
-Q.displayName = "SaleHeaderBanner";
+T.displayName = "SaleHeaderBanner";
 export {
-  Q as default
+  T as default
 };

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

@@ -1,6 +1,8 @@
 @use '../../allPartials' as *;
 
 .#{$px}-seldon-image {
+  // Propagate an ancestor `max-height` down to the wrapper so the img can inherit it too (percentages resolve to `none` when parent height is auto; `inherit` doesn't).
+  max-height: inherit;
   overflow: hidden;
   position: relative;
 
@@ -14,9 +16,28 @@
     }
   }
 
+  // Portrait/square can overflow vertically; auto dims + max caps let the img respect parent max-height, not just width.
+  &--aspect-ratio-3-4 {
+    img {
+      aspect-ratio: 3 / 4;
+      height: auto;
+      max-height: inherit;
+      max-width: 100%;
+      width: auto;
+    }
+
+    &.#{$px}-seldon-image--error-image {
+      aspect-ratio: 3 / 4;
+    }
+  }
+
   &--aspect-ratio-1-1 {
     img {
       aspect-ratio: 1 / 1;
+      height: auto;
+      max-height: inherit;
+      max-width: 100%;
+      width: auto;
     }
 
     &.#{$px}-seldon-image--error-image {

package/package.json

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