@phillips/seldon 1.51.0 → 1.52.0

package/dist/index.js

@@ -1,98 +1,101 @@
-import { PaddingTokens as a, SpacingTokens as f, defaultYear as m, emailValidation as p, encodeURLSearchParams as d, findChildrenOfType as s, generatePaddingClassName as u, getCommonProps as i, noOp as l, px as x, useNormalizedInputProps as n } from "./utils/index.js";
-import { default as c } from "./pages/Page.js";
-import { default as L } from "./components/Button/Button.js";
-import { ButtonVariants as k } from "./components/Button/types.js";
-import { default as P } from "./components/IconButton/IconButton.js";
+import { PaddingTokens as a, SpacingTokens as f, defaultYear as d, emailValidation as p, encodeURLSearchParams as m, findChildrenExcludingTypes as s, findChildrenOfType as l, generatePaddingClassName as u, getCommonProps as i, noOp as n, px as x, useNormalizedInputProps as g } from "./utils/index.js";
+import { default as S } from "./pages/Page.js";
+import { default as I } from "./components/Button/Button.js";
+import { ButtonVariants as B } from "./components/Button/types.js";
+import { default as T } from "./components/IconButton/IconButton.js";
 import { default as N } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as w } from "./components/Footer/Footer.js";
-import { Grid as h } from "./components/Grid/Grid.js";
-import { default as A } from "./components/Header/Header.js";
+import { Grid as v } from "./components/Grid/Grid.js";
+import { default as C } from "./components/Header/Header.js";
 import { default as G } from "./components/Navigation/Navigation.js";
-import { default as D } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as E } from "./components/Navigation/NavigationItem/NavigationItem.js";
 import { default as M } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
 import { default as R } from "./components/Navigation/NavigationList/NavigationList.js";
 import { default as z } from "./components/HeroBanner/HeroBanner.js";
-import { default as F } from "./components/Input/Input.js";
-import { default as j } from "./components/Link/Link.js";
-import { LinkVariants as J } from "./components/Link/types.js";
-import { default as Q } from "./components/LinkBlock/LinkBlock.js";
-import { default as X } from "./components/LinkList/LinkList.js";
-import { default as _ } from "./components/Row/Row.js";
-import { default as ee } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as re } from "./components/GridItem/types.js";
-import { default as ae } from "./components/Search/Search.js";
-import { default as me } from "./components/Select/Select.js";
-import { default as de } from "./components/SplitPanel/SplitPanel.js";
+import { default as Y } from "./components/Input/Input.js";
+import { default as q } from "./components/Link/Link.js";
+import { LinkVariants as K } from "./components/Link/types.js";
+import { default as W } from "./components/LinkBlock/LinkBlock.js";
+import { default as Z } from "./components/LinkList/LinkList.js";
+import { default as $ } from "./components/Row/Row.js";
+import { default as re } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as te } from "./components/GridItem/types.js";
+import { default as fe } from "./components/Search/Search.js";
+import { default as pe } from "./components/Select/Select.js";
+import { default as se } from "./components/SplitPanel/SplitPanel.js";
 import { default as ue } from "./components/Subscribe/Subscribe.js";
-import { SubscriptionState as le } from "./components/Subscribe/types.js";
-import { default as ne } from "./components/Social/Social.js";
-import { default as ce } from "./components/ViewingsList/ViewingsList.js";
-import { default as Le } from "./components/Modal/Modal.js";
-import { default as ke } from "./components/Drawer/Drawer.js";
-import { default as Pe } from "./components/ViewingsList/StatefulViewingsList.js";
+import { SubscriptionState as ne } from "./components/Subscribe/types.js";
+import { default as ge } from "./components/Social/Social.js";
+import { default as Se } from "./components/ViewingsList/ViewingsList.js";
+import { default as Ie } from "./components/Modal/Modal.js";
+import { default as Be } from "./components/Drawer/Drawer.js";
+import { default as Te } from "./components/ViewingsList/StatefulViewingsList.js";
 import { TextVariants as Ne } from "./components/Text/types.js";
 import { default as we } from "./components/Text/Text.js";
-import { default as he } from "./components/Accordion/Accordion.js";
-import { default as Ae } from "./components/Accordion/AccordionItem.js";
+import { default as ve } from "./components/Accordion/Accordion.js";
+import { default as Ce } from "./components/Accordion/AccordionItem.js";
 import { default as Ge } from "./components/UserManagement/UserManagement.js";
