@phillips/seldon 1.33.0 → 1.35.0

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -60,7 +60,7 @@
     right: 0;
     top: 0;
     width: 307px;
-    z-index: -10;
+    z-index: -1;
   }
 
   @include isHeaderDesktop {
@@ -74,7 +74,7 @@
       overflow: hidden;
       position: fixed;
       top: 90px;
-      width: 100vw;
+      width: 100%;
       z-index: -1;
 
       li {

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

@@ -50,11 +50,7 @@
     }
   }
 
-  &__input-wrapper {
-    background: #323232;
-    color: $white;
-    display: flex;
-    height: 100px;
+  &__form {
     overflow: hidden;
     position: absolute;
     right: 0;
@@ -68,13 +64,28 @@
     }
 
     &--active {
+      overflow: visible;
       width: 50%;
 
       @include isHeaderMobile {
         top: $header-height;
         width: 100%;
       }
+
+      .#{$px}-search__results {
+        display: flex;
+        flex-direction: column;
+      }
     }
+  }
+
+  &__input-wrapper {
+    background: #323232;
+    color: $white;
+    display: flex;
+    height: 100px;
+    position: relative;
+    z-index: 3;
 
     &__icon {
       height: 24px;
@@ -99,4 +110,42 @@
       padding: 1rem 2rem;
     }
   }
+
+  &__results {
+    background: $soft-black;
+    display: none;
+    padding: 1rem 2rem;
+    position: absolute;
+    top: 100px;
+    width: 100%;
+  }
+
+  &__result {
+    border-bottom: 1px solid $white;
+    display: flex;
+    padding: 0.625rem 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .phillips-link {
+      &:hover {
+        border-bottom: none;
+      }
+    }
+
+    p {
+      @include text($body3);
+
+      color: $white;
+      text-transform: none;
+    }
+
+    &:hover {
+      p {
+        color: $cta-blue;
+      }
+    }
+  }
 }

package/dist/scss/components/Social/_social.scss

@@ -3,30 +3,68 @@
 @import '../../type';
 
 .#{$px}-social {
-  align-items: center;
   display: inline-flex;
   flex-direction: column;
+  padding: 0;
+  width: 100%;
+
+  @include media($size-sm) {
+    align-items: center;
+    padding: $spacing-sm;
+    width: unset;
+  }
+
+  &__button {
+    color: $pure-black;
+    font-size: 0.875rem;
+    justify-content: flex-start;
+    opacity: 1;
+    padding: 0;
+    text-decoration: underline;
+    white-space: nowrap;
+
+    @include media($size-sm) {
+      justify-content: center;
+    }
+
+    &:hover {
+      background-color: unset;
+      color: unset;
+    }
+
+    &:focus {
+      background-color: unset;
+      color: unset;
+    }
+  }
 
   @include media($size-sm) {
     align-items: flex-end;
   }
 
   &__header {
-    @include text($heading3);
-
-    margin-bottom: $spacing-xsm;
+    color: $pure-black;
+    font-family: $Distinct;
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
   }
 
   ul {
     align-items: center;
+    border-top: 1px solid #eae8e4;
     display: flex;
     gap: 0 1.25rem;
     list-style: none;
-    margin: 0 0 $spacing-md;
-    padding: 0;
+    margin: $spacing-md 0 $spacing-md;
+    padding: $spacing-md 0 0;
 
     @include media($size-sm) {
       gap: 0 1rem;
+      justify-content: flex-end;
+      margin: $spacing-sm 0 $spacing-md;
+      padding: $spacing-sm 0 0;
+      width: 100%;
     }
 
     li {

package/dist/utils/index.d.ts

@@ -81,4 +81,14 @@ export declare const generatePaddingClassName: (padding: PaddingTokens, side?: '
 
  */
 export declare const emailValidation: (email: string) => boolean;
+/**
+ * Return array of children of a specific type
+ *
+ * @param children - React children
+ * @param componentType - React component type
+ * @param inverse - Return children that are not of the specified type
+ *
+ */
+export declare const findChildrenOfType: (children: React.ReactNode, componentType?: React.ElementType, inverse?: boolean) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[] | null;
+export declare const encodeURLSearchParams: (url: string) => string;
 export {};

package/dist/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.33.0",
+  "version": "1.35.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -54,7 +54,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.1.0",
-    "@storybook/addon-essentials": "^8.2.5",
+    "@storybook/addon-essentials": "^8.2.7",
     "@storybook/addon-interactions": "^8.1.4",
     "@storybook/addon-links": "^8.1.4",
     "@storybook/addon-mdx-gfm": "^8.2.4",