@phillips/seldon 1.157.0 → 1.158.0

package/dist/components/SaleCard/SaleCard.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps } from 'react';
+import { SaleCardVariants } from './types';
+/** * Props for the SaleCard component. */
+export interface SaleCardProps extends ComponentProps<'div'> {
+    /** * The source URL of the image to be displayed. */
+    imageSrc: string;
+    /** * The alt text for the image. Defaults to "Auction Image" if not provided. */
+    imageAlt?: string;
+    /** * The auctionType of sale (e.g. "Live Auction", "Online Only", etc.). */
+    auctionType: string;
+    /** * The titleText of the sale. */
+    titleText: string;
+    /** * The date of the sale. */
+    date: string;
+    /** * The location of the sale. */
+    location: string;
+    /** * The text to be displayed on the primary button. If not provided, the button will not be rendered. */
+    primaryButtonText?: string;
+    /** * The callback function to be executed when the primary button is clicked. Required if primaryButtonText is provided. */
+    primaryButtonOnClick?: () => void;
+    /** * The text to be displayed on the secondary button. If not provided, the button will not be rendered. */
+    secondaryButtonText?: string;
+    /** * The URL or callback function for the secondary button. Required if secondaryButtonText is provided. */
+    secondaryButtonHref?: string;
+    secondaryButtonOnClick?: () => void;
+    /** * The text to be displayed as a badge. */
+    badgeText?: string;
+    /** * The text to be displayed for the modal link. */
+    modalButtonText?: string;
+    /** * The callback function to be executed when the modal link is clicked. */
+    modalButtonOnClick?: () => void;
+    /** * The variant of the SaleCard component.
+     * - 'default': The default style of the SaleCard component.
+     * - 'relatedSaleTile': A variant with a smaller image size and horizontal layout on mobile devices.
+     */
+    variant?: SaleCardVariants;
+}
+/**
+ * ## Overview
+ *
+ * Overview of this widget
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/Design-System--Responsive-Web?node-id=25028-2188&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-salecard--overview)
+ */
+declare const SaleCard: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default SaleCard;

package/dist/components/SaleCard/SaleCard.js

