@phillips/seldon 1.26.1 → 1.27.0

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;

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;

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

@@ -0,0 +1,272 @@
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/typography';
+
+.#{$px}-nav__item {
+  @media (max-width: #{$breakpoint-md - 1}) {
+    border-bottom: 1px solid #ccc;
+    max-width: 320px;
+    width: 100%;
+  }
+
+  @media (min-width: $breakpoint-md) {
+    align-items: center;
+    display: flex;
+    max-width: unset;
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+      .#{$px}-nav__item--label {
+        color: $pure-black;
+      }
+    }
+
+    & & {
+      border-bottom: 1px solid #ccc;
+    }
+  }
+
+  & > button,
+  &--label {
+    /* TODO: Create token to handle these styles dynamically */
+    color: $soft-black;
+    display: block;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    letter-spacing: 0.125rem;
+    line-height: 0.8125rem;
+    text-transform: uppercase;
+    width: 100%;
+
+    @media (max-width: #{$breakpoint-md - 1}) {
+      position: relative;
+    }
+  }
+
+  &--expanded ~ & &--label,
+  &--expanded ~ & > button {
+    @media (max-width: #{$breakpoint-md - 1}) {
+      display: none;
+
+      & > span::after {
+        content: '';
+      }
+    }
+  }
+
+  ul {
+    background: $pure-white;
+    opacity: 0;
+    overflow: hidden scroll;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 307px;
+    z-index: -10;
+  }
+
+  @media (min-width: $breakpoint-md) {
+    ul {
+      align-content: start;
+      background: #f4f4f4;
+      height: auto;
+      left: 0;
+      max-height: 0;
+      min-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      position: fixed;
+      top: 90px;
+      width: 100vw;
+      z-index: -1;
+
+      li {
+        display: flex;
+        justify-content: end;
+        opacity: 0;
+
+        button,
+        a,
+        p {
+          @media (min-width: $breakpoint-md) {
+            border: none;
+          }
+        }
+
+        span {
+          &--badge {
+            display: flex;
+            justify-content: flex-end;
+          }
+
+          &--label {
+            text-wrap: nowrap;
+          }
+        }
+      }
+    }
+
+    &:hover ul,
+    &--expanded:focus-within ul {
+      max-height: 100vh;
+      min-height: 227px;
+      opacity: 1;
+      padding: 3.75rem;
+      z-index: 1;
+
+      li {
+        opacity: 1;
+
+        ul li::after {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  .#{$px}-nav__item-trigger > label::after {
+    @media (max-width: #{$breakpoint-md - 1}) {
+      content: '\203A';
+      display: inline-block;
+      font-size: 1.75rem;
+      font-weight: normal;
+      position: absolute;
+      right: 0;
+      top: 35%;
+      transform: translateY(-50%);
+    }
+
+    @media (min-width: $breakpoint-md) {
+      content: '';
+    }
+  }
+
+  &.#{$px}-nav__item--expanded ul {
+    opacity: 1;
+    z-index: 0;
+  }
+
+  & > a,
+  & > button,
+  & > p {
+    background-color: transparent;
+    display: flex;
+    padding: 0.625rem;
+  }
+
+  @media (max-width: #{$breakpoint-md - 1}) {
+    & > a:focus,
+    & > button:focus,
+    & > p:focus {
+      background-color: #f4f4f4;
+    }
+
+    &:hover {
+      & > a,
+      & > button,
+      & > p {
+        background-color: #f4f4f4;
+      }
+    }
+  }
+
+  @media (min-width: $breakpoint-md) {
+    position: relative;
+
+    &:not(ul ul li):hover::before {
+      content: '';
+      height: 100%;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    &:not(ul ul li) a:focus,
+    &:not(ul ul li) button:focus,
+    &:not(ul ul li) p:focus {
+      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%;
+      opacity: 0;
+      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 {
+      opacity: 1;
+      width: 85%;
+    }
+
+    .#{$px}-nav__list-item {
+      position: static;
+      z-index: 1;
+    }
+
+    & > .#{$px}-nav__list-item-trigger::before {
+      background: #f4f4f4;
+      content: '';
+      height: 2px;
+      left: 0;
+      opacity: 0;
+      position: absolute;
+      top: 100%;
+      width: 100%;
+    }
+
+    &:hover > .#{$px}-nav__item-trigger::before,
+    &:focus > .#{$px}-nav__item-trigger::before {
+      opacity: 1;
+    }
+  }
+}
+
+.#{$px}-nav__list__section {
+  &--large-cta {
+    margin-right: 1rem;
+
+    @media (max-width: #{$breakpoint-md - 1}) {
+      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;
+        }
+
+        @media (max-width: #{$breakpoint-md - 1}) {
+          /* 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/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -0,0 +1 @@
+@import '@phillips/seldon/dist/scss/vars';

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

@@ -0,0 +1,96 @@
+@import '@phillips/seldon/dist/scss/vars';
+
+.#{$px}-nav__list {
+  display: flex;
+  justify-content: right;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+
+  @media (max-width: #{$breakpoint-md - 1}) {
+    flex-direction: column;
+    height: calc(100vh - 102px);
+    justify-content: left;
+    min-width: 330px;
+    overflow: scroll;
+    padding: 0.5rem;
+    transform: translateX(0%);
+    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
+  }
+
+  &--expanded {
+    @media (max-width: #{$breakpoint-md - 1}) {
+      &:not(li ul) {
+        transform: translateX(-50%);
+        width: 200%;
+      }
+    }
+  }
+
+  & .#{$px}-nav__item > & {
+    display: grid;
+    grid-template-columns: 20% 20% 20% 20% 20%;
+
+    @media (max-width: #{$breakpoint-md - 1}) {
+      display: none;
+
+      &--expanded {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+
+  &__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;
+
+      @media (max-width: #{$breakpoint-md - 1}) {
+        margin-top: 2rem;
+      }
+    }
+
+    &--large-cta + &--small-cta {
+      display: grid;
+      grid-column: 5 / span 1;
+      height: fit-content;
+    }
+  }
+
+  > li:not(.#{$px}-user-management) {
+    @media (min-width: $breakpoint-md) {
+      height: 60px;
+    }
+  }
+
+  * {
+    cursor: pointer;
+  }
+}