@phillips/seldon 1.92.0 → 1.93.0

package/dist/patterns/BidSnapshot/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((e) => (e.positive = "POSITIVE", e.negative = "NEGATIVE", e))(r || {});
+export {
+  r as BidMessageVariants
+};

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

@@ -0,0 +1,69 @@
+import { ComponentProps, ElementType } from 'react';
+type ObjectTileElement = ElementType<Omit<ObjectTileProps, 'imageUrl' | 'lotNumber' | 'referenceNumber'> & {
+    'data-testid': string;
+}>;
+export interface ObjectTileProps extends ComponentProps<'a'> {
+    /**
+     * Optional Object badge.
+     */
+    badgeText?: string;
+    /**
+     * Optional Element to render at the top level.
+     */
+    element?: ObjectTileElement;
+    /**
+     * Estimate for object.
+     */
+    estimate?: string;
+    /**
+     * Estimate label text.
+     */
+    estimateLabelText?: string;
+    /**
+     * Element used for favoriting object
+     */
+    favoriteElement?: React.ElementType;
+    /**
+     * Image alt text for the object.
+     */
+    imageAlt?: string;
+    /**
+     * Image URL for the object.
+     */
+    imageUrl?: string;
+    /**
+     * Object Lot number.
+     */
+    lotNumber: string;
+    /**
+     * Object Maker name.
+     */
+    makerText?: string;
+    /**
+     * Object Model text.
+     */
+    modelText?: string;
+    /**
+     * Object reference number.
+     */
+    referenceNumber?: string;
+    /**
+     * Object title.
+     */
+    titleText?: string;
+    /**
+     * Withdrawn Text
+     */
+    withdrawnText?: string;
+}
+/**
+ * ## Overview
+ *
+ * The ObjectTile component is used to display an object tile with an image, title, and other information in a grid
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10914-34792&node-type=canvas&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app//?path=/story/patterns-objecttile--playground)
+ */
+declare const ObjectTile: import('react').ForwardRefExoticComponent<Omit<ObjectTileProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
+export default ObjectTile;

package/dist/patterns/ObjectTile/ObjectTile.js

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

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

@@ -0,0 +1,41 @@
+import { ObjectTileProps } from './ObjectTile';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<ObjectTileProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
+};
+export default meta;
+export declare const NoImage: {
+    (props: ObjectTileProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        badgeText: string;
+        favoriteElement: () => import("react/jsx-runtime").JSX.Element;
+        estimate: string;
+        element: string;
+        children: import("react/jsx-runtime").JSX.Element;
+        href: string;
+        imageUrl: string;
+        lotNumber: string;
+        makerText: string;
+        titleText: string;
+        referenceNumber: string;
+        modelText: string;
+    };
+};
+export declare const Playground: {
+    (props: ObjectTileProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        badgeText: string;
+        favoriteElement: () => import("react/jsx-runtime").JSX.Element;
+        estimate: string;
+        element: string;
+        children: import("react/jsx-runtime").JSX.Element;
+        href: string;
+        imageUrl: string;
+        lotNumber: string;
+        makerText: string;
+        titleText: string;
+        referenceNumber: string;
+        modelText: string;
+    };
+    argTypes: {};
+};

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { AuctionState } from './types';
+import { AuctionStatus } from '../../types/commonTypes';
 export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
     /**
      * What is the title of the auction?
@@ -26,7 +26,7 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
     /**
      * What is the current state of the auction?
      */
