@phillips/seldon 1.214.0-beta.3 → 1.214.0-beta.5

package/dist/scss/componentStyles.scss

@@ -148,7 +148,7 @@
   --spacing-xl: 3.75rem;
   --spacing-xxl: 4.75rem;
   --spacing-xxxl: 5.75rem;
-  --header-height: 56px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+  --header-height: 56px; // Set dynamically by Header component on mount
   --search-size: 2.32rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
   --banner-height: 0px;
 
@@ -208,12 +208,18 @@
     --spacing-xl: 4rem;
     --spacing-xxl: 5rem;
     --spacing-xxxl: 6rem;
-    --header-height: 121px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+
+    // --header-height is set dynamically by Header component
   }
 
   @media (min-width: $breakpoint-lg) {
     --snw-flyout-link-size: 0.875rem;
     --snw-flyout-link-line-height: 1.75rem;
+
+    // --header-height is set dynamically by Header component
+
+    // FONT SIZES
+    @include font-size-vars--lg;
   }
 
   @media (min-width: $breakpoint-xl) {
@@ -263,10 +269,7 @@
     --spacing-xl: 4.25rem;
     --spacing-xxl: 5.25rem;
     --spacing-xxxl: 6.25rem;
-    --header-height: 132px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
     --search-size: 2.875rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
-
-    // FONT SIZES
-    @include font-size-vars--lg;
+    // --header-height is set dynamically by Header component
   }
 }

package/dist/scss/components/Search/_search.scss

@@ -33,6 +33,10 @@
     top: 2px;
   }
 
+  @include media($breakpoint-lg) {
+    top: 4px;
+  }
+
   @include media($breakpoint-xl) {
     top: -5px;
   }

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

