@phillips/seldon 1.98.1 → 1.99.0

package/dist/components/Countdown/Countdown.d.ts

@@ -22,6 +22,10 @@ export interface CountdownProps extends ComponentProps<'div'> {
      * Locale to use to format date strings
      */
     locale?: SupportedLanguages;
+    /**
+     * Displays a border below the Countdown if true
+     */
+    showBottomBorder?: boolean;
     /**
      * Variant of the countdown
      */

package/dist/components/Countdown/Countdown.js

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

package/dist/node_modules/exenv/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../_virtual/index5.js";
+import { __module as t } from "../../_virtual/index6.js";
 /*!
   Copyright (c) 2015 Jed Watson.
   Based on code that is Copyright 2013-2015, Facebook, Inc.

package/dist/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../../_virtual/index6.js";
+import { __module as e } from "../../../../_virtual/index5.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

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

@@ -1,6 +1,10 @@
 import { ComponentProps } from 'react';
 import { AuctionStatus } from '../../types/commonTypes';
 export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
+    /**
+     * The time that lots start to close (for live auctions)
+     */
+    auctionEndTime?: Date;
     /**
      * What is the title of the auction?
      */

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -1,55 +1,58 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { forwardRef as S } from "react";
-import { getCommonProps as u } from "../../utils/index.js";
+import { getCommonProps as k } from "../../utils/index.js";
 import C from "../../node_modules/classnames/index.js";
-import j from "../../components/SeldonImage/SeldonImage.js";
-import { AuctionStatus as _ } from "../../types/commonTypes.js";
-import { TextVariants as s } from "../../components/Text/types.js";
-import t from "../../components/Text/Text.js";
-import H from "../../components/PageContentWrapper/PageContentWrapper.js";
-import P from "../../components/Button/Button.js";
-const R = S(
+import f from "../../components/Countdown/Countdown.js";
+import b from "../../components/SeldonImage/SeldonImage.js";
+import { AuctionStatus as N } from "../../types/commonTypes.js";
+import { TextVariants as t } from "../../components/Text/types.js";
+import o from "../../components/Text/Text.js";
+import j from "../../components/PageContentWrapper/PageContentWrapper.js";
+import H from "../../components/Button/Button.js";
+const P = S(
   ({
-    auctionTitle: o,
-    imageSrcUrl: f,
-    location: N,
-    auctionState: n,
+    auctionEndTime: r,
+    auctionTitle: i,
+    imageSrcUrl: h,
+    location: v,
+    auctionState: l,
     occurrenceInformation: g,
-    ctaLabel: v = "Register to Bid",
-    onClick: h,
-    children: m,
-    className: $,
-    ...i
-  }, c) => {
-    const { className: a, ...l } = u(i, "SaleHeaderBanner"), x = n === _.live, d = n === _.past;
-    return /* @__PURE__ */ r("div", { ...l, className: C(a, $), ...i, ref: c, children: [
-      /* @__PURE__ */ e(
-        j,
+    ctaLabel: $ = "Register to Bid",
+    onClick: u,
+    children: B,
+    className: w,
+    ...n
+  }, m) => {
+    const { className: e, ...c } = k(n, "SaleHeaderBanner"), d = l === N.live, _ = l === N.past;
+    return /* @__PURE__ */ s("div", { ...c, className: C(e, w), ...n, ref: m, children: [
+      d && r ? /* @__PURE__ */ a("div", { className: `${e}__stack__mobile-countdown`, children: /* @__PURE__ */ a(f, { endDateTime: r, showBottomBorder: !1 }) }) : null,
+      /* @__PURE__ */ a(
+        b,
         {
           aspectRatio: "16/9",
-          src: f,
-          alt: String(o),
+          src: h,
+          alt: String(i),
           objectFit: "cover",
-          className: `${a}__image`
+          className: `${e}__image`
         }
       ),
-      /* @__PURE__ */ e(H, { className: `${a}__stack-wrapper`, ...l, ...i, ref: c, children: /* @__PURE__ */ r("div", { className: `${a}__stack`, children: [
-        x && m,
-        /* @__PURE__ */ e(t, { variant: s.title1, children: o }),
-        /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__location`, children: N }),
-        /* @__PURE__ */ r("div", { className: `${a}__occurrence-details`, children: [
-          g.map(({ date: p, occurrenceLabel: B }) => /* @__PURE__ */ r("div", { className: `${a}__occurrence-details-text`, children: [
-            /* @__PURE__ */ e(t, { variant: s.string2, children: B }),
-            /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__date`, children: p })
+      /* @__PURE__ */ a(j, { className: `${e}__stack-wrapper`, ...c, ...n, ref: m, children: /* @__PURE__ */ s("div", { className: `${e}__stack`, children: [
+        d && r ? /* @__PURE__ */ a("div", { className: `${e}__stack__desktop-countdown`, children: /* @__PURE__ */ a(f, { endDateTime: r }) }) : null,
+        /* @__PURE__ */ a(o, { variant: t.title1, children: i }),
+        /* @__PURE__ */ a(o, { variant: t.string2, className: `${e}__location`, children: v }),
+        /* @__PURE__ */ s("div", { className: `${e}__occurrence-details`, children: [
+          g.map(({ date: p, occurrenceLabel: x }) => /* @__PURE__ */ s("div", { className: `${e}__occurrence-details-text`, children: [
+            /* @__PURE__ */ a(o, { variant: t.string2, children: x }),
+            /* @__PURE__ */ a(o, { variant: t.string2, className: `${e}__date`, children: p })
           ] }, String(p))),
-          d && m
+          _ ? B : null
         ] }),
-        !d && /* @__PURE__ */ e(P, { className: `${a}__cta`, onClick: h, children: v })
+        _ ? null : /* @__PURE__ */ a(H, { className: `${e}__cta`, onClick: u, children: $ })
       ] }) })
     ] });
   }
 );
-R.displayName = "SaleHeaderBanner";
+P.displayName = "SaleHeaderBanner";
 export {
-  R as default
+  P as default
 };

package/dist/scss/components/Countdown/_countdown.scss

@@ -4,15 +4,20 @@
   @include text($body2);
 
   align-items: center;
-  border-bottom: 1px solid $light-gray;
+  border-bottom: none;
   display: flex;
   flex-direction: column;
   gap: $spacing-micro;
   justify-content: center;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0;
   padding: 0 $spacing-sm $spacing-sm;
   width: 100%;
 
+  &--show-bottom-border {
+    border-bottom: 1px solid $light-gray;
+    margin-bottom: 1.5rem;
+  }
+
   &__countdown-container {
     @include text($heading5);
 

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

@@ -21,6 +21,22 @@
     height: 100%;
     justify-content: center;
     padding: $spacing-md 0;
+
+    &__mobile-countdown {
+      display: block;
+
+      @include media($size-md, $type: 'min') {
+        display: none;
+      }
+    }
+
+    &__desktop-countdown {
+      display: none;
+
+      @include media($size-md, $type: 'min') {
+        display: block;
+      }
+    }
   }
 
   &__location {

package/package.json

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