@phillips/seldon 1.255.0 → 1.256.0

package/dist/components/Countdown/Countdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),f=require("react"),L=require("../../utils/index.cjs"),z=require("../../_virtual/index.cjs"),H=require("../../types/commonTypes.cjs"),i=require("./types.cjs"),m=require("./Duration.cjs"),x=require("../Text/types.cjs"),P=require("../Text/Text.cjs"),R=require("../../node_modules/date-fns/locale/zh-CN.cjs"),U=require("../../node_modules/date-fns/locale/en-US.cjs"),I=require("../../node_modules/date-fns/differenceInSeconds.cjs"),y=require("../../node_modules/date-fns/differenceInMinutes.cjs"),p=require("../../node_modules/date-fns/differenceInHours.cjs"),C=require("../../node_modules/date-fns/differenceInDays.cjs"),E=require("../../node_modules/date-fns/differenceInMilliseconds.cjs"),j=f.forwardRef(({endDateTime:e,formatDurationStr:a,label:h="Lots Close in",intervalDescription:g,className:M,locale:N="en",showBottomBorder:V=!0,variant:l=i.CountdownVariants.default,getCurrentDateTime:u=()=>new Date,...q},$)=>{const{className:r,...b}=L.getCommonProps(q,"Countdown"),[s,S]=f.useState(u()||new Date),d=N===H.SupportedLanguages.zh?R.zhCN:U.enUS,n={days:C.differenceInDays(e,s)>0?C.differenceInDays(e,s):0,hours:p.differenceInHours(e,s)>0?p.differenceInHours(e,s)%24:0,minutes:y.differenceInMinutes(e,s)>0?y.differenceInMinutes(e,s)%60:0,seconds:(I.differenceInSeconds(e,s)>0?I.differenceInSeconds(e,s)%60:0)%60};f.useEffect(()=>{const t=setInterval(()=>{S(u()||new Date)},1e3);return()=>clearInterval(t)},[e,u]);const _=f.useMemo(()=>{const t=u();return!!t&&new Date(e).getTime()>t.getTime()},[e,u]),v=E.differenceInMilliseconds(e,s)<=180*1e3,c=l===i.CountdownVariants.sm?x.TextVariants.labelSmall:x.TextVariants.labelMedium,w=[n.days>0?o.jsx(m.Duration,{duration:n,unit:"days",locale:d,formatDurationStr:a,textVariant:c},"days"):null,n.days>0||n.hours>0?o.jsx(m.Duration,{duration:n,unit:"hours",locale:d,formatDurationStr:a,textVariant:c},"hours"):null,n.days===0?o.jsx(m.Duration,{duration:n,unit:"minutes",locale:d,formatDurationStr:a,textVariant:c},"minutes"):null,n.days===0&&n.hours===0?o.jsx(m.Duration,{duration:n,unit:"seconds",locale:d,formatDurationStr:a,textVariant:c},"seconds"):null].filter(t=>t!=null);return _?o.jsxs("div",{"data-chromatic":"ignore",...b,className:z.default(r,M,{[`${r}--compact`]:l===i.CountdownVariants.compact,[`${r}--sm`]:l===i.CountdownVariants.sm,[`${r}--show-bottom-border`]:V,[`${r}--closing-lot`]:v}),...q,ref:$,children:[o.jsxs("div",{className:`${r}__countdown-container`,role:"timer","aria-label":h,children:[o.jsx(P.default,{variant:c,children:h}),w.length>0?o.jsx("div",{className:`${r}__duration-group`,children:w}):null]}),l===i.CountdownVariants.default?o.jsx("span",{children:g}):null]}):null});j.displayName="Countdown";exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),f=require("react"),z=require("../../utils/index.cjs"),H=require("../../_virtual/index.cjs"),P=require("../../types/commonTypes.cjs"),i=require("./types.cjs"),m=require("./Duration.cjs"),x=require("../Text/types.cjs"),R=require("../Text/Text.cjs"),U=require("../../node_modules/date-fns/locale/zh-CN.cjs"),E=require("../../node_modules/date-fns/locale/en-US.cjs"),I=require("../../node_modules/date-fns/differenceInSeconds.cjs"),y=require("../../node_modules/date-fns/differenceInMinutes.cjs"),p=require("../../node_modules/date-fns/differenceInHours.cjs"),C=require("../../node_modules/date-fns/differenceInDays.cjs"),F=require("../../node_modules/date-fns/differenceInMilliseconds.cjs"),j=f.forwardRef(({endDateTime:e,formatDurationStr:a,label:h="Lots Close in",intervalDescription:g,className:M,locale:$="en",showBottomBorder:N=!0,variant:l=i.CountdownVariants.default,getCurrentDateTime:c=()=>new Date,centerAlign:V=!1,...q},b)=>{const{className:r,...S}=z.getCommonProps(q,"Countdown"),[s,_]=f.useState(c()||new Date),d=$===P.SupportedLanguages.zh?U.zhCN:E.enUS,n={days:C.differenceInDays(e,s)>0?C.differenceInDays(e,s):0,hours:p.differenceInHours(e,s)>0?p.differenceInHours(e,s)%24:0,minutes:y.differenceInMinutes(e,s)>0?y.differenceInMinutes(e,s)%60:0,seconds:(I.differenceInSeconds(e,s)>0?I.differenceInSeconds(e,s)%60:0)%60};f.useEffect(()=>{const t=setInterval(()=>{_(c()||new Date)},1e3);return()=>clearInterval(t)},[e,c]);const v=f.useMemo(()=>{const t=c();return!!t&&new Date(e).getTime()>t.getTime()},[e,c]),L=F.differenceInMilliseconds(e,s)<=180*1e3,u=l===i.CountdownVariants.sm?x.TextVariants.labelSmall:x.TextVariants.labelMedium,w=[n.days>0?o.jsx(m.Duration,{duration:n,unit:"days",locale:d,formatDurationStr:a,textVariant:u},"days"):null,n.days>0||n.hours>0?o.jsx(m.Duration,{duration:n,unit:"hours",locale:d,formatDurationStr:a,textVariant:u},"hours"):null,n.days===0?o.jsx(m.Duration,{duration:n,unit:"minutes",locale:d,formatDurationStr:a,textVariant:u},"minutes"):null,n.days===0&&n.hours===0?o.jsx(m.Duration,{duration:n,unit:"seconds",locale:d,formatDurationStr:a,textVariant:u},"seconds"):null].filter(t=>t!=null);return v?o.jsxs("div",{"data-chromatic":"ignore",...S,className:H.default(r,M,{[`${r}--compact`]:l===i.CountdownVariants.compact,[`${r}--sm`]:l===i.CountdownVariants.sm,[`${r}--show-bottom-border`]:N,[`${r}--closing-lot`]:L,[`${r}--center-align`]:V}),...q,ref:b,children:[o.jsxs("div",{className:`${r}__countdown-container`,role:"timer","aria-label":h,children:[o.jsx(R.default,{variant:u,children:h}),w.length>0?o.jsx("div",{className:`${r}__duration-group`,children:w}):null]}),l===i.CountdownVariants.default?o.jsx("span",{children:g}):null]}):null});j.displayName="Countdown";exports.default=j;

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

