@phillips/seldon 1.110.4 → 1.111.1

package/dist/components/Countdown/Countdown.js

@@ -1,58 +1,58 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { forwardRef as L, useState as b, useEffect as g } from "react";
-import { getCommonProps as v } from "../../utils/index.js";
-import x from "../../node_modules/classnames/index.js";
-import { SupportedLanguages as $ } from "../../types/commonTypes.js";
-import { CountdownVariants as i } from "./types.js";
-import { Duration as m } from "./Duration.js";
-import { zhCN as j } from "../../node_modules/date-fns/locale/zh-CN.js";
-import { enUS as z } from "../../node_modules/date-fns/locale/en-US.js";
-import { differenceInDays as P } from "../../node_modules/date-fns/differenceInDays.js";
-import { differenceInHours as _ } from "../../node_modules/date-fns/differenceInHours.js";
-import { differenceInMinutes as E } from "../../node_modules/date-fns/differenceInMinutes.js";
-import { differenceInSeconds as F } from "../../node_modules/date-fns/differenceInSeconds.js";
-const H = L(
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { forwardRef as x, useState as $, useEffect as j, useMemo as z } from "react";
+import { getCommonProps as M } from "../../utils/index.js";
+import P from "../../node_modules/classnames/index.js";
+import { SupportedLanguages as _ } from "../../types/commonTypes.js";
+import { CountdownVariants as u } from "./types.js";
+import { Duration as l } from "./Duration.js";
+import { zhCN as E } from "../../node_modules/date-fns/locale/zh-CN.js";
+import { enUS as F } from "../../node_modules/date-fns/locale/en-US.js";
+import { differenceInDays as f } from "../../node_modules/date-fns/differenceInDays.js";
+import { differenceInHours as p } from "../../node_modules/date-fns/differenceInHours.js";
+import { differenceInMinutes as h } from "../../node_modules/date-fns/differenceInMinutes.js";
+import { differenceInSeconds as w } from "../../node_modules/date-fns/differenceInSeconds.js";
+const H = x(
   ({
-    endDateTime: n,
-    formatDurationStr: s,
-    label: l = "Lots Close in",
-    intervalDescription: f,
-    className: p,
-    locale: h = "en",
-    showBottomBorder: w = !0,
-    variant: u = i.default,
-    ...c
-  }, y) => {
-    const { className: r, ...C } = v(c, "Countdown"), [t, I] = b(/* @__PURE__ */ new Date()), a = h === $.zh ? j : z, o = {
-      days: P(n, t),
-      hours: _(n, t) % 24,
-      minutes: E(n, t) % 60,
-      seconds: F(n, t) % 60 % 60
+    endDateTime: o,
+    formatDurationStr: e,
+    label: m = "Lots Close in",
+    intervalDescription: C,
+    className: y,
+    locale: I = "en",
+    showBottomBorder: N = !0,
+    variant: c = u.default,
+    ...i
+  }, g) => {
+    const { className: t, ...L } = M(i, "Countdown"), [n, b] = $(/* @__PURE__ */ new Date()), a = I === _.zh ? E : F, r = {
+      days: f(o, n) > 0 ? f(o, n) : 0,
+      hours: p(o, n) > 0 ? p(o, n) % 24 : 0,
+      minutes: h(o, n) > 0 ? h(o, n) % 60 : 0,
+      seconds: (w(o, n) > 0 ? w(o, n) % 60 : 0) % 60
     };
-    return g(() => {
-      const N = setInterval(() => {
-        I(/* @__PURE__ */ new Date());
+    return j(() => {
+      const v = setInterval(() => {
+        b(/* @__PURE__ */ new Date());
       }, 1e3);
-      return () => clearInterval(N);
-    }, [n]), o.days > 0 || o.hours > 0 || o.minutes > 0 || o.seconds > 0 ? /* @__PURE__ */ d(
+      return () => clearInterval(v);
+    }, [o]), z(() => new Date(o).getTime() > (/* @__PURE__ */ new Date()).getTime(), [o]) ? /* @__PURE__ */ d(
       "div",
       {
-        ...C,
-        className: x(r, p, {
-          [`${r}--compact`]: u === i.compact,
-          [`${r}--show-bottom-border`]: w
+        ...L,
+        className: P(t, y, {
+          [`${t}--compact`]: c === u.compact,
+          [`${t}--show-bottom-border`]: N
         }),
-        ...c,
-        ref: y,
+        ...i,
+        ref: g,
         children: [
-          /* @__PURE__ */ d("div", { className: `${r}__countdown-container`, role: "timer", "aria-label": l, children: [
-            /* @__PURE__ */ e("span", { children: l }),
-            o.days > 0 ? /* @__PURE__ */ e(m, { duration: o, unit: "days", locale: a, formatDurationStr: s }) : null,
-            o.days > 0 || o.hours > 0 ? /* @__PURE__ */ e(m, { duration: o, unit: "hours", locale: a, formatDurationStr: s }) : null,
-            o.days === 0 ? /* @__PURE__ */ e(m, { duration: o, unit: "minutes", locale: a, formatDurationStr: s }) : null,
-            o.days === 0 && o.hours === 0 ? /* @__PURE__ */ e(m, { duration: o, unit: "seconds", locale: a, formatDurationStr: s }) : null
+          /* @__PURE__ */ d("div", { className: `${t}__countdown-container`, role: "timer", "aria-label": m, children: [
+            /* @__PURE__ */ s("span", { children: m }),
+            r.days > 0 ? /* @__PURE__ */ s(l, { duration: r, unit: "days", locale: a, formatDurationStr: e }) : null,
+            r.days > 0 || r.hours > 0 ? /* @__PURE__ */ s(l, { duration: r, unit: "hours", locale: a, formatDurationStr: e }) : null,
+            r.days === 0 ? /* @__PURE__ */ s(l, { duration: r, unit: "minutes", locale: a, formatDurationStr: e }) : null,
+            r.days === 0 && r.hours === 0 ? /* @__PURE__ */ s(l, { duration: r, unit: "seconds", locale: a, formatDurationStr: e }) : null
           ] }),
-          u === i.default ? /* @__PURE__ */ e("span", { children: f }) : null
+          c === u.default ? /* @__PURE__ */ s("span", { children: C }) : null
         ]
       }
     ) : null;

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.d.ts

@@ -64,6 +64,10 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
      * An element to be rendered at the bottom of the banner
      */
     footerElement?: React.ReactNode;
+    /**
+     * Determines if the countdown timer should be shown (if relevant)
+     */
+    showTimer: boolean;
     /**
      * What action does the CTA take?
      */

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -1,73 +1,75 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { getCommonProps as H } from "../../utils/index.js";
-import y from "../../node_modules/classnames/index.js";
-import p from "../../components/Countdown/Countdown.js";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { forwardRef as H } from "react";
+import { getCommonProps as M } from "../../utils/index.js";
+import R from "../../node_modules/classnames/index.js";
+import h from "../../components/Countdown/Countdown.js";
 import D from "../../components/SeldonImage/SeldonImage.js";
 import { AuctionStatus as F } from "../../types/commonTypes.js";
 import { TextVariants as r } from "../../components/Text/types.js";
 import t from "../../components/Text/Text.js";
-import R from "../../components/PageContentWrapper/PageContentWrapper.js";
-const z = j(
+import O from "../../components/PageContentWrapper/PageContentWrapper.js";
+import { SSRMediaQuery as f } from "../../providers/SeldonProvider/utils.js";
+const q = H(
   ({
-    auctionEndTime: s,
-    auctionTitle: i,
-    imageSrcUrl: f,
-    imageSrcSet: h,
-    imageSizes: v,
-    imageLoading: N,
-    imageFetchPriority: g,
-    location: u,
-    countdownTimerLabel: S,
-    countdownFormatDuration: $,
-    auctionState: w,
+    auctionEndTime: i,
+    auctionTitle: o,
+    imageSrcUrl: g,
+    imageSrcSet: v,
+    imageSizes: N,
+    imageLoading: u,
+    imageFetchPriority: S,
+    location: $,
+    countdownTimerLabel: w,
+    countdownFormatDuration: x,
+    auctionState: B,
     occurrenceInformation: k,
-    onClick: A,
-    children: x,
-    className: B,
+    onClick: z,
+    children: C,
+    className: P,
     footerElement: b,
-    headerLabel: C,
-    ...n
-  }, c) => {
-    const { className: e, ...l } = H(n, "SaleHeaderBanner"), m = w === F.live, d = {
-      endDateTime: s,
-      label: S,
-      formatDurationStr: $
+    headerLabel: j,
+    showTimer: c,
+    ...s
+  }, l) => {
+    const { className: e, ...m } = M(s, "SaleHeaderBanner"), d = B === F.live, _ = {
+      endDateTime: i,
+      label: w,
+      formatDurationStr: x
     };
-    return /* @__PURE__ */ o("div", { ...l, className: y(e, B), ...n, ref: c, children: [
-      m && s ? /* @__PURE__ */ a("div", { className: `${e}__stack__mobile-countdown`, children: /* @__PURE__ */ a(p, { ...d, showBottomBorder: !1 }) }) : null,
+    return /* @__PURE__ */ n("div", { ...m, className: R(e, P), ...s, ref: l, children: [
+      d && i && c ? /* @__PURE__ */ a(f.Media, { lessThan: "md", children: /* @__PURE__ */ a("div", { className: `${e}__stack__countdown`, children: /* @__PURE__ */ a(h, { ..._, showBottomBorder: !1 }) }) }) : null,
       /* @__PURE__ */ a(
         D,
         {
           aspectRatio: "16/9",
-          src: f,
-          alt: String(i),
+          src: g,
+          alt: String(o),
           objectFit: "cover",
           className: `${e}__image`,
-          srcSet: h,
-          sizes: v,
-          loading: N,
-          fetchPriority: g
+          srcSet: v,
+          sizes: N,
+          loading: u,
+          fetchPriority: S
         }
       ),
-      /* @__PURE__ */ a(R, { className: `${e}__stack-wrapper`, ...l, ...n, ref: c, children: /* @__PURE__ */ o("div", { className: `${e}__stack`, children: [
-        m && s ? /* @__PURE__ */ a("div", { className: `${e}__stack__desktop-countdown`, children: /* @__PURE__ */ a(p, { ...d }) }) : null,
-        /* @__PURE__ */ a(t, { variant: r.badge, children: C }),
-        /* @__PURE__ */ a(t, { variant: r.title1, children: i }),
-        /* @__PURE__ */ a(t, { variant: r.string2, className: `${e}__location`, children: u }),
-        /* @__PURE__ */ o("div", { className: `${e}__occurrence-details`, children: [
-          k.map(({ date: _, occurrenceLabel: P }) => /* @__PURE__ */ o("div", { className: `${e}__occurrence-details-text`, children: [
-            /* @__PURE__ */ a(t, { variant: r.string2, children: P }),
-            /* @__PURE__ */ a(t, { variant: r.string2, className: `${e}__date`, children: _ })
-          ] }, String(_))),
-          x
+      /* @__PURE__ */ a(O, { className: `${e}__stack-wrapper`, ...m, ...s, ref: l, children: /* @__PURE__ */ n("div", { className: `${e}__stack`, children: [
+        d && i && c ? /* @__PURE__ */ a(f.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ a("div", { className: `${e}__stack__countdown`, children: /* @__PURE__ */ a(h, { ..._ }) }) }) : null,
+        /* @__PURE__ */ a(t, { variant: r.badge, children: j }),
+        /* @__PURE__ */ a(t, { variant: r.title1, children: o }),
+        /* @__PURE__ */ a(t, { variant: r.string2, className: `${e}__location`, children: $ }),
+        /* @__PURE__ */ n("div", { className: `${e}__occurrence-details`, children: [
+          k.map(({ date: p, occurrenceLabel: y }) => /* @__PURE__ */ n("div", { className: `${e}__occurrence-details-text`, children: [
+            /* @__PURE__ */ a(t, { variant: r.string2, children: y }),
+            /* @__PURE__ */ a(t, { variant: r.string2, className: `${e}__date`, children: p })
+          ] }, String(p))),
+          C
         ] }),
         b
       ] }) })
     ] });
   }
 );
-z.displayName = "SaleHeaderBanner";
+q.displayName = "SaleHeaderBanner";
 export {
-  z as default
+  q as default
 };

package/dist/scss/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -22,22 +22,9 @@
     justify-content: center;
     padding: $spacing-md 0;
 
-    &__mobile-countdown {
+    &__countdown {
       display: flex;
       width: 100%;
-
-      @include media($size-md, $type: 'min') {
-        display: none;
-      }
-    }
-
-    &__desktop-countdown {
-      display: none;
-      width: 100%;
-
-      @include media($size-md, $type: 'min') {
-        display: flex;
-      }
     }
   }
 

package/package.json

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