@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

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

@@ -15,44 +15,88 @@ export class DuetAlert {
     constructor() {
         this.descriptiveId = createID("DuetAlert");
         this.hasShowMoreSlot = false;
-        this.iconVariationMap = {
-            default: "messaging-info",
-            success: "messaging-success",
-            warning: "messaging-alert",
-            danger: "messaging-danger-alert",
-        };
-        this.handleDismiss = (ev) => {
-            this.handleHide();
-            this.duetDismiss.emit({
-                component: "duet-alert",
-                originalEvent: ev,
-            });
-        };
-        this.handleShow = () => {
-            this.isDismissed = false;
-        };
-        this.handleHide = () => {
-            this.isDismissed = true;
-            this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
-        };
+        /**
+         * Theme of the card.
+         */
         this.theme = "";
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
         this.isDismissed = false;
-        this.timeoutID = undefined;
+        this.isExpanded = false;
+        /**
+         * Property to change languageDefaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabel when needed
+         * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"}
+         */
         this.accessibleLabelDefaults = {
             fi: "Painike viestin sulkemiseen",
             sv: "Knapp för att stänga meddelandet",
             en: "Button to close the message",
         };
+        /**
+         * Adds accessible label for the dismissible alert close button.
+         * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"}
+         */
         this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+        /**
+         * Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually
+         * should be set to false, so that it is not read out first.
+         */
         this.announcements = true;
+        /**
+         * Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons,
+         * use of this property is discouraged, and it is being considered for deprication.
+         */
         this.icon = "";
-        this.autoDismiss = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
         this.padding = "auto";
+        /**
+         * Style variation of the alert.
+         */
         this.variation = "default";
+        /**
+         * Allows for styling of the alert based on its position in the layout.
+         * "below-nav" is used when the alert is below the navigation bar. It also overrides the icon to be the same as the variation.
+         */
         this.position = "content";
+        /**
+         * Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used.
+         */
         this.dismissible = false;
+        /**
+         * Make alert focusable.
+         */
         this.focusable = false;
+        /**
+         * When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a
+         * toggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible.
+         */
+        this.expandingTitle = "";
+        this.handleDismiss = (ev) => {
+            this.handleHide();
+            this.duetDismiss.emit({
+                component: "duet-alert",
+                originalEvent: ev,
+            });
+        };
+        this.handleShow = () => {
+            this.isDismissed = false;
+        };
+        this.handleHide = () => {
+            this.isDismissed = true;
+            this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
+        };
+        this.handleExpandToggle = () => {
+            this.isExpanded = !this.isExpanded;
+        };
     }
     /**
      * Component lifecycle events.
@@ -108,29 +152,33 @@ export class DuetAlert {
      * Always the last one in the class.
      */
     render() {
-        const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
-        return (h(Host, { key: 'd3c53bc46ae4d9f94d286a8ca55a1891afaec2d1', class: {
+        const variation = ["default", "success", "danger", "warning"].includes(this.variation)
+            ? this.variation
+            : "default";
+        return (h(Host, { key: 'b9a786006544e12ee10ee1a8af704ac65c97c3b3', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-alert-is-dismissed": this.isDismissed,
-            }, role: this.announcements ? "alert" : undefined }, h("div", { key: '9b7c2ede2a81e5459214b3262c08f5a096251f50', class: {
+            }, role: this.announcements ? "alert" : undefined }, h("div", { key: '3abfcee0d83c8806925875c34cafd4898a045cbe', class: {
                 "duet-alert-wrapper": true,
                 "duet-p-0": this.padding === "none",
                 "duet-m-0": this.margin === "none",
-                [this.variation]: true,
+                [variation]: true,
                 [this.position]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'c372501af01265a0e962d41b0aeefa1b0803dc7a', class: {
+            } }, h("div", { key: '64bdd7788c6f4de9c409597f57b0a4c04e4d08c0', class: {
                 "duet-alert": true,
+                "duet-alert-expandable": !!this.expandingTitle,
+                "duet-alert-expanded": this.isExpanded,
                 "duet-alert-has-icon": !!this.icon || this.position === "below-nav",
                 "duet-alert-has-show-more": this.hasShowMoreSlot,
                 "duet-alert-is-dismissible": this.dismissible,
                 "duet-p-0": this.padding === "none",
                 "duet-m-0": this.margin === "none",
-                [this.variation]: true,
+                [variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '6a00f96245f482fa280c5618d1ab3e3d61ae57bf', class: "duet-alert-container", ref: element => {
+            } }, h("div", { key: '23c686f352e1d59a16c2418d870d9bac5a7bc7a0', class: "duet-alert-container", ref: element => {
                 this.alertContainer = element;
-            }, tabindex: this.focusable ? "0" : undefined }, this.icon && this.position !== "below-nav" && (h("div", { key: '3993720ebce31589b986f5441c9f8f48719f6c97', class: "duet-alert-icon" }, h("duet-icon", { key: 'fc93bdce332702991e0dedf6eba0276c5d9c3e6d', size: "auto", name: this.icon, color: "currentColor" }))), this.position === "below-nav" && (h("div", { key: 'e469d1feb00ce1b223b7977a1b87228933556823', class: "duet-alert-icon below-nav" }, h("duet-icon", { key: '8e3407af6309c0107a6e78107c965cf28cadbec3', size: "auto", name: this.iconVariationMap[this.variation], color: this.variation === "default" ? "currentColor" : this.variation }))), h("span", { key: 'e4e8494c19f24f7da051b98cef3c3efcdeb47031', id: this.descriptiveId }, h("slot", { key: '1ce9a6e6c13e76f6fbf1317fa867d5400c79f41e' }))), this.hasShowMoreSlot && (h("duet-show-more", { key: '2106929166ce1b954dff45ed25b218ddce15f4d9', margin: "none", class: "duet-alert-show-more" }, h("slot", { key: '331aa9d74f0b995b55b6b119e569411a07673c3e', name: "show-more" }))), this.dismissible && (h("div", { key: '9cfd9e835660d246540ca7452de22bcd324d4682', class: "duet-alert-dismiss" }, h("duet-button", { key: 'fe950cf6c3d775160bd97b34e88ca71603a47d19', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
+            }, tabindex: this.focusable ? "0" : undefined }, this.position !== "below-nav" && (h("div", { key: '03f16f41c1f3021d20e826cefc4beb0de0b24c04', class: "duet-alert-icon" }, (this.icon && h("duet-icon", { key: '8afb7844d4941299ce755eb0fcf2b0d5bc9848ca', size: "auto", name: this.icon, color: "currentColor" })) || (h("duet-status-icon", { key: 'acb87af93cf0e438fc2424b03c66a47d7c2377fc', strong: true, variation: variation, margin: "none", size: "auto" })))), this.position === "below-nav" && (h("div", { key: 'c4d34eb31fc386b50b5f0a5c52f88487d83fe29b', class: "duet-alert-icon below-nav" }, h("duet-status-icon", { key: 'f38cba8f102c47aca6e902a76e89d8a3633891f0', strong: true, variation: variation, margin: "none", size: "auto" }))), h("div", { key: '4af2b55a31cdab6c1481c1a174e677f09311f0ac', class: "duet-alert-content", id: this.descriptiveId }, this.expandingTitle && (h("button", { key: '7e77ad8d36c7ddeb1118ba8585f3b50e8af2264d', "aria-expanded": this.isExpanded.toString(), "aria-controls": `${this.descriptiveId}-content`, class: "duet-alert-expander", onClick: this.handleExpandToggle }, h("span", { key: 'dea341c2b66217c66fabb05236a83bfdde7155d8', class: "expanding-title" }, this.expandingTitle), h("duet-icon", { key: '4a4dfb197c068d1cf585cd3fd4c510586bf7ba6c', name: "action-arrow-down", color: variation === "default" ? "lt-blue-800" : `${variation}-800`, margin: "none", size: "x-small" }))), (!this.expandingTitle || this.isExpanded) && (h("div", { key: 'fe30abd1f14777e30a7f39c7d6e09965d31bfcc3', id: `${this.descriptiveId}-content` }, h("slot", { key: '12180f3b78a1bd75b76e2a5842800f8a6c5552c8' }))))), this.hasShowMoreSlot && (h("duet-show-more", { key: '1369e15586f49ec467770522ae394be560c2d461', margin: "none", class: "duet-alert-show-more" }, h("slot", { key: '24c5b71daf8a6ae0136006a21fe789e590faf960', name: "show-more" }))), this.dismissible && !this.expandingTitle && (h("div", { key: '75f16a5078ded896ce370396dc422fa959d90e2c', class: "duet-alert-dismiss" }, h("duet-button", { key: '243a3bec904a6d8bac1fb2c2d47e206213d60832', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", color: variation === "default" ? "lt-blue-800" : `${variation}-800`, theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
     }
     static get is() { return "duet-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -148,6 +196,7 @@ export class DuetAlert {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -168,12 +217,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -197,12 +246,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Painike viestin sulkemiseen\",\n    sv: \"Knapp f\u00F6r att st\u00E4nga meddelandet\",\n    en: \"Button to close the message\",\n  }"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -220,12 +269,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
             },
             "announcements": {
                 "type": "boolean",
+                "attribute": "announcements",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -236,16 +285,16 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable or disabled announcements by assistive technologies."
+                    "text": "Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually\nshould be set to false, so that it is not read out first."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "announcements",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -262,16 +311,16 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon to display to the left of the content."
+                    "text": "Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons,\nuse of this property is discouraged, and it is being considered for deprication."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "autoDismiss": {
                 "type": "number",
+                "attribute": "auto-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -286,11 +335,11 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-dismiss",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -311,12 +360,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -337,12 +386,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetStatus",
@@ -363,12 +412,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"below-nav\" | \"content\"",
@@ -383,12 +432,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"content\""
             },
             "dismissible": {
                 "type": "boolean",
+                "attribute": "dismissible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -399,16 +448,16 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Should a button be rendered to dismiss the alert?"
+                    "text": "Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dismissible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focusable": {
                 "type": "boolean",
+                "attribute": "focusable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -419,19 +468,39 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Should it be possible to focus on alert?"
+                    "text": "Make alert focusable."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "focusable",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "expandingTitle": {
+                "type": "string",
+                "attribute": "expanding-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a\ntoggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }
     static get states() {
         return {
             "isDismissed": {},
+            "isExpanded": {},
             "timeoutID": {}
         };
     }

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

@@ -5,9 +5,22 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetBadge {
     constructor() {
+        /**
+         * Theme of the badge.
+         */
         this.theme = "";
+        /**
+         * Style variation of the badge.
+         */
         this.variation = "default";
+        /**
+         * Variation of the background. "strong" results in a more prominent background color.
+         * @default "normal"
+         */
         this.background = "normal";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
     }
     /**
@@ -22,12 +35,12 @@ export class DuetBadge {
      */
     render() {
         const backgroundClass = `background-${this.background}`;
-        return (h(Host, { key: 'ae708838b39b1a8db655ca27383e92baba3795fd', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '29dbf98cb938dcd05be7a57c20e355db1e05b1df', class: {
+        return (h(Host, { key: '33720282bd0de35b29a36d2c580eb0188adf3d2f', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: 'd130655704b79c828ca2a86964f51a88686b2770', class: {
                 "duet-badge": true,
                 [this.variation]: true,
                 [backgroundClass]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: 'aa2b310511ff50a759a7ef772a38ddbe196ef74a' }))));
+            } }, h("slot", { key: 'bbfb3fa8216678fa644ff4844212cabd2c9ed0e2' }))));
     }
     static get is() { return "duet-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -45,6 +58,7 @@ export class DuetBadge {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -65,12 +79,12 @@ export class DuetBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetStatus | \"subtle\"",
@@ -91,12 +105,12 @@ export class DuetBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "background": {
                 "type": "string",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "\"normal\" | \"strong\"",
@@ -114,12 +128,12 @@ export class DuetBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background",
                 "reflect": false,
                 "defaultValue": "\"normal\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -140,7 +154,6 @@ export class DuetBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }