@duetds/components 4.33.2 → 4.34.3

package/lib/collection/components/duet-header/duet-header-dropdown.js

@@ -0,0 +1,27 @@
+/*!
+ * Built with Duet Design System
+ */
+import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
+import { h } from "@stencil/core";
+import { DuetHeaderIcon } from "./duet-header-icon";
+export const DuetHeaderDropdown = (props, _children) => {
+  const accessibleLabel = props.accessibleText ? props.accessibleText : props.label;
+  return (h("div", { class: { ["duet-header-dropdown"]: true, [props.className]: !!props.className } },
+    h("button", { ref: props.toggleRef, "aria-haspopup": "listbox", "aria-controls": props.id, "aria-expanded": props.isOpen ? "true" : "false", "aria-labelledby": `${props.id}-accessible-label`, id: `${props.id}-button`, type: "button", class: {
+        [props.id]: true,
+        "duet-header-dropdown-toggle": true,
+        "duet-header-button": true,
+        active: props.active,
+      }, onClick: props.onToggle },
+      props.icon && h(DuetHeaderIcon, { icon: props.icon }),
+      h("span", { "aria-hidden": "true", id: `${props.id}-label`, class: "duet-header-dropdown-label" }, props.label),
+      props.badge && h("div", { class: "duet-header-badge" }),
+      h("div", { class: "duet-header-caret", "aria-hidden": "true" },
+        h("duet-icon", { margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" })),
+      h("duet-visually-hidden", { id: `${props.id}-accessible-label` }, accessibleLabel)),
+    h("div", { ref: props.itemsRef, tabindex: "-1", role: "menu", id: props.id, "aria-labelledby": `${props.id}-button`, class: {
+        "duet-header-dropdown-content": true,
+        [`${props.id}-items`]: true,
+        active: props.isOpen,
+      } }, _children)));
+};

package/lib/collection/components/duet-header/duet-header-hamburger.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const DuetHeaderHamburger = () => (h("div", { class: "duet-header-hamburger" },
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" })));

package/lib/collection/components/duet-header/duet-header-icon.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const DuetHeaderIcon = (props, _children) => {
+  const iconSize = props.iconSize ? props.iconSize : "x-small";
+  return (h("span", { class: "duet-header-icon" },
+    h("duet-icon", { margin: "none", size: iconSize, icon: props.icon, color: "currentColor" })));
+};

package/lib/collection/components/duet-header/duet-header.css

@@ -38,6 +38,17 @@
   }
 }
 
+@supports (position: -webkit-sticky) {
+  :host(.duet-header-multi-level-desktop-variation) {
+    top: 0;
+  }
+}
+@supports (position: sticky) {
+  :host(.duet-header-multi-level-desktop-variation) {
+    top: 0;
+  }
+}
+
 .duet-header-reserved-space {
   height: 4rem;
 }
@@ -161,7 +172,7 @@
   width: 100%;
   overflow-y: auto;
   visibility: hidden;
-  background: #f5f8fa;
+  background: #f3f9fc;
   opacity: 0;
   -webkit-overflow-scrolling: touch;
 }
@@ -242,50 +253,70 @@
     padding-left: 43.6363636364px;
   }
 }
