@phillips/seldon 1.250.0 → 1.252.0

package/dist/patterns/FiltersInline/SubFilterDropdown.js

@@ -1,4 +1,4 @@
-import { jsxs as g, Fragment as S, jsx as o } from "react/jsx-runtime";
+import { jsxs as u, Fragment as S, jsx as o } from "react/jsx-runtime";
 import { Root as f, Trigger as v, Portal as j, Content as P } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
 import _ from "react";
 import q from "../../components/Drawer/Drawer.js";
@@ -12,39 +12,39 @@ import { countActiveFilters as k, getFilterButtonClickHandler as l, getFilterBut
 const A = _.forwardRef(
   ({
     filterId: e = 0,
-    className: h,
+    className: g,
     filterButtonLabel: r,
-    buttonType: i,
+    buttonType: n,
     handleClick: m,
     filtersListState: a,
-    filters: t,
-    onSelectFilter: w,
-    onApplyFilter: F,
-    onClickClear: $,
+    filters: p,
+    onSelectFilter: h,
+    onApplyFilter: w,
+    onClickClear: F,
     resultsCount: b,
-    filterButtonLabelTranslated: p,
+    filterButtonLabelTranslated: t,
     dropdownMenuTranslation: x,
-    ariaLabels: n = {},
+    ariaLabels: i = {},
     hideDesktopSortButton: R,
     id: c
   }, M) => {
-    const d = a?.[e] ?? !1, { totalCount: D, filterCount: s } = k(t, i), u = z(r, s, p || null);
-    return R && i === Q.Sort ? null : /* @__PURE__ */ g(S, { children: [
-      /* @__PURE__ */ g(O.Media, { lessThan: "md", children: [
+    const d = a?.[e] ?? !1, { totalCount: $, filterCount: D } = k(p, n), s = z(r, t || null);
+    return R && n === Q.Sort ? null : /* @__PURE__ */ u(S, { children: [
+      /* @__PURE__ */ u(O.Media, { lessThan: "md", children: [
         /* @__PURE__ */ o(
           C,
           {
             ref: M,
-            className: h,
+            className: g,
             isSelected: d,
-            count: s,
-            label: u,
+            count: D,
+            label: s,
             id: c,
-            totalCount: D,
-            ariaLabel: n.button || `${r} button`,
+            totalCount: $,
+            ariaLabel: i.button || `${r} button`,
             onClick: l(a, m, e),
             isMobile: !0,
-            type: i
+            type: n
           }
         ),
         /* @__PURE__ */ o(
@@ -53,30 +53,30 @@ const A = _.forwardRef(
             drawerOpenSide: "bottom",
             isOpen: d,
             onClose: l(a, m, e),
-            "aria-label": n.drawer || `${r} drawer`,
+            "aria-label": i.drawer || `${r} drawer`,
             className: `${E}-filter-drawer-mobile`,
-            headerText: `${u} Filter`,
+            headerText: s,
             paddingLevel: 0,
             children: /* @__PURE__ */ o(
               N,
               {
-                buttonType: i,
-                filters: t,
+                buttonType: n,
+                filters: p,
                 filterIndex: e,
-                onSelectFilter: w,
-                onApplyFilter: F,
-                onClickClear: $,
+                onSelectFilter: h,
+                onApplyFilter: w,
+                onClickClear: F,
                 resultsCount: b,
-                ariaLabels: n?.ariaLabel,
+                ariaLabels: i?.ariaLabel,
                 filterButtonLabel: r,
-                filterButtonLabelTranslated: p,
+                filterButtonLabelTranslated: t,
                 dropdownMenuTranslation: x
               }
             )
           }
         )
       ] }),
-      /* @__PURE__ */ o(O.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ g(
+      /* @__PURE__ */ o(O.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ u(
         f,
         {
           open: d,
@@ -86,16 +86,16 @@ const A = _.forwardRef(
               C,
               {
                 ref: M,
-                className: h,
+                className: g,
                 isSelected: d,
-                count: s,
-                label: u,
-                totalCount: D,
+                count: D,
+                label: s,
+                totalCount: $,
                 id: c,
-                ariaLabel: n.ariaLabel || `${r} button`,
+                ariaLabel: i.ariaLabel || `${r} button`,
                 onClick: l(a, m, e),
                 isMobile: !1,
-                type: i
+                type: n
               }
             ) }),
             /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(
@@ -106,20 +106,20 @@ const A = _.forwardRef(
                 sideOffset: 5,
                 align: "start",
                 alignOffset: 5,
-                "aria-label": n.ariaLabel || `${r} dropdown`,
+                "aria-label": i.ariaLabel || `${r} dropdown`,
                 children: /* @__PURE__ */ o(
                   H,
                   {
-                    buttonType: i,
-                    filters: t,
+                    buttonType: n,
+                    filters: p,
                     filterIndex: e,
-                    onSelectFilter: w,
-                    onApplyFilter: F,
-                    onClickClear: $,
+                    onSelectFilter: h,
+                    onApplyFilter: w,
+                    onClickClear: F,
                     resultsCount: b,
-                    ariaLabels: n?.ariaLabel,
+                    ariaLabels: i?.ariaLabel,
                     filterButtonLabel: r,
-                    filterButtonLabelTranslated: p,
+                    filterButtonLabelTranslated: t,
                     dropdownMenuTranslation: x
                   }
                 )

package/dist/patterns/FiltersInline/utils.d.ts

@@ -58,4 +58,4 @@ export declare function handleInputChange(e: React.ChangeEvent<HTMLInputElement
  * Utility to reset all filter states to false and call the handler.
  */
 export declare function resetAllFilters(filtersListState: boolean[] | undefined, handleClick: ((state: boolean[]) => void) | undefined): void;
-export declare function getFilterButtonLabel(filterButtonLabel: string, filterCount: number | null, filterButtonLabelTranslated: string | null): string;
+export declare function getFilterButtonLabel(filterButtonLabel: string, filterButtonLabelTranslated: string | null): string;

package/dist/patterns/FiltersInline/utils.js

@@ -1,33 +1,33 @@
-import { FilterButtonType as e } from "./types.js";
-e.Filter, e.Sort, e.Sale, e.Departments, e.Location, e.Month, e.Year;
-const f = (t, r) => {
+import { FilterButtonType as o } from "./types.js";
+o.Filter, o.Sort, o.Sale, o.Departments, o.Location, o.Month, o.Year;
+const c = (t, r) => {
   if (!t) return { totalCount: 0, filterCount: 0 };
-  const n = t.filter((o) => o.id !== "Sort").reduce(
-    (o, i) => o + Array.from(i.filterDimensions).filter((s) => s.active).length,
+  const e = t.filter((n) => n.id !== "Sort").reduce(
+    (n, i) => n + Array.from(i.filterDimensions).filter((f) => f.active).length,
     0
   ), u = r === "Sort" ? 0 : (() => {
-    const o = t.find((i) => i.id === r)?.filterDimensions;
-    return o ? Array.from(o).filter((i) => i.active).length : 0;
+    const n = t.find((i) => i.id === r)?.filterDimensions;
+    return n ? Array.from(n).filter((i) => i.active).length : 0;
   })();
-  return { totalCount: n, filterCount: u };
-}, m = (t, r) => t && typeof r == "number" && t[r - 1] && t[r - 1].filterDimensions ? Array.from(t[r - 1].filterDimensions) : [], a = (t, r) => t === "Filter" ? "Filters" : r ? "ChevronUp" : "ChevronDown", l = (t, r, n) => () => {
-  t && r && r(t.map((u, o) => o === n ? !u : !1));
+  return { totalCount: e, filterCount: u };
+}, m = (t, r) => t && typeof r == "number" && t[r - 1] && t[r - 1].filterDimensions ? Array.from(t[r - 1].filterDimensions) : [], l = (t, r) => t === "Filter" ? "Filters" : r ? "ChevronUp" : "ChevronDown", a = (t, r, e) => () => {
+  t && r && r(t.map((u, n) => n === e ? !u : !1));
 };
-function p(t, r, n) {
-  n && n(t, r);
+function p(t, r, e) {
+  e && e(t, r);
 }
 function D(t, r) {
   t && r && r(t.map(() => !1));
 }
-function F(t, r, n) {
-  return n || `${t}` + (r && r > 0 ? ` (${r})` : "");
+function F(t, r) {
+  return r || `${t}`;
 }
 export {
-  f as countActiveFilters,
-  l as getFilterButtonClickHandler,
+  c as countActiveFilters,
+  a as getFilterButtonClickHandler,
   F as getFilterButtonLabel,
   m as getFilterDimensions,
-  a as getIcon,
+  l as getIcon,
   p as handleInputChange,
   D as resetAllFilters
 };

package/dist/patterns/SaleCard/SaleCard.d.ts

@@ -1,10 +1,10 @@
 import { ComponentProps } from 'react';
 import { SaleCardActions } from './SaleCardActions';
-import { SaleCardVariants, SaleCardImageDisplay } from './types';
+import { SaleCardImageDisplay, SaleCardVariants } from './types';
 /**
  * Props for the SaleCard component.
  */
-export interface SaleCardProps extends ComponentProps<'div'> {
+export interface SaleCardProps extends ComponentProps<'article'> {
     /**
      * The source URL of the image to be displayed.
      * Leaving this prop undefined or falsy is the intended way to hide the image.
@@ -45,5 +45,5 @@ export interface SaleCardProps extends ComponentProps<'div'> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-salecard--overview)
  */
-declare const SaleCard: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SaleCard: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
 export default SaleCard;

package/dist/patterns/SaleCard/SaleCard.js

@@ -1,52 +1,51 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import u from "../../_virtual/index.js";
-import { forwardRef as L } from "react";
-import T from "../../components/Button/Button.js";
-import { ButtonVariants as A } from "../../components/Button/types.js";
-import I from "../../components/SeldonImage/SeldonImage.js";
-import { TextVariants as r } from "../../components/Text/types.js";
-import e from "../../components/Text/Text.js";
-import { SSRMediaQuery as k } from "../../providers/SeldonProvider/utils.js";
-import { getCommonProps as x } from "../../utils/index.js";
-import { SaleCardImageDisplay as P, SaleCardVariants as f } from "./types.js";
-const R = L(
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import L from "../../_virtual/index.js";
+import { forwardRef as M } from "react";
+import g from "../../components/Button/Button.js";
+import a from "../../components/Card/Card.js";
+import { CardVariants as A } from "../../components/Card/types.js";
+import { ButtonVariants as R } from "../../components/Button/types.js";
+import { SSRMediaQuery as T } from "../../providers/SeldonProvider/utils.js";
+import { getCommonProps as k } from "../../utils/index.js";
+import { SaleCardImageDisplay as w, SaleCardVariants as f } from "./types.js";
+const y = M(
   ({
     className: p,
-    imageSrc: s,
-    imageAlt: S = "Auction Image",
-    auctionType: h,
-    titleText: N,
-    date: $,
-    location: v,
-    badgeText: o,
-    modalButtonOnClick: n,
+    imageSrc: l,
+    imageAlt: h = "Auction Image",
+    auctionType: C,
+    titleText: u,
+    date: E,
+    location: S,
+    badgeText: s,
+    modalButtonOnClick: i,
     modalButtonText: t,
-    variant: m = f.DEFAULT,
-    children: c,
-    imageDisplay: d = P.LEFT,
-    ..._
-  }, g) => {
-    const { className: a, ...C } = x(_, "SaleCard"), E = u(a, p, {
-      [`${a}--${m}`]: m,
-      [`${a}--image-${d}`]: d
-    }), b = { ...C, ..._ };
-    return /* @__PURE__ */ i("article", { ...b, className: E, ref: g, children: [
-      s ? /* @__PURE__ */ l(I, { src: s, alt: S, className: `${a}__image` }) : null,
-      /* @__PURE__ */ i("div", { className: `${a}__details`, children: [
-        /* @__PURE__ */ l(e, { variant: r.labelSmall, children: h }),
-        /* @__PURE__ */ l(e, { variant: r.headingSmall, className: `${a}__title`, children: N }),
-        o && /* @__PURE__ */ l(e, { variant: r.badgeSmall, className: `${a}__badge`, children: o }),
-        /* @__PURE__ */ i("div", { className: `${a}__info`, children: [
-          /* @__PURE__ */ l(e, { variant: r.labelSmall, children: v }),
-          /* @__PURE__ */ l(e, { variant: r.labelSmall, children: $ }),
-          t && n && /* @__PURE__ */ l("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ l(T, { onClick: n, variant: A.link, linkSize: "sm", children: t }) })
+    variant: o = f.DEFAULT,
+    children: n,
+    imageDisplay: c = w.LEFT,
+    ...d
+  }, _) => {
+    const { className: e, ...N } = k(d, "SaleCard"), $ = L(e, p, {
+      [`${e}--${o}`]: o,
+      [`${e}--image-${c}`]: c
+    }), I = { ...N, ...d };
+    return /* @__PURE__ */ m(a.Root, { ref: _, element: "article", variant: A.default, className: $, ...I, children: [
+      l ? /* @__PURE__ */ r(a.Image, { alt: h, src: l }) : null,
+      /* @__PURE__ */ m(a.Content, { children: [
+        /* @__PURE__ */ r(a.Eyebrow, { children: C }),
+        /* @__PURE__ */ r(a.Title, { children: u }),
+        s ? /* @__PURE__ */ r(a.Badge, { children: s }) : null,
+        /* @__PURE__ */ m(a.Meta, { className: `${e}__info`, children: [
+          /* @__PURE__ */ r(a.MetaItem, { children: S }),
+          /* @__PURE__ */ r(a.MetaItem, { children: E }),
+          t && i && /* @__PURE__ */ r("div", { className: `${e}__modal-link`, children: /* @__PURE__ */ r(g, { onClick: i, variant: R.link, linkSize: "sm", children: t }) })
         ] })
       ] }),
-      m !== f.RELATED_SALE_TILE && c && /* @__PURE__ */ l("div", { className: `${a}__ctas`, children: /* @__PURE__ */ l(k.Media, { greaterThanOrEqual: "snw-mobile", children: c }) })
+      o !== f.RELATED_SALE_TILE && n && /* @__PURE__ */ r("div", { className: `${e}__ctas`, children: /* @__PURE__ */ r(T.Media, { greaterThanOrEqual: "snw-mobile", children: n }) })
     ] });
   }
 );
-R.displayName = "SaleCard";
+y.displayName = "SaleCard";
 export {
-  R as default
+  y as default
 };

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

@@ -1,7 +1,7 @@
 import { SaleCardProps } from './SaleCard';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    component: import('react').ForwardRefExoticComponent<Omit<SaleCardProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
 };
 export default meta;
 export declare const SaleCardPlayground: {

package/dist/scss/componentStyles.scss

@@ -8,6 +8,7 @@
 
 // ⚛️ Components
 @use 'components/Button/button';
+@use 'components/Card/card';
 @use 'components/IconButton/iconButton';
 @use 'components/Icon/icon';
 @use 'components/Grid/grid';

package/dist/scss/components/Card/_card.scss

@@ -0,0 +1,113 @@
+@use '../../allPartials' as *;
+
+.#{$px}-card {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+
+  @include media($breakpoint-snw-mobile) {
+    flex-direction: row;
+  }
+
+  &--stacked {
+    align-items: flex-start;
+    flex-direction: column;
+
+    .#{$px}-card__image,
+    .#{$px}-card__video {
+      min-width: 100%;
+    }
+
+    .#{$px}-card__details {
+      align-self: stretch;
+    }
+  }
+
+  &__image,
+  &__video {
+    align-items: center;
+    border-radius: $radius-xs;
+    display: flex;
+    flex: none;
+    justify-content: center;
+    min-width: 0;
+    width: 100%;
+
+    @include media($breakpoint-snw-mobile) {
+      flex: 0 0 30%;
+      min-width: auto;
+      width: auto;
+    }
+  }
+
+  &__image {
+    img {
+      height: auto;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  &__video {
+    width: 100%;
+  }
+
+  &__details {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: $spacing-micro;
+
+    @include media($size-snw-mobile, 'max') {
+      align-self: stretch;
+    }
+  }
+
+  &__title {
+    &.#{$px}-text {
+      text-transform: uppercase;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        color: inherit;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__cta {
+    align-self: flex-start;
+  }
+
+  &__description {
+    &.#{$px}-text {
+      color: $text-default;
+    }
+  }
+
+  &__badge {
+    border: 1px solid $badge-blue;
+    color: $badge-blue;
+    padding: $spacing-micro 8px;
+    text-transform: unset;
+  }
+
+  &__meta {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-micro;
+  }
+
+  &__meta-item {
+    &.#{$px}-text {
+      color: $text-supporting;
+    }
+  }
+}

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

@@ -4,12 +4,24 @@
   overflow: hidden;
   position: relative;
 
-  &--aspect-ratio-16-9 img {
-    aspect-ratio: 16 / 9;
+  &--aspect-ratio-16-9 {
+    img {
+      aspect-ratio: 16 / 9;
+    }
+
+    &.#{$px}-seldon-image--error-image {
+      aspect-ratio: 16 / 9;
+    }
   }
 
-  &--aspect-ratio-1-1 img {
-    aspect-ratio: 1 / 1;
+  &--aspect-ratio-1-1 {
+    img {
+      aspect-ratio: 1 / 1;
+    }
+
+    &.#{$px}-seldon-image--error-image {
+      aspect-ratio: 1 / 1;
+    }
   }
 
   &--error {

package/dist/scss/patterns/SaleCard/_saleCard.scss

@@ -30,82 +30,18 @@ a:has(> .#{$px}-sale-card) {
     }
   }
 
-  &__title {
-    &.#{$px}-text {
-      text-transform: uppercase;
-    }
-  }
-
-  &__image {
-    align-items: center;
-    aspect-ratio: 91/51;
-    border-radius: $radius-xs;
-    display: flex;
-    flex: 0 0 30%;
-    justify-content: center;
-    min-width: 100%;
-
-    @include media($breakpoint-snw-mobile) {
-      min-width: auto;
-    }
-
-    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-snw-mobile, 'max') {
-      align-self: flex-start;
-    }
-  }
-
   &__ctas {
     flex: 0 0 0%;
 
-    @media (min-width: $breakpoint-snw-mobile) {
+    @include media($breakpoint-snw-mobile) {
       flex-basis: 250px;
     }
   }
 
-  &__date_info {
-    display: flex;
-    flex-direction: row;
-  }
-
-  &__separator {
-    margin: 0 8px;
-  }
-
-  &__info {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-micro;
-
-    .#{$px}-text {
-      color: $text-supporting;
-    }
-  }
-
   &__modal-link .#{$px}-button {
     @include text($linkSmall);
   }
 
-  &__badge {
-    border: 1px solid $badge-blue;
-    color: $badge-blue;
-    padding: $spacing-micro 8px;
-    text-transform: unset;
-  }
-
   &__cta-button {
     padding: $spacing-sm $spacing-lg;
     white-space: nowrap;
@@ -132,12 +68,13 @@ a:has(> .#{$px}-sale-card) {
       &.#{$px}-sale-card--image-left {
         flex-direction: row;
       }
+
       &.#{$px}-sale-card--image-right {
         flex-direction: row-reverse;
       }
     }
 
-    .#{$px}-sale-card__image {
+    > .#{$px}-card__image {
       max-width: $spacing-xxxl;
       min-width: 94px;
 

package/package.json

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