@phillips/seldon 1.51.0 → 1.52.0

package/dist/scss/components/UserManagement/_userManagement.scss

@@ -2,121 +2,60 @@
 
 .#{$px}-user-management {
   align-items: center;
+  cursor: pointer;
   display: flex;
-  height: $user-management-height;
+  gap: 0 $spacing-xsm;
   justify-content: flex-end;
-  left: 0;
-  padding: 0 $spacing-md;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 100%;
+  min-height: 42px; // stop bounce after the user is logged in
+  min-width: 92px; // needed to handle the loading states and language swapping
 
-  @include isHeaderMobile {
-    align-items: flex-start;
-    background: transparent;
-    flex-direction: column;
-    height: unset;
-    margin-top: auto;
-    padding: 0;
-    position: unset;
-
-    .#{$px}-nav__item-trigger {
-      text-align: unset;
-    }
+  @include media($size-xl) {
+    min-width: 104px; // stop bounce after the user is logged in
   }
 
-  > li {
-    border: none;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
+  @include isHeaderMobile {
+    justify-content: center;
+    min-width: 44px; // matching the size of mobile menu icon to allow for equal spacing and centering of logo
   }
 
-  &__account-wrapper {
+  &__login {
     align-items: center;
+    background-color: unset;
+    border: unset;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
     display: flex;
+    gap: 0 $spacing-xsm;
+    padding-bottom: $padding-xsm;
 
-    @include isHeaderMobile {
-      width: 100%;
+    &:hover {
+      @include underline($padding-xsm);
     }
 
-    .#{$px}-link {
+    > p.#{$px}-text {
+      margin: 0;
+
       @include isHeaderMobile {
-        width: 100%;
+        display: none;
       }
     }
   }
 
-  &__login {
-    cursor: pointer;
-  }
-
   &__account-icon {
-    cursor: pointer;
+    height: 1.5rem;
+    width: 1.5rem;
 
-    &:hover,
-    &:focus,
-    &:focus-within {
-      path {
-        fill: $soft-black;
-      }
-    }
-
-    @include isHeaderMobile {
-      display: none;
+    a {
+      align-items: center;
+      display: flex;
+      height: $mobile-minimum-clickable-area;
+      justify-content: center;
+      width: $mobile-minimum-clickable-area;
     }
-  }
 
-  .#{$px}-nav__item {
-    > a {
-      padding: 0.5rem;
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-      &::after {
-        opacity: 0;
-      }
-      .#{$px}-user-management__language {
-        &__selections {
-          padding: 0.8125rem;
-        }
-      }
-    }
-    .#{$px}-user-management__language {
-      &__selections {
-        padding: 0.8125rem;
-
-        @include isHeaderDesktop {
-          background: $off-white;
-          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 85%);
-          display: block;
-          left: unset;
-          min-height: unset;
-          min-width: 130px;
-          padding: 0;
-          position: absolute;
-          right: 0;
-          top: $user-management-height;
-          width: 100%;
-
-          > li {
-            height: auto;
-          }
-          .#{$px}-input {
-            &--inline {
-              gap: 0.825rem;
-            }
-
-            &__input {
-              height: 18px;
-              width: 18px;
-            }
-          }
-        }
-      }
+    @mixin isHeaderDesktop {
+      height: 1.5rem;
+      width: 1.5rem;
     }
   }
 }

package/dist/scss/components/Video/_video.scss

@@ -13,5 +13,6 @@
     inset: 0;
     position: absolute;
     width: 100%;
+    z-index: 0;
   }
 }

package/dist/utils/index.d.ts

@@ -100,5 +100,6 @@ export declare const emailValidation: (email: string) => boolean;
  *
  */
 export declare const findChildrenOfType: <ComponentProps>(children: React.ReactNode, componentType?: React.ElementType, inverse?: boolean) => React.ReactElement<ComponentProps, string | React.JSXElementConstructor<any>>[] | null;
+export declare const findChildrenExcludingTypes: <ComponentProps>(children: React.ReactNode, excludedTypes: React.ElementType[]) => React.ReactElement<ComponentProps, string | React.JSXElementConstructor<any>>[] | null;
 export declare const encodeURLSearchParams: (url: string) => string;
 export {};

package/dist/utils/index.js

@@ -1,55 +1,62 @@
 import { jsx as d } from "react/jsx-runtime";