-    auctionState: AuctionState;
+    auctionState: AuctionStatus;
     /**
      * What text should the CTA button display?
      */

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -3,25 +3,25 @@ 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 { AuctionStatus as _ } from "../../types/commonTypes.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(
+import H from "../../components/PageContentWrapper/PageContentWrapper.js";
+import P from "../../components/Button/Button.js";
+const R = S(
   ({
     auctionTitle: o,
     imageSrcUrl: f,
-    location: g,
+    location: N,
     auctionState: n,
-    occurrenceInformation: N,
-    ctaLabel: h = "Register to Bid",
-    onClick: v,
+    occurrenceInformation: g,
+    ctaLabel: v = "Register to Bid",
+    onClick: h,
     children: m,
     className: $,
     ...i
   }, c) => {
-    const { className: a, ...l } = u(i, "SaleHeaderBanner"), B = n === _.openForBidding, d = n === _.past;
+    const { className: a, ...l } = u(i, "SaleHeaderBanner"), x = n === _.live, d = n === _.past;
     return /* @__PURE__ */ r("div", { ...l, className: C(a, $), ...i, ref: c, children: [
       /* @__PURE__ */ e(
         j,
@@ -33,23 +33,23 @@ const P = S(
           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(H, { className: `${a}__stack-wrapper`, ...l, ...i, ref: c, children: /* @__PURE__ */ r("div", { className: `${a}__stack`, children: [
+        x && m,
         /* @__PURE__ */ e(t, { variant: s.title1, children: o }),
-        /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__location`, children: g }),
+        /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__location`, children: N }),
         /* @__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 }),
+          g.map(({ date: p, occurrenceLabel: B }) => /* @__PURE__ */ r("div", { className: `${a}__occurrence-details-text`, children: [
+            /* @__PURE__ */ e(t, { variant: s.string2, children: B }),
             /* @__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 })
+        !d && /* @__PURE__ */ e(P, { className: `${a}__cta`, onClick: h, children: v })
       ] }) })
     ] });
   }
 );
-P.displayName = "SaleHeaderBanner";
+R.displayName = "SaleHeaderBanner";
 export {
-  P as default
+  R as default
 };

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

@@ -1,5 +1,5 @@
 import { SaleHeaderBannerProps } from './SaleHeaderBanner';
-import { AuctionState } from './types';
+import { AuctionStatus } from '../../types/commonTypes';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<Omit<SaleHeaderBannerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
@@ -14,12 +14,12 @@ export declare const Playground: {
             date: string;
         }[];
         location: string;
-        auctionState: AuctionState;
+        auctionState: AuctionStatus;
         imageSrcUrl: string;
     };
     argTypes: {
         auctionState: {
-            options: AuctionState[];
+            options: AuctionStatus[];
             control: {
                 type: string;
             };

package/dist/scss/_vars.scss

@@ -55,6 +55,9 @@ $text-color: $soft-black;
 // Interactive Colors
 $button-hover: #75716f;
 
+// Misc. Colors
+$countdown-compact: #b40919;
+
 ////////////////////////
 /// FONTS:
 ///////////////////////
@@ -115,7 +118,8 @@ $breakpoint-xl: 1801px;
 ////////////////////////
 /// FONT SIZE TOKENS:
 ///////////////////////
-
+// @TODO: These tokens need to be aligned with the new values from the design system https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=7263-1361&node-type=canvas&m=dev
+// Once we update ObjectTile and other components will need to be updated to match the new token.
 :root {
   --desktop-max-width: 120rem;
   --quote-size: 1.5rem;

package/dist/scss/componentStyles.scss

@@ -57,3 +57,5 @@
 @use 'components/PinchZoom/pinchZoom';
 @use 'components/Tabs/tabs';
 @use 'components/SeldonImage/seldonImage';
+@use 'patterns/ObjectTile/objectTile';
+@use 'patterns/BidSnapshot/bidSnapshot';

package/dist/scss/components/Countdown/_countdown.scss

@@ -22,4 +22,12 @@
     justify-content: center;
     text-transform: inherit;
   }
+
+  &--compact {
+    .#{$px}-countdown__countdown-container {
+      @include Montserrat;
+
+      gap: $spacing-xsm;
+    }
+  }
 }

package/dist/scss/components/Countdown/_duration.scss

@@ -5,9 +5,10 @@
 
   display: flex;
   gap: $spacing-micro;
+}
+
+.#{$px}-countdown--compact .#{$px}-duration {
+  @include Montserrat;
 
-  &--fixed-width {
-    min-width: 1.75rem;
-    text-align: right;
-  }
+  color: $countdown-compact;
 }

package/dist/scss/components/Detail/_detail.scss

@@ -26,6 +26,26 @@
     @media (max-width: $breakpoint-sm) {
       width: 96px;
     }
