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

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

@@ -10,7 +10,7 @@ import { DuetStringsDownloadLinkDefaults, DuetStringsExternalDefaults } from "..
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getAccessibleLinkLabel } from "../../utils/a11y-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { breakpointToToken, getColorByName } from "../../utils/token-utils";
+import { getColorByName } from "../../utils/token-utils";
 /**
  * @part duet-link - piercing selector for styling the link
  * @part duet-link-content - piercing selector for styling the link content wrapper
@@ -18,28 +18,86 @@ import { breakpointToToken, getColorByName } from "../../utils/token-utils";
  */
 export class DuetLink {
     constructor() {
+        /**
+         * Style variation of the link.
+         */
         this.variation = "default";
-        this.accessibleLabel = undefined;
+        /**
+         * The currently active language. This setting changes the external link
+         * accessible label 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();
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Defaults for accessibleLabelDownload
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelDownloadDefaults = DuetStringsDownloadLinkDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelDownload = getLocaleString(this.accessibleLabelDownloadDefaults);
-        this.accessibleExpanded = undefined;
+        /**
+         * Use this property to add an aria-haspopup attribute to a button. Only works with empty url.
+         */
         this.accessiblePopup = "false";
-        this.identifier = undefined;
+        /**
+         * Theme of the button.
+         */
         this.theme = "";
+        /**
+         * A destination to link to, rendered in the href attribute of a link.
+         */
         this.url = "#";
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
         this.external = false;
+        /**
+         * Causes the browser to treat the linked URL as a download. Can be used with or without a filename value.
+         * With a value, it will be used as the name for the downloaded file. Without a value, the browser will suggest a name.
+         * NOTE: this attribute only works for same-origin URLs, or the blob: and data: schemes.
+         */
         this.download = null;
+        /**
+         * Initially visually hidden link, which is shown on focus.
+         */
         this.tabToLink = false;
-        this.icon = undefined;
+        /**
+         * Color of the icon to display (only with "block" and "button" variations)
+         */
         this.iconColor = "currentColor";
+        /**
+         * Color of the icon to display (only with "button" variation)
+         */
         this.iconBackground = null;
+        /**
+         * Whether the icon changes its size responsively (only with "block" variation)
+         */
         this.iconResponsive = false;
+        /**
+         * Controls the margin of the component (only with "button" variation)
+         */
         this.margin = "auto";
+        /**
+         * Controls the padding of the component (only with "block" variation)
+         */
         this.padding = "auto";
-        this.isSmallScreen = false;
+        /**
+         * Stores the
+         */
         this.isMediumScreen = false;
     }
     /**
@@ -47,7 +105,6 @@ export class DuetLink {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.initMediaQuery();
         this.resolvedDownload = this.resolveDownload();
         // button variation renders a button element when no url is provided
         if (this.variation === "button" && this.url === "#") {
@@ -59,10 +116,17 @@ export class DuetLink {
             prop: "accessibleLabelExternal",
             defaults: "accessibleLabelExternalDefaults",
         });
+        this.setAriaLabel();
+        if (!Build.isServer) {
+            this.mutationObserver = new MutationObserver(this.setAriaLabel.bind(this));
+            this.mutationObserver.observe(this.element, { subtree: true, childList: true, characterData: true });
+        }
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        this.destroyMediaQuery();
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
     }
     /**
      * Sets focus on the specified `duet-link`. Use this method instead of the global
@@ -71,32 +135,10 @@ export class DuetLink {
     async setFocus(options) {
         this.nativeLink.focus(options);
     }
-    initMediaQuery() {
-        if (Build.isServer) {
-            return;
-        }
-        this.screenTestBound = this.screenTest.bind(this);
-        this.mediaQuerySmall = window.matchMedia(breakpointToToken["xx-small"]);
-        this.mediaQueryMedium = window.matchMedia(breakpointToToken["medium"]);
-        this.isSmallScreen = this.mediaQuerySmall.matches;
-        this.isMediumScreen = this.mediaQueryMedium.matches;
-        this.mediaQuerySmall.addEventListener("change", this.screenTestBound);
-        this.mediaQueryMedium.addEventListener("change", this.screenTestBound);
-    }
-    destroyMediaQuery() {
-        if (Build.isServer) {
-            return;
-        }
-        if (this.mediaQuerySmall) {
-            this.mediaQuerySmall.removeEventListener("change", this.screenTestBound);
-        }
-        if (this.mediaQueryMedium) {
-            this.mediaQueryMedium.removeEventListener("change", this.screenTestBound);
-        }
-    }
-    screenTest(event) {
-        this.isSmallScreen = event.matches;
-        this.isMediumScreen = event.matches;
+    setAriaLabel() {
+        setTimeout(() => {
+            this.ariaLabel = (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel;
+        });
     }
     resolveDownload() {
         if (this.download === "") {
@@ -110,27 +152,23 @@ export class DuetLink {
         return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && this.variation === "default" && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
     }
     renderBlockContent() {
-        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { class: this.iconResponsive ? "icon-responsive" : "", size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
     renderButtonCardContent() {
         const iconWrapStyle = {
             "background-color": getColorByName(this.iconBackground, this.theme),
         };
-        const iconSize = () => {
-            if (this.variation === "button") {
-                return this.iconBackground && this.isMediumScreen ? "medium" : "small";
-            }
-            return this.isMediumScreen ? "large" : "medium";
-        };
-        return (h(Fragment, null, this.icon && (h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: iconSize(), name: this.icon, margin: "none", color: this.iconColor }))), h("div", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("span", { class: "chevron-wrap" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+        return (h(Fragment, null, this.icon && (h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("div", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("span", { class: "chevron-wrap" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
     renderContent() {
         switch (this.variation) {
             case "default":
                 return this.renderDefaultContent();
             case "block":
+            case "block-center":
                 return this.renderBlockContent();
             case "button":
+            case "list-button":
             case "card":
                 return this.renderButtonCardContent();
         }
@@ -140,12 +178,13 @@ export class DuetLink {
      * Always the last one in the class.
      */
     render() {
-        const Tag = !this.url ? "button" : "a";
+        const Tag = !this.url && this.variation !== "default" ? "button" : "a";
+        const role = !this.url && this.variation === "default" ? "button" : null;
         const isButton = Tag === "button";
-        return (h(Host, { key: '4daa11135671269c348f387b30b1252c5f12b2ee', class: {
+        return (h(Host, { key: 'c6dfd9dd4ce34ea1deea147e76481197cfa90854', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '7e2c94f2a8695bd756e4efbb074f42614a342ca2', href: this.url, class: {
+            } }, h(Tag, { key: '72968ba8e93c2773e8cdbdc7521a854e63569826', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -156,7 +195,7 @@ export class DuetLink {
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
+            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.ariaLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined, role: role }, this.renderContent())));
     }
     static get is() { return "duet-link"; }
     static get encapsulation() { return "shadow"; }
@@ -175,10 +214,11 @@ export class DuetLink {
         return {
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLinkVariation",
-                    "resolved": "\"block\" | \"button\" | \"card\" | \"default\"",
+                    "resolved": "\"block\" | \"block-center\" | \"button\" | \"card\" | \"default\" | \"list-button\"",
                     "references": {
                         "DuetLinkVariation": {
                             "location": "import",
@@ -195,12 +235,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -215,11 +255,11 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -246,12 +286,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -275,12 +315,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -298,12 +338,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "accessibleLabelDownloadDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-download-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -327,12 +367,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-download-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsDownloadLinkDefaults"
             },
             "accessibleLabelDownload": {
                 "type": "string",
+                "attribute": "accessible-label-download",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -350,12 +390,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-download",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDownloadDefaults)"
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -370,11 +410,11 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": true
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -389,12 +429,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -409,11 +449,11 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -434,12 +474,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -454,12 +494,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": true,
                 "defaultValue": "\"#\""
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -474,12 +514,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "download": {
                 "type": "string",
+                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -494,12 +534,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "download",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "tabToLink": {
                 "type": "boolean",
+                "attribute": "tab-to-link",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -514,12 +554,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tab-to-link",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -540,11 +580,11 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "iconColor": {
                 "type": "string",
+                "attribute": "icon-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconColor",
@@ -565,12 +605,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-color",
                 "reflect": false,
                 "defaultValue": "\"currentColor\""
             },
             "iconBackground": {
                 "type": "string",
+                "attribute": "icon-background",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -591,12 +631,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-background",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "iconResponsive": {
                 "type": "boolean",
+                "attribute": "icon-responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -611,12 +651,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -637,12 +677,12 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -663,7 +703,6 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }
@@ -671,8 +710,8 @@ export class DuetLink {
     }
     static get states() {
         return {
-            "isSmallScreen": {},
-            "isMediumScreen": {}
+            "isMediumScreen": {},
+            "ariaLabel": {}
         };
     }
     static get methods() {
@@ -705,4 +744,16 @@ export class DuetLink {
         };
     }
     static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "download",
+                "methodName": "setAriaLabel"
+            }, {
+                "propName": "external",
+                "methodName": "setAriaLabel"
+            }, {
+                "propName": "language",
+                "methodName": "setAriaLabel"
+            }];
+    }
 }

package/lib/collection/components/duet-list/duet-list.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%;
 }