@phillips/seldon 1.26.2 → 1.28.0

package/dist/index.js

@@ -1,63 +1,77 @@
-import { PaddingTokens as t, defaultYear as r, emailValidation as a, generatePaddingClassName as f, getCommonProps as s, noOp as p, px as d, useNormalizedInputProps as l } from "./utils/index.js";
+import { PaddingTokens as o, defaultYear as r, emailValidation as a, generatePaddingClassName as f, getCommonProps as s, noOp as m, px as p, useNormalizedInputProps as d } from "./utils/index.js";
 import { default as u } from "./pages/Page.js";
-import { default as i } from "./components/Button/Button.js";
+import { default as x } from "./components/Button/Button.js";
 import { default as g } from "./components/IconButton/IconButton.js";
 import { default as S } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as k } from "./components/Footer/Footer.js";
-import { Grid as B } from "./components/Grid/Grid.js";
-import { default as V } from "./components/Header/Header.js";
-import { default as w } from "./components/HeroBanner/HeroBanner.js";
-import { default as T } from "./components/Input/Input.js";
-import { default as H } from "./components/Link/Link.js";
-import { LinkVariants as y } from "./components/Link/utils.js";
-import { default as A } from "./components/LinkBlock/LinkBlock.js";
-import { default as F } from "./components/LinkList/LinkList.js";
-import { default as O } from "./components/Row/Row.js";
-import { default as Y } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as j } from "./components/GridItem/types.js";
-import { default as v } from "./components/Select/Select.js";
-import { default as J } from "./components/SplitPanel/SplitPanel.js";
-import { default as Q } from "./components/Subscribe/Subscribe.js";
-import { SubscriptionState as W } from "./components/Subscribe/types.js";
-import { default as Z } from "./components/Social/Social.js";
-import { default as $ } from "./components/ViewingsList/ViewingsList.js";
-import { default as oe } from "./components/Modal/Modal.js";
-import { default as re } from "./components/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as fe } from "./components/Text/types.js";
-import { default as pe } from "./components/Text/Text.js";
+import { default as I } from "./components/Footer/Footer.js";
+import { Grid as N } from "./components/Grid/Grid.js";
+import { default as B } from "./components/Header/Header.js";
+import { default as v } from "./components/Navigation/Navigation.js";
+import { default as b } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as G } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import { default as H } from "./components/Navigation/NavigationList/NavigationList.js";
+import { default as h } from "./components/HeroBanner/HeroBanner.js";
+import { default as z } from "./components/Input/Input.js";
+import { default as E } from "./components/Link/Link.js";
+import { LinkVariants as O } from "./components/Link/utils.js";
+import { default as U } from "./components/LinkBlock/LinkBlock.js";
+import { default as j } from "./components/LinkList/LinkList.js";
+import { default as D } from "./components/Row/Row.js";
+import { default as K } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as W } from "./components/GridItem/types.js";
+import { default as Z } from "./components/Search/Search.js";
+import { default as $ } from "./components/Select/Select.js";
+import { default as te } from "./components/SplitPanel/SplitPanel.js";
+import { default as re } from "./components/Subscribe/Subscribe.js";
+import { SubscriptionState as fe } from "./components/Subscribe/types.js";
+import { default as me } from "./components/Social/Social.js";
+import { default as de } from "./components/ViewingsList/ViewingsList.js";
+import { default as ue } from "./components/Modal/Modal.js";
+import { default as xe } from "./components/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as ge } from "./components/Text/types.js";
+import { default as Se } from "./components/Text/Text.js";
+import { default as Ie } from "./components/UserManagement/UserManagement.js";
+import { SupportedLanguages as Ne } from "./types/commonTypes.js";
 export {
-  i as Button,
+  x as Button,
   S as ErrorBoundary,
-  k as Footer,
-  B as Grid,
-  Y as GridItem,
-  j as GridItemAlign,
-  V as Header,
-  w as HeroBanner,
+  I as Footer,
+  N as Grid,
+  K as GridItem,
+  W as GridItemAlign,
+  B as Header,
+  h as HeroBanner,
   g as IconButton,
-  T as Input,
-  H as Link,
-  A as LinkBlock,
-  F as LinkList,
-  y as LinkVariants,
-  oe as Modal,
-  t as PaddingTokens,
+  z as Input,
+  E as Link,
+  U as LinkBlock,
+  j as LinkList,
+  O as LinkVariants,
+  ue as Modal,
+  v as Navigation,
+  b as NavigationItem,
+  G as NavigationItemTrigger,
+  H as NavigationList,
+  o as PaddingTokens,
   u as Page,
-  O as Row,
-  v as Select,
-  Z as Social,
-  J as SplitPanel,
-  re as StatefulViewingsList,
-  Q as Subscribe,
-  W as SubscriptionState,
-  pe as Text,
-  fe as TextVariants,
-  $ as ViewingsList,
+  D as Row,
+  Z as Search,
+  $ as Select,
+  me as Social,
+  te as SplitPanel,
+  xe as StatefulViewingsList,
+  re as Subscribe,
+  fe as SubscriptionState,
+  Ne as SupportedLanguages,
+  Se as Text,
+  ge as TextVariants,
+  Ie as UserManagement,
+  de as ViewingsList,
   r as defaultYear,
   a as emailValidation,
   f as generatePaddingClassName,
   s as getCommonProps,
-  p as noOp,
-  d as px,
-  l as useNormalizedInputProps
+  m as noOp,
+  p as px,
+  d as useNormalizedInputProps
 };

