@phillips/seldon 1.106.4 → 1.107.0

package/dist/components/Dropdown/Dropdown.d.ts

@@ -18,6 +18,10 @@ export interface DropdownProps extends Omit<DropdownSelect.SelectProps, 'default
      * Aria-label for specific dropdown use, e.g. Select your language
      */
     label: string;
+    /**
+     * Is the dropdown disabled
+     */
+    disabled?: boolean;
 }
 /**
  * ## Overview

package/dist/components/Dropdown/Dropdown.js

@@ -1,28 +1,37 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import d, { useState as g } from "react";
-import { getCommonProps as C } from "../../utils/index.js";
+import d, { useState as C } from "react";
+import { getCommonProps as D } from "../../utils/index.js";
 import i from "../../node_modules/classnames/index.js";
-import { Root as D, Trigger as $, Value as b, Icon as v, Portal as I, Content as S, ScrollUpButton as x, Viewport as R, ScrollDownButton as O, Item as P, ItemText as V } from "../../node_modules/@radix-ui/react-select/dist/index.js";
+import { Root as $, Trigger as b, Value as v, Icon as I, Portal as S, Content as x, ScrollUpButton as R, Viewport as O, ScrollDownButton as P, Item as V, ItemText as j } from "../../node_modules/@radix-ui/react-select/dist/index.js";
 import c from "../../assets/chevronDown.svg.js";
-const j = d.forwardRef(
-  ({ options: l, value: a, onValueChange: s, label: t, className: _, id: m, ...h }, f) => {
-    const { className: o, ...u } = C({ id: m }, "Dropdown"), [N, w] = g(!1);
-    return /* @__PURE__ */ e("div", { className: i(o, _), id: m, ...u, ...h, children: /* @__PURE__ */ n(
-      D,
+const y = d.forwardRef(
+  ({ options: l, value: a, onValueChange: s, label: t, className: _, id: m, disabled: h, ...f }, u) => {
+    const { className: o, ...N } = D({ id: m }, "Dropdown"), [w, g] = C(!1);
+    return /* @__PURE__ */ e("div", { className: i(o, _), id: m, ...N, ...f, children: /* @__PURE__ */ n(
+      $,
       {
         value: a,
         onValueChange: (r) => {
           s(r);
         },
-        onOpenChange: w,
+        onOpenChange: g,
         children: [
-          /* @__PURE__ */ n($, { className: `${o}__trigger`, "aria-label": t, ref: f, children: [
-            /* @__PURE__ */ e(b, { placeholder: a }),
-            /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(c, { className: i({ [`${o}__trigger-icon-expanded`]: N }) }) })
-          ] }),
-          /* @__PURE__ */ e(I, { children: /* @__PURE__ */ n(S, { className: `${o}__content`, position: "popper", children: [
-            /* @__PURE__ */ e(x, { className: `${o}__scroll-button__up`, children: /* @__PURE__ */ e(c, {}) }),
-            /* @__PURE__ */ e(R, { className: `${o}__viewport`, children: l.map((r) => /* @__PURE__ */ e(
+          /* @__PURE__ */ n(
+            b,
+            {
+              className: `${o}__trigger`,
+              "aria-label": t,
+              ref: u,
+              disabled: h,
+              children: [
+                /* @__PURE__ */ e(v, { placeholder: a }),
+                /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(c, { className: i({ [`${o}__trigger-icon-expanded`]: w }) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(S, { children: /* @__PURE__ */ n(x, { className: `${o}__content`, position: "popper", children: [
+            /* @__PURE__ */ e(R, { className: `${o}__scroll-button__up`, children: /* @__PURE__ */ e(c, {}) }),
+            /* @__PURE__ */ e(O, { className: `${o}__viewport`, children: l.map((r) => /* @__PURE__ */ e(
               p,
               {
                 value: r.value,
@@ -32,18 +41,18 @@ const j = d.forwardRef(
               },
               r.value
             )) }),
-            /* @__PURE__ */ e(O, { className: `${o}__scroll-button`, children: /* @__PURE__ */ e(c, {}) })
+            /* @__PURE__ */ e(P, { className: `${o}__scroll-button`, children: /* @__PURE__ */ e(c, {}) })
           ] }) })
         ]
       }
     ) });
   }
 );
-j.displayName = "Dropdown";
+y.displayName = "Dropdown";
 const p = d.forwardRef(
-  ({ children: l, className: a, ...s }, t) => /* @__PURE__ */ e(P, { className: `${a}__item`, ...s, ref: t, children: /* @__PURE__ */ e(V, { children: l }) })
+  ({ children: l, className: a, ...s }, t) => /* @__PURE__ */ e(V, { className: `${a}__item`, ...s, ref: t, children: /* @__PURE__ */ e(j, { children: l }) })
 );
 p.displayName = "DropdownSelectItem";
 export {
-  j as default
+  y as default
 };

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

@@ -12,6 +12,7 @@ export declare const Playground: {
             value: string;
         }[];
         value: string;
+        disabled: boolean;
     };
     argTypes: {
         value: {

package/dist/patterns/LanguageSelector/LanguageSelector.d.ts

@@ -22,6 +22,10 @@ export interface LanguageSelectorProps extends ComponentProps<'div'> {
      * hide or show with an opacity transition
      */
     isHidden?: boolean;
+    /**
+     * Disable the language selector so it can't be interacted with
+     */
+    disabled?: boolean;
 }
 /**
  * ## Overview

package/dist/patterns/LanguageSelector/LanguageSelector.js

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

package/dist/patterns/UserManagement/UserManagement.d.ts

@@ -26,6 +26,10 @@ export interface UserManagementProps extends ComponentProps<'div'> {
      * The label for the account details link
      */
     accountLabel?: ReactNode;
+    /**
+     * is the link disabled
+     */
+    disabled?: boolean;
 }
 declare const UserManagement: import('react').ForwardRefExoticComponent<Omit<UserManagementProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default UserManagement;

package/dist/patterns/UserManagement/UserManagement.js

@@ -1,33 +1,34 @@
-import { jsx as o, Fragment as L, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { getCommonProps as C, noOp as b } from "../../utils/index.js";
-import r from "../../assets/account_circle.svg.js";
-import v from "../../node_modules/classnames/index.js";
+import { jsx as o, Fragment as x, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { getCommonProps as v, noOp as A } from "../../utils/index.js";
+import s from "../../assets/account_circle.svg.js";
+import $ from "../../node_modules/classnames/index.js";
 import { AuthState as a } from "./types.js";
-import { TextVariants as s } from "../../components/Text/types.js";
-import m from "../../components/Text/Text.js";
-const A = x(
+import { TextVariants as m } from "../../components/Text/types.js";
+import i from "../../components/Text/Text.js";
+const b = C(
   ({
-    accountDetailsLinkComponent: i = "a",
-    className: l,
-    onLogin: d = b,
+    accountDetailsLinkComponent: l = "a",
+    className: g,
+    onLogin: d = A,
     authState: e = a.LoggedOut,
-    loginLabel: g = "Login",
+    loginLabel: f = "Login",
     accountLabel: p = "Account",
     href: u = "/account",
-    ...t
-  }, f) => {
-    const { className: n, ...h } = C(t, "UserManagement"), N = e === a.LoggedIn, _ = e !== a.Loading;
-    return /* @__PURE__ */ o("div", { ...h, className: v(n, l), ...t, ref: f, children: _ && /* @__PURE__ */ o(L, { children: N ? /* @__PURE__ */ c(i, { className: `${n}__login`, href: u, children: [
-      /* @__PURE__ */ o(r, { className: `${n}__account-icon` }),
-      /* @__PURE__ */ o(m, { variant: s.body3, children: p })
-    ] }) : /* @__PURE__ */ c("button", { className: `${n}__login`, onClick: d, children: [
-      /* @__PURE__ */ o(r, { className: `${n}__account-icon` }),
-      /* @__PURE__ */ o(m, { variant: s.body3, children: g })
+    disabled: t = !1,
+    ...c
+  }, h) => {
+    const { className: n, ...N } = v(c, "UserManagement"), _ = e === a.LoggedIn, L = e !== a.Loading;
+    return /* @__PURE__ */ o("div", { ...N, className: $(n, g), ...c, ref: h, children: L && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ r(l, { className: `${n}__login`, href: u, disabled: t, children: [
+      /* @__PURE__ */ o(s, { className: `${n}__account-icon` }),
+      /* @__PURE__ */ o(i, { variant: m.body3, children: p })
+    ] }) : /* @__PURE__ */ r("button", { className: `${n}__login`, onClick: d, disabled: t, children: [
+      /* @__PURE__ */ o(s, { className: `${n}__account-icon` }),
+      /* @__PURE__ */ o(i, { variant: m.body3, children: f })
     ] }) }) });
   }
 );
-A.displayName = "UserManagement";
+b.displayName = "UserManagement";
 export {
-  A as default
+  b as default
 };

package/dist/scss/components/Dropdown/_dropdown.scss

@@ -12,6 +12,16 @@
     justify-content: center;
     padding: $spacing-xsm;
 
+    &:disabled {
+      color: $medium-gray;
+      cursor: default;
+      pointer-events: none;
+
+      svg {
+        stroke: $light-gray;
+      }
+    }
+
     svg {
       height: 16px;
       width: 16px;
@@ -21,11 +31,11 @@
       transform: rotateX(180deg);
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       cursor: pointer;
     }
 
-    &:focus-within {
+    &:focus-within:not(:disabled) {
       box-shadow: 0 0 0 1px $light-gray;
       outline: 1px solid $pure-black;
     }

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

@@ -2,7 +2,6 @@
 
 .#{$px}-user-management {
   align-items: center;
-  cursor: pointer;
   display: flex;
   gap: 0 $spacing-xsm;
   justify-content: flex-end;
@@ -30,7 +29,13 @@
     padding: 0;
     padding-bottom: $padding-xsm;
 
-    &:hover {
+    &:disabled {
+      cursor: default;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    &:hover:not(:disabled) {
       @include underline;
     }
 

package/dist/site-furniture/Header/Header.d.ts

@@ -20,6 +20,10 @@ export interface HeaderProps extends ComponentProps<'header'> {
      * label for the Logo link
      */
     logoText?: string;
+    /**
+     * Is the header disabled
+     */
+    disabled?: boolean;
 }
 export type HeaderContextType = {
     /**

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

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

package/package.json

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