@duetds/components 10.0.0-alpha.8 → 10.0.0

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -4,24 +4,28 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   width: 100%;
+  pointer-events: none;
+}
+:host * {
+  pointer-events: auto;
 }
 
 .duet-menu-bar {
@@ -129,6 +133,32 @@
   width: 0;
   height: 0;
 }
+.duet-menu-bar .container duet-logo.large,
+.duet-menu-bar .container duet-logo.only-symbol {
+  display: none;
+}
+.duet-menu-bar .container.with-info-text duet-logo.medium {
+  display: none;
+}
+.duet-menu-bar .container.with-info-text duet-logo.only-symbol {
+  display: block;
+}
+@media (min-width: 48em) {
+  .duet-menu-bar .container.with-info-text duet-logo.medium {
+    display: block;
+  }
+  .duet-menu-bar .container.with-info-text duet-logo.only-symbol {
+    display: none;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-menu-bar .container duet-logo.medium {
+    display: none;
+  }
+  .duet-menu-bar .container duet-logo.large {
+    display: block;
+  }
+}
 @media (min-width: 62em) {
   .duet-menu-bar .container {
     height: 5rem;
@@ -150,13 +180,26 @@
   height: 100%;
 }
 .duet-menu-bar .container > :first-child {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   justify-content: flex-start;
+  width: auto;
+  height: 40px;
+}
+@media (min-width: 76.25em) {
+  .duet-menu-bar .container > :first-child {
+    height: 48px;
+  }
+}
+.duet-menu-bar .container > :first-child:has(.duet-logo-info-text) {
+  flex-grow: 8;
+}
+.duet-menu-bar .container > :first-child:has(.duet-logo-info-text) duet-paragraph {
+  max-height: 100%;
 }
 .duet-menu-bar .container > :last-child {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   justify-content: flex-end;
 }
 .duet-menu-bar .container ::slotted(*) {
@@ -165,6 +208,34 @@
   justify-content: center;
   height: 100%;
 }
+.duet-menu-bar .container .duet-logo-info-text {
+  max-height: 2.8875rem;
+  padding-left: 16px;
+  margin-left: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  color: rgb(62, 84, 102);
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  border-left: 1px solid rgb(212, 223, 229);
+}
+.duet-menu-bar .container .duet-logo-info-text.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(71, 78, 101);
+  border-left-color: rgb(222, 224, 228);
+}
+@media (min-width: 48em) {
+  .duet-menu-bar .container .duet-logo-info-text {
+    max-height: 3.3rem;
+    font-size: 1rem;
+  }
+}
 .duet-menu-bar.duet-theme-turva {
   background: rgb(255, 255, 255);
   box-shadow: 0 2px 6px 0 rgba(23, 28, 58, 0.07);
@@ -174,6 +245,26 @@
     box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1);
   }
 }
