@phillips/seldon 1.53.1 → 1.54.1

package/dist/scss/_vars.scss

@@ -100,7 +100,7 @@ $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $h
   $snwHeaderLink;
 
 ////////////////////////
-/// Breakpoint TOKENS to be used for min-width comparisons
+/// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
 ///////////////////////
 $breakpoint-sm: 361px;
 $breakpoint-md: 961px;

package/dist/scss/componentStyles.scss

@@ -8,10 +8,7 @@
 // ⚛️ Components
 @use 'components/Button/button';
 @use 'components/IconButton/iconButton';
-@use 'components/Footer/footer';
 @use 'components/Grid/grid';
-@use 'components/Header/header';
-@use 'components/HeroBanner/heroBanner';
 @use 'components/Navigation/navigation';
 @use 'components/Navigation/NavigationItem/navigationItem';
 @use 'components/Navigation/NavigationItemTrigger/navigationItemTrigger';
@@ -22,12 +19,8 @@
 @use 'components/Search/search';
 @use 'components/Search/searchButton';
 @use 'components/Search/SearchResults/searchResults';
-@use 'components/Social/social';
 @use 'components/SplitPanel/splitPanel';
-@use 'components/Subscribe/subscribe';
 @use 'components/Toggle/toggle';
-@use 'components/UserManagement/userManagement';
-@use 'components/ViewingsList/viewingsList';
 @use 'components/Link/link';
 @use 'components/LinkBlock/linkBlock';
 @use 'components/LinkList/linkList';
@@ -39,5 +32,16 @@
 @use 'components/HTMLParser/htmlParser';
 @use 'components/Dropdown/dropdown';
 @use 'components/Video/video';
-@use 'components/LanguageSelector/languageSelector';
-@use 'components/ReadMore/readMore';
+@use 'components/ContentPeek/contentPeek';
+
+// Patterns
+@use 'patterns/HeroBanner/heroBanner';
+@use 'patterns/LanguageSelector/languageSelector';
+@use 'patterns/UserManagement/userManagement';
+@use 'patterns/ViewingsList/viewingsList';
+@use 'patterns/Subscribe/subscribe';
+@use 'patterns/Social/social';
+
+// Site Furniture
+@use 'site-furniture/Header/header';
+@use 'site-furniture/Footer/footer';

package/dist/scss/components/{ReadMore/_readMore.scss → ContentPeek/_contentPeek.scss}

@@ -1,6 +1,6 @@
 @use '../../allPartials' as *;
 
-.#{$px}-read-more {
+.#{$px}-content-peek {
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -10,7 +10,7 @@
     overflow: hidden;
 
     &[data-state='closed'] {
-      max-height: var(--read-more-max-height);
+      max-height: var(--content-peek-max-height);
     }
   }
 

package/dist/scss/{components → patterns}/LanguageSelector/_languageSelector.scss

@@ -13,35 +13,18 @@
     pointer-events: none;
   }
 
-  @include isHeaderDesktop {
-    &.#{$px}-accordion {
-      display: none;
-    }
-  }
-
   &.#{$px}-dropdown {
-    display: none;
-    padding: $padding-lg 0 $padding-xxl;
+    display: flex;
+    padding: 0;
 
     button {
       border: none;
       box-shadow: unset;
-      justify-content: space-between;
+      justify-content: center;
       outline: none;
-      padding: 0.5rem 0.65rem;
-      text-transform: unset;
-      width: 100%;
-    }
-
-    @include isHeaderDesktop {
-      display: flex;
       padding: 0;
-
-      button {
-        justify-content: center;
-        padding: 0;
-        width: fit-content;
-      }
+      text-transform: unset;
+      width: fit-content;
     }
   }
 }

package/dist/scss/{components → site-furniture}/Header/_header.scss

@@ -96,11 +96,6 @@
     justify-content: space-between;
     padding: $padding-sm $spacing-md;
     width: 100%;
