@phillips/seldon 1.40.0 → 1.42.0

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

@@ -1,8 +1,9 @@
 @use '../../../allPartials' as *;
 
 .#{$px}-nav__item {
+  background: $pure-white;
+
   @include isHeaderMobile {
-    border-bottom: 1px solid #ccc;
     max-width: 320px;
     width: 100%;
   }
@@ -11,30 +12,32 @@
     align-items: center;
     display: flex;
     max-width: unset;
+  }
 
-    &:hover,
-    &:focus,
-    &:focus-within {
-      .#{$px}-nav__item--label {
-        color: $pure-black;
-      }
-    }
+  & > button {
+    @include DistinctDisplay;
 
-    & & {
-      border-bottom: 1px solid #ccc;
+    text-transform: uppercase;
+
+    &:hover::after,
+    &:focus::after {
+      background: $pure-black;
+      content: '';
+      height: 1px;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: $header-height;
     }
   }
 
-  & > button,
-  &--label {
-    /* TODO: Create token to handle these styles dynamically */
-    color: $soft-black;
+  & > button {
+    @include DistinctDisplay;
+    @include text($snwHeaderLink);
+
     display: block;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    letter-spacing: 0.125rem;
-    line-height: 0.8125rem;
-    text-transform: uppercase;
+    position: relative;
+    white-space: nowrap;
     width: 100%;
 
     @include isHeaderMobile {
@@ -51,8 +54,9 @@
     }
   }
 
+  // Submenu
   ul {
-    background: $off-white;
+    background: $pure-white;
     overflow: hidden scroll;
     position: absolute;
     right: 0;
@@ -64,20 +68,19 @@
   @include isHeaderDesktop {
     ul {
       align-content: start;
-      background: #f4f4f4;
       height: auto;
       left: 0;
       max-height: 0;
       min-height: 0;
       overflow: hidden;
       position: fixed;
-      top: 90px;
+      top: $header-submenu-top;
       width: 100%;
       z-index: -1;
 
       li {
-        display: flex;
-        justify-content: end;
+        display: inline;
+        white-space: nowrap;
 
         button,
         a,
@@ -86,17 +89,6 @@
             border: none;
           }
         }
-
-        span {
-          &--badge {
-            display: flex;
-            justify-content: flex-end;
-          }
-
-          &--label {
-            text-wrap: nowrap;
-          }
-        }
       }
     }
 
@@ -130,26 +122,28 @@
     z-index: 0;
   }
 
-  & > a,
-  & > button,
-  & > p {
+  & > button {
     background-color: transparent;
     border: 0;
     display: flex;
-    padding: 0.625rem;
+    padding: 0.5rem 0.625rem calc(0.5rem + 2px); // 1 px so that the bottom border of the nav counts as part of the button
   }
 
   @include isHeaderMobile {
+    & > a,
+    & > button {
+      display: flex;
+      padding: 0.5rem 0.625rem;
+    }
+
     & > a:focus,
-    & > button:focus,
-    & > p:focus {
+    & > button:focus {
       background-color: #f4f4f4;
     }
 
     &:hover {
       & > a,
-      & > button,
-      & > p {
+      & > button {
         background-color: #f4f4f4;
       }
     }
@@ -164,26 +158,6 @@
       background: #f4f4f4;
     }
 
-    &:not(ul ul li)::after,
-    &:not(ul ul li a):focus::after,
-    &:not(ul ul li button):focus::after {
-      background: rgb(84, 84, 84);
-      content: '';
-      height: 2px;
-      left: 50%;
-      position: absolute;
-      top: 70%;
-      transform: translateX(-50%);
-      width: 0;
-    }
-
-    &:not(ul ul li):hover::after,
-    &:not(ul ul li) a:focus::after,
-    &:not(ul ul li) button:focus::after,
-    &:not(ul ul li) p:focus::after {
-      width: 85%;
-    }
-
     .#{$px}-nav__list-item {
       position: static;
       z-index: 1;
@@ -202,40 +176,15 @@
 }
 
 .#{$px}-nav__list__section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+
   &--large-cta {
     margin-right: 1rem;
 
     @include isHeaderMobile {
       margin-right: 0;
     }
-    .#{$px}-nav__item {
-      &--badge {
-        /* TODO: Create token to handle these styles dynamically */
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-        font-weight: 400;
-        justify-content: flex-end;
-        letter-spacing: 0.25rem;
-        line-height: 0.8125rem;
-        min-width: 25%;
-        text-align: right;
-        text-transform: uppercase;
-
-        @include pText(0.8125rem, $keyline-gray);
-
-        &:hover {
-          color: $keyline-gray;
-        }
-
-        @include isHeaderMobile {
-          /* TODO: Create token to handle these styles dynamically */
-          align-items: flex-start;
-          font-size: 0.6rem;
-          letter-spacing: 0.125rem;
-          min-width: 35%;
-        }
-      }
-    }
   }
 }

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

@@ -2,7 +2,7 @@
 
 .#{$px}-nav__list {
   display: flex;
-  justify-content: right;
+  justify-content: center;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -29,9 +29,6 @@
   }
 
   & .#{$px}-nav__item > & {
