@phillips/seldon 1.75.4 → 1.76.0

package/dist/components/PageContentWrapper/index.d.ts

@@ -0,0 +1 @@
+export { default as PageContentWrapper, type PageContentWrapperProps } from './PageContentWrapper';

package/dist/index.d.ts

@@ -50,3 +50,4 @@ export * from './components/Detail';
 export * from './patterns/DetailList';
 export * from './components/PinchZoom';
 export * from './components/SeldonImage';
+export * from './patterns/SaleHeaderBanner';

package/dist/index.js

@@ -1,14 +1,14 @@
-import { PaddingTokens as f, SpacingTokens as l, defaultYear as m, emailValidation as p, encodeURLSearchParams as s, findChildrenExcludingTypes as d, findChildrenOfType as i, generatePaddingClassName as u, getCommonProps as x, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { PaddingTokens as f, SpacingTokens as l, defaultYear as m, emailValidation as s, encodeURLSearchParams as p, findChildrenExcludingTypes as d, findChildrenOfType as u, generatePaddingClassName as n, getCommonProps as i, noOp as x, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
 import { default as P } from "./components/Button/Button.js";
 import { ButtonVariants as T } from "./components/Button/types.js";
 import { default as b } from "./components/IconButton/IconButton.js";
-import { default as A } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as h } from "./site-furniture/Footer/Footer.js";
-import { Grid as N } from "./components/Grid/Grid.js";
-import { default as w } from "./site-furniture/Header/Header.js";
-import { default as G } from "./components/Navigation/Navigation.js";
-import { default as H } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as B } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as w } from "./site-furniture/Footer/Footer.js";
+import { Grid as D } from "./components/Grid/Grid.js";
+import { default as v } from "./site-furniture/Header/Header.js";
+import { default as H } from "./components/Navigation/Navigation.js";
+import { default as E } from "./components/Navigation/NavigationItem/NavigationItem.js";
 import { default as O } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
 import { default as U } from "./components/Navigation/NavigationList/NavigationList.js";
 import { default as F } from "./patterns/HeroBanner/HeroBanner.js";
@@ -18,24 +18,24 @@ import { LinkVariants as J } from "./components/Link/types.js";
 import { default as Q } from "./components/LinkBlock/LinkBlock.js";
 import { default as _ } from "./components/LinkList/LinkList.js";
 import { default as ee } from "./components/Row/Row.js";
-import { default as te } from "./components/GridItem/GridItem.js";
+import { default as re } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as ae } from "./components/GridItem/types.js";
 import { default as le } from "./components/Search/Search.js";
-import { default as pe } from "./components/Select/Select.js";
+import { default as se } from "./components/Select/Select.js";
 import { default as de } from "./components/SplitPanel/SplitPanel.js";
-import { default as ue } from "./patterns/Subscribe/Subscribe.js";
-import { SubscriptionState as ne } from "./patterns/Subscribe/types.js";
+import { default as ne } from "./patterns/Subscribe/Subscribe.js";
+import { SubscriptionState as xe } from "./patterns/Subscribe/types.js";
 import { default as ce } from "./patterns/Social/Social.js";
 import { default as Ce } from "./patterns/ViewingsList/ViewingsList.js";
 import { default as Pe } from "./components/Modal/Modal.js";
 import { default as Te } from "./components/Drawer/Drawer.js";
 import { default as be } from "./components/Pagination/Pagination.js";
-import { default as Ae } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as he } from "./components/Text/types.js";
-import { default as Ne } from "./components/Text/Text.js";
-import { TextSymbolVariants as we } from "./components/TextSymbol/types.js";
-import { default as Ge } from "./components/TextSymbol/TextSymbol.js";
-import { default as He } from "./components/Accordion/Accordion.js";
+import { default as Be } from "./patterns/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as we } from "./components/Text/types.js";
+import { default as De } from "./components/Text/Text.js";
+import { TextSymbolVariants as ve } from "./components/TextSymbol/types.js";
+import { default as He } from "./components/TextSymbol/TextSymbol.js";
+import { default as Ee } from "./components/Accordion/Accordion.js";
 import { default as Oe } from "./components/Accordion/AccordionItem.js";
 import { AccordionItemVariant as Ue, AccordionVariants as ze } from "./components/Accordion/types.js";
 import { default as We } from "./patterns/UserManagement/UserManagement.js";
@@ -48,26 +48,31 @@ import "react";
 import { default as Xe } from "./components/Dropdown/Dropdown.js";
 import { default as $e } from "./components/Video/Video.js";
 import { default as oo } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as ro } from "./components/ContentPeek/ContentPeek.js";
