@phillips/seldon 1.178.0 → 1.179.0

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.d.ts

@@ -10,6 +10,8 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
      * What is the title of the auction?
      */
     auctionTitle: React.ReactNode;
+    /** Text to be displayed as a badge. */
+    badgeText?: string;
     /**
      * The URL of the banner image
      */

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -1,77 +1,79 @@
 import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { forwardRef as M } from "react";
-import { getCommonProps as R } from "../../utils/index.js";
-import D from "../../node_modules/classnames/index.js";
-import h from "../../components/Countdown/Countdown.js";
-import F from "../../components/SeldonImage/SeldonImage.js";
-import { AuctionStatus as O } from "../../types/commonTypes.js";
+import { forwardRef as R } from "react";
+import { getCommonProps as D } from "../../utils/index.js";
+import F from "../../node_modules/classnames/index.js";
+import f from "../../components/Countdown/Countdown.js";
+import O from "../../components/SeldonImage/SeldonImage.js";
+import { AuctionStatus as q } from "../../types/commonTypes.js";
 import { TextVariants as r } from "../../components/Text/types.js";
 import t from "../../components/Text/Text.js";
-import q from "../../components/PageContentWrapper/PageContentWrapper.js";
-import { SSRMediaQuery as f } from "../../providers/SeldonProvider/utils.js";
-const z = M(
+import z from "../../components/PageContentWrapper/PageContentWrapper.js";
+import { SSRMediaQuery as g } from "../../providers/SeldonProvider/utils.js";
+const A = R(
   ({
     auctionEndTime: i,
     auctionTitle: o,
-    imageSrcUrl: g,
-    imageSrcSet: v,
-    imageSizes: N,
-    imageLoading: u,
-    imageFetchPriority: S,
-    location: $,
-    countdownTimerLabel: w,
-    countdownFormatDuration: x,
-    auctionState: B,
-    occurrenceInformation: k,
-    onClick: A,
+    badgeText: c,
+    imageSrcUrl: v,
+    imageSrcSet: N,
+    imageSizes: u,
+    imageLoading: S,
+    imageFetchPriority: $,
+    location: w,
+    countdownTimerLabel: B,
+    countdownFormatDuration: b,
+    auctionState: k,
+    occurrenceInformation: x,
+    onClick: I,
     children: C,
     className: P,
-    footerElement: b,
-    headerLabel: j,
-    showTimer: c,
-    getCurrentDateTime: y,
+    footerElement: j,
+    headerLabel: y,
+    showTimer: l,
+    getCurrentDateTime: H,
     ...s
-  }, l) => {
-    const { className: e, ...m } = R(s, "SaleHeaderBanner"), d = B === O.live, _ = {
+  }, m) => {
+    const { className: e, ...d } = D(s, "SaleHeaderBanner"), _ = k === q.live, p = {
       endDateTime: i,
-      label: w,
-      formatDurationStr: x,
-      getCurrentDateTime: y
+      label: B,
+      formatDurationStr: b,
+      getCurrentDateTime: H
     };
-    return /* @__PURE__ */ n("div", { ...m, className: D(e, P), ...s, ref: l, children: [
-      d && i && c ? /* @__PURE__ */ a(f.Media, { lessThan: "md", children: /* @__PURE__ */ a("div", { className: `${e}__stack__countdown`, children: /* @__PURE__ */ a(h, { ..._, showBottomBorder: !1 }) }) }) : null,
+    return /* @__PURE__ */ n("div", { ...d, className: F(e, P), ...s, ref: m, children: [
+      _ && i && l ? /* @__PURE__ */ a(g.Media, { lessThan: "md", children: /* @__PURE__ */ a("div", { className: `${e}__stack__countdown`, children: /* @__PURE__ */ a(f, { ...p, showBottomBorder: !1 }) }) }) : null,
       /* @__PURE__ */ a(
-        F,
+        O,
         {
           aspectRatio: "16/9",
-          src: g,
+          src: v,
           alt: String(o),
           objectFit: "cover",
           className: `${e}__image`,
-          srcSet: v,
-          sizes: N,
-          loading: u,
-          fetchPriority: S
+          srcSet: N,
+          sizes: u,
+          loading: S,
+          fetchPriority: $
         }
       ),
-      /* @__PURE__ */ a(q, { className: `${e}__stack-wrapper`, ...m, ...s, ref: l, children: /* @__PURE__ */ n("div", { className: `${e}__stack`, children: [
-        d && i && c ? /* @__PURE__ */ a(f.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ a("div", { className: `${e}__stack__countdown`, children: /* @__PURE__ */ a(h, { ..._ }) }) }) : null,
-        /* @__PURE__ */ a(t, { variant: r.badge, children: j }),
+      /* @__PURE__ */ a(z, { className: `${e}__stack-wrapper`, ...d, ...s, ref: m, children: /* @__PURE__ */ n("div", { className: `${e}__stack`, children: [
+        _ && i && l ? /* @__PURE__ */ a(g.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ a("div", { className: `${e}__stack__countdown`, children: /* @__PURE__ */ a(f, { ...p }) }) }) : null,
+        /* @__PURE__ */ a(t, { variant: r.badge, children: y }),
         /* @__PURE__ */ a(t, { variant: r.title1, children: o }),
-        /* @__PURE__ */ a(t, { variant: r.string2, className: `${e}__location`, children: $ }),
+        c && /* @__PURE__ */ a(t, { variant: r.badge, className: `${e}__badge`, children: c }),
+        /* @__PURE__ */ a(t, { variant: r.string2, className: `${e}__location`, children: w }),
         /* @__PURE__ */ n("div", { className: `${e}__occurrence-details`, children: [
-          k.map(({ date: p, occurrenceLabel: H }) => /* @__PURE__ */ n("div", { className: `${e}__occurrence-details-text`, children: [
-            /* @__PURE__ */ a(t, { variant: r.string2, children: H }),
-            /* @__PURE__ */ a(t, { variant: r.string2, className: `${e}__date`, children: p })
-          ] }, String(p))),
+          x.map(({ date: h, occurrenceLabel: M }) => /* @__PURE__ */ n("div", { className: `${e}__occurrence-details-text`, children: [
+            /* @__PURE__ */ a(t, { variant: r.string2, children: M }),
+            /* @__PURE__ */ a(t, { variant: r.string2, className: `${e}__date`, children: h })
+          ] }, String(h))),
           C
         ] }),
-        b
+        j
       ] }) })
     ] });
   }
 );
-z.displayName = "SaleHeaderBanner";
+A.displayName = "SaleHeaderBanner";
 export {
-  z as default
+  A as default
 };

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

@@ -25,6 +25,11 @@ export declare const Playground: {
                 type: string;
             };
         };
+        badgeText: {
+            control: {
+                type: string;
+            };
+        };
         currentDateTime: {
             control: {
                 type: string;
@@ -35,6 +40,7 @@ export declare const Playground: {
 export declare const PreSale: (props: SaleHeaderBannerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const PreSaleTwoOccurrences: (props: SaleHeaderBannerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const PreSaleThreeOccurrences: (props: SaleHeaderBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Consignment: (props: SaleHeaderBannerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const OpenForBidding: {
     (props: SaleHeaderBannerProps & {
         currentDateTime?: Date;

package/dist/scss/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -46,6 +46,14 @@
     margin: $spacing-xsm 0;
   }
 
+  &__badge {
+    border: 1px solid $badge-blue;
+    color: $badge-blue;
+    font-size: $string-size3;
+    margin: $spacing-xsm 0;
+    padding: $spacing-micro $spacing-xsm;
+  }
+
   &__occurrence-details {
     align-items: center;
     display: flex;

package/package.json

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