-    display: grid;
-    grid-template-columns: 20% 20% 20% 20% 20%;
-
     @include isHeaderMobile {
       display: none;
 
@@ -43,50 +40,6 @@
   }
 
   &__section {
-    &--large-cta {
-      grid-column: 1 / span 4;
-      height: fit-content;
-
-      .#{$px}-nav__item:first-child {
-        a {
-          padding-top: 0;
-        }
-      }
-
-      .#{$px}-nav__item:last-child {
-        justify-content: flex-end;
-        &:has(> .#{$px}-link--navLinkSm) {
-          border-bottom: none;
-          padding-bottom: 0;
-        }
-        .#{$px}-link--navLinkSm {
-          .#{$px}-nav__item--label {
-            color: $cta-blue;
-          }
-        }
-      }
-    }
-
-    &--small-cta {
-      display: grid;
-      grid-column: 4 / span 2;
-      height: fit-content;
-
-      @include isHeaderMobile {
-        margin-top: 2rem;
-      }
-    }
-
-    &--large-cta + &--small-cta {
-      display: grid;
-      grid-column: 5 / span 1;
-      height: fit-content;
-    }
-  }
-
-  > li:not(.#{$px}-user-management) {
-    @include isHeaderDesktop {
-      height: 60px;
-    }
+    width: 100%;
   }
 }

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

@@ -1,8 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-nav {
-  background: $off-white;
-  color: $soft-black;
+  background: $pure-white;
   height: 100%;
   overflow: hidden;
   padding-top: 4.5rem;
@@ -10,7 +9,6 @@
   width: 100%;
 
   @include isHeaderDesktop {
-    background: $pure-white;
     display: flex;
     flex-wrap: wrap;
     overflow: visible;

package/dist/scss/components/Row/_row.scss

@@ -4,4 +4,8 @@
   // horizontal padding is fixed
   padding-left: $spacing-lg;
   padding-right: $spacing-lg;
+
+  * .#{$px}-text:last-child {
+    margin-bottom: 0;
+  }
 }

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

