@phillips/seldon 1.121.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/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

@@ -39,8 +39,8 @@
 
     .#{$px}-object-tile__lot-badge {
       display: inline-block;
-      position: absolute;
       left: 4%;
+      position: absolute;
 
       svg {
         height: 100%;
@@ -50,12 +50,12 @@
           fill: $pure-black;
         }
       }
-    } 
+    }
   }
 
   & .#{$px}-object-tile__lot-number {
-    margin-bottom: $spacing-xsm;
     display: inline-block;
+    margin-bottom: $spacing-xsm;
   }
 
   & .#{$px}-object-tile__maker,

package/package.json

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