@@ -0,0 +1,85 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { forwardRef as E } from "react";
+import { getCommonProps as I } from "../../utils/index.js";
+import N from "../../node_modules/classnames/index.js";
+import { TextVariants as i } from "../Text/types.js";
+import e from "../Text/Text.js";
+import M from "../SeldonImage/SeldonImage.js";
+import n from "../Button/Button.js";
+import { ButtonVariants as m } from "../Button/types.js";
+import { SSRMediaQuery as R } from "../../providers/SeldonProvider/utils.js";
+import { SaleCardVariants as q } from "./types.js";
+const w = E(
+  ({
+    className: $,
+    imageSrc: t,
+    imageAlt: g = "Auction Image",
+    auctionType: b,
+    titleText: C,
+    date: S,
+    location: k,
+    primaryButtonText: o,
+    primaryButtonOnClick: c,
+    secondaryButtonText: d,
+    secondaryButtonHref: l,
+    secondaryButtonOnClick: u,
+    badgeText: _,
+    modalButtonOnClick: h,
+    modalButtonText: p,
+    variant: f = q.DEFAULT,
+    ...v
+  }, P) => {
+    const { className: a, ...V } = I(v, "SaleCard"), j = N(a, $, {
+      [`${a}--${f}`]: f
+    }), A = { ...V, ...v };
+    return /* @__PURE__ */ s("div", { ...A, className: j, ref: P, children: [
+      t ? /* @__PURE__ */ r(M, { src: t, alt: g, className: `${a}__image` }) : null,
+      /* @__PURE__ */ s("div", { className: `${a}__details`, children: [
+        /* @__PURE__ */ r(e, { variant: i.badge, children: b }),
+        /* @__PURE__ */ r(e, { variant: i.title2, children: C }),
+        _ && /* @__PURE__ */ r(e, { variant: i.badge, className: `${a}__badge`, children: _ }),
+        /* @__PURE__ */ s("div", { className: `${a}__info`, children: [
+          /* @__PURE__ */ r(e, { variant: i.string2, children: k }),
+          /* @__PURE__ */ r(e, { variant: i.string2, children: S }),
+          p && h && /* @__PURE__ */ r("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ r(
+            n,
+            {
+              onClick: h,
+              variant: m.tertiary,
+              className: `${a}__modal-link-button`,
+              children: p
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ r(R.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ s("div", { className: `${a}__cta`, children: [
+        o && c && /* @__PURE__ */ r(
+          n,
+          {
+            variant: m.primary,
+            onClick: c,
+            className: `${a}__cta-button`,
+            children: o
+          }
+        ),
+        d && /* @__PURE__ */ r(
+          n,
+          {
+            variant: l ? m.tertiary : m.secondary,
+            href: l,
+            target: l ? "_blank" : void 0,
+            onClick: u,
+            className: N(`${a}__cta-button`, {
+              [`${a}__pdf-link`]: l
+            }),
+            children: d
+          }
+        )
+      ] }) })
+    ] });
+  }
+);
+w.displayName = "SaleCard";
+export {
+  w as default
+};

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

@@ -0,0 +1,23 @@
+import { SaleCardProps } from './SaleCard';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: SaleCardProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        imageSrc: string;
+        auctionType: string;
+        titleText: string;
+        date: string;
+        location: string;
+    };
+    argTypes: {};
+};
+export declare const RelatedSaleTile: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithBothCTAButtons: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithOnlyPrimaryCTAButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithOnlySecondaryCTAButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDownloadPdfLink: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutCTAButtons: () => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/SaleCard/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum SaleCardVariants {
+    DEFAULT = "default",
+    RELATED_SALE_TILE = "relatedSaleTile"
+}

package/dist/components/SaleCard/types.js

@@ -0,0 +1,4 @@
+var E = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.RELATED_SALE_TILE = "relatedSaleTile", e))(E || {});
+export {
+  E as SaleCardVariants
+};

package/dist/index.d.ts

@@ -70,7 +70,7 @@ export { default as Header, type HeaderProps } from './site-furniture/Header/Hea
 export * from './types/commonTypes';
 export * from './components/AddToCalendar';
 export * from './components/Article';
-export * from './components/AuctionTile';
+export * from './components/SaleCard';
 export * from './components/Countdown';
 export * from './components/Countdown/types';
 export * from './components/Divider';

package/dist/index.js

@@ -1,7 +1,7 @@
-import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as x, getCommonProps as i, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
-import { SSRMediaQuery as P, ssrMediaQueryStyle as A } from "./providers/SeldonProvider/utils.js";
-import { usePendingState as L } from "./utils/hooks.js";
+import { SSRMediaQuery as P, ssrMediaQueryStyle as B } from "./providers/SeldonProvider/utils.js";
+import { usePendingState as A } from "./utils/hooks.js";
 import { AuctionStatus as I, LotStatus as V, SupportedLanguages as h } from "./types/commonTypes.js";
 import { default as v } from "./components/Button/Button.js";
 import { ButtonVariants as y } from "./components/Button/types.js";
@@ -23,12 +23,12 @@ import { default as ae } from "./components/Collapsible/CollapsibleContent.js";
 import { default as se } from "./components/Collapsible/CollapsibleTrigger.js";
 import { default as de } from "./components/ContentPeek/ContentPeek.js";
 import { HeightUnits as pe } from "./components/ContentPeek/utils.js";
-import { default as ie } from "./components/Detail/Detail.js";
+import { default as xe } from "./components/Detail/Detail.js";
 import { default as ne } from "./components/Drawer/Drawer.js";
 import { default as ce } from "./components/Dropdown/Dropdown.js";
 import { default as Ce } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { Grid as Pe } from "./components/Grid/Grid.js";
-import { default as Be } from "./components/GridItem/GridItem.js";
+import { default as Le } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as be } from "./components/GridItem/types.js";
 import { default as Ve } from "./components/Input/Input.js";
 import { default as ke } from "./components/Link/Link.js";
@@ -50,11 +50,11 @@ import { SelectVariants as at } from "./components/Select/types.js";
 import { default as st } from "./components/SplitPanel/SplitPanel.js";
 import { default as dt } from "./components/Tabs/TabsContainer.js";
 import { default as pt } from "./components/Tabs/TabsContent.js";
-import { Tag as it, default as xt } from "./components/Tags/Tags.js";
+import { Tag as xt, default as it } from "./components/Tags/Tags.js";
 import { TextAlignments as gt, TextVariants as ct } from "./components/Text/types.js";
 import { default as Ct } from "./components/Text/Text.js";
 import { TextSymbolVariants as Pt } from "./components/TextSymbol/types.js";
-import { default as Bt } from "./components/TextSymbol/TextSymbol.js";
+import { default as Lt } from "./components/TextSymbol/TextSymbol.js";
 import { default as bt } from "./components/Video/Video.js";
 import { default as Vt } from "./patterns/DetailList/DetailList.js";
 import { DetailListAlignment as kt } from "./patterns/DetailList/types.js";
@@ -76,12 +76,12 @@ import { default as ao } from "./components/PhoneNumberPicker/PhoneNumberPicker.
 import { default as so } from "./components/Loader/Loader.js";
 import { default as mo } from "./components/PageContentWrapper/PageContentWrapper.js";
 import { default as uo } from "./site-furniture/Footer/Footer.js";
-import { default as xo } from "./site-furniture/Header/Header.js";
+import { default as io } from "./site-furniture/Header/Header.js";
 import { default as go } from "./components/AddToCalendar/AddToCalendar.js";
 import { default as So } from "./components/Article/Article.js";
-import { default as To } from "./components/AuctionTile/AuctionTile.js";
-import { default as Ao } from "./components/Countdown/Countdown.js";
-import { CountdownVariants as Lo } from "./components/Countdown/types.js";
+import { default as To } from "./components/SaleCard/SaleCard.js";
+import { default as Bo } from "./components/Countdown/Countdown.js";
+import { CountdownVariants as Ao } from "./components/Countdown/types.js";
 import { default as Io } from "./components/Divider/Divider.js";
 import { default as ho } from "./components/FavoritingTileButton/FavoritingTileButton.js";
 import { default as vo } from "./components/Filter/Filter.js";
@@ -107,7 +107,6 @@ export {
   go as AddToCalendar,
   So as Article,
   I as AuctionStatus,
-  To as AuctionTile,
   Yt as AuthState,
   Jo as BidMessage,
   Xo as BidMessageVariants,
@@ -127,9 +126,9 @@ export {
   oo as ComboBox,
   de as ContentPeek,
   pe as ContentPeekHeightUnits,
-  Ao as Countdown,
-  Lo as CountdownVariants,
-  ie as Detail,
+  Bo as Countdown,
+  Ao as CountdownVariants,
+  xe as Detail,
   Vt as DetailList,
   kt as DetailListAlignment,
   Io as Divider,
@@ -144,9 +143,9 @@ export {
   er as FilterMenu,
   uo as Footer,
   Pe as Grid,
-  Be as GridItem,
+  Le as GridItem,
   be as GridItemAlign,
-  xo as Header,
+  io as Header,
   Ht as HeroBanner,
   z as Icon,
   D as IconButton,
@@ -173,6 +172,7 @@ export {
   qe as PinchZoom,
   Ke as Row,
   P as SSRMediaQuery,
+  To as SaleCard,
   Nt as SaleHeaderBanner,
   Ut as SaleHeaderBrowseAuctions,
   _e as Search,
@@ -189,13 +189,13 @@ export {
   h as SupportedLanguages,
   dt as TabsContainer,
   pt as TabsContent,
-  it as Tag,
-  xt as TagsList,
+  xt as Tag,
+  it as TagsList,
   Ct as Text,
   gt as TextAlignments,
   Eo as TextArea,
   Pt as TextSymbolVariants,
-  Bt as TextSymbols,
+  Lt as TextSymbols,
   ct as TextVariants,
   Go as Toast,
   Ro as ToastProvider,
@@ -208,12 +208,12 @@ export {
   m as findChildrenExcludingTypes,
   p as findChildrenOfType,
   u as focusElementById,
-  i as generatePaddingClassName,
-  x as getCommonProps,
+  x as generatePaddingClassName,
+  i as getCommonProps,
   n as noOp,
   g as px,
-  A as ssrMediaQueryStyle,
+  B as ssrMediaQueryStyle,
   c as useNormalizedInputProps,
-  L as usePendingState,
+  A as usePendingState,
   jo as useToast
 };

package/dist/scss/_vars.scss

@@ -29,6 +29,7 @@ $error-pink: rgba(255, 229, 229, 90%);
 $warn-yellow: #d6d141;
 $post-sale-pink: #ff0086;
 $cta-blue: #4a90e2;
+$badge-blue: #0065fc;
 
 // AM color palette
 $widget-blue: #4a90e2;

package/dist/scss/_vars.scss.js

@@ -29,6 +29,7 @@ $error-pink: rgba(255, 229, 229, 90%);
 $warn-yellow: #d6d141;
 $post-sale-pink: #ff0086;
 $cta-blue: #4a90e2;
+$badge-blue: #0065fc;
 
 // AM color palette
 $widget-blue: #4a90e2;

package/dist/scss/componentStyles.scss

@@ -73,4 +73,4 @@
 @use 'components/Divider/divider';
 @use 'components/TextArea/textArea';
 @use 'components/AddToCalendar/addToCalendar';
-@use 'components/AuctionTile/auctionTile';
+@use 'components/SaleCard/saleCard';

package/dist/scss/components/SaleCard/_saleCard.scss

@@ -0,0 +1,120 @@
+@use '../../allPartials' as *;
+
+.#{$px}-sale-card {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+
+  @include media($breakpoint-md) {
+    flex-direction: row;
+    gap: $spacing-md;
+  }
+
+  &__image {
+    aspect-ratio: 91/51;
+    border-radius: 4px;
+    min-width: 100%;
+
+    @include media($breakpoint-md) {
+      aspect-ratio: 107/60;
+      min-width: 428px;
+    }
+
+    img {
+      height: auto;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  &__details {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: $spacing-micro;
+
+    @include media($size-md, 'max') {
+      align-self: flex-start;
+    }
+  }
+
+  &__date_info {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__separator {
+    margin: 0 8px;
+  }
+
+  &__cta {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    justify-content: center;
+    min-width: 200px;
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-micro;
+  }
+
+  &__badge {
+    border: 1px solid $badge-blue;
+    color: $badge-blue;
+    padding: $spacing-micro 8px;
+  }
+
+  &__cta-button {
+    padding: $spacing-sm $spacing-lg;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  &__modal-link {
+    cursor: pointer;
+
+    @include underline;
+  }
+
+  &__modal-link-button {
+    padding: 0;
+
+    @include underline;
+  }
+
+  &__pdf-link {
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    gap: $spacing-micro;
+    justify-content: center;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &--relatedSaleTile {
+    align-items: flex-start;
+    gap: $spacing-sm;
+
+    @include media($size-md, 'max') {
+      flex-direction: row;
+    }
+
+    .#{$px}-sale-card__image {
+      max-width: $spacing-xxxl;
+      min-width: 94px;
+
+      @include media($size-xl) {
+        max-width: calc($spacing-xxxl * 1.25);
+      }
+    }
+  }
+}

package/package.json

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

package/dist/components/AuctionTile/AuctionTile.d.ts

@@ -1,20 +0,0 @@
-import { ComponentProps } from 'react';
-export type AuctionTileProps = ComponentProps<'div'> & {
-    imageSrc: string;
-    imageAlt?: string;
-    type: string;
-    title: string;
-    date: string;
-    location: string;
-};
-/**
- * ## Overview
- *
- * Overview of this widget
- *
- * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/RW-Design-System?node-id=22259-4172&m=dev)
- *
- * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-auctiontile--overview)
- */
-declare const AuctionTile: import('react').ForwardRefExoticComponent<Omit<AuctionTileProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export default AuctionTile;

package/dist/components/AuctionTile/AuctionTile.js

@@ -1,27 +0,0 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { getCommonProps as N } from "../../utils/index.js";
-import g from "../../node_modules/classnames/index.js";
-import { TextVariants as r } from "../Text/types.js";
-import e from "../Text/Text.js";
-const u = v(
-  ({ className: o, imageSrc: n, imageAlt: m = "Auction Image", type: c, title: l, date: d, location: p, ...t }, f) => {
-    const { className: i, ...h } = N(t, "AuctionTile"), _ = { ...h, ...t };
-    return /* @__PURE__ */ s("div", { ..._, className: g(i, o), ref: f, children: [
-      /* @__PURE__ */ a("div", { className: `${i}__image`, children: /* @__PURE__ */ a("img", { src: n, alt: m }) }),
-      /* @__PURE__ */ s("div", { className: `${i}__details`, children: [
-        /* @__PURE__ */ a(e, { variant: r.badge, children: c }),
-        /* @__PURE__ */ a(e, { variant: r.title4, children: l }),
-        /* @__PURE__ */ s("div", { className: `${i}__date_location`, children: [
-          /* @__PURE__ */ a(e, { variant: r.string2, children: d }),
-          /* @__PURE__ */ a("span", { className: `${i}__separator`, children: "•" }),
-          /* @__PURE__ */ a(e, { variant: r.string2, children: p })
-        ] })
-      ] })
-    ] });
-  }
-);
-u.displayName = "AuctionTile";
-export {
-  u as default
-};

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

@@ -1,18 +0,0 @@
-import { AuctionTileProps } from './AuctionTile';
-declare const meta: {
-    title: string;
-    component: import('react').ForwardRefExoticComponent<Omit<AuctionTileProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-};
-export default meta;
-export declare const Playground: {
-    (props: AuctionTileProps): import("react/jsx-runtime").JSX.Element;
-    args: {
-        imageSrc: string;
-        type: string;
-        title: string;
-        date: string;
-        location: string;
-    };
-    argTypes: {};
-};
-export declare const MultipleAuctions: () => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/scss/components/AuctionTile/_auctionTile.scss

@@ -1,38 +0,0 @@
-@use '../../allPartials' as *;
-
-.#{$px}-auction-tile {
-  display: flex;
-  flex-direction: row;
-  gap: $spacing-sm;
-
-  &__image {
-    aspect-ratio: 16/9;
-    max-width: $spacing-xxxl;
-    min-width: 90px;
-
-    @include media($size-xl) {
-      max-width: calc($spacing-xxxl * 1.25);
-    }
-
-    img {
-      object-fit: cover;
-    }
-  }
-
-  &__details {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: $spacing-micro;
-  }
-
-  &__date_info {
-    display: flex;
-    flex-direction: row;
-  }
-
-  &__separator {
-    margin: 0 8px;
-  }
-}