@phillips/seldon 1.120.0 → 1.122.0

package/dist/components/Carousel/Carousel.d.ts

@@ -27,6 +27,10 @@ export interface CarouselProps extends ComponentProps<'div'> {
      * Whether the carousel should disable dragging.
      */
     disableDrag?: boolean;
+    /**
+     * Whether to disable dragging to navigate between slides for different viewports.
+     */
+    disableNavigationDrag?: 'mobile' | 'desktop' | 'all' | null;
     /**
      *  The threshold for slides to be considered in view. A value of 0.1 means that 10% of the slide must be in view for it to be considered in view.
      */

package/dist/components/Carousel/Carousel.js

@@ -1,99 +1,115 @@
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as I, forwardRef as D, useEffect as c, useCallback as n } from "react";
-import { getCommonProps as y } from "../../utils/index.js";
-import g from "../../node_modules/classnames/index.js";
-import k from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
-import V from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
-import { WheelGesturesPlugin as b } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
-const A = I(null), R = D(
+import { jsx as c } from "react/jsx-runtime";
+import { createContext as P, forwardRef as g, useEffect as n, useCallback as f } from "react";
+import { getCommonProps as I } from "../../utils/index.js";
+import y from "../../node_modules/classnames/index.js";
+import V from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
+import A from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import { WheelGesturesPlugin as R } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
+const S = P(null), E = g(
   ({
-    loop: f = !1,
-    startIndex: m = 0,
-    onSlideChange: s,
-    className: u,
-    children: p,
-    columnGap: d,
-    useWheelGestures: w = !1,
-    disableDrag: l = !1,
-    inViewThreshold: x = 0.99,
-    ...a
-  }, C) => {
-    const { className: N, ...v } = y(a, "Carousel"), [P, e] = V(
+    loop: m = !1,
+    startIndex: u = 0,
+    onSlideChange: a,
+    className: p,
+    children: d,
+    columnGap: w,
+    useWheelGestures: x = !1,
+    disableDrag: o = !1,
+    disableNavigationDrag: h = null,
+    inViewThreshold: N = 0.99,
+    ...t
+  }, k) => {
+    const { className: v, ...C } = I(t, "Carousel");
+    let s = {};
+    switch (h) {
+      case "mobile":
+        s = { breakpoints: { "(max-width: 960px)": { watchDrag: !1 } } };
+        break;
+      case "desktop":
+        s = { breakpoints: { "(min-width: 961px)": { watchDrag: !1 } } };
+        break;
+      case "all":
+        s = { watchDrag: !1 };
+        break;
+      default:
+        s = {};
+    }
+    const [b, e] = A(
       {
-        loop: f,
-        startIndex: m,
-        inViewThreshold: x,
-        breakpoints: { "(min-width: 961px)": { watchDrag: !1 } }
+        loop: m,
+        startIndex: u,
+        inViewThreshold: N,
+        ...s
       },
       [
-        ...w ? [
-          b({
+        ...x ? [
+          R({
             forceWheelAxis: "x"
           })
         ] : [],
-        k({
+        V({
           snapped: "carousel-item-in-view"
         })
       ]
     );
-    c(() => {
-      l ? e?.reInit({
+    n(() => {
+      o ? e?.reInit({
         watchDrag: () => !1
       }) : e?.reInit({
         watchDrag: () => !0
       });
-    }, [l, e]);
-    const h = n(
+    }, [o, e]);
+    const D = f(
       (r) => {
         r.key === "ArrowLeft" ? (r.preventDefault(), e?.scrollPrev()) : r.key === "ArrowRight" && (r.preventDefault(), e?.scrollNext());
       },
       [e]
-    ), o = n(
+    ), l = f(
       (r) => {
         if (!r)
           return;
-        const t = r.slidesInView()?.[0];
-        t !== void 0 && s?.(t);
+        const i = r.slidesInView()?.[0];
+        i !== void 0 && a?.(i);
       },
-      [s]
+      [a]
     );
-    return c(() => {
+    return n(() => {
       if (e)
-        return e.on("slidesInView", o), () => {
-          e.off("slidesInView", o);
+        return e.on("slidesInView", l), () => {
+          e.off("slidesInView", l);
         };
-    }, [e, o]), /* @__PURE__ */ i(
-      A.Provider,
+    }, [e, l]), /* @__PURE__ */ c(
+      S.Provider,
       {
         value: {
-          carouselRef: P,
+          carouselRef: b,
           api: e,
           scrollPrev: () => e?.scrollPrev(),
           scrollNext: () => e?.scrollNext(),
           canScrollPrev: e?.canScrollPrev() ?? !1,
           canScrollNext: e?.canScrollNext() ?? !1,
-          columnGap: d,
-          onSlideChange: s
+          columnGap: w,
+          onSlideChange: a
         },
-        children: /* @__PURE__ */ i(
+        children: /* @__PURE__ */ c(
           "div",
           {
-            ref: C,
-            onKeyDownCapture: h,
-            className: g(N, u),
+            ref: k,
+            onKeyDownCapture: D,
+            className: y(v, p),
             role: "region",
             "aria-roledescription": "carousel",
-            ...a,
-            ...v,
-            children: p
+            ...t,
+            ...C,
+            children: d
           }
         )
       }
     );
   }
 );
-R.displayName = "Carousel";
+E.displayName = "Carousel";
 export {
-  A as CarouselContext,
-  R as default
+  S as CarouselContext,
+  E as default
 };

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

@@ -12,7 +12,9 @@ export declare const Playground: {
 };
 export declare const CarouselWithArrows: {
     (props: CarouselProps): import("react/jsx-runtime").JSX.Element;
-    args: {};
+    args: {
+        disableNavigationDrag: "desktop";
+    };
     argTypes: {};
 };
 export declare const CarouselWithDots: {

package/dist/components/Carousel/CarouselArrows.js

@@ -1,12 +1,12 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import u from "../../node_modules/classnames/index.js";
-import { forwardRef as p, useCallback as a } from "react";
-import { getCommonProps as C } from "../../utils/index.js";
-import { useCarousel as d } from "./utils.js";
+import { forwardRef as d, useCallback as a } from "react";
+import { getCommonProps as p } from "../../utils/index.js";
+import { useCarousel as C } from "./utils.js";
 import f from "../../assets/CarouselArrowNext.svg.js";
 import v from "../../assets/CarouselArrowPrev.svg.js";
-const N = p(({ className: t, ...s }, l) => {
-  const { className: e, ...n } = C(s, "CarouselArrows"), { api: r } = d(), i = a(() => {
+const w = d(({ className: t, ...s }, n) => {
+  const { className: e, ...l } = p(s, "CarouselArrows"), { api: r } = C(), i = a(() => {
     r && r.scrollPrev(!0);
   }, [r]), c = a(() => {
     r && r.scrollNext(!0);
@@ -14,19 +14,19 @@ const N = p(({ className: t, ...s }, l) => {
   return /* @__PURE__ */ m(
     "div",
     {
-      ref: l,
+      ref: n,
       "aria-roledescription": "carousel-arrow-navigation",
       className: u(`${e}`, t),
       ...s,
-      ...n,
+      ...l,
       children: [
-        /* @__PURE__ */ o("button", { className: `${e}-prev-btn`, onClick: () => i(), children: /* @__PURE__ */ o("div", { className: `${e}-prev-btn__icon`, children: /* @__PURE__ */ o(v, {}) }) }),
-        /* @__PURE__ */ o("button", { className: `${e}-next-btn`, onClick: () => c(), children: /* @__PURE__ */ o("div", { className: `${e}-next-btn__icon`, children: /* @__PURE__ */ o(f, {}) }) })
+        /* @__PURE__ */ o("button", { "data-testid": "prev-arrow", className: `${e}-prev-btn`, onClick: () => i(), children: /* @__PURE__ */ o("div", { className: `${e}-prev-btn__icon`, children: /* @__PURE__ */ o(v, {}) }) }),
+        /* @__PURE__ */ o("button", { "data-testid": "next-arrow", className: `${e}-next-btn`, onClick: () => c(), children: /* @__PURE__ */ o("div", { className: `${e}-next-btn__icon`, children: /* @__PURE__ */ o(f, {}) }) })
       ]
     }
   );
 });
-N.displayName = "CarouselArrows";
+w.displayName = "CarouselArrows";
 export {
-  N as default
+  w as default
 };

package/dist/components/Carousel/CarouselArrows.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/patterns/ObjectTile/ObjectTile.d.ts

@@ -20,6 +20,10 @@ export interface ObjectTileProps extends ComponentProps<'a'> {
      * Estimate on request text to use when estimate is not available.
      */
     estimateOnRequestText?: string;
+    /**
+     * Element used for badge object
+     */
+    badgeElement?: React.ElementType;
     /**
      * Element used for favoriting object
      */

package/dist/patterns/ObjectTile/ObjectTile.js

@@ -1,105 +1,107 @@
-import { jsxs as s, jsx as a, Fragment as E } from "react/jsx-runtime";
-import { memo as O, forwardRef as z } from "react";
-import B from "../../node_modules/classnames/index.js";
-import { getCommonProps as F } from "../../utils/index.js";
+import { jsxs as s, jsx as a, Fragment as O } from "react/jsx-runtime";
+import { memo as z, forwardRef as F } from "react";
+import I from "../../node_modules/classnames/index.js";
+import { getCommonProps as L } from "../../utils/index.js";
 import { TextVariants as l } from "../../components/Text/types.js";
 import i from "../../components/Text/Text.js";
-import I from "../DetailList/DetailList.js";
-import L from "../../components/Detail/Detail.js";
-import R from "../../components/SeldonImage/SeldonImage.js";
-const V = O(
-  z(
+import R from "../DetailList/DetailList.js";
+import V from "../../components/Detail/Detail.js";
+import W from "../../components/SeldonImage/SeldonImage.js";
+const w = z(
+  F(
     ({
-      badgeText: p,
-      className: f,
-      children: $,
-      element: N,
+      badgeText: f,
+      className: $,
+      children: N,
+      element: g,
       estimate: n,
-      estimateLabelText: g = "Estimate",
+      estimateLabelText: b = "Estimate",
       estimateOnRequestText: m,
-      favoriteElement: r,
+      badgeElement: r,
+      favoriteElement: o,
       imageAlt: u = "Brought to you by Phillips",
-      imageUrl: b = "",
-      imageSrcSet: v,
-      imageSizes: j,
-      imageLoading: k,
-      imageFetchPriority: y,
-      lotNumber: P,
-      makerText: o,
-      modelText: c,
-      referenceNumber: _,
-      titleText: d,
+      imageUrl: v = "",
+      imageSrcSet: j,
+      imageSizes: k,
+      imageLoading: y,
+      imageFetchPriority: P,
+      lotNumber: S,
+      makerText: c,
+      modelText: _,
+      referenceNumber: d,
+      titleText: h,
       withdrawnText: t,
-      ...h
-    }, S) => {
-      const { className: e, ...C } = F(h, "ObjectTile"), x = N ?? "a", D = n || m;
-      return /* @__PURE__ */ s(x, { ...C, className: B(e, f), ...h, ref: S, children: [
+      ...p
+    }, C) => {
+      const { className: e, ...x } = L(p, "ObjectTile"), D = g ?? "a", E = n || m;
+      return /* @__PURE__ */ s(D, { ...x, className: I(e, $), ...p, ref: C, children: [
         /* @__PURE__ */ a(
-          R,
+          W,
           {
             alt: u,
             aspectRatio: "1/1",
             className: `${e}__img`,
             objectFit: "contain",
-            src: b,
-            srcSet: v,
-            sizes: j,
-            loading: k,
-            fetchPriority: y
+            src: v,
+            srcSet: j,
+            sizes: k,
+            loading: y,
+            fetchPriority: P
           }
         ),
-        t ? null : /* @__PURE__ */ a(i, { className: `${e}__badge`, variant: l.badge, children: p }),
+        t ? null : /* @__PURE__ */ a(i, { className: `${e}__badge`, variant: l.badge, children: f }),
         /* @__PURE__ */ s("div", { className: `${e}__lot-number-like`, children: [
-          /* @__PURE__ */ a(i, { className: `${e}__lot-number`, variant: l.heading3, element: "p", children: P }),
-          r && /* @__PURE__ */ a(r, {})
+          /* @__PURE__ */ a(i, { className: `${e}__lot-number`, variant: l.heading3, element: "p", children: S }),
+          r && /* @__PURE__ */ a("div", { className: `${e}__lot-badge`, children: /* @__PURE__ */ a(r, {}) }),
+          o && /* @__PURE__ */ a(o, {})
         ] }),
-        t ? /* @__PURE__ */ a(i, { className: `${e}__withdrawn`, variant: l.heading4, children: t }) : /* @__PURE__ */ s(E, { children: [
+        t ? /* @__PURE__ */ a(i, { className: `${e}__withdrawn`, variant: l.heading4, children: t }) : /* @__PURE__ */ s(O, { children: [
           /* @__PURE__ */ s("div", { className: `${e}__meta`, children: [
-            o ? /* @__PURE__ */ a(i, { className: `${e}__maker`, variant: l.heading3, children: o }) : null,
-            d ? /* @__PURE__ */ a(
+            c ? /* @__PURE__ */ a(i, { className: `${e}__maker`, variant: l.heading3, children: c }) : null,
+            h ? /* @__PURE__ */ a(
               i,
               {
                 className: `${e}__title ${e}__token-fix`,
                 variant: l.heading4,
                 element: "cite",
-                children: d
+                children: h
               }
             ) : null,
-            _ ? /* @__PURE__ */ a(
+            d ? /* @__PURE__ */ a(
               i,
               {
                 className: `${e}__reference-number ${e}__token-fix`,
                 variant: l.heading4,
                 element: "p",
-                children: _
+                children: d
               }
             ) : null,
-            c ? /* @__PURE__ */ a(
+            _ ? /* @__PURE__ */ a(
               i,
               {
                 className: `${e}__model ${e}__token-fix`,
                 variant: l.heading4,
                 element: "p",
-                children: c
+                children: _
               }
             ) : null
           ] }),
-          D ? /* @__PURE__ */ a(I, { hasSeparators: !0, className: `${e}__estimate ${e}__section`, children: /* @__PURE__ */ a(
-            L,
+          E ? /* @__PURE__ */ a(R, { hasSeparators: !0, className: `${e}__estimate ${e}__section`, children: /* @__PURE__ */ a(
+            V,
             {
               className: `${e}__estimate__label`,
-              label: g,
+              label: b,
               value: n || m,
               hasWrap: !1
             }
           ) }) : null,
-          /* @__PURE__ */ a("div", { className: `${e}__section`, children: $ })
+          /* @__PURE__ */ a("div", { className: `${e}__section`, children: N })
         ] })
       ] });
     }
   )
 );
-V.displayName = "ObjectTile";
+w.displayName = "ObjectTile";
 export {
-  V as default
+  w as default
 };

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

@@ -9,6 +9,7 @@ export declare const NoImage: {
     (props: ComponentProps<typeof ObjectTile>): import("react/jsx-runtime").JSX.Element;
     args: {
         badgeText: string;
+        badgeElement: () => import("react/jsx-runtime").JSX.Element;
         favoriteElement: () => import("react/jsx-runtime").JSX.Element;
         estimate: string;
         element: string;
@@ -26,6 +27,7 @@ export declare const Playground: {
     (props: ComponentProps<typeof ObjectTile>): import("react/jsx-runtime").JSX.Element;
     args: {
         badgeText: string;
+        badgeElement: () => import("react/jsx-runtime").JSX.Element;
         favoriteElement: () => import("react/jsx-runtime").JSX.Element;
         estimate: string;
         element: string;

package/dist/scss/patterns/BidSnapshot/_bidSnapshot.scss

@@ -1,7 +1,6 @@
 @use '../../allPartials' as *;
 
 .#{$px}-bid-snapshot {
-  padding-bottom: $spacing-sm;
   position: relative;
 
   &__text .#{$px}-has-separators .#{$px}-detail {
@@ -30,6 +29,13 @@
   &--has-bids .#{$px}-detail__value {
     font-variation-settings: 'wght' 600;
   }
+
+  // styles that will apply to bid message inside bid snapshot only
+  .#{$px}-bid-message {
+    &.#{$px}-bid-message {
+      margin-bottom: $spacing-sm;
+    }
+  }
 }
 
 .#{$px}-bid-message {

package/dist/scss/patterns/ObjectTile/_objectTile.scss

@@ -30,15 +30,31 @@
   &__lot-number-like {
     position: relative;
 
-    & > :not(.#{$px}-object-tile__lot-number) {
+    & > :not(.#{$px}-object-tile__lot-number):not(.#{$px}-object-tile__lot-badge) {
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
     }
+
+    .#{$px}-object-tile__lot-badge {
+      display: inline-block;
+      left: 4%;
+      position: absolute;
+
+      svg {
+        height: 100%;
+        width: 100%;
+
+        path {
+          fill: $pure-black;
+        }
+      }
+    }
   }
 
   & .#{$px}-object-tile__lot-number {
+    display: inline-block;
     margin-bottom: $spacing-xsm;
   }
 

package/package.json

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