-
-    /** There are actually two language selectors in the DOM, show this one in desktop */
-    .#{$px}-language-selector {
-      display: none;
-    }
   }
 
   &__nav {
@@ -130,10 +125,6 @@
       position: relative;
       top: 0;
       width: 100%;
-
-      div.#{$px}-language-selector {
-        display: none; // hide this one on mobile
-      }
     }
 
     .#{$px}-nav__item {

package/dist/{components → site-furniture}/Footer/Footer.js

@@ -2,8 +2,8 @@ import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import l from "../../node_modules/classnames/index.js";
 import { px as r, defaultYear as m } from "../../utils/index.js";
 import f from "../../assets/PhillipsLogo.svg.js";
-import { TextVariants as c } from "../Text/types.js";
-import d from "../Text/Text.js";
+import { TextVariants as c } from "../../components/Text/types.js";
+import d from "../../components/Text/Text.js";
 const $ = ({
   children: a,
   className: i,

package/dist/{components → site-furniture}/Header/Header.d.ts

@@ -36,7 +36,7 @@ export declare const HeaderContext: React.Context<HeaderContextType>;
 /**
  * ## Overview
  *
- * This component allows navigation, search, login/logout, and language selection and supports desktop and mobile layouts
+ * This component allows navigation, search, login/logout, and language selection and supports desktop and mobile layouts.  It requires the <SeldonProvider> to be wrapped around it to support SSR Media Queries.
  *
  * [Figma Link Mobile](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10877-33417&node-type=INSTANCE&m=dev)
  *

package/dist/{components → site-furniture}/Header/Header.js

@@ -1,29 +1,29 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import l, { createContext as O, forwardRef as P, useState as h } from "react";
-import s from "../../node_modules/classnames/index.js";
-import { findChildrenOfType as i, findChildrenExcludingTypes as T, px as e } from "../../utils/index.js";
+import l, { createContext as O, forwardRef as T, useState as h } from "react";
+import d from "../../node_modules/classnames/index.js";
+import { findChildrenOfType as s, findChildrenExcludingTypes as P, px as e } from "../../utils/index.js";
 import j from "../../assets/PhillipsLogo.svg.js";
-import p from "../UserManagement/UserManagement.js";
-import g from "../LanguageSelector/LanguageSelector.js";
-import f from "../Navigation/Navigation.js";
-import { defaultHeaderContext as w } from "./utils.js";
-const I = O(w), L = P(
+import p from "../../patterns/UserManagement/UserManagement.js";
+import g from "../../patterns/LanguageSelector/LanguageSelector.js";
+import f from "../../components/Navigation/Navigation.js";
+import { defaultHeaderContext as R } from "./utils.js";
+import { SSRMediaQuery as w } from "../../providers/utils.js";
+const I = O(R), L = T(
   ({
-    logo: d = /* @__PURE__ */ a(j, {}),
+    logo: i = /* @__PURE__ */ a(j, {}),
     className: u,
     children: r,
     toggleOpenText: _ = "Open Menu",
     toggleCloseText: v = "Close Menu",
     logoText: x = "Home Page",
     ...C
-  }, $) => {
-    const b = i(r, p), m = i(r, g), [c, y] = h(!1), E = i(r, f), N = T(r, [f, p, g]), [n, M] = h(!1), S = n ? v : _, H = function() {
-      M((t) => !t);
+  }, y) => {
+    const E = s(r, p), m = s(r, g), [c, M] = h(!1), $ = s(r, f), b = P(r, [f, p, g]), [n, N] = h(!1), S = n ? v : _, H = function() {
+      N((t) => !t);
     };
-    return /* @__PURE__ */ o("header", { ...C, className: s(`${e}-header`, u), ref: $, children: [
+    return /* @__PURE__ */ o("header", { ...C, className: d(`${e}-header`, u), ref: y, children: [
       /* @__PURE__ */ o("div", { className: `${e}-header__top-row`, children: [
-        m,
-        " ",
+        /* @__PURE__ */ a(w.Media, { greaterThanOrEqual: "md", children: m }),
         /* @__PURE__ */ o(
           "button",
           {
@@ -31,7 +31,7 @@ const I = O(w), L = P(
             "data-testid": "mobile-menu-toggle",
             type: "button",
             onClick: H,
-            className: s(`${e}-header__toggle-btn`, {
+            className: d(`${e}-header__toggle-btn`, {
               [`${e}-header__toggle-btn--open`]: n
             }),
             children: [
@@ -40,20 +40,20 @@ const I = O(w), L = P(
             ]
           }
         ),
-        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: "/", "aria-label": x, children: typeof d == "object" ? d : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d, height: "14" }) }) }),
-        b
+        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: "/", "aria-label": x, children: typeof i == "object" ? i : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i, height: "14" }) }) }),
+        E
       ] }),
