@phillips/seldon 1.195.2 → 1.197.0

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

@@ -58,6 +58,10 @@ export interface BidSnapshotProps extends ComponentProps<'div'> {
      * Starting bid text, a string for label of starting bid detail
      */
     startingBidText?: string;
+    /**
+     * Determines whether to show or hide sold price
+     */
+    showSoldPrice?: boolean;
     /**
      * Sold For amount
      * */

package/dist/patterns/BidSnapshot/BidSnapshot.js

@@ -1,21 +1,21 @@
 import { jsxs as w, jsx as e } from "react/jsx-runtime";
-import { forwardRef as k } from "react";
-import q from "../../node_modules/classnames/index.js";
-import { getCommonProps as z, findChildrenOfType as D, findChildrenExcludingTypes as F } from "../../utils/index.js";
-import G from "../DetailList/DetailList.js";
+import { forwardRef as q } from "react";
+import z from "../../node_modules/classnames/index.js";
+import { getCommonProps as D, findChildrenOfType as F, findChildrenExcludingTypes as G } from "../../utils/index.js";
+import H from "../DetailList/DetailList.js";
 import p from "../../components/Detail/Detail.js";
-import { LotStatus as n, SupportedLanguages as H } from "../../types/commonTypes.js";
-import J from "../../components/Countdown/Countdown.js";
-import { CountdownVariants as K } from "../../components/Countdown/types.js";
-import { BidStatusEnum as Q } from "./types.js";
+import { LotStatus as n, SupportedLanguages as J } from "../../types/commonTypes.js";
+import K from "../../components/Countdown/Countdown.js";
+import { CountdownVariants as Q } from "../../components/Countdown/types.js";
+import { BidStatusEnum as U } from "./types.js";
 import L from "./BidMessage.js";
 import { isAfter as x } from "../../node_modules/date-fns/isAfter.js";
-import { differenceInMinutes as U } from "../../node_modules/date-fns/differenceInMinutes.js";
-const X = (o) => o === 1 ? `${o} bid` : `${o} bids`, Y = k(
+import { differenceInMinutes as X } from "../../node_modules/date-fns/differenceInMinutes.js";
+const Y = (o) => o === 1 ? `${o} bid` : `${o} bids`, Z = q(
   ({
     lotStatus: o = n.ready,
     bidStatus: d,
-    bidsLabelText: C = X,
+    bidsLabelText: C = Y,
     children: c,
     className: N,
     closingText: W = "Closes in",
@@ -30,21 +30,22 @@ const X = (o) => o === 1 ? `${o} bid` : `${o} bids`, Y = k(
     startingBid: u,
     startingBidText: M = "Starting bid",
     soldPrice: $,
-    soldForText: j = "Sold for",
-    wonForText: E = "Won for",
+    showSoldPrice: j = !0,
+    soldForText: E = "Sold for",
+    wonForText: P = "Won for",
     getCurrentDateTime: b = () => /* @__PURE__ */ new Date(),
     ...S
-  }, P) => {
-    const { className: s, ...R } = z(S, "BidSnapshot"), l = f !== null && h > 0, g = o === n.ready, a = o === n.live, v = o === n.past, m = b() || /* @__PURE__ */ new Date(), _ = a && i && x(i, m) && r && (U(r, m) < 60 || x(m, r)), A = D(c, L), I = F(c, [L]), V = q(s, N, {
+  }, R) => {
+    const { className: s, ..._ } = D(S, "BidSnapshot"), l = f !== null && h > 0, g = o === n.ready, a = o === n.live, v = o === n.past, m = b() || /* @__PURE__ */ new Date(), A = a && i && x(i, m) && r && (X(r, m) < 60 || x(m, r)), I = F(c, L), V = G(c, [L]), k = z(s, N, {
       [`${s}--live`]: a,
       [`${s}--has-bids`]: l || v
     });
-    return /* @__PURE__ */ w("div", { ...R, ...S, ref: P, className: V, children: [
-      /* @__PURE__ */ w(G, { hasSeparators: !0, className: `${s}__text`, children: [
-        v ? /* @__PURE__ */ e(
+    return /* @__PURE__ */ w("div", { ..._, ...S, ref: R, className: k, children: [
+      /* @__PURE__ */ w(H, { hasSeparators: !0, className: `${s}__text`, children: [
+        j && v ? /* @__PURE__ */ e(
           p,
           {
-            label: d === Q.Won ? E : j,
+            label: d === U.Won ? P : E,
             value: $ ? `${t}${$?.toLocaleString()}` : "",
             hasWrap: !1
           }
@@ -60,15 +61,15 @@ const X = (o) => o === 1 ? `${o} bid` : `${o} bids`, Y = k(
         ) : null,
         u && (g || a && !l) ? /* @__PURE__ */ e(p, { label: M, value: `${t}${u?.toLocaleString()}`, hasWrap: !1 }) : null
       ] }),
-      d && !g ? A : null,
-      I,
-      _ ? /* @__PURE__ */ e(
-        J,
+      d && !g ? I : null,
+      V,
+      A ? /* @__PURE__ */ e(
+        K,
         {
           endDateTime: i,
           label: W,
-          variant: K.compact,
-          locale: H[B],
+          variant: Q.compact,
+          locale: J[B],
           formatDurationStr: T,
           showBottomBorder: !1,
           getCurrentDateTime: b
@@ -77,7 +78,7 @@ const X = (o) => o === 1 ? `${o} bid` : `${o} bids`, Y = k(
     ] });
   }
 );
-Y.displayName = "BidSnapshot";
+Z.displayName = "BidSnapshot";
 export {
-  Y as default
+  Z as default
 };

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

@@ -5,12 +5,60 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<Omit<BidSnapshotProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     argTypes: {
+        bidStatus: {
+            options: (typeof BidStatusEnum)[];
+            control: {
+                type: "select";
+            };
+        };
         lotStatus: {
-            options: string[];
+            options: (typeof LotStatus)[];
             control: {
                 type: "select";
             };
         };
+        currency: {
+            control: "text";
+        };
+        currentBidText: {
+            control: "text";
+        };
+        closingText: {
+            control: "text";
+        };
+        lang: {
+            options: import('date-fns').Locale[];
+            control: {
+                type: "select";
+            };
+        };
+        saleCloseDate: {
+            control: "date";
+        };
+        lotCloseDate: {
+            control: "date";
+        };
+        numberOfBids: {
+            control: "number";
+        };
+        startingBid: {
+            control: "number";
+        };
+        startingBidText: {
+            control: "text";
+        };
+        showSoldPrice: {
+            control: "boolean";
+        };
+        soldPrice: {
+            control: "number";
+        };
+        soldForText: {
+            control: "text";
+        };
+        wonForText: {
+            control: "text";
+        };
     };
 };
 export default meta;

package/dist/providers/SeldonProvider/utils.d.ts

@@ -1,5 +1,5 @@
 /**
  * Used to hide or show components based on the current breakpoint in a SSR friendly way
  */
-export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xl" | "xsm", never>;
+export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xl" | "snw-mobile" | "xsm", never>;
 export declare const ssrMediaQueryStyle: string;

package/dist/scss/_utils.scss

@@ -101,6 +101,20 @@
     }
   }
 
+  @if $breakpoint == $size-snw-mobile or $breakpoint == $breakpoint-snw-mobile {
+    @if $type == 'min' {
+      @media (min-width: $breakpoint-snw-mobile) {
+        @content;
+      }
+    }
+
+    @if $type == 'max' {
+      @media (max-width: calc($breakpoint-snw-mobile - 1px)) {
+        @content;
+      }
+    }
+  }
+
   @if $breakpoint == $size-md or $breakpoint == $breakpoint-md {
     // $breakpoint-md: 961px;
     @if $type == 'min' {

package/dist/scss/_vars.scss

@@ -180,6 +180,9 @@ $breakpoint-md: 961px;
 $breakpoint-lg: 1401px;
 $breakpoint-xl: 1801px;
 
+// Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
+$breakpoint-snw-mobile: 768px;
+
 ////////////////////////
 /// FONT SIZE TOKENS:
 ///////////////////////
@@ -491,6 +494,7 @@ $size-md: 'md';
 $size-lg: 'lg';
 $size-xl: 'xl';
 $size-xxl: 'xxl';
+$size-snw-mobile: 'snw-mobile';
 $default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
 $drawer-content-transition: 350ms cubic-bezier(0, 0, 0.2, 1);
 $default-overlay-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);

package/dist/scss/_vars.scss.js

@@ -180,6 +180,9 @@ $breakpoint-md: 961px;
 $breakpoint-lg: 1401px;
 $breakpoint-xl: 1801px;
 
+// Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
+$breakpoint-snw-mobile: 768px;
+
 ////////////////////////
 /// FONT SIZE TOKENS:
 ///////////////////////
@@ -491,6 +494,7 @@ $size-md: 'md';
 $size-lg: 'lg';
 $size-xl: 'xl';
 $size-xxl: 'xxl';
+$size-snw-mobile: 'snw-mobile';
 $default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
 $drawer-content-transition: 350ms cubic-bezier(0, 0, 0.2, 1);
 $default-overlay-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);

package/dist/scss/components/Tabs/_tabs.scss

@@ -9,7 +9,6 @@
     display: flex;
     gap: 1rem;
     overflow: hidden; /* Prevent overflow */
-    padding: 0 $padding-md;
     position: relative;
   }
 
@@ -17,7 +16,8 @@
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
-    padding: $padding-xsm $padding-xsm $padding-sm;
+    padding-bottom: $snowflake-menu-padding;
+    padding-inline: 0;
     transition:
       background 0.2s ease,
       font-weight 0.2s ease-out,
@@ -33,6 +33,7 @@
       cursor: pointer;
       font-size: $body-size2;
       font-variation-settings: 'wght' 600;
+      letter-spacing: normal;
       line-height: $body-line-height-size2;
 
       &:hover {

package/dist/scss/patterns/SaleCard/_saleCard.scss

@@ -6,7 +6,7 @@
   flex-direction: column;
   gap: $spacing-md;
 
-  @include media($breakpoint-md) {
+  @include media($breakpoint-snw-mobile) {
     flex-direction: row;
   }
 
@@ -19,7 +19,7 @@
     justify-content: center;
     min-width: 100%;
 
-    @include media($breakpoint-md) {
+    @include media($breakpoint-snw-mobile) {
       min-width: auto;
     }
 
@@ -37,7 +37,7 @@
     flex-grow: 1;
     gap: $spacing-micro;
 
-    @include media($size-md, 'max') {
+    @include media($size-snw-mobile, 'max') {
       align-self: flex-start;
     }
   }
@@ -45,7 +45,7 @@
   &__ctas {
     flex: 0 0 0%;
 
-    @include media($breakpoint-md) {
+    @include media($breakpoint-snw-mobile) {
       flex-basis: 191px;
     }
 
@@ -116,7 +116,7 @@
     align-items: flex-start;
     gap: $spacing-sm;
 
-    @include media($size-md, 'max') {
+    @include media($size-snw-mobile, 'max') {
       flex-direction: row;
     }
 

package/dist/scss/patterns/TextBanner/_textBanner.scss

@@ -8,7 +8,7 @@
     gap: $spacing-md;
     justify-content: center;
     max-width: none;
-    padding: $spacing-lg $spacing-md;
+    padding: $spacing-lg 0;
 
     h1 {
       white-space: nowrap;

package/dist/utils/constants.d.ts

@@ -5,5 +5,6 @@ export declare const BREAKPOINTS: {
     md: number;
     lg: number;
     xl: number;
+    "snw-mobile": number;
 };
 export declare const DEFAULT_REM_SIZE = 16;

package/dist/utils/constants.js

@@ -3,9 +3,11 @@ const s = {
   sm: 361,
   md: 961,
   lg: 1401,
-  xl: 1801
-}, E = 16;
+  xl: 1801,
+  // Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
+  "snw-mobile": 768
+}, m = 16;
 export {
   s as BREAKPOINTS,
-  E as DEFAULT_REM_SIZE
+  m as DEFAULT_REM_SIZE
 };

package/package.json

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