@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -18,27 +18,86 @@ import { 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";
+        /**
+         * Stores the
+         */
         this.isMediumScreen = false;
     }
     /**
@@ -57,9 +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);
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
     }
     /**
      * Sets focus on the specified `duet-link`. Use this method instead of the global
@@ -68,6 +135,11 @@ export class DuetLink {
     async setFocus(options) {
         this.nativeLink.focus(options);
     }
+    setAriaLabel() {
+        setTimeout(() => {
+            this.ariaLabel = (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel;
+        });
+    }
     resolveDownload() {
         if (this.download === "") {
             return this.url.split("/").pop();
@@ -80,7 +152,7 @@ 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", { 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" }))));
+        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" }))));
     }
     renderButtonCardContent() {
         const iconWrapStyle = {
@@ -93,8 +165,10 @@ export class DuetLink {
             case "default":
                 return this.renderDefaultContent();
             case "block":
+            case "block-center":
                 return this.renderBlockContent();
             case "button":
+            case "list-button":
             case "card":
                 return this.renderButtonCardContent();
         }
@@ -104,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: 'd4a64a7d050644cd79fe524ecf41cc9886fa8a9c', class: {
+        return (h(Host, { key: 'c9771c4890b8c42dd47c1b5794a9bd1bac35e26f', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '2bc9879af9717295281034124b5a2ebb2058f9bd', href: this.url, class: {
+            } }, h(Tag, { key: '63c398171aaf01ce55e54040fc911587749b4d0e', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -120,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"; }
@@ -139,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",
@@ -159,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",
@@ -179,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",
@@ -210,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",
@@ -239,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",
@@ -262,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",
@@ -291,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",
@@ -314,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",
@@ -334,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",
@@ -353,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",
@@ -373,11 +449,11 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -398,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",
@@ -418,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",
@@ -438,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",
@@ -458,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",
@@ -478,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",
@@ -504,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",
@@ -529,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",
@@ -555,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",
@@ -575,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",
@@ -601,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",
@@ -627,7 +703,6 @@ export class DuetLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }
@@ -635,7 +710,8 @@ export class DuetLink {
     }
     static get states() {
         return {
-            "isMediumScreen": {}
+            "isMediumScreen": {},
+            "ariaLabel": {}
         };
     }
     static get methods() {
@@ -668,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%;
 }

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

@@ -6,13 +6,42 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { watchForOptions } from "../../utils/watch-options";
 export class DuetList {
     constructor() {
+        /**
+         * Theme of the list.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
         this.padding = "auto";
+        /**
+         * Adjusts the alignment of the list items on mobile breakpoint.
+         */
         this.mobile = "left";
+        /**
+         * Switch the breakpoint used to trigger the content stacking. These match to
+         * similar media query tokens: $media-query-small and $media-query-large.
+         */
         this.breakpoint = "small";
+        /**
+         * Style variation of the list.
+         */
         this.variation = "default";
+        /**
+         * Set the column width of the first column in percentages.
+         * For automatic sizing of the column you can use class "duet-list" with a native <dl> element. See list utilities of the CSS framework.
+         */
         this.labelWidth = "30";
+        /**
+         * Enable or disable the automatic responsive behaviour of the list
+         * component. Setting this option to "true"
+         * makes sure that contents are stacked vertically on mobile.
+         * When "false" is set, contents are always shown in a single row.
+         */
         this.responsive = true;
     }
     /**
@@ -72,7 +101,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '059c5420b262de645b7645407359301d15baff34', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '4a21a4f0923309997c6526393632ccd9559f27b5' })));
+        return (h("dl", { key: '42205f6f2133cfb3816496e3403c3c7f14a529c5', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'e143fa86e59cc12e24f1e695f92dfc2466e8b0c5' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }
@@ -90,6 +119,7 @@ export class DuetList {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -110,12 +140,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -136,12 +166,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -162,12 +192,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "mobile": {
                 "type": "string",
+                "attribute": "mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListMobileAlignment",
@@ -188,12 +218,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "mobile",
                 "reflect": false,
                 "defaultValue": "\"left\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListBreakpoint",
@@ -214,12 +244,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListVariation",
@@ -240,12 +270,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "labelWidth": {
                 "type": "string",
+                "attribute": "label-width",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListLabelWidth",
@@ -266,12 +296,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-width",
                 "reflect": false,
                 "defaultValue": "\"30\""
             },
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -286,7 +316,6 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "true"
             }