-.duet-header-items a {
+.duet-header-items .duet-header-item-container {
+  border-bottom: 1px solid #e1e3e6;
+  border-radius: 0;
+}
+@media (min-width: 62em) {
+  .duet-header-items .duet-header-item-container {
+    border: 0;
+  }
+}
+.duet-header-items .duet-header-second-level .duet-header-item {
+  padding: 0 40px;
+  border: 0;
+}
+.duet-header-items .duet-header-second-level .duet-header-button {
+  border: 0;
+}
+.duet-header-items .duet-header-second-level .duet-header-dropdown-content {
+  padding: 0;
+  border: 0;
+}
+.duet-header-items .duet-header-third-level .duet-header-item {
+  padding: 0 75px;
+}
+.duet-header-items .duet-header-item {
   position: relative;
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
-  height: 48px;
   padding: 0 20px;
   overflow: hidden;
   font-size: 1rem;
-  font-weight: 600;
   line-height: 48px;
   color: #00294d;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-bottom: 1px solid #e1e3e6;
-  border-radius: 0;
 }
 @media (min-width: 62em) {
-  .duet-header-items a {
+  .duet-header-items .duet-header-item {
     border-radius: 4px;
   }
 }
-.duet-theme-turva .duet-header-items a {
+.duet-theme-turva .duet-header-items .duet-header-item {
   font-weight: 600;
   color: #171c3a;
   border-color: #e1e3e6;
 }
-.duet-header-items a:hover {
+.duet-header-items .duet-header-item:hover {
   color: #004d80;
 }
-.duet-theme-turva .duet-header-items a:hover {
+.duet-theme-turva .duet-header-items .duet-header-item:hover {
   color: #444445;
 }
-.duet-header-items a:focus {
+.duet-header-items .duet-header-item:focus {
   outline: 0;
 }
-:host(.user-is-tabbing) .duet-header-items a:focus {
+:host(.user-is-tabbing) .duet-header-items .duet-header-item:focus {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-header-items a:focus {
+:host(.user-is-tabbing) .duet-theme-turva .duet-header-items .duet-header-item:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 @media (min-width: 62em) {
-  .duet-header-items a {
+  .duet-header-items .duet-header-item {
     width: auto;
     max-width: 300px;
     padding: 0 12px;
@@ -295,21 +326,21 @@
     border: 0;
   }
 }
-.duet-header-items a.active {
+.duet-header-items .duet-header-item.active {
   color: #0077b3;
   -moz-osx-font-smoothing: auto;
   -webkit-font-smoothing: subpixel-antialiased;
 }
-.duet-theme-turva .duet-header-items a.active {
+.duet-theme-turva .duet-header-items .duet-header-item.active {
   color: #c60c30;
 }
-.duet-header-items a.active:hover {
+.duet-header-items .duet-header-item.active:hover {
   color: #0077b3;
 }
-.duet-theme-turva .duet-header-items a.active:hover {
+.duet-theme-turva .duet-header-items .duet-header-item.active:hover {
   color: #c60c30;
 }
-.duet-header-items a.active::after {
+.duet-header-items .duet-header-item.active::after {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -318,17 +349,26 @@
   content: "";
   background: #0077b3;
 }
-.duet-theme-turva .duet-header-items a.active::after {
+.duet-theme-turva .duet-header-items .duet-header-item.active::after {
   background: #c60c30;
 }
 @media (min-width: 62em) {
-  .duet-header-items a.active::after {
+  .duet-header-items .duet-header-item.active::after {
     top: auto;
     left: 12px;
     width: calc(100% - 24px);
     height: 3px;
   }
 }
+.duet-header-third-level-active .duet-header-items .duet-header-first-level.active {
+  color: #00294d;
+}
+.duet-header-third-level-active .duet-header-items .duet-header-first-level.active::after {
+  display: none;
+}
+.duet-header-third-level-active .duet-header-items .duet-header-second-level button {
+  color: #00294d;
+}
 
 .duet-header-toggle {
   display: flex;
@@ -547,6 +587,36 @@ button {
 .duet-theme-turva .duet-header-button.active::after {
   color: #c60c30;
 }
+.duet-header-utils .duet-header-button.duet-header-logout {
+  align-self: center;
+  justify-content: center;
+  width: auto;
+  height: 2.5rem;
+  margin: 2.25rem 0;
+  font-weight: 600;
+  border: 2px solid #00294d;
+  border-radius: 20rem;
+}
+.duet-theme-turva .duet-header-utils .duet-header-button.duet-header-logout {
+  border-color: #171c3a;
+}
+.duet-header-utils .duet-header-button.duet-header-logout .duet-header-icon {
+  margin-right: 0.5rem;
+}
+.duet-header-utils .duet-header-button.duet-header-logout .duet-header-button-label {
+  font-size: 0.875rem;
+}
+@media (min-width: 62em) {
+  .duet-header-utils .duet-header-button.duet-header-logout {
+    height: 4rem;
+    margin: 0;
+    font-weight: 400;
+    border: 0;
+  }
+  .duet-header-utils .duet-header-button.duet-header-logout .duet-header-icon {
+    margin-right: 0.75rem;
+  }
+}
 
 .duet-header-no-action {
   pointer-events: none;
@@ -635,7 +705,7 @@ button {
   display: inline-block;
   width: 6px;
   height: 6px;
-  margin-top: 16px;
+  margin-top: -1rem;
   margin-left: 5px;
   vertical-align: top;
   background: #f7b228;
@@ -703,7 +773,7 @@ button {
 .duet-header-dropdown .duet-header-dropdown-content {
   display: none;
   padding-bottom: 16px;
-  background: #f5f8fa;
+  background: #f3f9fc;
   border-bottom: 1px solid #e1e3e6;
 }
 .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content {
@@ -717,7 +787,7 @@ button {
     left: 0;
     z-index: 600;
     display: block;
-    min-width: 170px;
+    min-width: 150px;
     padding-top: 16px;
     padding-left: 0;
     visibility: hidden;
@@ -731,6 +801,11 @@ button {
     transform: scale(0.85) translateZ(0) translateY(-20px);
   }
 }
+@media (min-width: 64.0625em) {
+  .duet-header-dropdown .duet-header-dropdown-content {
+    min-width: 170px;
+  }
+}
 .duet-header-dropdown .duet-header-dropdown-content.active {
   display: block;
 }
@@ -741,7 +816,7 @@ button {
     transform: translateZ(0) translateY(0);
   }
 }
-.duet-header-dropdown .duet-header-dropdown-content a {
+.duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item) {
   padding: 3px 8px 4px !important;
   position: relative;
   display: block;
@@ -759,46 +834,47 @@ button {
   cursor: pointer;
   transition: 300ms ease;
 }
-.duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a {
+.duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item) {
   color: #171c3a;
 }
 @media (min-width: 62em) {
-  .duet-header-dropdown .duet-header-dropdown-content a {
+  .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item) {
+    padding-right: 20px !important;
     padding-left: 20px !important;
   }
 }
 @media (min-width: 62em) {
-  .duet-header-dropdown .duet-header-dropdown-content a:hover {
+  .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):hover {
     background: #e6f2f8;
   }
-  .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:hover {
+  .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):hover {
     background: #f9e6ea;
   }
 }
-.duet-header-dropdown .duet-header-dropdown-content a:focus {
+.duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus {
   outline: 0;
 }
-:host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:focus {
+:host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:focus {
+:host(.user-is-tabbing) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
-.duet-header-dropdown .duet-header-dropdown-content a.active {
+.duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
   padding-right: 36px;
   font-weight: 600;
   vertical-align: baseline;
   pointer-events: none;
 }
-.duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a.active {
+.duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
   font-weight: 700;
 }
 @media (min-width: 62em) {
-  .duet-header-dropdown .duet-header-dropdown-content a.active {
+  .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
     color: white;
     background: #0077b3;
   }
-  .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a.active {
+  .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
     background: #c60c30;
   }
 }
@@ -830,13 +906,13 @@ button {
 }
 
 .duet-header-skip {
-  padding: 8px 16px 9px !important;
+  padding: 15px 28px 16px !important;
   position: absolute;
   top: -100%;
   left: -100%;
   z-index: 200;
   width: 1px;
-  min-width: 160px;
+  min-width: 190px;
   height: 1px;
   overflow: hidden;
   font-weight: 600;
@@ -870,4 +946,161 @@ button {
   height: auto;
   outline: 0;
   opacity: 1;
+}
+
+.duet-header-multi-level-desktop {
+  height: 6rem;
+}
+.duet-header-multi-level-desktop .duet-header-top {
+  justify-content: space-between;
+  height: 6rem;
+}
+.duet-header-multi-level-desktop .duet-header-button {
+  height: 6rem;
+}
+.duet-header-multi-level-desktop .logo-and-segment {
+  display: flex;
+  flex-basis: 0;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-top: 1rem;
+}
+.duet-header-multi-level-desktop .logo-and-segment .duet-header-dropdown {
+  z-index: 400;
+  margin-left: 2rem;
+}
+.duet-header-multi-level-desktop .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+  background: #f3f9fc;
+}
+.duet-header-multi-level-desktop .logo-and-segment button {
+  align-items: flex-start;
+  height: 2rem;
+  font-weight: 600;
+  line-height: 1rem;
+}
+.duet-header-multi-level-desktop .logo-and-segment button::before {
+  display: none;
+}
+.duet-header-multi-level-desktop .logo-and-segment .duet-header-caret {
+  top: 25%;
+}
+.duet-header-multi-level-desktop-nav {
+  display: flex;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown {
+  position: static;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle {
+  z-index: 400;
+  padding-right: 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
+  color: #0077b3;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content {
+  z-index: 399;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 4.5rem;
+  padding: 0;
+  background: #f3f9fc;
+  border-top: 1px solid #e1e3e6;
+  border-bottom: 1px solid #e1e3e6;
+  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
+  transition: none;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-width: 6rem;
+  height: 100%;
+  padding: 0 1rem !important;
+  font-weight: 600;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  display: block !important;
+  width: 100%;
+  height: 3px;
+  content: "";
+  background: #0077b3;
+  transition: 300ms ease;
+  transform: translateY(3px);
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
+  font-weight: 600;
+  color: #0077b3;
+  background: none;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active::after {
+  transform: translateY(0);
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a .duet-header-icon {
+  margin: 0;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content .duet-header-badge {
+  position: absolute;
+  margin-top: -2rem;
+  margin-right: -2.25rem;
+}
+.duet-header-multi-level-desktop-nav button::before {
+  display: none;
+}
+.duet-header-multi-level-desktop-nav .duet-header-caret {
+  display: none;
+}
+.duet-header-multi-level-desktop-utils {
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+.duet-header-multi-level-desktop-utils > :last-child::before {
+  display: none;
+}
+.duet-header-multi-level-desktop-utils .duet-header-dropdown {
+  z-index: 400;
+}
+.duet-header-multi-level-desktop-utils .duet-header-dropdown .duet-header-dropdown-content {
+  background: #f3f9fc;
+}
+.duet-header-multi-level-desktop-utils .duet-header-button-label,
+.duet-header-multi-level-desktop-utils .duet-header-dropdown-label {
+  display: none;
+}
+@media (min-width: 64.0625em) {
+  .duet-header-multi-level-desktop-utils .duet-header-button-label,
+.duet-header-multi-level-desktop-utils .duet-header-dropdown-label {
+    display: initial;
+  }
+}
+.duet-header-multi-level-desktop .duet-theme-turva .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+  background: #fcf3f4;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
+  color: #c60c30;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content {
+  background: #fcf3f4;
+  border-color: #e4e4e6;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
+  background: #c60c30;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
+  color: #c60c30;
+  background: none;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-utils .duet-header-dropdown .duet-header-dropdown-content {
+  background: #fcf3f4;
 }