@phillips/seldon 1.111.0 → 1.112.0

package/dist/components/Article/Article.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps, ElementType } from 'react';
+import { LinkProps } from '../Link';
+export interface ArticleProps extends ComponentProps<'div'> {
+    imageSrc?: string;
+    label?: string;
+    header?: string;
+    description?: string;
+    linkElement?: ElementType<LinkProps>;
+    linkLabel?: string;
+    linkHref?: string;
+}
+/**
+ * ## Overview
+ *
+ * Overview of this widget
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=20704-18000&p=f&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-article--overview)
+ */
+declare const Article: import('react').ForwardRefExoticComponent<Omit<ArticleProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default Article;

package/dist/components/Article/Article.js

@@ -0,0 +1,27 @@
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { getCommonProps as h } from "../../utils/index.js";
+import x from "../../node_modules/classnames/index.js";
+import $ from "../SeldonImage/SeldonImage.js";
+import { TextVariants as e } from "../Text/types.js";
+import r from "../Text/Text.js";
+import "../Link/types.js";
+import v from "../Link/Link.js";
+const b = u(
+  ({ className: d, imageSrc: a, label: n, header: o, description: m, linkElement: f = v, linkLabel: s, linkHref: p, ...i }, _) => {
+    const { className: t, ...N } = h(i, "Article");
+    return /* @__PURE__ */ c("article", { ...N, className: x(t, d), ...i, ref: _, children: [
+      a ? /* @__PURE__ */ l($, { aspectRatio: "16/9", src: a, alt: "bull" }) : null,
+      /* @__PURE__ */ c("div", { className: `${t}__content`, children: [
+        n ? /* @__PURE__ */ l(r, { variant: e.label, className: `${t}__content-label`, children: n }) : null,
+        o ? /* @__PURE__ */ l(r, { variant: e.heading3, className: `${t}__content-title`, children: o }) : null,
+        m ? /* @__PURE__ */ l(r, { variant: e.body2, className: `${t}__content-description`, children: m }) : null,
+        s ? /* @__PURE__ */ l(f, { href: p, className: `${t}__content-link`, children: s }) : null
+      ] })
+    ] });
+  }
+);
+b.displayName = "Article";
+export {
+  b as default
+};

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

@@ -0,0 +1,18 @@
+import { ArticleProps } from './Article';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<ArticleProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: ArticleProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        imageSrc: string;
+        label: string;
+        header: string;
+        description: string;
+        linkLabel: string;
+        linkHref: string;
+    };
+    argTypes: {};
+};

package/dist/components/Article/Article.test.d.ts

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

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

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

package/dist/index.d.ts

@@ -65,3 +65,4 @@ export * from './components/Countdown';
 export * from './components/Countdown/types';
 export * from './patterns/ObjectTile';
 export * from './patterns/BidSnapshot';
+export * from './components/Article';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { PaddingTokens as f, SpacingTokens as s, defaultYear as l, emailValidation as d, encodeURLSearchParams as m, findChildrenExcludingTypes as p, findChildrenOfType as u, generatePaddingClassName as x, getCommonProps as n, noOp as i, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { PaddingTokens as f, SpacingTokens as s, defaultYear as l, emailValidation as d, encodeURLSearchParams as m, findChildrenExcludingTypes as p, findChildrenOfType as u, generatePaddingClassName as x, getCommonProps as i, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as S } from "./assets/account_circle.svg.js";
 import { default as L } from "./assets/arrowPrev.svg.js";
 import { default as T } from "./assets/calendar.svg.js";
@@ -25,7 +25,7 @@ import "react";
 import { default as de } from "./assets/share.svg.js";
 import { default as pe } from "./assets/spotify.svg.js";
 import { default as xe } from "./assets/wechat.svg.js";
-import { default as ie } from "./assets/youtube.svg.js";
+import { default as ne } from "./assets/youtube.svg.js";
 import { default as ce } from "./assets/icon-green-circle.svg.js";
 import { default as Se } from "./assets/icon-red-circle.svg.js";
 import { default as Le } from "./pages/Page.js";
@@ -50,7 +50,7 @@ import { LinkVariants as ft } from "./components/Link/types.js";
 import { default as lt } from "./components/LinkBlock/LinkBlock.js";
 import { default as mt } from "./components/LinkList/LinkList.js";
 import { default as ut } from "./components/Row/Row.js";
-import { default as nt } from "./components/GridItem/GridItem.js";
+import { default as it } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as gt } from "./components/GridItem/types.js";
 import { default as Ct } from "./components/Search/Search.js";
 import { default as ht } from "./components/Select/Select.js";
@@ -77,7 +77,7 @@ import { AuthState as mo } from "./patterns/UserManagement/types.js";
 import { default as uo } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