-      /* @__PURE__ */ a("div", { className: s(`${e}-header__nav`, { [`${e}-header__nav--closed`]: !n }), children: /* @__PURE__ */ o(
+      /* @__PURE__ */ a("div", { className: d(`${e}-header__nav`, { [`${e}-header__nav--closed`]: !n }), children: /* @__PURE__ */ o(
         I.Provider,
         {
           value: {
             isMenuOpen: n,
             isSearchExpanded: c,
-            setIsSearchExpanded: y
+            setIsSearchExpanded: M
           },
           children: [
             l.Children.map(
-              E,
+              $,
               (t) => l.isValidElement(t) ? l.cloneElement(t, {
                 children: [
                   ...l.Children.toArray(t.props.children),
@@ -61,11 +61,11 @@ const I = O(w), L = P(
                 ]
               }) : t
             ),
-            N
+            b
           ]
         }
       ) }),
-      /* @__PURE__ */ a("div", { className: s(`${e}-header__overlay`, { [`${e}-header__overlay--active`]: c }) })
+      /* @__PURE__ */ a("div", { className: d(`${e}-header__overlay`, { [`${e}-header__overlay--active`]: c }) })
     ] });
   }
 );

package/dist/utils/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const INCREASED_TEST_TIMEOUT: number;
+export declare const BREAKPOINTS: {
+    xsm: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};

package/dist/utils/constants.js