+.duet-menu-bar.duet-menu-bar-slim .container duet-logo.medium {
+  display: block;
+}
+.duet-menu-bar.duet-menu-bar-slim .container duet-logo.large {
+  display: none;
+}
+.duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.medium {
+  display: none;
+}
+.duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.only-symbol {
+  display: block;
+}
+@media (min-width: 48em) {
+  .duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.medium {
+    display: block;
+  }
+  .duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.only-symbol {
+    display: none;
+  }
+}
 @media (min-width: 62em) {
   .duet-menu-bar.duet-menu-bar-slim .container {
     height: 4rem;
@@ -200,4 +291,15 @@
 .duet-theme-turva .right {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .center {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .right {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-logo-info-text {
+  color: rgb(53, 79, 101);
+  border-left-color: rgb(212, 221, 226);
 }

package/lib/collection/components/duet-menu-bar/duet-menu-bar.js

@@ -1,7 +1,6 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large, media_query_xx_large } from "@duetds/tokens/lib/tokens.json";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { getLanguage } from "../../utils/language-utils";
@@ -11,15 +10,34 @@ import { getLanguage } from "../../utils/language-utils";
  */
 export class DuetMenuBar {
     constructor() {
+        this.previousYScroll = 0;
+        this.hidden = false;
+        this.onBottom = false;
+        this.logoSize = "large";
+        this.leftMoreVisible = false;
+        this.rightMoreVisible = false;
+        this.centerSlotUsed = false;
+        this.mediaQueryMediumMatches = false;
         /**
-         * Own Properties.
+         * Theme.
          */
-        this.mql = [
-            window.matchMedia(media_query_large.replace(/'/g, "")),
-            window.matchMedia(media_query_xx_large.replace(/'/g, "")),
-        ];
-        this.boundMqlFunctions = [];
-        this.previousYScroll = 0;
+        this.theme = "";
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Logo.
+         */
+        this.logo = true;
+        /**
+         * Makes the menu bar hide on top of the window when page is scrolled down
+         * Should be used only with sticky navigation.
+         */
+        this.hideOnScroll = false;
         this.scrollbarCheck = () => {
             this.leftMoreVisible = this.container.scrollLeft > 0;
             this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
@@ -46,15 +64,6 @@ export class DuetMenuBar {
             const centerSlot = this.element.querySelector('[slot="center"]');
             this.centerSlotUsed = !!centerSlot;
         };
-        this.changeLogoSize = () => {
-            this.checkCenterSlot();
-            if (this.mql[1].matches && this.centerSlotUsed) {
-                this.logoSize = "large";
-            }
-            else {
-                this.logoSize = "medium";
-            }
-        };
         this.handleLogoClick = (e) => {
             this.duetEvent.emit({
                 name: "logoClick",
@@ -65,19 +74,6 @@ export class DuetMenuBar {
                 originalEvent: e,
             });
         };
-        this.hidden = false;
-        this.onBottom = false;
-        this.logoSize = "large";
-        this.leftMoreVisible = false;
-        this.rightMoreVisible = false;
-        this.centerSlotUsed = false;
-        this.theme = "";
-        this.language = getLanguage();
-        this.logo = true;
-        this.logoHref = undefined;
-        this.logoLinkAccessibleLabel = undefined;
-        this.accessibleLabel = undefined;
-        this.hideOnScroll = false;
     }
     checkScroll() {
         if (!this.hideOnScroll) {
@@ -111,26 +107,8 @@ export class DuetMenuBar {
         inheritGlobalTheme(this);
     }
     connectedCallback() {
-        this.changeLogoSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeLogoSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
         this.checkCenterSlot();
     }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     componentDidLoad() {
         if (Build.isServer || Build.isTesting) {
             return;
@@ -154,14 +132,17 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '2806e546f0b4823b180688e24a1841b9aafd6774' }, h("nav", { key: 'c45eb60c35664a8ac5dced9832ee63208b8c7225', class: {
+        return (h(Host, { key: '9f357dd163db230760ba15408c721b345619e369' }, h("nav", { key: '515afdd6ce472b843bb59ab038fa87b76158743d', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'b6a16bce29e1b81e6502e714683e15a279e7c662', class: "top" }), h("div", { key: '1ae700211398deb7992c463fe99999d087d2639e', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '6c3dc654cdd3ab0e60dffe0831369aa746bc856e' }, h("duet-logo", { key: 'a96f4a5b7c094eacc86257bfbd4a2ee795ac91c9', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'b700b265b6a2d2cf1f549bfa4255311e9b5bf079', class: "list center", role: "list" }, h("div", { key: 'a337cbd6eee413466db04ca5043b0b91f075ddcd', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '24f82b638b9b7c8e303457b942d2af2c7ca5b44a', name: "center" }), h("div", { key: '61536a9392b37f03efafab4b6e377257e105bc26', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '29ebefa1b48bb02fe52ea04a1ac0a78ca4909bd3', class: "list right", role: "list" }, h("slot", { key: 'aca152186c8f2cb25f0a85bf5cb27cb5f3cc7317', name: "right" }))), h("div", { key: '657155788a9aab9cc1d29ccc22bc9e982e089d77', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'd19d82b1e1c35dd8f0ac72fc3625058f939d2b66', class: "top" }), h("div", { key: '8bd01db2edc2ab2c43e931e07288e252a6838abc', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '28a65925e1aa7a73822e398a0aaa705de521cc66' }, h("duet-logo", { key: 'f7a068293211c3e3a7c091a084ecf4e7b3c2317c', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'dcb75e146d612870f0b65295df9f33a2be699d29', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '675cb30c9aaa18f8352d2c8d84978bb291f2337d', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: '48cd2679315bb52d535c58b1b54831bcc1120bd4', class: {
+                "duet-logo-info-text": true,
+                "duet-theme-turva": this.theme === "turva",
+            } }, this.logoInfoText)))), h("div", { key: '0cc0ebfc6fe8b9582f8677ca8eba79c7fb102a97', class: "list center", role: "list" }, h("div", { key: '8ed1c963529c2ad79182293ac831fc2a5c4ba308', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'c997b17308d679e6364b79e9549600ea88307ebe', name: "center" }), h("div", { key: 'e4d05f0c17fe62eb12a4708237703d32cb8ac339', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '438911a93d2bbcfd6a1084c095611bc031636313', class: "list right", role: "list" }, h("slot", { key: 'd8b922aca72f608f7acd42e29742efa50d0b2343', name: "right" }))), h("div", { key: 'cd333a535ef8eac9c224cd6ebc6a2a4145ba20bd', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +160,7 @@ export class DuetMenuBar {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -199,12 +181,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -231,12 +213,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "logo": {
                 "type": "boolean",
+                "attribute": "logo",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -251,12 +233,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "logoHref": {
                 "type": "string",
+                "attribute": "logo-href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -271,11 +253,11 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-href",
                 "reflect": false
             },
             "logoLinkAccessibleLabel": {
                 "type": "string",
+                "attribute": "logo-link-accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -290,11 +272,30 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-link-accessible-label",
+                "reflect": false
+            },
+            "logoInfoText": {
+                "type": "string",
+                "attribute": "logo-info-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional information text to show next to the logo. Show only when the center slot is empty."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -309,11 +310,11 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "hideOnScroll": {
                 "type": "boolean",
+                "attribute": "hide-on-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -328,7 +329,6 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-on-scroll",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -341,7 +341,8 @@ export class DuetMenuBar {
             "logoSize": {},
             "leftMoreVisible": {},
             "rightMoreVisible": {},
-            "centerSlotUsed": {}
+            "centerSlotUsed": {},
+            "mediaQueryMediumMatches": {}
         };
     }
     static get events() {

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -39,11 +39,14 @@
   cursor: pointer;
 }
 .duet-menu-bar-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-button .menu-bar-button-icon {
   width: 20px;
@@ -75,4 +78,10 @@
   .duet-menu-bar-button:hover.duet-theme-turva {
     color: rgb(198, 12, 48);
   }
+}
+
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-button.duet-theme-turva:hover {
+    color: rgb(230, 23, 64);
+  }
 }