@phillips/seldon 1.47.0 → 1.49.0

package/dist/scss/components/Header/_header.scss

@@ -5,10 +5,25 @@
   background-color: $white;
   border-bottom: 1px solid rgba(0, 0, 0, 10%);
   display: flex;
-  padding: $user-management-height $spacing-md 0; // save space for the user management
+  flex-direction: column;
   position: sticky;
   top: 0;
 
+  &__top-row {
+    align-items: center;
+    background-color: $pure-white;
+    display: flex;
+    height: $top-row-height;
+    justify-content: center;
+    padding-top: 1rem;
+    width: 100%;
+    z-index: 10;
+
+    @include isHeaderMobile {
+      height: $nav-height;
+    }
+  }
+
   @include isHeaderMobile {
     padding: 0;
     top: 0;
@@ -21,7 +36,7 @@
     border: none;
     cursor: pointer;
     display: flex;
-    height: $header-height;
+    height: $nav-height;
     justify-content: center;
     left: 0;
     overflow: hidden;
@@ -86,6 +101,7 @@
 
   &__logo {
     margin: auto;
+    width: 11.65rem;
 
     @include isHeaderDesktop {
       margin: unset;
@@ -134,11 +150,15 @@
     transform: translateX(-100%);
 
     @include isHeaderDesktop {
-      height: $header-height;
       position: relative;
       transform: unset;
       width: 100%;
     }
+    .#{$px}-nav__list-container {
+      display: flex;
+      height: $nav-height;
+      padding-right: $nav-height;
+    }
 
     &.#{$px}-header__nav--open {
       transform: translateX(0);
@@ -147,5 +167,12 @@
         transform: unset;
       }
     }
+
+    .#{$px}-nav__item {
+      .#{$px}-link--snwHeaderLink {
+        align-content: center;
+        height: 100%;
+      }
+    }
   }
 }

package/dist/scss/components/Input/_input.scss

@@ -30,7 +30,7 @@ $lg: #{$px}-input--lg;
     border: 1px solid $keyline-gray;
     border-radius: 0.1875rem;
     font-size: 0.8125rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
     padding: 0.5rem;
 
     // width: 100%;
@@ -128,7 +128,6 @@ $lg: #{$px}-input--lg;
 
   .#{$px}-input__validation {
     animation: reveal 0.45s linear forwards;
-    padding-bottom: 0.5rem;
   }
 }
 

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

@@ -27,7 +27,7 @@
       left: 0;
       position: absolute;
       right: 0;
-      top: $header-height;
+      top: $nav-height;
     }
   }
 
@@ -74,7 +74,7 @@
       min-height: 0;
       overflow: hidden;
       position: fixed;
-      top: $header-submenu-top;
+      top: $desktop-header-height;
       width: 100%;
       z-index: -1;
 

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -5,8 +5,11 @@
   justify-content: center;
   list-style: none;
   margin: 0;
+  opacity: 1;
   padding: 0;
-  width: 100%;
+  position: relative;
+  top: 0;
+  transition: top 0.25s ease-in 0.1s;
 
   @include isHeaderMobile {
     flex-direction: column;
@@ -16,7 +19,7 @@
     overflow: auto;
     padding: 0.5rem;
     transform: translateX(0%);
-    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
+    transition: transform 0.3s ease-in 0.1s;
   }
 
   &--expanded {
@@ -28,6 +31,15 @@
     }
   }
 