@@ -0,0 +1,61 @@
+@use '../../../allPartials' as *;
+
+.#{$px}-search__results {
+  align-items: flex-start;
+  border-bottom: 1px solid $light-gray;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 0.75rem 0 1.5625rem;
+  position: absolute;
+  top: $header-height;
+  width: 100%;
+
+  &-container {
+    background: $white;
+    display: flex;
+    flex-direction: column;
+    font-family: Montserrat, sans-serif;
+    gap: $spacing-sm;
+    width: 100%;
+  }
+}
+
+.#{$px}-search {
+  &__result {
+    display: flex;
+
+    &:last-child {
+      border-bottom: none;
+
+      a span p {
+        text-transform: uppercase;
+      }
+    }
+
+    p {
+      @include pText(0.875rem, $pure-black);
+
+      font-weight: 400;
+      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,74 +1,91 @@
 @use '../../allPartials' as *;
 
 .#{$px}-search {
-  align-items: center;
+  align-content: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-md;
   height: $header-height;
-  justify-content: center;
-  padding: 0.47rem;
+  padding: $spacing-sm $spacing-sm;
+  position: relative;
 
-  &__overlay {
-    background-color: rgba(0, 0, 0, 50%);
+  &__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;
-    height: 100%;
-    inset: 0;
-    position: fixed;
-    width: 100%;
-    z-index: 2;
 
-    &--active {
-      display: block;
-      & + .#{$px}-search__button {
-        z-index: 3;
-      }
+    @include isHeaderMobile {
+      align-self: flex-start;
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0;
     }
   }
 
   &__button {
-    background: transparent;
+    background: $pure-white;
     border: none;
-    height: 18px;
+    border-bottom: 1px solid transparent;
+    height: $header-height;
     margin: 0;
     padding: 0;
-    width: 18px;
+    position: absolute;
+    right: $spacing-sm;
+    top: 0;
+    width: 1.5rem;
+    z-index: 4;
 
-    @include isHeaderMobile {
-      border: 2px solid black;
-      border-radius: 50%;
-      height: 35px;
-      padding: 0.125rem;
-      position: absolute;
-      right: 1rem;
-      width: 35px;
+    &--close {
+      border-bottom: 1px solid $pure-black;
     }
 
-    &__icon {
+    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: 0;
-    top: calc($header-height + $user-management-height);
+    right: $spacing-sm;
+    top: 0; // calc($header-height + $user-management-height);
     transition: 0.5s ease;
     width: 0;
     z-index: 3;
 
-    @include isHeaderMobile {
-      top: $header-height;
-    }
-
     &--active {
       overflow: visible;
-      width: 50%;
-
-      @include isHeaderMobile {
-        top: $header-height;
-        width: 100%;
-      }
+      width: calc(100% - (2 * $spacing-sm));
 
       .#{$px}-search__results {
         display: flex;
@@ -77,72 +94,35 @@
     }
   }
 
-  &__input-wrapper {
-    background: #323232;
-    color: $white;
+  &__content-wrapper {
+    background: $white;
+    color: $soft-black;
     display: flex;
-    height: 100px;
     position: relative;
-    z-index: 3;
-
-    &__icon {
-      height: 24px;
-      left: 35px;
-      position: absolute;
-      top: 30px;
-      width: 24px;
-
-      path {
-        fill: $white;
-      }
-    }
-    .#{$px}-input__input {
-      background: #323232;
-      border-bottom: 1px solid white;
-      border-left: 0;
-      border-radius: unset;
-      border-right: 0;
-      border-top: 0;
-      color: white;
-      margin: 1rem 2rem;
-      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;
-    }
+    z-index: 3;
 
-    &:hover {
-      p {
-        color: $cta-blue;
+    .#{$px}-input {
+      &__input {
+        background: $white;
+        border: 0;
+        border-bottom: 1px solid $pure-black;
+        border-radius: unset;
+        color: $pure-black;
+        font-family: DistinctDisplay, sans-serif;
+
+        // Tokenize later
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        height: $header-height;
+        line-height: 1.5rem;
+        margin: 0;
+        padding: $spacing-sm 0;
+
+        &:focus {
+          outline: none;
+        }
       }
     }
   }

package/dist/scss/components/Text/_text.scss

@@ -10,7 +10,7 @@
 
 h1.#{$px}-text,
 blockquote.#{$px}-text {
-  margin-bottom: $spacing-xl;
+  margin-bottom: $spacing-lg;
 }
 
 h2.#{$px}-text {
@@ -19,7 +19,9 @@ h2.#{$px}-text {
 h3.#{$px}-text {
   margin-bottom: $spacing-md;
 }
-h4.#{$px}-text {
+h4.#{$px}-text,
+h5.#{$px}-text,
+h6.#{$px}-text {
   margin-bottom: $spacing-sm;
 }
 p.#{$px}-text {

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

@@ -2,7 +2,6 @@
 
 .#{$px}-user-management {
   align-items: center;
-  background-color: #f4f4f4;
   display: flex;
   height: $user-management-height;
   justify-content: flex-end;
@@ -46,13 +45,6 @@
       @include isHeaderMobile {
         width: 100%;
       }
-
-      & > span {
-        color: $soft-black;
-        font-size: 0.8125rem;
-        font-weight: 500;
-        letter-spacing: 0.125rem;
-      }
     }
   }
 

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

@@ -0,0 +1,17 @@
+@use '../../allPartials' as *;
+
+.#{$px}-video {
+  aspect-ratio: var(--aspect-ratio);
+  display: block;
+  height: auto;
+  position: relative;
+  width: 100%;
+
+  &__iframe {
+    border: 0;
+    height: 100%;
+    inset: 0;
+    position: absolute;
+    width: 100%;
+  }
+}

package/dist/utils/index.d.ts

@@ -14,7 +14,8 @@ export declare enum PaddingTokens {
     sm = "sm",
     md = "md",
     lg = "lg",
-    xl = "xl"
+    xl = "xl",
+    xxl = "xxl"
 }
 export declare const noOp: () => void;
 export interface InputProps {

package/dist/utils/index.js

@@ -1,7 +1,7 @@
 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 i = "phillips", x = ({ id: e, ...n }, a) => {
   const t = d(a);
   return {
     ...n,
@@ -9,10 +9,10 @@ const i = "phillips", v = ({ id: e, ...n }, a) => {
     className: `${i}-${t}`
   };
 };
-var p = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e))(p || {});
-const g = () => {
+var p = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(p || {});
+const v = () => {
 };
-function x({
+function g({
   disabled: e = !1,
   id: n,
   invalid: a = !1,
@@ -47,8 +47,8 @@ export {
   N as encodeURLSearchParams,
   I as findChildrenOfType,
   w as generatePaddingClassName,
-  v as getCommonProps,
-  g as noOp,
+  x as getCommonProps,
+  v as noOp,
   i as px,
-  x as useNormalizedInputProps
+  g as useNormalizedInputProps
 };