@@ -34,6 +34,10 @@ export interface CountdownProps extends ComponentProps<'div'> {
      * Function to get the current date time
      */
     getCurrentDateTime?: () => Date | null;
+    /**
+     * Centers label and durationwithin the countdown row
+     */
+    centerAlign?: boolean;
 }
 /**
  * ## Overview

package/dist/components/Countdown/Countdown.js

@@ -1,55 +1,56 @@
 import { jsx as t, jsxs as w } from "react/jsx-runtime";
-import { forwardRef as z, useState as P, useEffect as S, useMemo as E } from "react";
-import { getCommonProps as F } from "../../utils/index.js";
-import G from "../../_virtual/index.js";
-import { SupportedLanguages as H } from "../../types/commonTypes.js";
-import { CountdownVariants as i } from "./types.js";
+import { forwardRef as P, useState as S, useEffect as E, useMemo as F } from "react";
+import { getCommonProps as G } from "../../utils/index.js";
+import H from "../../_virtual/index.js";
+import { SupportedLanguages as R } from "../../types/commonTypes.js";
+import { CountdownVariants as a } from "./types.js";
 import { Duration as d } from "./Duration.js";
 import { TextVariants as y } from "../Text/types.js";
-import R from "../Text/Text.js";
-import { zhCN as U } from "../../node_modules/date-fns/locale/zh-CN.js";
-import { enUS as k } from "../../node_modules/date-fns/locale/en-US.js";
+import U from "../Text/Text.js";
+import { zhCN as k } from "../../node_modules/date-fns/locale/zh-CN.js";
+import { enUS as q } from "../../node_modules/date-fns/locale/en-US.js";
 import { differenceInSeconds as g } from "../../node_modules/date-fns/differenceInSeconds.js";
 import { differenceInMinutes as C } from "../../node_modules/date-fns/differenceInMinutes.js";
 import { differenceInHours as I } from "../../node_modules/date-fns/differenceInHours.js";
 import { differenceInDays as N } from "../../node_modules/date-fns/differenceInDays.js";
-import { differenceInMilliseconds as q } from "../../node_modules/date-fns/differenceInMilliseconds.js";
-const A = z(
+import { differenceInMilliseconds as A } from "../../node_modules/date-fns/differenceInMilliseconds.js";
+const B = P(
   ({
     endDateTime: o,
-    formatDurationStr: a,
+    formatDurationStr: i,
     label: f = "Lots Close in",
-    intervalDescription: x,
-    className: $,
+    intervalDescription: $,
+    className: x,
     locale: b = "en",
     showBottomBorder: L = !0,
-    variant: m = i.default,
+    variant: m = a.default,
     getCurrentDateTime: l = () => /* @__PURE__ */ new Date(),