+
+    &--no-wrap {
+      width: unset;
+
+      @media (max-width: $breakpoint-lg) {
+        width: unset;
+      }
+
+      @media (max-width: $breakpoint-md) {
+        width: unset;
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        width: unset;
+      }
+    }
+
+    span {
+      font-variation-settings: 'wght' 400;
+    }
   }
 
   &__value {

package/dist/scss/components/SeldonImage/_seldonImage.scss

@@ -17,10 +17,18 @@
   }
 
   &--error {
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    width: 100%;
+
+    .phillips-logo {
+      fill: $medium-gray;
+    }
+
+    svg {
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 
   &-img {

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

@@ -0,0 +1,48 @@
+@use '../../allPartials' as *;
+
+.#{$px}-bid-snapshot {
+  padding-bottom: $spacing-sm;
+  position: relative;
+
+  &__text .#{$px}-has-separators .#{$px}-detail {
+    flex-wrap: wrap;
+    gap: 0 $spacing-sm;
+    padding-bottom: $spacing-xsm;
+  }
+
+  .#{$px}-countdown {
+    align-items: flex-start;
+    border-bottom: none;
+    padding: 0;
+    position: absolute;
+    top: calc(100% + $spacing-micro);
+  }
+
+  .#{$px}-countdown__countdown-container,
+  .#{$px}-duration {
+    @include Montserrat;
+  }
+
+  &--live {
+    border-bottom: 1px solid $light-gray;
+  }
+  &--has-bids .#{$px}-detail__value {
+    font-variation-settings: 'wght' 600;
+  }
+}
+
+.#{$px}-bid-message {
+  align-items: center;
+  display: flex;
+  gap: 6px;
+
+  // Override the default text style being too specific
+  &.#{$px}-bid-message {
+    font-variation-settings: 'wght' 600;
+    margin-bottom: 0;
+  }
+
+  &__icon {
+    font-size: 0.5em;
+  }
+}

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

@@ -0,0 +1,61 @@
+@use '../../allPartials' as *;
+
+.#{$px}-object-tile {
+  display: flex;
+  flex-direction: column;
+  max-width: 24.5rem;
+
+  &__img {
+    margin-bottom: $spacing-sm;
+    max-width: 100%;
+  }
+
+  &__badge {
+    color: $widget-red;
+  }
+
+  &__lot-number-like {
+    position: relative;
+
+    & > :not(.#{$px}-object-tile__lot-number) {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  & .#{$px}-object-tile__lot-number {
+    margin-bottom: $spacing-xsm;
+  }
+
+  & .#{$px}-object-tile__maker,
+  & .#{$px}-object-tile__model,
+  & .#{$px}-object-tile__reference-number {
+    margin-bottom: 0;
+  }
+
+  &__meta {
+    margin-bottom: $spacing-sm;
+  }
+
+  & .#{$px}-object-tile__token-fix {
+    // @Todo: remove when tokens have been updated. heading 4 should have the font sizes of heading 5
+    @include text($heading5);
+  }
+
+  &__withdrawn {
+    font-family: $Distinct;
+  }
+
+  &__section {
+    .#{$px}-has-separators .#{$px}-detail {
+      flex-wrap: wrap;
+      gap: 0 $spacing-sm;
+
+      .#{$px}-detail__value {
+        text-align: unset;
+      }
+    }
+  }
+}

package/dist/types/commonTypes.d.ts

@@ -2,3 +2,8 @@ export declare enum SupportedLanguages {
     en = "en",
     zh = "zh"
 }
+export declare enum AuctionStatus {
+    ready = "READY",
+    live = "LIVE",
+    past = "PAST"
+}

package/dist/types/commonTypes.js

@@ -1,4 +1,5 @@
-var e = /* @__PURE__ */ ((r) => (r.en = "en", r.zh = "zh", r))(e || {});
+var e = /* @__PURE__ */ ((r) => (r.en = "en", r.zh = "zh", r))(e || {}), v = /* @__PURE__ */ ((r) => (r.ready = "READY", r.live = "LIVE", r.past = "PAST", r))(v || {});
 export {
+  v as AuctionStatus,
   e as SupportedLanguages
 };

package/package.json

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