@phillips/seldon 1.139.0 → 1.140.0

package/dist/components/Countdown/Countdown.js

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

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

@@ -1,4 +1,5 @@
 import { CountdownProps } from './Countdown';
+import { CountdownVariants } from './types';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<Omit<CountdownProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
@@ -11,6 +12,10 @@ export declare const Playground: {
             type: string;
             options: string[];
         };
+        variant: {
+            type: string;
+            options: CountdownVariants[];
+        };
     };
 };
 export declare const Days: (props: CountdownProps) => import("react/jsx-runtime").JSX.Element;
@@ -18,3 +23,12 @@ export declare const Hours: (props: CountdownProps) => import("react/jsx-runtime
 export declare const Minutes: (props: CountdownProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Seconds: (props: CountdownProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Compact: (props: CountdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClosingCountdown: {
+    (props: CountdownProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        variant: {
+            type: string;
+            options: CountdownVariants[];
+        };
+    };
+};

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

@@ -31,8 +31,18 @@
   &--compact {
     .#{$px}-countdown__countdown-container {
       @include Montserrat;
+      .#{$px}-duration {
+        @include Montserrat;
+      }
 
       gap: $spacing-xsm;
     }
   }
+
+  &--closing-lot {
+    .#{$px}-duration,
+    .#{$px}-countdown__label {
+      color: $countdown-compact;
+    }
+  }
 }

package/dist/scss/components/Countdown/_duration.scss

@@ -6,9 +6,3 @@
   display: flex;
   gap: $spacing-micro;
 }
-
-.#{$px}-countdown--compact .#{$px}-duration {
-  @include Montserrat;
-
-  color: $countdown-compact;
-}

package/package.json

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