@duetds/components 10.0.0-alpha.9 → 10.0.0

package/lib/collection/components/duet-nav/duet-nav.js

@@ -10,7 +10,14 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
  */
 export class DuetNav {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Makes navigation sticky so it stays on top.
+         * when page is being scrolled. Works only for mobile.
+         */
         this.sticky = false;
     }
     /**
@@ -24,7 +31,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '18c30d07ccac6e0656b4ba4c6feb5ddb07c6b06c' }, h("div", { key: '16eac13a9c78bccfdac8a70aff193d775ec1a1e6', class: { container: true, sticky: this.sticky } }, h("slot", { key: '6b0fbbbab38fb9fc7e634878f424d238f8f6fab4' }), h("slot", { key: 'b6cf57d0876c972a5ccbce533217241277c402bf', name: "mobile" }), h("slot", { key: '2ad38e43fa1db17085c50ba3cfc3423dc0fdd880', name: "desktop" }))));
+        return (h(Host, { key: '524bb027510763efb06f908c78bb6dbc1ff1e24d' }, h("div", { key: '7c86cae3a491c2c568ec09ab7a7dacc935d906be', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'dae33a4dfc1ddd973d4639adc9b711a99bb0256c' }), h("slot", { key: 'ac0da76490e7c39bee65dc53ed368afdecb640a7', name: "mobile" }), h("slot", { key: '5081c449ebbba8d68dec069e18155f8fce9ad87e', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -42,6 +49,7 @@ export class DuetNav {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -62,12 +70,12 @@ export class DuetNav {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "sticky": {
                 "type": "boolean",
+                "attribute": "sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -82,7 +90,6 @@ export class DuetNav {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-notification/duet-notification.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;
   display: block;
   width: 100%;
 }
@@ -36,13 +36,13 @@
   cursor: pointer;
 }
 :host(:first-of-type) .duet-notification {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: var(--notification-border-top-radius, 8px);
+  border-top-right-radius: var(--notification-border-top-radius, 8px);
 }
 :host(:last-of-type) .duet-notification {
   border-bottom: 0;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: var(--notification-border-bottom-radius, 8px);
+  border-bottom-left-radius: var(--notification-border-bottom-radius, 8px);
 }
 .duet-notification.duet-theme-turva {
   color: rgb(23, 28, 58);
@@ -69,11 +69,13 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-notification:focus-within {
+  outline: 2px solid;
+  outline-offset: -2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 1;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-notification-container {
@@ -83,22 +85,11 @@
   border-bottom: 1px solid rgb(212, 223, 229);
 }
 
-.duet-notification-badge-container {
+.duet-indicator-container {
   position: relative;
-  width: 16px;
-}
-
-.duet-notification-badge {
-  position: absolute;
-  top: 6px;
-  left: -2px;
-  width: 8px;
-  height: 8px;
-  background: rgb(0, 119, 179);
-  border-radius: 50%;
-}
-.duet-theme-turva .duet-notification-badge {
-  background: rgb(198, 12, 48);
+  width: 10px;
+  margin-top: 6px;
+  margin-left: 6px;
 }
 
 .duet-notification-content {
@@ -154,4 +145,20 @@
 
 ::slotted(duet-paragraph) {
   margin-bottom: 2px !important;
+}
+
+:host(.duet-theme-turva2) .duet-notification.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  border-bottom-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
+  background: rgb(230, 23, 64);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
+    background: rgb(251, 235, 225);
+  }
 }

package/lib/collection/components/duet-notification/duet-notification.js

@@ -5,19 +5,49 @@ import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
 export class DuetNotification {
     constructor() {
+        /**
+         * The currently active language.
+         * Used for announcing unread notifications to screen readers.
+         * @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();
+        /**
+         * Property to change accessibleLabelUnread defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelUnread when needed
+         */
         this.accessibleLabelUnreadDefaults = {
             en: "Unread",
             fi: "Lukematon",
             sv: "Oläst",
         };
+        /**
+         * Adds accessible label for tooltip that is shown over unread counter
+         * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" }
+         */
         this.accessibleLabelUnread = getLocaleString(this.accessibleLabelUnreadDefaults, this.language);
+        /**
+         * The url to open on notification click.
+         */
         this.url = "#";
+        /**
+         * The date of the notification.
+         */
         this.date = "";
+        /**
+         * Should the notification be visually highlighted?
+         */
         this.highlight = false;
+        /**
+         * Should the link open in a new window?
+         */
         this.external = false;