+  &--offscreen {
+    opacity: 0;
+    top: -100%;
+    transition:
+      top 0.25s ease-in 0.1s,
+      opacity 0.25s ease-in;
+    z-index: 5;
+  }
+
   & .#{$px}-nav__item > & {
     @include isHeaderMobile {
       display: none;

package/dist/scss/components/Navigation/_navigation.scss

@@ -2,22 +2,25 @@
 
 .#{$px}-nav {
   background: $pure-white;
+  flex-wrap: wrap;
   height: 100%;
   overflow: hidden;
   padding-top: 4.5rem;
   position: relative;
-  width: 100%;
 
   @include isHeaderDesktop {
     display: flex;
-    flex-wrap: wrap;
     overflow: visible;
     padding-top: 0;
-    place-content: center right;
+    place-content: center center;
     position: unset;
     width: auto;
   }
 
+  &__list-container {
+    position: relative;
+  }
+
   &--expanded &__label {
     animation: 1s linear fade-in-out forwards;
   }
@@ -61,19 +64,6 @@
     }
   }
 
-  // Zero out default styles for possible children
-  button {
-    appearance: none;
-    background: none;
-    border: none;
-    color: inherit;
-    display: block;
-    margin: 0;
-    padding: 0;
-    text-align: left;
-    width: 100%;
-  }
-
   &__back-btn:hover,
   &__back-btn:focus,
   &__close-btn:hover,

package/dist/scss/components/Search/SearchResults/_searchResults.scss

@@ -2,13 +2,14 @@
 
 .#{$px}-search__results {
   align-items: flex-start;
+  background: $white;
   border-bottom: 1px solid $light-gray;
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
-  padding: 0.75rem 0 1.5625rem;
+  padding: $spacing-sm;
   position: absolute;
-  top: $header-height;
+  top: $nav-height;
   width: 100%;
 
   &-container {
@@ -33,6 +34,13 @@
       }
     }
 
+    .#{$px}-link {
+      &--link {
+        border-bottom: 1px transparent solid;
+        color: $pure-black;
+      }
+    }
+
     p {
       @include pText(0.875rem, $pure-black);
 
@@ -40,22 +48,5 @@
       line-height: 1.25rem;
       text-transform: capitalize;
     }
-
-    &:hover,
-    &:focus,
-    &:focus-within,
-    &:active {
-      p {
-        color: $pure-black;
-        text-decoration: underline;
-      }
-
-      .phillips-link {
-        &--standalone {
-          border-bottom: none !important;
-          color: $pure-black;
-        }
-      }
-    }
   }
 }

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

@@ -1,91 +1,39 @@
 @use '../../allPartials' as *;
 
 .#{$px}-search {
-  align-content: center;
   display: flex;
-  flex-wrap: wrap;
   gap: $spacing-md;