+import { default as to } from "./components/ContentPeek/ContentPeek.js";
 import { default as fo } from "./components/Collapsible/Collapsible.js";
 import { default as mo } from "./components/Collapsible/CollapsibleContent.js";
-import { default as so } from "./components/Collapsible/CollapsibleTrigger.js";
-import { SeldonProvider as uo } from "./providers/SeldonProvider/SeldonProvider.js";
-import { default as no } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { default as po } from "./components/Collapsible/CollapsibleTrigger.js";
+import { SeldonProvider as no } from "./providers/SeldonProvider/SeldonProvider.js";
+import { default as xo } from "./components/PageContentWrapper/PageContentWrapper.js";
 import { default as co } from "./components/Carousel/Carousel.js";
 import { default as Co } from "./components/Carousel/CarouselContent.js";
 import { default as Po } from "./components/Carousel/CarouselItem.js";
 import { default as To } from "./components/Carousel/CarouselDots.js";
 import { default as bo } from "./components/Detail/Detail.js";
-import { default as Ao } from "./patterns/DetailList/DetailList.js";
-import { DetailListAlignment as ho } from "./patterns/DetailList/types.js";
-import { default as No } from "./components/PinchZoom/PinchZoom.js";
-import { default as wo } from "./components/SeldonImage/SeldonImage.js";
+import { default as Bo } from "./patterns/DetailList/DetailList.js";
+import { DetailListAlignment as wo } from "./patterns/DetailList/types.js";
+import { default as Do } from "./components/PinchZoom/PinchZoom.js";
+import { default as vo } from "./components/SeldonImage/SeldonImage.js";
+import { default as Ho } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
+import { default as Eo } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
+import { default as Oo } from "./patterns/SaleHeaderBanner/SaleHeaderCountdown.js";
+import { AuctionState as Uo } from "./patterns/SaleHeaderBanner/types.js";
 export {
-  He as Accordion,
+  Ee as Accordion,
   Oe as AccordionItem,
   Ue as AccordionItemVariant,
   ze as AccordionVariants,
+  Uo as AuctionState,
   Ze as AuthState,
   Ke as Breadcrumb,
   P as Button,
@@ -78,19 +83,19 @@ export {
   Po as CarouselItem,
   fo as Collapsible,
   mo as CollapsibleContent,
-  so as CollapsibleTrigger,
-  ro as ContentPeek,
+  po as CollapsibleTrigger,
+  to as ContentPeek,
   bo as Detail,
-  Ao as DetailList,
-  ho as DetailListAlignment,
+  Bo as DetailList,
+  wo as DetailListAlignment,
   Te as Drawer,
   Xe as Dropdown,
-  A as ErrorBoundary,
-  h as Footer,
-  N as Grid,
-  te as GridItem,
+  B as ErrorBoundary,
+  w as Footer,
+  D as Grid,
+  re as GridItem,
   ae as GridItemAlign,
-  w as Header,
+  v as Header,
   F as HeroBanner,
   b as IconButton,
   Y as Input,
@@ -100,42 +105,45 @@ export {
   _ as LinkList,
   J as LinkVariants,
   Pe as Modal,
-  G as Navigation,
-  H as NavigationItem,
+  H as Navigation,
+  E as NavigationItem,
   O as NavigationItemTrigger,
   U as NavigationList,
   f as PaddingTokens,
   C as Page,
-  no as PageContentWrapper,
+  xo as PageContentWrapper,
   be as Pagination,
-  No as PinchZoom,
+  Do as PinchZoom,
   ee as Row,
+  Ho as SaleHeaderBanner,
+  Eo as SaleHeaderBrowseAuctions,
+  Oo as SaleHeaderCountdown,
   le as Search,
-  wo as SeldonImage,
-  uo as SeldonProvider,
-  pe as Select,
+  vo as SeldonImage,
+  no as SeldonProvider,
+  se as Select,
   ce as Social,
   l as SpacingTokens,
   de as SplitPanel,
-  Ae as StatefulViewingsList,
-  ue as Subscribe,
-  ne as SubscriptionState,
+  Be as StatefulViewingsList,
+  ne as Subscribe,
+  xe as SubscriptionState,
   qe as SupportedLanguages,
-  Ne as Text,
-  we as TextSymbolVariants,
-  Ge as TextSymbols,
-  he as TextVariants,
+  De as Text,
+  ve as TextSymbolVariants,
+  He as TextSymbols,
+  we as TextVariants,
   We as UserManagement,
   $e as Video,
   Ce as ViewingsList,
   m as defaultYear,
-  p as emailValidation,
-  s as encodeURLSearchParams,
+  s as emailValidation,
+  p as encodeURLSearchParams,
   d as findChildrenExcludingTypes,
-  i as findChildrenOfType,
-  u as generatePaddingClassName,
-  x as getCommonProps,
-  n as noOp,
+  u as findChildrenOfType,
+  n as generatePaddingClassName,
+  i as getCommonProps,
+  x as noOp,
   g as px,
   c as useNormalizedInputProps
 };

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

@@ -0,0 +1,49 @@
+import { ComponentProps } from 'react';
+import { AuctionState } from './types';
+export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
+    /**
+     * What is the title of the auction?
+     */
+    auctionTitle: React.ReactNode;
+    /**
+     * The URL of the banner image
+     */
+    imageSrcUrl: string;
+    /**
+     * Where is the auction taking place?
+     */
+    location: React.ReactNode;
+    occurrenceInformation: {
+        /**
+         * Depending on auction state, when does the auction open or close
+         */
+        date: React.ReactNode;
+        /**
+         * Clarifies the date based on the auction state
+         */
+        occurrenceLabel: React.ReactNode;
+    }[];
+    /**
+     * What is the current state of the auction?
+     */
+    auctionState: AuctionState;
+    /**
+     * What text should the CTA button display?
+     */
+    ctaLabel?: React.ReactNode;
+    /**
+     * What action does the CTA take?
+     */
+    onClick?: () => void;
+}
+/**
+ * ## Overview
+ *
+ * Sale header banner component, supports 3 states of the auction: pre-sale, open for bidding, and closed.
+ *
+ * [Figma Link](https://www.figma.com/design/OvBXAq48blO1r4qYbeBPjW/RW---Sale-Page-(PLP)?node-id=1-6&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-saleheaderbanner--overview)
+ */
+declare const SaleHeaderBanner: import("react").ForwardRefExoticComponent<Omit<SaleHeaderBannerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default SaleHeaderBanner;

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -0,0 +1,55 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { getCommonProps as u } from "../../utils/index.js";
+import C from "../../node_modules/classnames/index.js";
+import j from "../../components/SeldonImage/SeldonImage.js";
+import { AuctionState as _ } from "./types.js";
+import { TextVariants as s } from "../../components/Text/types.js";
+import t from "../../components/Text/Text.js";
+import F from "../../components/PageContentWrapper/PageContentWrapper.js";
+import H from "../../components/Button/Button.js";
+const P = S(
+  ({
+    auctionTitle: o,
+    imageSrcUrl: f,
+    location: g,
+    auctionState: n,
+    occurrenceInformation: N,
+    ctaLabel: h = "Register to Bid",
+    onClick: v,
+    children: m,
+    className: $,
+    ...i
+  }, c) => {
+    const { className: a, ...l } = u(i, "SaleHeaderBanner"), B = n === _.openForBidding, d = n === _.past;
+    return /* @__PURE__ */ r("div", { ...l, className: C(a, $), ...i, ref: c, children: [
+      /* @__PURE__ */ e(
+        j,
+        {
+          aspectRatio: "16/9",
+          src: f,
+          alt: String(o),
+          objectFit: "cover",
+          className: `${a}__image`
+        }
+      ),
+      /* @__PURE__ */ e(F, { className: `${a}__stack-wrapper`, ...l, ...i, ref: c, children: /* @__PURE__ */ r("div", { className: `${a}__stack`, children: [
+        B && m,
+        /* @__PURE__ */ e(t, { variant: s.title1, children: o }),
+        /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__location`, children: g }),
+        /* @__PURE__ */ r("div", { className: `${a}__occurrence-details`, children: [
+          N.map(({ date: p, occurrenceLabel: x }) => /* @__PURE__ */ r("div", { className: `${a}__occurrence-details-text`, children: [
+            /* @__PURE__ */ e(t, { variant: s.string2, children: x }),
+            /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__date`, children: p })
+          ] }, String(p))),
+          d && m
+        ] }),
+        !d && /* @__PURE__ */ e(H, { className: `${a}__cta`, onClick: v, children: h })
+      ] }) })
+    ] });
+  }
+);
+P.displayName = "SaleHeaderBanner";
+export {
+  P as default
+};

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

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+export interface SaleHeaderBrowseAuctionsProps extends ComponentProps<'div'> {
+    ctaLabel?: string;
+    ctaText?: string;
+}
+declare const SaleHeaderBrowseAuctions: import("react").ForwardRefExoticComponent<Omit<SaleHeaderBrowseAuctionsProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export default SaleHeaderBrowseAuctions;