-import { kebabCase as c } from "../node_modules/change-case/dist/index.js";
-import * as u from "react";
-const o = "seldon", v = ({ id: e, ...r }, t) => {
-  const n = c(t);
+import { kebabCase as u } from "../node_modules/change-case/dist/index.js";
+import * as c from "react";
+const s = "seldon", v = ({ id: e, ...r }, n) => {
+  const t = u(n);
   return {
     ...r,
-    "data-testid": e ? `${n}-${e}` : `${n}`,
-    className: `${o}-${n}`
+    "data-testid": e ? `${t}-${e}` : `${t}`,
+    className: `${s}-${t}`
   };
 };
-var x = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(x || {}), $ = /* @__PURE__ */ ((e) => (e.micro = "micro", e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))($ || {});
+var x = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(x || {}), f = /* @__PURE__ */ ((e) => (e.micro = "micro", e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(f || {});
 const C = () => {
 };
-function w({
+function g({
   disabled: e = !1,
   id: r,
-  invalid: t = !1,
-  invalidText: n = "invalid",
+  invalid: n = !1,
+  invalidText: t = "invalid",
   readOnly: a = !1,
-  type: s,
+  type: o,
   warn: i = !1,
   warnText: m
 }) {
   const l = {
     disabled: !a && e,
-    invalid: !a && !e && t,
+    invalid: !a && !e && n,
     invalidId: `${r}-error-msg`,
-    type: s === "toggle" ? "checkbox" : s,
-    warn: !a && !e && !t && i,
+    type: o === "toggle" ? "checkbox" : o,
+    warn: !a && !e && !n && i,
     warnId: `${r}-warn-msg`,
     validation: null
   };
-  return l.invalid && (l.validation = /* @__PURE__ */ d("div", { className: `${o}-input__validation ${o}-${s}-input--invalid`, id: l.invalidId, children: n })), l.warn && (l.validation = /* @__PURE__ */ d("div", { className: `${o}-input__validation ${o}-${s}-input--warn`, id: l.warnId, children: m })), l;
+  return l.invalid && (l.validation = /* @__PURE__ */ d("div", { className: `${s}-input__validation ${s}-${o}-input--invalid`, id: l.invalidId, children: t })), l.warn && (l.validation = /* @__PURE__ */ d("div", { className: `${s}-input__validation ${s}-${o}-input--warn`, id: l.warnId, children: m })), l;
 }
-const g = (/* @__PURE__ */ new Date()).getFullYear(), h = (e, r = "end", t = "vertical") => `${o}-padding-${t}-${e}-${r}`, I = (e) => /(.+)@(.+){2,}\.(.+){2,}/i.test(e), N = (e, r, t = !1) => {
-  const n = u.Children.toArray(e).filter((a) => a && a.type === r && !t ? a : a && a.type !== r && t);
+const w = (/* @__PURE__ */ new Date()).getFullYear(), h = (e, r = "end", n = "vertical") => `${s}-padding-${n}-${e}-${r}`, y = (e) => /(.+)@(.+){2,}\.(.+){2,}/i.test(e), I = (e, r, n = !1) => {
+  const t = c.Children.toArray(e).filter((a) => a && a.type === r && !n ? a : a && a.type !== r && n);
+  return t.length > 0 ? t : null;
+}, N = (e, r) => {
+  const n = c.Children.toArray(e).filter((t) => {
+    if (t && t.type && !r.includes(t.type))
+      return t;
+  });
   return n.length > 0 ? n : null;
 }, R = (e) => {
-  const r = e.split("?"), t = new URLSearchParams(r[1]), a = Array.from(t.entries()).map(([i, m]) => [i, encodeURIComponent(m)]).map(([i, m]) => `${i}=${m}`).join("&");
+  const r = e.split("?"), n = new URLSearchParams(r[1]), a = Array.from(n.entries()).map(([i, m]) => [i, encodeURIComponent(m)]).map(([i, m]) => `${i}=${m}`).join("&");
   return `${r[0]}?${a}`;
 };
 export {
   x as PaddingTokens,
-  $ as SpacingTokens,
-  g as defaultYear,
-  I as emailValidation,
+  f as SpacingTokens,
+  w as defaultYear,
+  y as emailValidation,
   R as encodeURLSearchParams,
-  N as findChildrenOfType,
+  N as findChildrenExcludingTypes,
+  I as findChildrenOfType,
   h as generatePaddingClassName,
   v as getCommonProps,
   C as noOp,
-  o as px,
-  w as useNormalizedInputProps
+  s as px,
+  g as useNormalizedInputProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.51.0",
+  "version": "1.52.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -57,6 +57,7 @@
     "@chromatic-com/storybook": "^1.6.1",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@faker-js/faker": "^9.0.0",
     "@figma/code-connect": "^0.2.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",