+    centerAlign: M = !1,
     ...p
-  }, M) => {
-    const { className: r, ..._ } = F(p, "Countdown"), [n, v] = P(l() || /* @__PURE__ */ new Date()), u = b === H.zh ? U : k, s = {
+  }, _) => {
+    const { className: r, ...v } = G(p, "Countdown"), [n, V] = S(l() || /* @__PURE__ */ new Date()), u = b === R.zh ? k : q, s = {
       days: N(o, n) > 0 ? N(o, n) : 0,
       hours: I(o, n) > 0 ? I(o, n) % 24 : 0,
       minutes: C(o, n) > 0 ? C(o, n) % 60 : 0,
       seconds: (g(o, n) > 0 ? g(o, n) % 60 : 0) % 60
     };
-    S(() => {
+    E(() => {
       const e = setInterval(() => {
-        v(l() || /* @__PURE__ */ new Date());
+        V(l() || /* @__PURE__ */ new Date());
       }, 1e3);
       return () => clearInterval(e);
     }, [o, l]);
-    const V = E(() => {
+    const j = F(() => {
       const e = l();
       return !!e && new Date(o).getTime() > e.getTime();
-    }, [o, l]), j = q(o, n) <= 180 * 1e3, c = m === i.sm ? y.labelSmall : y.labelMedium, h = [
+    }, [o, l]), z = A(o, n) <= 180 * 1e3, c = m === a.sm ? y.labelSmall : y.labelMedium, h = [
       s.days > 0 ? /* @__PURE__ */ t(
         d,
         {
           duration: s,
           unit: "days",
           locale: u,
-          formatDurationStr: a,
+          formatDurationStr: i,
           textVariant: c
         },
         "days"
@@ -60,7 +61,7 @@ const A = z(
           duration: s,
           unit: "hours",
           locale: u,
-          formatDurationStr: a,
+          formatDurationStr: i,
           textVariant: c
         },
         "hours"
@@ -71,7 +72,7 @@ const A = z(
           duration: s,
           unit: "minutes",
           locale: u,
-          formatDurationStr: a,
+          formatDurationStr: i,
           textVariant: c
         },
         "minutes"
@@ -82,37 +83,38 @@ const A = z(
           duration: s,
           unit: "seconds",
           locale: u,
-          formatDurationStr: a,
+          formatDurationStr: i,
           textVariant: c
         },
         "seconds"
       ) : null
     ].filter((e) => e != null);
-    return V ? /* @__PURE__ */ w(
+    return j ? /* @__PURE__ */ w(
       "div",
       {
         "data-chromatic": "ignore",
-        ..._,
-        className: G(r, $, {
-          [`${r}--compact`]: m === i.compact,
-          [`${r}--sm`]: m === i.sm,
+        ...v,
+        className: H(r, x, {
+          [`${r}--compact`]: m === a.compact,
+          [`${r}--sm`]: m === a.sm,
           [`${r}--show-bottom-border`]: L,
-          [`${r}--closing-lot`]: j
+          [`${r}--closing-lot`]: z,
+          [`${r}--center-align`]: M
         }),
         ...p,
-        ref: M,
+        ref: _,
         children: [
           /* @__PURE__ */ w("div", { className: `${r}__countdown-container`, role: "timer", "aria-label": f, children: [
-            /* @__PURE__ */ t(R, { variant: c, children: f }),
+            /* @__PURE__ */ t(U, { variant: c, children: f }),
             h.length > 0 ? /* @__PURE__ */ t("div", { className: `${r}__duration-group`, children: h }) : null
           ] }),
-          m === i.default ? /* @__PURE__ */ t("span", { children: x }) : null
+          m === a.default ? /* @__PURE__ */ t("span", { children: $ }) : null
         ]
       }
     ) : null;
   }
 );
-A.displayName = "Countdown";
+B.displayName = "Countdown";
 export {
-  A as default
+  B as default
 };

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

@@ -19,6 +19,9 @@ export declare const Playground: {
         endDateTime: {
             control: string;
         };
+        centerAlign: {
+            control: string;
+        };
     };
 };
 export declare const Days: (props: CountdownProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -25,28 +25,37 @@
 
   &__countdown-container {
     align-items: flex-start;
-    column-gap: $spacing-sm;
+    gap: $spacing-micro $spacing-sm;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     justify-content: flex-start;
-    row-gap: $spacing-micro;
     text-transform: inherit;
     width: 100%;
 
     > .#{$px}-text {
       flex-shrink: 0;
+      font-variation-settings: 'wght' 600;
+    }
+  }
+
+  &--center-align {
+    .#{$px}-countdown__countdown-container {
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    }
+
+    .#{$px}-countdown__duration-group {
+      justify-content: center;
     }
   }
 
   &__duration-group {
     align-items: center;
-    column-gap: $spacing-sm;
+    gap: 0 $spacing-sm;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     justify-content: flex-start;
-    row-gap: 0;
   }
 
   &--compact {

package/package.json

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