@phillips/seldon 1.61.0 → 1.62.0

package/dist/components/Accordion/AccordionItem.js

@@ -1,9 +1,9 @@
-import { jsxs as g, jsx as o, Fragment as h } from "react/jsx-runtime";
-import { getCommonProps as $ } from "../../utils/index.js";
-import f from "../../assets/plus.svg.js";
-import v from "../../assets/minus.svg.js";
+import { jsxs as h, jsx as o, Fragment as g } from "react/jsx-runtime";
+import { getCommonProps as v } from "../../utils/index.js";
+import $ from "../../assets/plus.svg.js";
+import f from "../../assets/minus.svg.js";
 import I from "../../assets/lock.svg.js";
-import d from "../../node_modules/classnames/index.js";
+import m from "../../node_modules/classnames/index.js";
 import { Item as _, Trigger as C, Content as N } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
 import { getIconClasses as p } from "./utils.js";
 const x = ({
@@ -22,14 +22,14 @@ const x = ({
       "aria-hidden": !0
     }
   ) }), u = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    f,
+    $,
     {
       className: p(t, e, "plus"),
       "data-testid": `${r}-plusIcon`,
       "aria-hidden": !0
     }
   ) }), i = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    v,
+    f,
     {
       className: p(t, e, "minus"),
       "data-testid": `${r}-minusIcon`,
@@ -41,9 +41,9 @@ const x = ({
     {
       "data-disabled": c,
       asChild: !0,
-      className: d(t, { [`${t}--hoverable`]: !c }, s),
-      children: /* @__PURE__ */ g("div", { "data-testid": `${r}-trigger`, children: [
-        /* @__PURE__ */ o("div", { className: d(`${t}__text`, { [`${t}__text--lg`]: e }), children: n }),
+      className: m(t, { [`${t}--hoverable`]: !c }, s),
+      children: /* @__PURE__ */ h("div", { "data-testid": `${r}-trigger`, children: [
+        /* @__PURE__ */ o("div", { className: m(`${t}__text`, { [`${t}__text--lg`]: e }), children: n }),
         a && l,
         !a && u,
         !a && i
@@ -57,11 +57,11 @@ const x = ({
   hasTransition: c,
   isLargeVariation: e,
   className: r
-}) => /* @__PURE__ */ o(h, { children: t && n ? /* @__PURE__ */ o("div", { children: n }) : /* @__PURE__ */ o(
+}) => /* @__PURE__ */ o(g, { children: t && n ? /* @__PURE__ */ o("div", { children: n }) : /* @__PURE__ */ o(
   N,
   {
     asChild: !0,
-    className: d(
+    className: m(
       { [`${s}__content--lg`]: e },
       { [`${s}--transition`]: c },
       r
@@ -78,13 +78,13 @@ const x = ({
   children: a,
   ...l
 }) => {
-  const { className: u } = $({ id: t }, "Accordion"), i = s === "lg", m = `${u}-item`;
-  return /* @__PURE__ */ g(
+  const { className: u } = v({ id: t }, "Accordion"), i = s === "lg", d = `${u}-item`;
+  return /* @__PURE__ */ h(
     _,
     {
       disabled: n,
       value: t,
-      className: d(m, { [`${m}__border-bottom`]: !e }),
+      className: m(d, { [`${d}__border-bottom`]: !e }),
       ...l,
       children: [
         /* @__PURE__ */ o(
@@ -93,7 +93,7 @@ const x = ({
             disable: n,
             isLargeVariation: i,
             id: t,
-            baseClassName: `${m}-label`,
+            baseClassName: `${d}-label`,
             children: c
           }
         ),
@@ -103,8 +103,8 @@ const x = ({
             disable: n,
             hasTransition: r,
             isLargeVariation: i,
-            baseClassName: m,
-            children: a
+            baseClassName: d,
+            children: /* @__PURE__ */ o("div", { className: "radix-accordion-content", children: a })
           }
         )
       ]

package/dist/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js

@@ -1,44 +1,46 @@
-import { jsxs as c, Fragment as _, jsx as e } from "react/jsx-runtime";
-import { getCommonProps as T, findChildrenOfType as b, px as l } from "../../../utils/index.js";
+import { jsxs as d, Fragment as T, jsx as e } from "react/jsx-runtime";
+import { getCommonProps as _, findChildrenOfType as b, px as c } from "../../../utils/index.js";
 import x from "../../../node_modules/classnames/index.js";
-import d, { forwardRef as I, useState as M } from "react";
-import { TextVariants as u } from "../../Text/types.js";
+import l, { forwardRef as $, useState as I } from "react";
+import { TextVariants as p } from "../../Text/types.js";
 import f from "../../Text/Text.js";
-import O from "../NavigationList/NavigationList.js";
-import $ from "../../Accordion/Accordion.js";
-import S from "../../Accordion/AccordionItem.js";
-import { SSRMediaQuery as p } from "../../../providers/utils.js";
-const y = ({ id: r, label: n, children: t }) => /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(
-  S,
+import M from "../NavigationList/NavigationList.js";
+import O from "../../Accordion/Accordion.js";
+import y from "../../Accordion/AccordionItem.js";
+import { SSRMediaQuery as u } from "../../../providers/utils.js";
+const S = ({ id: i, label: r, children: a }) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
+  y,
   {
     variation: "sm",
-    id: r != null ? r : `${n}-accordion`,
-    label: /* @__PURE__ */ e(f, { variant: u.snwHeaderLink, children: n }),
-    children: t
-  }
-) }), C = I(
-  ({ id: r, label: n, children: t, className: g, onClick: v, ...h }, N) => {
-    const { className: o, ...i } = T({ id: r }, "NavigationItemTrigger"), [m, s] = M(!1), a = b(t, O);
-    return /* @__PURE__ */ c(_, { children: [
-      /* @__PURE__ */ e(p.Media, { lessThan: "md", children: /* @__PURE__ */ e(y, { id: r, label: n, ...i, children: a ? d.cloneElement(a[0], {
-        className: `${o}__submenu--mobile`
+    hasTransition: !0,
+    id: `accordion-item-${i}`,
+    label: /* @__PURE__ */ e(f, { variant: p.snwHeaderLink, children: r }),
+    children: a
+  },
+  `accordion-key-${r}`
+) }), C = $(
+  ({ id: i, label: r, children: a, className: g, onClick: v, ...h }, N) => {
+    const { className: n, ...t } = _({ id: i }, "NavigationItemTrigger"), [m, s] = I(!1), o = b(a, M);
+    return /* @__PURE__ */ d(T, { children: [
+      /* @__PURE__ */ e(u.Media, { lessThan: "md", children: /* @__PURE__ */ e(S, { id: i, label: r, ...t, children: o ? l.cloneElement(o[0], {
+        className: `${n}__submenu--mobile`
       }) : void 0 }) }),
-      /* @__PURE__ */ e(p.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ c(
+      /* @__PURE__ */ e(u.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ d(
         "li",
         {
-          ...i,
+          ...t,
           ref: N,
           "aria-expanded": m,
-          className: x(g, o, `${l}-nav__item`, {
-            [`${o}--hovered`]: m
+          className: x(g, n, `${c}-nav__item`, {
+            [`${n}--hovered`]: m
           }),
           onClick: v,
           onMouseOver: () => s(!0),
           onMouseOut: () => s(!1),
           ...h,
           children: [
-            /* @__PURE__ */ e("button", { className: `${l}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ e(f, { variant: u.snwHeaderLink, children: n }) }),
-            a ? d.cloneElement(a[0], { className: `${o}__submenu` }) : void 0
+            /* @__PURE__ */ e("button", { className: `${c}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ e(f, { variant: p.snwHeaderLink, children: r }) }),
+            o ? l.cloneElement(o[0], { className: `${n}__submenu` }) : void 0
           ]
         }
       ) })

package/dist/patterns/LanguageSelector/LanguageSelector.js

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

package/dist/scss/components/Accordion/_accordion.scss

@@ -36,11 +36,11 @@
   }
 
   &--transition[data-state='open'] {
-    animation: slide-down 250ms ease-out;
+    animation: slide-down 250ms ease-in-out;
   }
 
   &--transition[data-state='closed'] {
-    animation: slide-up 250ms end;
+    animation: slide-up 250ms ease-in-out;
   }
 
   &[data-state='open'] {
@@ -66,10 +66,12 @@
   @keyframes slide-down {
     from {
       height: 0;
+      opacity: 0;
     }
 
     to {
       height: var(--radix-accordion-content-height);
+      opacity: 1;
     }
   }
 

package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -33,24 +33,41 @@
     }
 
     & > &__submenu {
+      align-items: flex-start;
       border-top: 1px solid $light-gray;
+      height: fit-content;
+      max-height: 0;
+      opacity: 0;
+      padding: $padding-md;
       pointer-events: none;
-      transform: translateY(-100%);
-      transition: none; // remove this when implementing submenu transitions
+      position: fixed; // has to bust out of the box containing it on desktop
+      right: 0;
+      top: calc($header-height + 1px);
+      transition:
+        max-height 0.2s ease-in-out,
+        opacity 0s ease-in-out 0.2s,
+        z-index 0s ease-in-out 0.2s;
+      width: 100%;
+      z-index: -1;
+      .#{$px}-nav__list__section {
+        opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+      }
     }
 
     &--hovered &__submenu {
-      align-items: flex-start;
-      height: fit-content;
       left: 0;
-      max-height: unset;
+      max-height: 700px;
       opacity: 1;
-      padding: $padding-md;
       pointer-events: all;
-      position: fixed; // has to bust out of the box containing it on desktop
-      right: 0;
-      top: $header-height;
-      transform: translateY(0);
+      transition:
+        max-height 0.25s ease-in-out,
+        z-index 0s ease-in-out 0.25s;
+      z-index: 1;
+
+      .#{$px}-nav__list__section {
+        opacity: 1;
+      }
     }
   }
 
@@ -59,10 +76,8 @@
       background-color: $pure-white;
       height: auto;
       left: 0;
-      opacity: 0;
       overflow: hidden;
       position: absolute;
-      z-index: -1;
 
       li {
         display: inline;

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

@@ -16,13 +16,18 @@
   }
 
   @include isHeaderMobile {
+    height: calc($search-size - 1px);
     left: calc(100% - $search-size - $spacing-md);
     right: $spacing-md;
   }
 
   &--active {
-    left: $spacing-md;
+    left: 0;
     transition: left 0.25s ease-in 0.2s;
+
+    @include isHeaderMobile {
+      left: $spacing-md;
+    }
   }
 
   &__input-status-icon {
@@ -79,16 +84,16 @@
         border-bottom: 1px solid $pure-black;
         border-radius: unset;
         color: $pure-black;
-        font-family: DistinctDisplay, sans-serif;
-
-        // Tokenize later
-        font-size: 0.875rem;
+        font-size: $string-size1;
         font-style: normal;
-        font-variation-settings: 'wght' 400;
+        font-variation-settings: 'wght' 600;
         height: $search-size;
-        line-height: 1.5rem;
+        letter-spacing: 0;
+        line-height: $string-line-height-size1;
         margin: 0;
-        padding: $spacing-sm 0 $spacing-sm $spacing-sm;
+        padding: $spacing-xsm 0 $spacing-xsm $spacing-sm;
+
+        @include Montserrat;
 
         @include isHeaderMobile {
           height: calc(var(--spacing-md) + var(--search-size));

package/dist/scss/patterns/UserManagement/_userManagement.scss

@@ -27,7 +27,6 @@
     display: flex;
     gap: 0 $spacing-xsm;
     justify-content: center;
-    min-width: 44px;
     padding: 0;
     padding-bottom: $padding-xsm;
 
@@ -36,6 +35,7 @@
     }
 
     @include isHeaderMobile {
+      justify-content: flex-end;
       padding-right: 0;
     }
 

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

@@ -110,12 +110,13 @@
     }
     .#{$px}-nav__list-container {
       display: flex;
-      padding: 0 $spacing-md;
+      padding: 0;
 
       @include isHeaderMobile {
         flex-direction: column;
         height: calc(100vh - var(--header-height) - 1px);
         justify-content: flex-start;
+        padding: 0 $spacing-md;
       }
 
       @include isHeaderDesktop {
@@ -127,6 +128,18 @@
       }
     }
 
+    @include isHeaderMobile {
+      left: 0;
+      position: absolute;
+      top: var(--header-height);
+      transition: left 0.25s ease-in-out;
+
+      &--closed {
+        display: unset;
+        left: -100vw;
+      }
+    }
+
     @include isHeaderDesktop {
       display: flex;
       height: unset;

package/package.json

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