@phillips/seldon 1.46.0 → 1.48.0

package/dist/scss/_vars.scss

@@ -99,91 +99,99 @@ $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $h
   $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
   $snwHeaderLink;
 
+////////////////////////
+/// Breakpoint TOKENS to be used for min-width comparisons
+///////////////////////
+$breakpoint-sm: 361px;
+$breakpoint-md: 961px;
+$breakpoint-lg: 1401px;
+$breakpoint-xl: 1801px;
+
 ////////////////////////
 /// FONT SIZE TOKENS:
 ///////////////////////
 
 :root {
   --desktop-max-width: 120rem;
-  --quote-size: 1.75rem;
-  --quote-line-height: 2.25rem;
-  --heading-size1: 1.75rem;
-  --heading-line-height-size1: 2rem;
-  --heading-size2: 1.75rem;
-  --heading-line-height-size2: 2rem;
-  --heading-size3: 1.5rem;
-  --heading-line-height-size3: 1.75rem;
-  --heading-size4: 1.25rem;
-  --heading-line-height-size4: 1.5rem;
-  --heading-size5: 1rem;
-  --heading-line-height-size5: 1.25rem;
-  --string-size1: 1.25rem;
-  --string-line-height-size1: 1.5rem;
-  --string-size2: 1rem;
-  --string-line-height-size2: 1.25rem;
-  --string-size3: 0.75rem;
-  --string-line-height-size3: 1rem;
-  --body-size1: 1.25rem;
-  --body-line-height-size1: 1.75rem;
-  --body-size2: 1rem;
-  --body-line-height-size2: 1.5rem;
-  --body-size3: 0.75rem;
-  --body-line-height-size3: 1.25rem;
-  --label-size1: 1.25rem;
-  --label-size2: 1rem;
-  --label-size3: 0.75rem;
-  --link-label-size: 1rem;
-  --link-label-line-height: 1rem;
-  --button-label-size: 1rem;
-  --button-label-line-height: 1.25rem;
-  --badge-label-size: 0.75rem;
-  --badge-label-line-height: 1rem;
+  --quote-size: 1.5rem;
+  --quote-line-height: 2rem;
+  --heading-size1: 1.5rem;
+  --heading-line-height-size1: 1.75rem;
+  --heading-size2: 1.5rem;
+  --heading-line-height-size2: 1.75rem;
+  --heading-size3: 1.25rem;
+  --heading-line-height-size3: 1.5rem;
+  --heading-size4: 1rem;
+  --heading-line-height-size4: 1.25rem;
+  --heading-size5: 0.75rem;
+  --heading-line-height-size5: 1rem;
+  --string-size1: 1rem;
+  --string-line-height-size1: 1.25rem;
+  --string-size2: 0.75rem;
+  --string-line-height-size2: 1rem;
+  --string-size3: 0.5rem;
+  --string-line-height-size3: 0.75rem;
+  --body-size1: 1rem;
+  --body-line-height-size1: 1.5rem;
+  --body-size2: 0.75rem;
+  --body-line-height-size2: 1.25rem;
+  --body-size3: 0.5rem;
+  --body-line-height-size3: 1rem;
+  --label-size1: 1rem;
+  --label-size2: 0.75rem;
+  --label-size3: 0.56rem;
+  --link-label-size: 0.75rem;
+  --link-label-line-height: 0.75rem;
+  --button-label-size: 0.75rem;
+  --button-label-line-height: 1rem;
+  --badge-label-size: 0.5rem;
+  --badge-label-line-height: 0.67rem;
   --snw-header-link-size: 1rem;
   --snw-header-link-line-height: 1.5rem;
   --snw-flyout-link-size: 1rem;
   --snw-flyout-link-line-height: 1.75rem;
 
-  @media (max-width: 960px) {
-    --quote-size: 1.5rem;
-    --quote-line-height: 2rem;
-    --heading-size1: 1.5rem;
-    --heading-line-height-size1: 1.75rem;
-    --heading-size2: 1.5rem;
-    --heading-line-height-size2: 1.75rem;
-    --heading-size3: 1.25rem;
-    --heading-line-height-size3: 1.5rem;
-    --heading-size4: 1rem;
-    --heading-line-height-size4: 1.25rem;
-    --heading-size5: 0.75rem;
-    --heading-line-height-size5: 1rem;
-    --string-size1: 1rem;
-    --string-line-height-size1: 1.25rem;
-    --string-size2: 0.75rem;
-    --string-line-height-size2: 1rem;
-    --string-size3: 0.5rem;
-    --string-line-height-size3: 0.75rem;
-    --body-size1: 1rem;
-    --body-line-height-size1: 1.5rem;
-    --body-size2: 0.75rem;
-    --body-line-height-size2: 1.25rem;
-    --body-size3: 0.5rem;
-    --body-line-height-size3: 1rem;
-    --label-size1: 1rem;
-    --label-size2: 0.75rem;
-    --label-size3: 0.56rem;
-    --link-label-size: 0.75rem;
-    --link-label-line-height: 0.75rem;
-    --button-label-size: 0.75rem;
-    --button-label-line-height: 1rem;
-    --badge-label-size: 0.5rem;
-    --badge-label-line-height: 0.67rem;
+  @media (min-width: $breakpoint-md) {
+    --quote-size: 1.75rem;
+    --quote-line-height: 2.25rem;
+    --heading-size1: 1.75rem;
+    --heading-line-height-size1: 2rem;
+    --heading-size2: 1.75rem;
+    --heading-line-height-size2: 2rem;
+    --heading-size3: 1.5rem;
+    --heading-line-height-size3: 1.75rem;
+    --heading-size4: 1.25rem;
+    --heading-line-height-size4: 1.5rem;
+    --heading-size5: 1rem;
+    --heading-line-height-size5: 1.25rem;
+    --string-size1: 1.25rem;
+    --string-line-height-size1: 1.5rem;
+    --string-size2: 1rem;
+    --string-line-height-size2: 1.25rem;
+    --string-size3: 0.75rem;
+    --string-line-height-size3: 1rem;
+    --body-size1: 1.25rem;
+    --body-line-height-size1: 1.75rem;
+    --body-size2: 1rem;
+    --body-line-height-size2: 1.5rem;
+    --body-size3: 0.75rem;
+    --body-line-height-size3: 1.25rem;
+    --label-size1: 1.25rem;
+    --label-size2: 1rem;
+    --label-size3: 0.75rem;
+    --link-label-size: 1rem;
+    --link-label-line-height: 1rem;
+    --button-label-size: 1rem;
+    --button-label-line-height: 1.25rem;
+    --badge-label-size: 0.75rem;
+    --badge-label-line-height: 1rem;
     --snw-header-link-size: 1rem;
     --snw-header-link-line-height: 1.5rem;
     --snw-flyout-link-size: 1rem;
-    --snw-flyout-link-line-height: 1.75rem;
+    --snw-flyout-link-line-height: 1.875rem;
   }
 
-  @media (min-width: 1801px) {
+  @media (min-width: $breakpoint-xl) {
     --quote-size: 2rem;
     --quote-line-height: 2.5rem;
     --heading-size1: 2rem;
@@ -280,23 +288,23 @@ $snw-flyout-link-line-height: var(--snw-flyout-link-line-height);
 :root {
   --spacing-micro: 0.25rem;
   --spacing-xsm: 0.5rem;
-  --spacing-sm: 1rem;
-  --spacing-md: 2rem;
-  --spacing-lg: 3rem;
-  --spacing-xl: 4rem;
-  --spacing-xxl: 5rem;
-
-  @media (max-width: 960px) {
-    --spacing-micro: 0.25;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1.75rem;
+  --spacing-lg: 2.75rem;
+  --spacing-xl: 3.75rem;
+  --spacing-xxl: 4.75rem;
+
+  @media (min-width: $breakpoint-md) {
+    --spacing-micro: 0.25rem;
     --spacing-xsm: 0.5rem;
-    --spacing-sm: 0.75rem;
-    --spacing-md: 1.75rem;
-    --spacing-lg: 2.75rem;
-    --spacing-xl: 3.75rem;
-    --spacing-xxl: 4.75rem;
+    --spacing-sm: 1rem;
+    --spacing-md: 2rem;
+    --spacing-lg: 3rem;
+    --spacing-xl: 4rem;
+    --spacing-xxl: 5rem;
   }
 
-  @media (min-width: 1801px) {
+  @media (min-width: $breakpoint-xl) {
     --spacing-micro: 0.5rem;
     --spacing-xsm: 0.75rem;
     --spacing-sm: 1.25rem;
@@ -314,6 +322,7 @@ $spacing-md: var(--spacing-md);
 $spacing-lg: var(--spacing-lg);
 $spacing-xl: var(--spacing-xl);
 $spacing-xxl: var(--spacing-xl);
+$spacing-sizes: micro, xsm, sm, md, lg, xl, xxl;
 
 // PADDING
 $padding-micro: var(--spacing-micro);
@@ -334,14 +343,6 @@ $margin-lg: var(--spacing-lg);
 $margin-xl: var(--spacing-xl);
 $margin-xxl: var(--spacing-xxl);
 
-////////////////////////
-/// Breakpoint TOKENS that map to minimum pixels
-///////////////////////
-$breakpoint-sm: 461px;
-$breakpoint-md: 1301px;
-$breakpoint-lg: 1401px;
-$breakpoint-xl: 1801px;
-
 ////////////////////////
 /// max-site-width TOKEN:
 ///////////////////////
@@ -351,6 +352,9 @@ $max-site-width: 1560px;
 /// height Tokens
 ///////////////////////
 $header-height: 42px;
+$nav-height: 3.5rem;
+$top-row-height: 3.75rem;
+$desktop-header-height: calc($nav-height + $top-row-height + 1px);
 $user-management-height: 30px;
 $header-submenu-top: calc($header-height + $user-management-height + 1px);
 $desktop-max-width: var(--desktop-max-width);

package/dist/scss/componentStyles.scss

@@ -20,6 +20,7 @@
 @use 'components/Row/row';
 @use 'components/GridItem/gridItem';
 @use 'components/Search/search';
+@use 'components/Search/searchButton';
 @use 'components/Search/SearchResults/searchResults';
 @use 'components/Social/social';
 @use 'components/SplitPanel/splitPanel';

package/dist/scss/components/Footer/_footer.scss

@@ -8,6 +8,10 @@
   margin: $spacing-lg 0 0;
   max-width: 100%;
 
+  &__logo svg {
+    height: 10px;
+  }
+
   &__links {
     display: flex;
     flex-direction: column;
@@ -16,10 +20,21 @@
     padding: $spacing-lg $spacing-md $spacing-md $spacing-md;
     width: 100%;
 
-    @include media($size-sm) {
-      flex-direction: row;
+    @include media($size-md) {
+      flex-flow: row wrap;
+      gap: $spacing-lg;
       max-width: $desktop-max-width;
       padding: $spacing-lg $spacing-md $spacing-lg $spacing-md;
+
+      .#{$px}-social {
+        flex-basis: 100%; // force this to wrap
+      }
+    }
+
+    @include media($size-lg) {
+      .#{$px}-social {
+        flex-basis: 0;
+      }
     }
 
     div {
@@ -50,12 +65,12 @@
   &-desktop {
     display: none;
 
-    @include media($size-sm) {
+    @include media($size-md) {
       display: block;
     }
   }
 
-  @include media($size-sm) {
+  @include media($size-md) {
     &-mobile {
       display: none;
     }
@@ -84,7 +99,7 @@
         opacity: 1;
         padding: $spacing-sm 0;
 
-        @include media($size-sm) {
+        @include media($size-md) {
           cursor: unset;
         }
 

package/dist/scss/components/Grid/_grid.scss

@@ -14,4 +14,15 @@
       margin: 0 $spacing-xl;
     }
   }
+
+  // Generate unique classes for column and row gaps with all spacings
+  @each $spacing-size in $spacing-sizes {
+    &--column-gap-#{$spacing-size} {
+      column-gap: var(--spacing-#{$spacing-size});
+    }
+
+    &--row-gap-#{$spacing-size} {
+      row-gap: var(--spacing-#{$spacing-size});
+    }
+  }
 }

package/dist/scss/components/GridItem/_gridItem.scss

@@ -27,17 +27,17 @@
   }
 
   @include media($size-sm) {
-    @for $i from 1 through 4 {
+    @for $i from 1 through 2 {
       &--span-sm-#{$i} {
-        @include gridItemColumnSpan($i, 4);
+        @include gridItemColumnSpan($i, 2);
       }
     }
   }
 
   @include media($size-md) {
-    @for $i from 1 through 12 {
+    @for $i from 1 through 6 {
       &--span-md-#{$i} {
-        @include gridItemColumnSpan($i, 12);
+        @include gridItemColumnSpan($i, 6);
       }
     }
   }

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/HeroBanner/_heroBanner.scss

@@ -13,13 +13,14 @@
   padding: 1rem;
   width: 100%;
 
-  @media (max-width: $breakpoint-sm) {
+  @include media($size-md, $type: 'max') {
     align-items: center;
     align-self: stretch;
     background: transparent;
     flex-direction: column;
     gap: 1.875rem;
-    padding: 1.875rem 0.9375rem;
+    min-height: unset;
+    padding: 1.875rem 0 0;
 
     &::after {
       background: var(--background);
@@ -47,7 +48,7 @@
     color: $pure-white;
     text-align: center;
 
-    @media (max-width: $breakpoint-sm) {
+    @include media($size-md, $type: 'max') {
       color: $pure-black;
     }
   }
@@ -72,11 +73,11 @@
     font-size: 0.75rem;
     gap: 1.875rem;
 
-    @media (min-width: $breakpoint-sm) {
+    @include media($size-md) {
       font-size: 0.875rem;
     }
 
-    @media (max-width: $breakpoint-sm) {
+    @include media($size-md, $type: 'max') {
       align-items: center;
       flex-direction: column;
       gap: 1rem;

package/dist/scss/components/LinkList/_linkList.scss

@@ -6,6 +6,10 @@
     grid-column: span 2;
 
     @include media($size-md) {
+      grid-column: span 3;
+    }
+
+    @include media($size-lg) {
       grid-column: span 4;
     }
   }

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;
-        }
-      }
-    }
   }
 }