package/dist/pages/Page.js

@@ -1,58 +1,42 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import * as n from "react";
-import a from "../components/Header/Header.js";
-const h = () => {
-  const [r, t] = n.useState();
-  return /* @__PURE__ */ o("article", { children: [
-    /* @__PURE__ */ e(
-      a,
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+const r = () => /* @__PURE__ */ e("article", { children: /* @__PURE__ */ o("section", { className: "storybook-page", children: [
+  /* @__PURE__ */ e("h2", { children: "Pages in Storybook" }),
+  /* @__PURE__ */ o("p", { children: [
+    "We recommend building UIs with a",
+    " ",
+    /* @__PURE__ */ e("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e("strong", { children: "component-driven" }) }),
+    " ",
+    "process starting with atomic components and ending with pages."
+  ] }),
+  /* @__PURE__ */ e("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
+  /* @__PURE__ */ o("ul", { children: [
+    /* @__PURE__ */ e("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
+    /* @__PURE__ */ e("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
+  ] }),
+  /* @__PURE__ */ o("p", { children: [
+    "Get a guided tutorial on component-driven development at",
+    " ",
+    /* @__PURE__ */ e("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }),
+    ". Read more in the",
+    " ",
+    /* @__PURE__ */ e("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }),
+    "."
+  ] }),
+  /* @__PURE__ */ o("div", { className: "tip-wrapper", children: [
+    /* @__PURE__ */ e("span", { className: "tip", children: "Tip" }),
+    " Adjust the width of the canvas with the",
+    " ",
+    /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e(
+      "path",
       {
-        user: r,
-        onLogin: () => t({ name: "Jane Doe" }),
-        onLogout: () => t(void 0),
-        onCreateAccount: () => t({ name: "Jane Doe" })
+        d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
+        id: "a",
+        fill: "#999"
       }
-    ),
-    /* @__PURE__ */ o("section", { className: "storybook-page", children: [
-      /* @__PURE__ */ e("h2", { children: "Pages in Storybook" }),
-      /* @__PURE__ */ o("p", { children: [
-        "We recommend building UIs with a",
-        " ",
-        /* @__PURE__ */ e("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e("strong", { children: "component-driven" }) }),
-        " ",
-        "process starting with atomic components and ending with pages."
-      ] }),
-      /* @__PURE__ */ e("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
-      /* @__PURE__ */ o("ul", { children: [
-        /* @__PURE__ */ e("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
-        /* @__PURE__ */ e("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
-      ] }),
-      /* @__PURE__ */ o("p", { children: [
-        "Get a guided tutorial on component-driven development at",
-        " ",
-        /* @__PURE__ */ e("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }),
-        ". Read more in the",
-        " ",
-        /* @__PURE__ */ e("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }),
-        "."
-      ] }),
-      /* @__PURE__ */ o("div", { className: "tip-wrapper", children: [
-        /* @__PURE__ */ e("span", { className: "tip", children: "Tip" }),
-        " Adjust the width of the canvas with the",
-        " ",
-        /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e(
-          "path",
-          {
-            d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
-            id: "a",
-            fill: "#999"
-          }
-        ) }) }),
-        "Viewports addon in the toolbar"
-      ] })
-    ] })
-  ] });
-};
+    ) }) }),
+    "Viewports addon in the toolbar"
+  ] })
+] }) });
 export {
-  h as default
+  r as default
 };

package/dist/scss/_vars.scss

@@ -219,7 +219,7 @@ $margin-xl: var(--spacing-xl);
 /// Breakpoint TOKENS that map to minimum pixels
 ///////////////////////
 $breakpoint-sm: 461px;
-$breakpoint-md: 961px;
+$breakpoint-md: 1301px;
 $breakpoint-lg: 1401px;
 $breakpoint-xl: 1801px;
 

package/dist/scss/components/Button/_button.scss

@@ -1,6 +1,6 @@
-@import '../../vars';
-@import '../../typography';
-@import '../../utils';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/typography';
+@import '@phillips/seldon/dist/scss/utils';
 
 .#{$px}-button {
   @include bodyText;

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -1,7 +1,7 @@
 /* stylelint-disable selector-class-pattern */
 @import 'flatpickr/dist/flatpickr.css';
-@import '../../vars';
-@import '../../typography';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/typography';
 
 .flatpickr-calendar {
   @include DistinctText;

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

@@ -1,7 +1,7 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../type';
-@import '../../typography';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
+@import '@phillips/seldon/dist/scss/type';
+@import '@phillips/seldon/dist/scss/typography';
 
 .#{$px}-footer {
   background-color: $off-white;

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

@@ -1,5 +1,5 @@
-@import '../../vars';
-@import '../../utils';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
 
 .#{$px}-grid {
   @include gridContainer(false);

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import '../../_utils';
+@import '@phillips/seldon/dist/scss/_utils';
 
 @mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
   grid-column: span $span;

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

@@ -1,32 +1,152 @@
-.storybook-header {
+@import '@phillips/seldon/dist/scss/vars';
+
+.#{$px}-header {
   align-items: center;
+  background-color: $white;
   border-bottom: 1px solid rgba(0, 0, 0, 10%);
   display: flex;
-  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  justify-content: space-between;
-  padding: 15px 20px;
-}
+  height: 60px;
+  padding: 0 $spacing-md;
+  position: fixed;
+  top: 30px;
+  width: 100vw;
 
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
+  @media (max-width: #{$breakpoint-md - 1}) {
+    top: 0;
+  }
 
-.storybook-header h1 {
-  display: inline-block;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  vertical-align: top;
-}
+  &__toggle-btn {
+    align-items: center;
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    height: 60px;
+    justify-content: center;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    transition: background-color 0.25s;
+    width: 60px;
+    z-index: 1;
 
-.storybook-header button + button {
-  margin-left: 10px;
-}
+    @media (min-width: $breakpoint-md) {
+      display: none;
+    }
+
+    span {
+      background-color: $dark-gray;
+      color: transparent;
+      display: block;
+      height: 2px;
+      position: relative;
+      transition: background-color 0.25s ease 0.5s;
+      width: 1.65rem;
+
+      &::before,
+      &::after {
+        background-color: $dark-gray;
+        content: '';
+        display: block;
+        height: 2px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        transition: transform 0.25s ease 0.25s;
+        width: 1.65rem;
+      }
+
+      &::before {
+        transform: translateY(-8px);
+      }
+
+      &::after {
+        transform: translateY(8px);
+      }
+    }
+
+    &.#{$px}-header__toggle-btn--open span {
+      background: transparent;
+      transition: background-color 0.25s ease 0.1s;
+
+      &::before {
+        transform: rotate(45deg);
+      }
+
+      &::after {
+        transform: rotate(-45deg);
+      }
+    }
+
+    &:hover {
+      background-color: $off-white;
+    }
+  }
+
+  &__logo {
+    margin: auto;
+
+    @media (min-width: $breakpoint-md) {
+      margin: unset;
+    }
+  }
+
+  &__overlay {
+    background-color: rgba(0, 0, 0, 50%);
+    height: 0;
+    inset: 0;
+    opacity: 0;
+    position: fixed;
+    transition: opacity 0.5s ease-in-out;
+    width: 100%;
+    z-index: -1;
+
+    &--active {
+      display: block;
+      height: 100%;
+      opacity: 1;
+
+      @media (min-width: #{$breakpoint-md - 1}) {
+        display: none;
+      }
+
+      & ~ .#{$px}-header__nav {
+        z-index: 1;
+      }
+      & ~ .#{$px}-header__toggle-btn {
+        z-index: 2;
+      }
+
+      & ~ .#{$px}-search {
+        .#{$px}-search__button {
+          z-index: -1;
+        }
+      }
+    }
+  }
+
+  &__nav {
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    transform: translateX(-100%);
+
+    @media (min-width: $breakpoint-md) {
+      height: 60px;
+      position: relative;
+      transform: unset;
+      width: 100%;
+    }
+
+    &.#{$px}-header__nav--open {
+      transform: translateX(0);
 
-.storybook-header .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
+      @media (min-width: $breakpoint-md) {
+        transform: unset;
+      }
+    }
+  }
 }

