@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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: '95a630a67e5b566bc05641ac7a676ed3ac63f5ee' }, h("div", { key: 'abcbac50ff4631707152e35779d9519a845a38b8', class: { container: true, sticky: this.sticky } }, h("slot", { key: '5f39c9e47f3897bd0c2911e40c71e6944aef19d6' }), h("slot", { key: 'd1c4f88457d7db9695701abbc982b1f589909871', name: "mobile" }), h("slot", { key: '810fa9cf8b03c900cd4923d2b8a3fc89f8c872af', 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(253, 247, 242);
+  }
 }

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

@@ -7,17 +7,46 @@ import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/ke
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-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 = "";
     }
     /**
@@ -43,11 +72,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '98ec72c6cce7947b7263eeb3f46e33e22a990877', role: "listitem", class: {
+        return (h("div", { key: '7e4e38752baee0c65e84c4edfa1ea6225daef0a9', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '3736a06027a73aa7ba30e0c4b8a120c6772c0c6f', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'ba330229b218d4e4b58d2078e62ef7fb8dd84755', class: "duet-notification-container" }, h("div", { key: 'b3e977745d175b1df1b238399d72822511cdbc2c', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '7899dd2e03bc72ff907719a515064f96c5a85a1f', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '120a6ec03a1e30297fb74201aec8842a95544cd6' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'a9cefa6b12b79148d75b238395613eb03b1cbdb8', class: "duet-notification-content" }, h("slot", { key: '227250fa90780100b094ef165074f2699daf3fee' })), h("div", { key: '8f8e56cf0596df33ebbb471fa7dc4297acd660aa', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'd533b34bab8bed57448b132fdcfd7913da27d165', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '9fd48a6483ee03a967abd2deca506a49eda9910c', class: "duet-notification-container" }, h("div", { key: '0a647e9111eb00ae4268e20b72e248edcf211ab5', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '61edc87a1995f7ebe37cefff3869dab6a3840d58', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '461dfcbff675bba86b0e66901b44f272e34b5619', class: "duet-notification-content" }, h("slot", { key: '84fbc735b2ee2b129360419aa2d7a310a4b2895b' })), h("div", { key: '0bd791445a03f66f304fdb094200d95e409fcf09', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +94,7 @@ export class DuetNotification {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -91,12 +121,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 +151,7 @@ export class DuetNotification {
             },
             "accessibleLabelUnread": {
                 "type": "string",
+                "attribute": "accessible-label-unread",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -138,12 +169,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 +189,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 +209,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 +229,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 +249,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 +275,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);
 }