package/dist/patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js

@@ -0,0 +1,20 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { getCommonProps as m } from "../../utils/index.js";
+import { TextVariants as n } from "../../components/Text/types.js";
+import l from "../../components/Text/Text.js";
+import "../../components/Link/types.js";
+import c from "../../components/Link/Link.js";
+const d = i(
+  ({ ctaText: r = "View Calendar", ctaLabel: a = "Browse Upcoming Sale", className: f, ...o }, p) => {
+    const { className: s } = m(o, "SaleHeaderBanner");
+    return /* @__PURE__ */ t("div", { className: `${s}__occurrence-details-text`, children: [
+      /* @__PURE__ */ e(l, { variant: n.string2, children: a }),
+      /* @__PURE__ */ e(c, { href: "/calendar", children: r })
+    ] });
+  }
+);
+d.displayName = "SaleHeaderBrowseAuctions";
+export {
+  d as default
+};

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

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+export interface SaleHeaderCountdownProps extends ComponentProps<'div'> {
+    label?: string;
+    daysLabel?: string;
+    hoursLabel?: string;
+}
+declare const SaleHeaderCountdown: import("react").ForwardRefExoticComponent<Omit<SaleHeaderCountdownProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default SaleHeaderCountdown;

package/dist/patterns/SaleHeaderBanner/SaleHeaderCountdown.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { getCommonProps as f } from "../../utils/index.js";
+import { TextVariants as e } from "../../components/Text/types.js";
+import r from "../../components/Text/Text.js";
+const h = c(
+  ({ label: n = "Lots Close in", daysLabel: s = "Days", hoursLabel: t = "Hours", className: p, ...o }, i) => {
+    const { className: m, ...d } = f(o, "SaleHeaderBanner");
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        id: "PLACEHOLDER FOR TIMER COMPONENT",
+        className: `${m}__countdown-container`,
+        ...d,
+        ...o,
+        ref: i,
+        children: [
+          /* @__PURE__ */ l(r, { variant: e.heading5, children: n }),
+          /* @__PURE__ */ a(r, { variant: e.heading5, children: [
+            "2 ",
+            s
+          ] }),
+          /* @__PURE__ */ a(r, { variant: e.heading5, children: [
+            "17 ",
+            t
+          ] })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "SaleHeaderCountdown";
+export {
+  h as default
+};

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

@@ -0,0 +1,4 @@
+export { default as SaleHeaderBanner, type SaleHeaderBannerProps } from './SaleHeaderBanner';
+export { default as SaleHeaderBrowseAuctions, type SaleHeaderBrowseAuctionsProps } from './SaleHeaderBrowseAuctions';
+export { default as SaleHeaderCountdown, type SaleHeaderCountdownProps } from './SaleHeaderCountdown';
+export { AuctionState } from './types';

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

@@ -0,0 +1,5 @@
+export declare enum AuctionState {
+    preSale = "PRESALE",
+    openForBidding = "OPEN_FOR_BIDDING",
+    past = "PAST"
+}

package/dist/patterns/SaleHeaderBanner/types.js

@@ -0,0 +1,4 @@
+var p = /* @__PURE__ */ ((r) => (r.preSale = "PRESALE", r.openForBidding = "OPEN_FOR_BIDDING", r.past = "PAST", r))(p || {});
+export {
+  p as AuctionState
+};

package/dist/scss/componentStyles.scss

@@ -44,6 +44,7 @@
 @use 'patterns/ViewingsList/viewingsList';
 @use 'patterns/Subscribe/subscribe';
 @use 'patterns/Social/social';
+@use 'patterns/SaleHeaderBanner/saleHeaderBanner';
 
 // Site Furniture
 @use 'site-furniture/Header/header';

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

@@ -0,0 +1,70 @@
+@use '../../allPartials' as *;
+
+.#{$px}-sale-header-banner {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: $spacing-md;
+
+  @include media($size-md, $type: 'min') {
+    flex-direction: row-reverse;
+
+    &__image,
+    &__stack-wrapper {
+      flex: 0 50%;
+    }
+  }
+
+  &__stack {
+    align-items: start;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    padding: $spacing-md 0;
+  }
+
+  // update when adding in actual countdown timer
+  &__countdown-container {
+    align-items: center;
+    border-bottom: 1px solid $light-gray;
+    display: flex;
+    gap: $spacing-sm;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    width: 100%;
+  }
+
+  &__location {
+    font-variation-settings: 'wght' 600;
+    margin: $margin-xsm 0;
+  }
+
+  &__occurrence-details {
+    display: flex;
+    margin-bottom: 1.5rem;
+
+    &-text {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      &:first-child {
+        padding-right: $spacing-md;
+      }
+
+      &:not(:first-child) {
+        border-left: 1px solid $keyline-gray;
+        padding: 0 $spacing-md;
+      }
+    }
+  }
+
+  &__date {
+    font-variation-settings: 'wght' 600;
+  }
+
+  &__cta {
+    margin: $spacing-sm 0;
+  }
+}

package/package.json

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