@phillips/seldon 1.98.0 → 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/BidSnapshot/BidSnapshot.d.ts

@@ -54,6 +54,10 @@ export interface BidSnapshotProps extends ComponentProps<'div'> {
      * Starting bid text, a string for label of starting bid detail
      */
     startingBidText?: string;
+    /**
+     * Sold For amount
+     * */
+    soldPrice?: number;
     /**
      * Sold for label text, a string for label of sold for detail
      */

package/dist/patterns/BidSnapshot/BidSnapshot.js

@@ -1,67 +1,76 @@
-import { jsxs as _, jsx as l } from "react/jsx-runtime";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
 import { forwardRef as V } from "react";
 import k from "../../node_modules/classnames/index.js";
 import { getCommonProps as q, findChildrenOfType as z, findChildrenExcludingTypes as A } from "../../utils/index.js";
 import F from "../DetailList/DetailList.js";
-import G from "../../components/Detail/Detail.js";
-import { LotStatus as a, SupportedLanguages as H } from "../../types/commonTypes.js";
-import I from "../../components/Countdown/Countdown.js";
-import { CountdownVariants as J } from "../../components/Countdown/types.js";
-import { BidStatusEnum as u } from "./types.js";
-import g from "./BidMessage.js";
-const K = (o) => o === 1 ? `${o} bid` : `${o} bids`, Q = V(
+import p from "../../components/Detail/Detail.js";
+import { LotStatus as m, SupportedLanguages as G } from "../../types/commonTypes.js";
+import H from "../../components/Countdown/Countdown.js";
+import { CountdownVariants as I } from "../../components/Countdown/types.js";
+import C from "./BidMessage.js";
+const J = (a) => a === 1 ? `${a} bid` : `${a} bids`, K = V(
   ({
-    lotStatus: o = a.ready,
-    bidStatus: e,
-    bidsLabelText: C = K,
-    children: m,
-    className: $,
-    closingText: b = "Closes in",
-    currency: v = "$",
-    currentBid: i,
-    currentBidText: y = "Current bid",
-    formatDurationStr: L = (s) => s.replace(/seconds?/, "sec").replace(/minutes?/, "min"),
-    lang: S = "en",
+    lotStatus: a = m.ready,
+    bidStatus: f,
+    bidsLabelText: v = J,
+    children: c,
+    className: L,
+    closingText: S = "Closes in",
+    currency: i = "$",
+    currentBid: s,
+    currentBidText: g = "Current bid",
+    formatDurationStr: x = (o) => o.replace(/seconds?/, "sec").replace(/minutes?/, "min"),
+    lang: N = "en",
     lotCloseDate: d,
-    numberOfBids: p = 0,
-    startingBid: T,
-    startingBidText: x = "Starting bid",
-    soldForText: N = "Sold for",
-    wonForText: w = "Won for",
-    ...c
+    numberOfBids: h = 0,
+    startingBid: r,
+    startingBidText: T = "Starting bid",
+    soldPrice: e,
+    soldForText: w = "Sold for",
+    wonForText: y = "Won for",
+    ...$
   }, W) => {
-    var h;
-    const { className: s, ...P } = q(c, "BidSnapshot"), n = i !== null && p > 0, j = e === u.Winning || e === u.Won, f = o === a.ready, t = o === a.live, B = o === a.past, D = t && d, E = z(m, g), M = A(m, [g]), R = k(s, $, {
-      [`${s}--live`]: t,
-      [`${s}--has-bids`]: n
+    const { className: o, ...j } = q($, "BidSnapshot"), l = s !== null && h > 0, b = a === m.ready, n = a === m.live, D = a === m.past, M = n && d, R = z(c, C), _ = A(c, [C]), E = k(o, L, {
+      [`${o}--live`]: n,
+      [`${o}--has-bids`]: l
     });
-    let r = y;
-    return (f || !n) && (r = x), B && n && (r = j ? w : N), /* @__PURE__ */ _("div", { ...P, ...c, ref: W, className: R, children: [
-      /* @__PURE__ */ l(F, { hasSeparators: !0, className: `${s}__text`, children: /* @__PURE__ */ l(
-        G,
-        {
-          label: r,
-          subLabel: t && i && `(${C(p)})`,
-          value: `${v}${(h = i || T) == null ? void 0 : h.toLocaleString()}`,
-          hasWrap: !1
-        }
-      ) }),
-      e && !f ? E : null,
-      M,
-      D ? /* @__PURE__ */ l(
-        I,
+    return /* @__PURE__ */ u("div", { ...j, ...$, ref: W, className: E, children: [
+      /* @__PURE__ */ u(F, { hasSeparators: !0, className: `${o}__text`, children: [
+        D && l && e ? /* @__PURE__ */ t(
+          p,
+          {
+            label: f ? y : w,
+            value: `${i}${e == null ? void 0 : e.toLocaleString()}`,
+            hasWrap: !1
+          }
+        ) : null,
+        n && l ? /* @__PURE__ */ t(
+          p,
+          {
+            label: g,
+            subLabel: `(${v(h)})`,
+            value: `${i}${s == null ? void 0 : s.toLocaleString()}`,
+            hasWrap: !1
+          }
+        ) : null,
+        b || n && !l ? /* @__PURE__ */ t(p, { label: T, value: `${i}${r == null ? void 0 : r.toLocaleString()}`, hasWrap: !1 }) : null
+      ] }),
+      f && !b ? R : null,
+      _,
+      M ? /* @__PURE__ */ t(
+        H,
         {
           endDateTime: d,
-          label: b,
-          variant: J.compact,
-          locale: H[S],
-          formatDurationStr: L
+          label: S,
+          variant: I.compact,
+          locale: G[N],
+          formatDurationStr: x
         }
       ) : null
     ] });
   }
 );
-Q.displayName = "BidSnapshot";
+K.displayName = "BidSnapshot";
 export {
-  Q as default
+  K as default
 };

package/dist/patterns/BidSnapshot/BidSnapshot.stories.d.ts

@@ -24,6 +24,7 @@ export declare const Playground: {
         lotCloseDate: Date;
         lang: import('date-fns').Locale;
         startingBid: number;
+        soldPrice: number;
     };
     argTypes: {
         bidStatus: {
@@ -32,5 +33,11 @@ export declare const Playground: {
                 type: string;
             };
         };
+        auctionStatus: {
+            options: typeof LotStatus;
+            control: {
+                type: string;
+            };
+        };
     };
 };

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.0",
+  "version": "1.99.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"