-import { default as no } from "./components/Dropdown/Dropdown.js";
+import { default as io } from "./components/Dropdown/Dropdown.js";
 import { default as go } from "./components/Video/Video.js";
 import { default as Co } from "./patterns/LanguageSelector/LanguageSelector.js";
 import { default as ho } from "./components/ContentPeek/ContentPeek.js";
@@ -104,12 +104,13 @@ import { default as fr } from "./patterns/FilterMenu/FilterMenu.js";
 import { default as lr } from "./components/Filter/Filter.js";
 import { default as mr } from "./components/Filter/FilterInput.js";
 import { default as ur } from "./components/Filter/FilterHeader.js";
-import { default as nr } from "./components/Countdown/Countdown.js";
+import { default as ir } from "./components/Countdown/Countdown.js";
 import { CountdownVariants as gr } from "./components/Countdown/types.js";
 import { default as Cr } from "./patterns/ObjectTile/ObjectTile.js";
 import { default as hr } from "./patterns/BidSnapshot/BidSnapshot.js";
 import { default as Pr } from "./patterns/BidSnapshot/BidMessage.js";
 import { BidMessageVariants as Ir, BidStatusEnum as br } from "./patterns/BidSnapshot/types.js";
+import { default as Ar } from "./components/Article/Article.js";
 export {
   $t as Accordion,
   to as AccordionItem,
@@ -117,6 +118,7 @@ export {
   ao as AccordionVariants,
   S as AccountCircle,
   L as ArrowPrev,
+  Ar as Article,
   Be as AuctionStatus,
   mo as AuthState,
   Pr as BidMessage,
@@ -142,13 +144,13 @@ export {
   Bo as CollapsibleTrigger,
   ho as ContentPeek,
   Po as ContentPeekHeightUnits,
-  nr as Countdown,
+  ir as Countdown,
   gr as CountdownVariants,
   Eo as Detail,
   Qo as DetailList,
   jo as DetailListAlignment,
   Ht as Drawer,
-  no as Dropdown,
+  io as Dropdown,
   Re as ErrorBoundary,
   U as Facebook,
   N as Favorite,
@@ -162,7 +164,7 @@ export {
   q as FooterWeChat,
   ce as GreenCircle,
   Ee as Grid,
-  nt as GridItem,
+  it as GridItem,
   gt as GridItemAlign,
   Qe as Header,
   $e as HeroBanner,
@@ -225,15 +227,15 @@ export {
   go as Video,
   Ft as ViewingsList,
   xe as WeChat,
-  ie as Youtube,
+  ne as Youtube,
   l as defaultYear,
   d as emailValidation,
   m as encodeURLSearchParams,
   p as findChildrenExcludingTypes,
   u as findChildrenOfType,
   x as generatePaddingClassName,
-  n as getCommonProps,
-  i as noOp,
+  i as getCommonProps,
+  n as noOp,
   g as px,
   ke as ssrMediaQueryStyle,
   c as useNormalizedInputProps,

package/dist/node_modules/exenv/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../_virtual/index5.js";
+import { __module as t } from "../../_virtual/index6.js";
 /*!
   Copyright (c) 2015 Jed Watson.
   Based on code that is Copyright 2013-2015, Facebook, Inc.

package/dist/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../../_virtual/index6.js";
+import { __module as e } from "../../../../_virtual/index5.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

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

@@ -64,6 +64,10 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
      * An element to be rendered at the bottom of the banner
      */
     footerElement?: React.ReactNode;
+    /**
+     * Determines if the countdown timer should be shown (if relevant)
+     */
+    showTimer: boolean;
     /**
      * What action does the CTA take?
      */

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

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

package/dist/scss/componentStyles.scss

@@ -62,3 +62,4 @@
 // Site Furniture
 @use 'site-furniture/Header/header';
 @use 'site-furniture/Footer/footer';
+@use 'components/Article/article';

package/dist/scss/components/Article/_article.scss

@@ -0,0 +1,29 @@
+@use '../../allPartials' as *;
+
+.#{$px}-article {
+  border-bottom: 1px solid $pure-black;
+  border-top: 1px solid $pure-black;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+  padding: $spacing-md;
+
+  @media (min-width: $breakpoint-md) {
+    flex-direction: row;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &-label,
+    &-description {
+      color: $soft-black;
+    }
+
+    &-label {
+      margin-bottom: $spacing-xsm;
+    }
+  }
+}

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

@@ -22,22 +22,9 @@
     justify-content: center;
     padding: $spacing-md 0;
 
-    &__mobile-countdown {
+    &__countdown {
       display: flex;
       width: 100%;
-
-      @include media($size-md, $type: 'min') {
-        display: none;
-      }
-    }
-
-    &__desktop-countdown {
-      display: none;
-      width: 100%;
-
-      @include media($size-md, $type: 'min') {
-        display: flex;
-      }
     }
   }
 

package/package.json

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