-import { AuthState as De } from "./components/UserManagement/types.js";
+import { AuthState as Ee } from "./components/UserManagement/types.js";
 import { SupportedLanguages as Me } from "./types/commonTypes.js";
 import { default as Re } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
 import { default as ze } from "./components/Dropdown/Dropdown.js";
-import { default as Fe } from "./components/Video/Video.js";
+import { default as Ye } from "./components/Video/Video.js";
+import { default as qe } from "./components/LanguageSelector/LanguageSelector.js";
 export {
-  he as Accordion,
-  Ae as AccordionItem,
-  De as AuthState,
+  ve as Accordion,
+  Ce as AccordionItem,
+  Ee as AuthState,
   Re as Breadcrumb,
-  L as Button,
-  k as ButtonVariants,
-  ke as Drawer,
+  I as Button,
+  B as ButtonVariants,
+  Be as Drawer,
   ze as Dropdown,
   N as ErrorBoundary,
   w as Footer,
-  h as Grid,
-  ee as GridItem,
-  re as GridItemAlign,
-  A as Header,
+  v as Grid,
+  re as GridItem,
+  te as GridItemAlign,
+  C as Header,
   z as HeroBanner,
-  P as IconButton,
-  F as Input,
-  j as Link,
-  Q as LinkBlock,
-  X as LinkList,
-  J as LinkVariants,
-  Le as Modal,
+  T as IconButton,
+  Y as Input,
+  qe as LanguageSelector,
+  q as Link,
+  W as LinkBlock,
+  Z as LinkList,
+  K as LinkVariants,
+  Ie as Modal,
   G as Navigation,
-  D as NavigationItem,
+  E as NavigationItem,
   M as NavigationItemTrigger,
   R as NavigationList,
   a as PaddingTokens,
-  c as Page,
-  _ as Row,
-  ae as Search,
-  me as Select,
-  ne as Social,
+  S as Page,
+  $ as Row,
+  fe as Search,
+  pe as Select,
+  ge as Social,
   f as SpacingTokens,
-  de as SplitPanel,
-  Pe as StatefulViewingsList,
+  se as SplitPanel,
+  Te as StatefulViewingsList,
   ue as Subscribe,
-  le as SubscriptionState,
+  ne as SubscriptionState,
   Me as SupportedLanguages,
   we as Text,
   Ne as TextVariants,
   Ge as UserManagement,
-  Fe as Video,
-  ce as ViewingsList,
-  m as defaultYear,
+  Ye as Video,
+  Se as ViewingsList,
+  d as defaultYear,
   p as emailValidation,
-  d as encodeURLSearchParams,
-  s as findChildrenOfType,
+  m as encodeURLSearchParams,
+  s as findChildrenExcludingTypes,
+  l as findChildrenOfType,
   u as generatePaddingClassName,
   i as getCommonProps,
-  l as noOp,
+  n as noOp,
   x as px,
-  n as useNormalizedInputProps
+  g as useNormalizedInputProps
 };

package/dist/scss/_utils.scss

@@ -122,7 +122,7 @@
       }
     }
 