+        /**
+         * Theme of the notification.
+         */
         this.theme = "";
     }
     /**
@@ -42,12 +72,18 @@ export class DuetNotification {
     async setFocus(options) {
         this.linkElement.focus(options);
     }
+    getAriaLabelText() {
+        const slottedElements = getElementsFromDefaultSlot(this.element);
+        const slottedText = slottedElements.map(e => e.textContent.trim()).join(". ");
+        const indicatorText = this.highlight ? `${this.accessibleLabelUnread}. ` : "";
+        return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
+    }
     render() {
-        return (h("div", { key: '53bf3fb42fabb1085aaa8de5091a92d3f2e2ff2a', role: "listitem", class: {
+        return (h("div", { key: '8497858acf685b75adce100af83521ea62dad249', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'fbe3d967cc547d2af9d278c4932020280f13cbf7', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'adcc72e86dfef46c9236b2ce62c3e6c4ebf09356', class: "duet-notification-container" }, h("div", { key: 'aaf3d1dc837c9e164542046406e7e3420272634c', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '6982bb6d18d19f198c4ac129764a5f9aa7642109', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '49beecb60f8a1bade31c9c1a99808778ae1855df' }, this.accessibleLabelUnread, ":")))), h("div", { key: '5af9a7fc09f3a855d94527067934ea3af667056d', class: "duet-notification-content" }, h("slot", { key: '344506570c443641459719001e49ba16bfefbcb5' })), h("div", { key: '3597fe58bd170ae199f8a1cf0a0b4643b26fca53', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'd055bb5cebbf8d33eb35d193d1bb1fa106c5ec49', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: '37b18aada4bbdcc07fbae2fb2a379e4ce499d1a2', class: "duet-notification-container" }, h("div", { key: 'd82a6a30c51dcbe9fa55d184f9475ee52824c960', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'ba8cf675f5f79738b621bb60be60e955648f72fb', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '7616f1c0b61f842cb19959f8a26d972740d4983c', class: "duet-notification-content" }, h("slot", { key: '3d15bf405f3f7e6bb7b699835882720db81c60ac' })), h("div", { key: '479850eacc300888b148101759908b962db1d24a', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +101,7 @@ export class DuetNotification {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -91,12 +128,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelUnreadDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-label-unread-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -121,6 +158,7 @@ export class DuetNotification {
             },
             "accessibleLabelUnread": {
                 "type": "string",
+                "attribute": "accessible-label-unread",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -138,12 +176,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-unread",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelUnreadDefaults,\n    this.language\n  )"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -158,12 +196,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "date": {
                 "type": "string",
+                "attribute": "date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,12 +216,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "date",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "highlight": {
                 "type": "boolean",
+                "attribute": "highlight",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -198,12 +236,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "highlight",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -218,12 +256,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -244,7 +282,6 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.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;
   display: block;
   width: 100%;
 }
@@ -41,6 +41,7 @@
   height: 48px;
   padding: 0 20px;
   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: 1rem;
   font-weight: 400;
@@ -48,15 +49,25 @@
   line-height: 48px;
   color: rgb(8, 42, 77);
   text-align: left;
-  text-decoration: none;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  text-decoration: none;
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background-color: rgb(255, 255, 255);
   border-bottom: 1px solid rgb(212, 223, 229);
   border-radius: 0;
-  -webkit-appearance: none;
-  appearance: none;
+}
+.duet-drawer-toggle:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-drawer-toggle:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
   .duet-drawer-toggle {
@@ -81,15 +92,6 @@
 .duet-drawer-toggle:active {
   opacity: 0.75;
 }
-.duet-drawer-toggle:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-drawer-toggle: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-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-drawer-toggle:hover {
   color: rgb(0, 75, 129);
 }
@@ -110,8 +112,8 @@
     height: 3px;
     content: "";
     background: rgb(0, 119, 179);
-    transition: 300ms ease;
     transform: translateY(3px);
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-drawer-toggle::after {
     background: rgb(198, 12, 48);
@@ -166,9 +168,9 @@
   margin-left: 8px;
   line-height: normal;
   pointer-events: none;
-  transition: 300ms ease;
   transform: translateY(-50%);
   transform-origin: 50% 50%;
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-drawer-caret {
@@ -184,21 +186,6 @@
   transform: translateY(-50%) rotate(180deg);
 }
 
-.duet-drawer-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: rgb(247, 178, 40);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px #c18b1f;
-}
-.duet-theme-turva .duet-drawer-badge {
-  background: rgb(247, 178, 40);
-}
-
 .duet-drawer-content {
   display: none;
   background-color: rgb(255, 255, 255);
@@ -213,15 +200,17 @@
 }
 @media (min-width: 62em) {
   .duet-drawer-content {
+    --notification-border-top-radius: 0;
+    --notification-border-bottom-radius: 4px;
     position: absolute;
     top: 100%;
     z-index: 600;
     display: block;
+    visibility: hidden;
     width: 450px;
     max-height: 420px;
     padding-left: 0;
     overflow-y: auto;
-    visibility: hidden;
     background-color: rgb(255, 255, 255);
     border: 1px solid rgb(212, 223, 229);
     border-radius: 4px;
@@ -229,9 +218,9 @@
     border-top-right-radius: 0;
     box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
     opacity: 0;
-    transition: 300ms ease;
     transform: scale(0.95) translateZ(0) translateY(-10px);
     transform-origin: 50% 0;
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-drawer-content {
     background-color: rgb(255, 255, 255);
@@ -252,4 +241,17 @@
     opacity: 1;
     transform: scale(1) translateZ(0) translateY(0);
   }
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle {
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true],
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
+  color: rgb(140, 0, 30);
+  border-color: rgb(245, 246, 247);
 }