@phillips/seldon 1.79.3 → 1.81.0

package/dist/scss/patterns/HeroBanner/_heroBanner.scss

@@ -2,7 +2,7 @@
 
 .#{$px}-hero-banner {
   align-items: center;
-  background: linear-gradient(rgba(0, 0, 0, 60%), rgba(0, 0, 0, 60%)), var(--background);
+  background: var(--gradient), var(--background);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -11,19 +11,21 @@
   justify-content: center;
   min-height: 25rem;
   padding: 1rem;
+  text-transform: uppercase;
   width: 100%;
 
   @include media($size-md, $type: 'max') {
     align-items: center;
     align-self: stretch;
     background: transparent;
+    background-color: $pure-black;
     flex-direction: column;
     gap: 1.875rem;
     min-height: unset;
-    padding: 1.875rem 0 0;
+    padding: 1.875rem 0.9375rem;
 
-    &::after {
-      background: var(--background);
+    &::before {
+      background: var(--gradient), var(--background);
       background-position: center center;
       background-repeat: no-repeat;
       background-size: cover;
@@ -38,19 +40,11 @@
     margin: 0;
   }
 
-  p {
-    margin: 1.875rem 0;
-  }
-
   h1,
   h2,
   p {
     color: $pure-white;
     text-align: center;
-
-    @include media($size-md, $type: 'max') {
-      color: $pure-black;
-    }
   }
 
   p {
@@ -72,6 +66,7 @@
     display: flex;
     font-size: 0.75rem;
     gap: 1.875rem;
+    padding-bottom: 1.875rem;
 
     @include media($size-md) {
       font-size: 0.875rem;
@@ -83,4 +78,8 @@
       gap: 1rem;
     }
   }
+
+  & .#{$px}-hero-banner__after-head {
+    padding-top: 1.875rem;
+  }
 }

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

@@ -23,17 +23,6 @@
     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;

package/dist/scss/site-furniture/Header/_header.scss

@@ -77,17 +77,12 @@
     padding-top: 6px; // small adjustment to center the logo
 
     svg {
-      height: 24px;
+      height: 25.73px; // 25.73px is the height of the logo's container to make logo 20px
       width: 100%;
     }
 
     @include isHeaderDesktop {
       padding-top: 0;
-
-      svg {
-        height: 28px;
-        width: 100%;
-      }
     }
   }
 

package/dist/site-furniture/Header/Header.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import l, { createContext as T, forwardRef as P, useState as h } from "react";
 import d from "../../node_modules/classnames/index.js";
-import { findChildrenOfType as s, findChildrenExcludingTypes as j, px as e } from "../../utils/index.js";
+import { findChildrenOfType as i, findChildrenExcludingTypes as j, px as e } from "../../utils/index.js";
 import R from "../../assets/PhillipsLogo.svg.js";
 import p from "../../patterns/UserManagement/UserManagement.js";
 import g from "../../patterns/LanguageSelector/LanguageSelector.js";
@@ -10,7 +10,7 @@ import { defaultHeaderContext as w } from "./utils.js";
 import { SSRMediaQuery as I } from "../../providers/SeldonProvider/utils.js";
 const L = T(w), k = P(
   ({
-    logo: i = /* @__PURE__ */ a(R, {}),
+    logo: s = /* @__PURE__ */ a(R, {}),
     logoHref: u = "/",
     className: _,
     children: r,
@@ -19,7 +19,7 @@ const L = T(w), k = P(
     logoText: C = "Home Page",
     ...y
   }, E) => {
-    const M = s(r, p), m = s(r, g), [c, $] = h(!1), b = s(r, f), N = j(r, [f, p, g]), [n, S] = h(!1), H = n ? x : v, O = function() {
+    const M = i(r, p), m = i(r, g), [c, $] = h(!1), b = i(r, f), N = j(r, [f, p, g]), [n, S] = h(!1), H = n ? x : v, O = function() {
       S((t) => !t);
     };
     return /* @__PURE__ */ o("header", { ...y, className: d(`${e}-header`, _), ref: E, children: [
@@ -41,7 +41,7 @@ const L = T(w), k = P(
             ]
           }
         ),
-        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: u, "aria-label": C, children: typeof i == "object" ? i : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i, height: "14" }) }) }),
+        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: u, "aria-label": C, children: typeof s == "object" ? s : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: s }) }) }),
         M
       ] }),
       /* @__PURE__ */ a("div", { className: d(`${e}-header__nav`, { [`${e}-header__nav--closed`]: !n }), children: /* @__PURE__ */ o(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.79.3",
+  "version": "1.81.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -49,6 +49,7 @@
     "@types/dompurify": "^3.0.5",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
     "dompurify": "^3.1.6",
     "embla-carousel-react": "^8.3.0",
     "embla-carousel-wheel-gestures": "^8.0.1",

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

@@ -1,8 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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
-};