-    @if type == 'max' {
+    @if $type == 'max' {
       @media (max-width: calc($breakpoint-lg - 1px)) {
         @content;
       }
@@ -131,13 +131,13 @@
 
   @if $breakpoint == $size-xl {
     // $breakpoint-xl: 1801px;
-    @if type == 'min' {
+    @if $type == 'min' {
       @media (min-width: $breakpoint-xl) {
         @content;
       }
     }
 
-    @if type == 'max' {
+    @if $type == 'max' {
       @media (max-width: calc($breakpoint-xl - 1px)) {
         @content;
       }
@@ -190,3 +190,13 @@
     @content;
   }
 }
+
+@mixin buttonReset() {
+  button {
+    background: unset;
+    border: 0;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+  }
+}

package/dist/scss/_vars.scss

@@ -343,27 +343,35 @@ $margin-lg: var(--spacing-lg);
 $margin-xl: var(--spacing-xl);
 $margin-xxl: var(--spacing-xxl);
 
+////////////////////////
+/// HEADER TOKENS:
+///////////////////////
+/* stylelint-disable-next-line no-duplicate-selectors */
+:root {
+  --header-height: 75px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+  --search-size: 2.625rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
+
+  @media (min-width: $breakpoint-md) {
+    --header-height: 109px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+  }
+
+  @media (min-width: $breakpoint-xl) {
+    --header-height: 121px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+    --search-size: 2.875rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
+  }
+}
+
 ////////////////////////
 /// max-site-width TOKEN:
 ///////////////////////
 $max-site-width: 1560px;
+$desktop-max-width: var(--desktop-max-width);
 
 ////////////////////////
 /// z-index TOKENS:
 ///////////////////////
 $modal-z-index: 30;
 
-////////////////////////
-/// 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);
-
 ////////////////////////
 /// Our tokens usually support at least 4 sizes.
 ///////////////////////
@@ -375,3 +383,14 @@ $size-xxl: 'xxl';
 $default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
 $drawer-content-transition: 350ms cubic-bezier(0, 0, 0.2, 1);
 $default-overlay-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+
+////////////////////////
+/// Mobile-specific tokens
+///////////////////////
+$mobile-minimum-clickable-area: 44px;
+
+////////////////////////
+/// Header Tokens
+///
+$search-size: var(--search-size);
+$header-height: var(--header-height);

package/dist/scss/componentStyles.scss

@@ -39,3 +39,4 @@
 @use 'components/HTMLParser/htmlParser';
 @use 'components/Dropdown/dropdown';
 @use 'components/Video/video';
+@use 'components/LanguageSelector/languageSelector';

package/dist/scss/components/Accordion/_accordion.scss

@@ -9,6 +9,7 @@
 
 .#{$px}-accordion-item {
   padding: $spacing-sm;
+  width: 100%;
 
   svg {
     max-width: unset;
@@ -86,8 +87,10 @@
 }
 
 .#{$px}-accordion-item-label {
+  align-items: center;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   opacity: 0.75;
 
   &--hoverable {

package/dist/scss/components/Dropdown/_dropdown.scss

@@ -37,6 +37,8 @@
     // following will add additional arrows if list is near edge of viewport
     max-height: var(--radix-select-content-available-height);
     overflow: hidden;
+    position: relative;
+    z-index: 10;
   }
 
   &__scroll-button,

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

@@ -3,61 +3,37 @@
 .#{$px}-header {
   align-items: center;
   background-color: $white;
-  border-bottom: 1px solid rgba(0, 0, 0, 10%);
+  border-bottom: 1px solid $light-gray;
   display: flex;
   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;
-  }
+  z-index: 10;
 
   &__toggle-btn {
     align-items: center;
-    appearance: none;
     background: none;
     border: none;
     cursor: pointer;
     display: flex;
-    height: $nav-height;
+    height: $mobile-minimum-clickable-area;
     justify-content: center;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    transition: background-color 0.25s;
-    width: 60px;
-    z-index: 1;
+    padding: 0;
+    width: $mobile-minimum-clickable-area;
 
     @include isHeaderDesktop {
       display: none;
     }
 
+    /* This is a pseudo icon shown within the button, so we can do fancy transitions */
     span {
       background-color: $dark-gray;
       color: transparent;
       display: block;
       height: 2px;
       position: relative;
-      transition: background-color 0.25s ease 0.5s;
-      width: 1.65rem;
+      transition: background-color 0.25s ease 0.25s;
+      width: 1.5rem;
 
       &::before,
       &::after {
@@ -68,8 +44,8 @@
         left: 0;
         position: absolute;
         top: 0;
-        transition: transform 0.25s ease 0.25s;
-        width: 1.65rem;
+        transition: transform 0.25s ease;
+        width: 1.5rem;
       }
 
       &::before {
@@ -83,7 +59,7 @@
 
     &.#{$px}-header__toggle-btn--open span {
       background: transparent;
-      transition: background-color 0.25s ease 0.1s;
+      transition: background-color 0.25s ease;
 
       &::before {
         transform: rotate(45deg);
@@ -93,78 +69,74 @@
         transform: rotate(-45deg);
       }
     }
-
-    &:hover {
-      background-color: $off-white;
-    }
   }
 
   &__logo {
-    margin: auto;
-    width: 11.65rem;
+    align-self: center;
+
+    svg {
+      height: 24px;
+      width: 100%;
+    }
 
     @include isHeaderDesktop {
-      margin: unset;
+      svg {
+        height: 28px;
+        width: 100%;
+      }
     }
   }
 
-  &__overlay {
-    background-color: rgba(0, 0, 0, 50%);
-    height: 0;
-    inset: 0;
-    opacity: 0;
-    position: fixed;
-    transition: opacity 0.5s ease-in-out;
+  &__top-row {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: $padding-sm $spacing-md;
     width: 100%;
-    z-index: -1;
 
-    &--active {
-      display: block;
-      height: 100%;
-      opacity: 1;
-
-      @include isHeaderDesktop {
-        display: none;
-      }
-
-      & ~ .#{$px}-header__nav {
-        z-index: 1;
-      }
-      & ~ .#{$px}-header__toggle-btn {
-        z-index: 2;
-      }
-
-      & ~ .#{$px}-search {
-        .#{$px}-search__button {
-          z-index: -1;
-        }
-      }
+    /** There are actually two language selectors in the DOM, show this one in desktop */
+    .#{$px}-language-selector {
+      display: none;
     }
   }
 
   &__nav {
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    transform: translateX(-100%);
+    background-color: $pure-white;
+    height: calc(100vh - $header-height);
+    overflow-y: auto;
+    position: relative;
+    z-index: 10;
 
-    @include isHeaderDesktop {
-      position: relative;
-      transform: unset;
-      width: 100%;
+    &--closed {
+      display: none;
     }
     .#{$px}-nav__list-container {
       display: flex;
-      height: $nav-height;
-      padding-right: $nav-height;
+      padding: 0 $spacing-md;
+
+      @include isHeaderDesktop {
+        padding-right: $search-size;
+      }
     }
 
-    &.#{$px}-header__nav--open {
-      transform: translateX(0);
+    @include isHeaderDesktop {
+      display: flex;
+      height: unset;
+      justify-content: center;
+      overflow: visible; // this is needed for the search results
+      position: relative;
+      top: 0;
+      width: 100%;
+
+      div.#{$px}-language-selector {
+        display: none; // hide this one on mobile
+      }
+    }
 
-      @include isHeaderDesktop {
-        transform: unset;
+    .#{$px}-nav__item {
+      .#{$px}-link--snwHeaderLink {
+        align-content: center;
+        height: 100%;
       }
     }
 