package/dist/scss/components/HeroBanner/_heroBanner.scss

@@ -1,4 +1,4 @@
-@import '../../vars';
+@import '@phillips/seldon/dist/scss/vars';
 
 .#{$px}-hero-banner {
   align-items: center;
@@ -22,7 +22,7 @@
     gap: 1.875rem;
     padding: 1.875rem 0.9375rem;
 
-    &::before {
+    &::after {
       background: var(--background);
       background-position: center center;
       background-repeat: no-repeat;

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

@@ -1,5 +1,5 @@
-@import '../../vars';
-@import '../../utils';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
 
 $md: #{$px}-input--md;
 $lg: #{$px}-input--lg;

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

@@ -1,12 +1,12 @@
-@import '../../type';
+@import '@phillips/seldon/dist/scss/type';
 
 .#{$px}-link {
   color: $cta-blue;
   text-decoration: none;
   white-space: nowrap;
 
-  &:hover:not(&--list),
-  &:focus:not(&--list) {
+  &:hover:not(&--list, &--navMain, &--navLinkLg, &--navLinkSm),
+  &:focus:not(&--list, &--navMain, &--navLinkLg, &--navLinkSm) {
     @include underline;
   }
 
@@ -25,4 +25,78 @@
   &--list {
     color: $soft-black;
   }
+
+  &--email {
+    @include text($email);
+  }
+
+  &--navMain {
+    .#{$px}-nav__item--label {
+      color: $soft-black;
+      text-align: center;
+    }
+  }
+
+  &--navLinkSm {
+    color: $soft-black;
+    justify-content: flex-end;
+
+    &:hover {
+      .#{$px}-nav__item--label {
+        color: $cta-blue;
+      }
+    }
+
+    .#{$px}-nav__item--label {
+      /* TODO: Create token to handle these styles dynamically */
+      font-size: 0.8125rem;
+      font-weight: 500;
+      letter-spacing: 0.125rem;
+      line-height: 0.8125rem;
+      text-align: right;
+      text-transform: uppercase;
+    }
+  }
+
+  &--navLinkLg {
+    color: $soft-black;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    > span {
+      display: flex;
+      width: 100%;
+    }
+
+    .#{$px}-nav__item--label {
+      /* TODO: Create token to handle these styles dynamically */
+      @include pText(1.0625rem);
+
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-transform: capitalize;
+      text-wrap: nowrap;
+      width: 100%;
+
+      &:hover {
+        color: $cta-blue;
+      }
+
+      @media (max-width: #{$breakpoint-md - 1}) {
+        /* TODO: Create token to handle these styles dynamically */
+        font-size: 0.8rem;
+        font-weight: 400;
+        text-overflow: unset;
+        text-wrap: wrap;
+      }
+    }
+
+    .#{$px}-link--navLinkSm {
+      .#{$px}-nav__item--label {
+        color: $cta-blue;
+      }
+    }
+  }
 }

package/dist/scss/components/LinkBlock/_linkBlock.scss

@@ -1,5 +1,5 @@
-@import '../../type';
-@import '../../vars';
+@import '@phillips/seldon/dist/scss/type';
+@import '@phillips/seldon/dist/scss/vars';
 
 .#{$px}-link-block {
   align-items: center;

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

@@ -1,4 +1,4 @@
-@import '../../_utils';
+@import '@phillips/seldon/dist/scss/_utils';
 
 .#{$px}-link-list {
   &--item {

package/dist/scss/components/Modal/_modal.scss

@@ -1,5 +1,5 @@
-@import '../../vars';
-@import '../../utils';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
 
 .#{$px}-modal {
   background-color: white;