-  height: $header-height;
-  padding: $spacing-sm $spacing-sm;
-  position: relative;
-
-  &__input-status-icon {
-    height: $header-height;
-    position: absolute;
-    right: $spacing-sm;
-    top: 0;
-    width: 2rem;
-    z-index: 4;
-
-    svg {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  .#{$px}-text--heading3 {
-    display: none;
-
-    @include isHeaderMobile {
-      align-self: flex-start;
-      display: flex;
-      flex-wrap: wrap;
-      margin: 0;
-    }
+  height: $nav-height;
+  left: calc(100% - $nav-height);
+  min-width: 2.625rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: left 0.25s ease-in;
+
+  &--active {
+    left: 0;
+    transition: left 0.25s ease-in 0.2s;
   }
 
-  &__button {
-    background: $pure-white;
-    border: none;
-    border-bottom: 1px solid transparent;
-    height: $header-height;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    right: $spacing-sm;
-    top: 0;
-    width: 1.5rem;
-    z-index: 4;
-
-    &--close {
-      border-bottom: 1px solid $pure-black;
-    }
+  &__input-status-icon {
+    border-bottom: 1px solid $pure-black;
+    height: $nav-height;
+    width: $nav-height;
 
     svg {
       height: 100%;
       width: 100%;
     }
-
-    &:hover,
-    &:focus,
-    &:focus-within,
-    &:active {
-      border-bottom: 1px solid $pure-black;
-      cursor: pointer;
-    }
-
-    &__icon {
-      pointer-events: none;
-
-      path {
-        fill: $pure-black;
-      }
-    }
   }
 
   &__form {
     display: flex;
     overflow: hidden;
-    position: absolute;
-    right: $spacing-sm;
-    top: 0; // calc($header-height + $user-management-height);
-    transition: 0.5s ease;
-    width: 0;
-    z-index: 3;
+    width: 100%;
 
     &--active {
       overflow: visible;
-      width: calc(100% - (2 * $spacing-sm));
 
       .#{$px}-search__results {
         display: flex;
@@ -95,16 +43,29 @@
   }
 
   &__content-wrapper {
-    background: $white;
     color: $soft-black;
     display: flex;
-    position: relative;
+    justify-content: flex-end;
     width: 100%;
-    z-index: 3;
 
     .#{$px}-input {
-      &__input {
+      width: 100%;
+
+      &__validation {
+        display: none;
+      }
+
+      &-enter-active input {
         background: $white;
+
+        &::placeholder {
+          opacity: 1;
+          transition: opacity 0.75s ease-in;
+        }
+      }
+
+      &__input {
+        background: transparent;
         border: 0;
         border-bottom: 1px solid $pure-black;
         border-radius: unset;
@@ -115,15 +76,32 @@
         font-size: 0.875rem;
         font-style: normal;
         font-weight: 400;
-        height: $header-height;
+        height: $nav-height;
         line-height: 1.5rem;
         margin: 0;
-        padding: $spacing-sm 0;
+        padding: $spacing-sm 0 $spacing-sm $spacing-sm;
 
         &:focus {
           outline: none;
         }
+
+        &::placeholder {
+          opacity: 0;
+        }
       }
     }
   }
 }
+
+.#{$px}-text--heading3 {
+  display: none;
+
+  @include isHeaderMobile {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    height: $nav-height;
+    margin: 0;
+    padding: 0 $spacing-sm;
+  }
+}

package/dist/scss/components/Search/_searchButton.scss

@@ -0,0 +1,41 @@
+@use '../../allPartials' as *;
+
+.#{$px}-search__button {
+  align-items: center;
+  background: $pure-white;
+  border: none;
+  border-bottom: 1px solid transparent;
+  cursor: pointer;
+  display: flex;
+  height: $nav-height;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: $nav-height;
+
+  &--close {
+    border-bottom: 1px solid $pure-black;
+  }
+
+  svg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active {
+    border-bottom: 1px solid $pure-black;
+  }
+
+  &__icon {
+    pointer-events: none;
+
+    path {
+      fill: $pure-black;
+    }
+  }
+}

package/dist/scss/components/Subscribe/_subscribe.scss

@@ -11,7 +11,7 @@
   }
 
   &__blurb {
-    @include text($body2);
+    @include text($body1);
 
     color: $pure-black;
   }
@@ -21,23 +21,12 @@
   }
 
   &__button {
-    margin: $spacing-sm 0 $spacing-md;
+    margin: 0.25rem 0 $spacing-sm;
+    max-width: 240px;
     width: 100%;
-
-    @include media($size-md) {
-      width: 240px;
-    }
   }
 
   &__privacy {
     @include text($body3);
-
-    color: $pure-black;
-    font-size: 0.75rem;
-    margin-top: $spacing-sm;
-
-    @include media($size-md) {
-      margin-top: $spacing-xl;
-    }
   }
 }

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -33,7 +33,7 @@ function w({
   };
   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;
 }
-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 = function(e, r, t = !1) {
+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);
   return n.length > 0 ? n : null;
 }, R = (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.47.0",
+  "version": "1.49.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -49,7 +49,9 @@
     "dompurify": "^3.1.6",
     "flatpickr": "^4.6.13",
     "html-react-parser": "^5.1.12",
-    "react-modal": "^3.16.1"
+    "react-modal": "^3.16.1",
+    "react-transition-group": "^4.4.5",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -75,6 +77,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.16.3",
+    "@types/react-transition-group": "^4.4.11",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.1",