@@ -1,57 +1,76 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import i from "../../node_modules/classnames/index.js";
-import t, { createContext as k, forwardRef as q, useState as c, useEffect as B } from "react";
-import Q from "../../components/Icon/Icon.js";
-import b from "../../components/Navigation/Navigation.js";
-import x from "../../patterns/LanguageSelector/LanguageSelector.js";
-import C from "../../patterns/UserManagement/UserManagement.js";
-import { SSRMediaQuery as U } from "../../providers/SeldonProvider/utils.js";
-import { findChildrenOfType as m, findChildrenExcludingTypes as D, px as n } from "../../utils/index.js";
-import { useMobileMenu as F } from "./hooks.js";
-import { defaultHeaderContext as G } from "./utils.js";
-const J = k(G), K = q(
+import c from "../../node_modules/classnames/index.js";
+import t, { createContext as D, forwardRef as F, useState as u, useEffect as C } from "react";
+import G from "../../components/Icon/Icon.js";
+import H from "../../components/Navigation/Navigation.js";
+import M from "../../patterns/LanguageSelector/LanguageSelector.js";
+import $ from "../../patterns/UserManagement/UserManagement.js";
+import { SSRMediaQuery as J } from "../../providers/SeldonProvider/utils.js";
+import { findChildrenOfType as h, findChildrenExcludingTypes as K, px as n } from "../../utils/index.js";
+import { useMobileMenu as W } from "./hooks.js";
+import { defaultHeaderContext as X } from "./utils.js";
+const Y = D(X), Z = F(
   ({
-    logo: s = /* @__PURE__ */ r(Q, { icon: "PhillipsLogo" }),
-    logoHref: M = "/",
-    className: y,
-    children: a,
-    toggleOpenText: H = "Open Menu",
-    toggleCloseText: S = "Close Menu",
-    logoText: $ = "Home Page",
-    disabled: h,
-    bannerRef: o,
-    ...N
-  }, O) => {
-    const u = m(a, C), T = t.isValidElement(u?.[0]) ? t.cloneElement(u[0], { disabled: h }) : "", g = m(a, x), p = t.isValidElement(g?.[0]) ? t.cloneElement(g[0], { disabled: h }) : "", [f, w] = c(!1), I = m(a, b), P = D(a, [b, C, x]), { closeMenu: j, handleMenuToggle: R, isMenuOpen: d, toggleText: V } = F({ toggleOpenText: H, toggleCloseText: S }), [z, A] = c(null), L = t.useRef(null), [_, v] = c(o?.current ? o.current.clientHeight : 0);
-    return B(() => {
-      const e = o?.current;
+    logo: d = /* @__PURE__ */ r(G, { icon: "PhillipsLogo" }),
+    logoHref: S = "/",
+    className: w,
+    children: i,
+    toggleOpenText: N = "Open Menu",
+    toggleCloseText: O = "Close Menu",
+    logoText: R = "Home Page",
+    disabled: g,
+    bannerRef: s,
+    ...T
+  }, a) => {
+    const p = h(i, $), P = t.isValidElement(p?.[0]) ? t.cloneElement(p[0], { disabled: g }) : "", f = h(i, M), v = t.isValidElement(f?.[0]) ? t.cloneElement(f[0], { disabled: g }) : "", [b, z] = u(!1), I = h(i, H), j = K(i, [H, $, M]), { closeMenu: V, handleMenuToggle: k, isMenuOpen: m, toggleText: A } = W({ toggleOpenText: N, toggleCloseText: O }), [L, q] = u(null), B = t.useRef(null), [_, E] = u(s?.current ? s.current.clientHeight : 0), x = t.useRef(null);
+    C(() => {
+      const e = s?.current;
       if (!e) return;
-      v(e.clientHeight);
-      const E = new window.ResizeObserver(() => {
-        v(e.clientHeight);
+      E(e.clientHeight);
+      const o = new window.ResizeObserver(() => {
+        E(e.clientHeight);
       });
-      return E.observe(e), () => {
-        E.disconnect();
+      return o.observe(e), () => {
+        o.disconnect();
       };
-    }, [o, _]), /* @__PURE__ */ l(
+    }, [s, _]), C(() => {
+      const e = x.current;
+      if (!e) return;
+      const o = () => {
+        const U = e.offsetHeight;
+        document.documentElement.style.setProperty("--header-height", `${U}px`);
+      };
+      o();
+      const y = new window.ResizeObserver(o);
+      return y.observe(e), () => {
+        y.disconnect();
+      };
+    }, []);
+    const Q = t.useCallback(
+      (e) => {
+        x.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+      },
+      [a]
+    );
+    return /* @__PURE__ */ l(
       "header",
       {
-        ...N,
-        className: i(`${n}-header`, y),
-        ref: O,
+        ...T,
+        className: c(`${n}-header`, w),
+        ref: Q,
         style: { "--banner-height": `${_}px` },
         children: [
           /* @__PURE__ */ l("div", { className: `${n}-header__top-row`, children: [
-            /* @__PURE__ */ r(U.Media, { greaterThanOrEqual: "md", children: p }),
+            /* @__PURE__ */ r(J.Media, { greaterThanOrEqual: "md", children: v }),
             /* @__PURE__ */ l(
               "button",
               {
-                "aria-label": V,
+                "aria-label": A,
                 "data-testid": "mobile-menu-toggle",
                 type: "button",
-                onClick: R,
-                className: i(`${n}-header__toggle-btn`, {
-                  [`${n}-header__toggle-btn--open`]: d
+                onClick: k,
+                className: c(`${n}-header__toggle-btn`, {
+                  [`${n}-header__toggle-btn--open`]: m
                 }),
                 children: [
                   /* @__PURE__ */ r("span", {}),
@@ -59,20 +78,20 @@ const J = k(G), K = q(
                 ]
               }
             ),
-            /* @__PURE__ */ r("h1", { "data-testid": "header-logo", className: `${n}-header__logo`, children: /* @__PURE__ */ r("a", { href: M, "aria-label": $, children: typeof s == "object" ? s : /* @__PURE__ */ r("img", { alt: "Phillips", "data-testid": "header-logo-img", src: s }) }) }),
-            T
+            /* @__PURE__ */ r("h1", { "data-testid": "header-logo", className: `${n}-header__logo`, children: /* @__PURE__ */ r("a", { href: S, "aria-label": R, children: typeof d == "object" ? d : /* @__PURE__ */ r("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d }) }) }),
+            P
           ] }),
-          /* @__PURE__ */ r("div", { className: i(`${n}-header__nav`, { [`${n}-header__nav--closed`]: !d }), children: /* @__PURE__ */ l(
-            J.Provider,
+          /* @__PURE__ */ r("div", { className: c(`${n}-header__nav`, { [`${n}-header__nav--closed`]: !m }), children: /* @__PURE__ */ l(
+            Y.Provider,
             {
               value: {
-                activeSubmenuId: z,
-                setActiveSubmenuId: A,
-                closeTimeoutRef: L,
-                isMenuOpen: d,
-                isSearchExpanded: f,
-                setIsSearchExpanded: w,
-                closeMenu: j
+                activeSubmenuId: L,
+                setActiveSubmenuId: q,
+                closeTimeoutRef: B,
+                isMenuOpen: m,
+                isSearchExpanded: b,
+                setIsSearchExpanded: z,
+                closeMenu: V
               },
               children: [
                 t.Children.map(
@@ -80,19 +99,19 @@ const J = k(G), K = q(
                   (e) => t.isValidElement(e) ? t.cloneElement(e, {
                     children: [
                       ...t.Children.toArray(e.props.children),
-                      p
+                      v
                     ]
                   }) : e
                 ),
-                P
+                j
               ]
             }
           ) }),
           /* @__PURE__ */ r(
             "div",
             {
-              className: i(`${n}-header__overlay`, {
-                [`${n}-header__overlay--active`]: f
+              className: c(`${n}-header__overlay`, {
+                [`${n}-header__overlay--active`]: b
               })
             }
           )
@@ -101,8 +120,8 @@ const J = k(G), K = q(
     );
   }
 );
-K.displayName = "Header";
+Z.displayName = "Header";
 export {
-  J as HeaderContext,
-  K as default
+  Y as HeaderContext,
+  Z as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.214.0-beta.3",
+  "version": "1.214.0-beta.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"