@@ -175,4 +147,18 @@
       }
     }
   }
+
+  &__overlay {
+    display: none;
+
+    &--active {
+      background: rgba(0, 0, 0, 60%);
+      display: block;
+      height: 100vh;
+      left: 0;
+      position: absolute;
+      top: $header-height;
+      width: 100%;
+    }
+  }
 }

package/dist/scss/components/LanguageSelector/_languageSelector.scss

@@ -0,0 +1,47 @@
+@use '../../allPartials' as *;
+
+// Mobile version of the language selector mirrors the navigation menu link styles
+.#{$px}-language-selector {
+  display: flex;
+  min-width: 87px; // needed to handle English vs Chinese option.  Arguably this should be determined by the Dropdown component the longest element in the dropdown
+  opacity: 1;
+  padding-bottom: 10rem; // needed for bottom accordion
+  transition: opacity 0.25s ease-in;
+
+  &--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @include isHeaderDesktop {
+    &.#{$px}-accordion {
+      display: none;
+    }
+  }
+
+  &.#{$px}-dropdown {
+    display: none;
+    padding: $padding-lg 0 $padding-xxl;
+
+    button {
+      border: none;
+      box-shadow: unset;
+      justify-content: space-between;
+      outline: none;
+      padding: 0.5rem 0.65rem;
+      text-transform: unset;
+      width: 100%;
+    }
+
+    @include isHeaderDesktop {
+      display: flex;
+      padding: 0;
+
+      button {
+        justify-content: center;
+        padding: 0;
+        width: fit-content;
+      }
+    }
+  }
+}

package/dist/scss/components/Link/_link.scss

@@ -11,10 +11,9 @@
   }
 
   &--email,
-  &--link,
-  &--snwFlyoutLink {
+  &--link {
     &:hover,
-    &:focus {
+    &:focus-visible {
       @include underline($color: $dark-gray);
 
       color: $dark-gray;
@@ -37,7 +36,7 @@
     text-align: center;
 
     &:hover::after,
-    &:focus::after {
+    &:focus-visible::after {
       background: $pure-black;
       bottom: -1px;
       content: '';
@@ -49,6 +48,18 @@
   }
 
   &--snwFlyoutLink {
+    border-bottom: 1px solid transparent;
+
     @include text($snwFlyoutLink);
+
+    &:hover,
+    &:focus-visible {
+      @include underline(
+        $color: $dark-gray,
+        $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
+
+      color: $dark-gray;
+    }
   }
 }

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

@@ -1,6 +1,10 @@
 @use '../../allPartials' as *;
 
 .#{$px}-link-list {
+  @include media($size-sm, $type: max) {
+    max-width: 30rem;
+  }
+
   &--item {
     // mobile first
     grid-column: span 2;