@@ -0,0 +1,10 @@
+const m = {
+  xsm: 0,
+  sm: 361,
+  md: 961,
+  lg: 1401,
+  xl: 1801
+};
+export {
+  m as BREAKPOINTS
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.53.1",
+  "version": "1.54.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -40,6 +40,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@artsy/fresnel": "^7.1.4",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",

package/dist/components/LanguageSelector/LanguageSelector.js

@@ -1,73 +0,0 @@
-import { jsxs as b, Fragment as h, jsx as e } from "react/jsx-runtime";
-import { forwardRef as L } from "react";
-import { getCommonProps as N, noOp as x } from "../../utils/index.js";
-import C from "../../node_modules/classnames/index.js";
-import { SupportedLanguages as s } from "../../types/commonTypes.js";
-import S from "../Dropdown/Dropdown.js";
-import k from "../Accordion/Accordion.js";
-import w from "../Accordion/AccordionItem.js";
-import y from "../Navigation/NavigationItem/NavigationItem.js";
-import { LinkVariants as P } from "../Link/types.js";
-import { TextVariants as T } from "../Text/types.js";
-import V from "../Text/Text.js";
-import j from "../Navigation/NavigationList/NavigationList.js";
-const A = ({
-  id: o,
-  value: n,
-  // can't be passed to the accordion
-  onValueChange: r,
-  label: t,
-  options: l,
-  ...m
-}) => /* @__PURE__ */ e(k, { ...m, children: /* @__PURE__ */ e(
-  w,
-  {
-    variation: "sm",
-    id: o != null ? o : "language-selector-accordion",
-    label: /* @__PURE__ */ e(V, { variant: T.snwHeaderLink, children: t }),
-    children: /* @__PURE__ */ e(j, { id: `${o}-navlist`, children: l.map((a) => /* @__PURE__ */ e(
-      y,
-      {
-        label: a.label,
-        onClick: () => r(a.value),
-        navType: P.snwFlyoutLink
-      },
-      a.value
-    )) })
-  }
-) }), E = L(
-  ({
-    className: o,
-    currentLanguage: n = s.en,
-    languageOptions: r = [
-      { label: "English", value: s.en },
-      { label: "中文", value: s.zh }
-    ],
-    onLanguageChange: t = x,
-    id: l,
-    isHidden: m,
-    ...a
-  }, c) => {
-    var g, f;
-    const { className: p, ...v } = N({ id: l }, "LanguageSelector"), d = (f = (g = r.find((i) => i.value === n)) == null ? void 0 : g.label) != null ? f : "English", u = {
-      ...v,
-      ...a,
-      id: l,
-      className: C(p, o, {
-        [`${p}--hidden`]: m
-      }),
-      options: r,
-      value: n,
-      onValueChange: (i) => t(i),
-      label: d
-    };
-    return /* @__PURE__ */ b(h, { children: [
-      /* @__PURE__ */ e(S, { ...u, ref: c }),
-      /* @__PURE__ */ e(A, { ...u, ref: c })
-    ] });
-  }
-);
-E.displayName = "LanguageSelector";
-export {
-  E as default
-};

package/dist/components/ReadMore/ReadMore.js

@@ -1,57 +0,0 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { forwardRef as N, useState as i, useRef as R, useEffect as x, useCallback as $ } from "react";
-import c from "../../node_modules/classnames/index.js";
-import { getCommonProps as M } from "../../utils/index.js";
-import b from "../Button/Button.js";
-import { ButtonVariants as w } from "../Button/types.js";
-import E from "../Collapsible/Collapsible.js";
-import O from "../Collapsible/CollapsibleContent.js";
-import P from "../Collapsible/CollapsibleTrigger.js";
-import S from "../../assets/plus.svg.js";
-import j from "../../assets/minus.svg.js";
-const B = N(
-  ({ className: d, children: l, readMoreText: f = "Read More", readLessText: u = "Read Less", maxHeight: s = 480, ...o }, p) => {
-    const { className: e, ...g } = M(o, "ReadMore"), [a, v] = i(!1), [n, C] = i(!1), t = R(null);
-    x(() => {
-      t.current && C(t.current.scrollHeight > s);
-    }, [l, s]);
-    const h = $(() => {
-      v((y) => !y);
-    }, []);
-    return /* @__PURE__ */ m(
-      E,
-      {
-        id: o == null ? void 0 : o.id,
-        open: a,
-        onOpenChange: h,
-        className: c(e, d),
-        style: {
-          "--read-more-max-height": `${s}px`
-        },
-        ref: p,
-        ...g,
-        ...o,
-        children: [
-          /* @__PURE__ */ r(O, { className: `${e}-content`, ref: t, forceMount: !0, children: l }),
-          n ? /* @__PURE__ */ r(
-            "div",
-            {
-              className: c(`${e}-overlay`, {
-                [`${e}-overlay--expanded`]: a,
-                [`${e}-overlay--gradient`]: n && !a
-              }),
-              children: /* @__PURE__ */ r("div", { className: `${e}-overlay-trigger-wrapper`, children: /* @__PURE__ */ r(P, { asChild: !0, className: `${e}-overlay-trigger`, children: /* @__PURE__ */ m(b, { variant: w.secondary, children: [
-                a ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r(S, {}),
-                a ? u : f
-              ] }) }) })
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-B.displayName = "ReadMore";
-export {
-  B as default
-};

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

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