@duetds/components 7.1.0 → 7.1.2

package/lib/collection/components/duet-action-button/duet-action-button.js

@@ -54,6 +54,7 @@ export class DuetActionButton {
     };
     this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults);
     this.accessibleControls = "";
+    this.url = undefined;
   }
   //handle a11y keyboard navigation events
   async onKeyboardDown(e) {
@@ -72,7 +73,6 @@ export class DuetActionButton {
     }
     return titleString;
   }
-  //set update current when mouse click on page number
   async onMouseHandler(e) {
     e.preventDefault();
     this.duetActionEvent.emit({
@@ -131,12 +131,28 @@ export class DuetActionButton {
       "border-width": "1px",
       "border-style": "solid",
     };
-    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h("style", { innerHTML: backgroundStyles }), h("button", { ref: button => (this.nativeButton = button), part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
+    const commonProps = {
+      ref: button => (this.nativeButton = button),
+      part: "button",
+      style: styles,
+      disabled: this.disabled,
+      id: this.listId,
+      type: "button",
+      "aria-label": this.accessibleLabel,
+      "aria-labelledby": this.accessibleLabelledBy,
+      "aria-description": this.accessibleDescription,
+      "aria-describedby": this.accessibleDescribedBy,
+      "aria-details": this.accessibleDetails,
+      "aria-controls": this.accessibleControls,
+      title: this.getTitle(),
+      class: {
         "duet-action-button": true,
         "duet-action-button--disabled": this.disabled,
         [`duet-action-button--${this.theme}`]: this.theme !== "",
         "duet-theme-turva": this.theme === "turva",
-      }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, "aria-details": this.accessibleDetails, "aria-controls": this.accessibleControls, title: this.getTitle() }, h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), h("duet-visually-hidden", null, h("slot", null)))));
+      },
+    };
+    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h("style", { innerHTML: backgroundStyles }), this.url && !this.disabled ? (h("a", Object.assign({}, commonProps, { href: this.url }), h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }))) : (h("button", Object.assign({}, commonProps, { onClick: e => this.onMouseHandler(e) }), h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), h("duet-visually-hidden", null, h("slot", null))))));
   }
   static get is() { return "duet-action-button"; }
   static get encapsulation() { return "shadow"; }
@@ -161,7 +177,8 @@ export class DuetActionButton {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -220,7 +237,8 @@ export class DuetActionButton {
           "references": {
             "DuetActionButtonIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-action-button/duet-action-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-action-button/duet-action-button.tsx",
+              "id": "src/components/duet-action-button/duet-action-button.tsx::DuetActionButtonIconSize"
             }
           }
         },
@@ -278,7 +296,8 @@ export class DuetActionButton {
           "resolved": "string | { [x: string]: any; }",
           "references": {
             "Record": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Record"
             }
           }
         },
@@ -319,7 +338,8 @@ export class DuetActionButton {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -342,7 +362,8 @@ export class DuetActionButton {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -455,7 +476,8 @@ export class DuetActionButton {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -502,6 +524,23 @@ export class DuetActionButton {
         "attribute": "accessible-controls",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A destination to link to, rendered in the href attribute of a link."
+        },
+        "attribute": "url",
+        "reflect": true
       }
     };
   }
@@ -527,7 +566,8 @@ export class DuetActionButton {
           "references": {
             "DuetActionButtonEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-action-button/duet-action-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-action-button/duet-action-button.tsx",
+              "id": "src/components/duet-action-button/duet-action-button.tsx::DuetActionButtonEvent"
             }
           }
         }
@@ -544,10 +584,12 @@ export class DuetActionButton {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,53 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-alert", () => {
+  it("should render an alert", async () => {
+    const page = await createPage(`<duet-alert>Test</duet-alert>`);
+    const component = await page.find("duet-alert");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-alert margin="none"></duet-alert>`);
+    const element = await page.find("duet-alert >>> .duet-alert");
+    expect(element).toHaveClass("duet-m-0");
+  });
+  it("should provide a property that removes the padding of the component", async () => {
+    const page = await createPage(`<duet-alert padding="none"></duet-alert>`);
+    const element = await page.find("duet-alert >>> .duet-alert");
+    expect(element).toHaveClass("duet-p-0");
+  });
+  it("should provide a property that renders alert in different style variations", async () => {
+    const page = await createPage(`<duet-alert variation="danger">Test</duet-alert>`);
+    const element = await page.find("duet-alert >>> .duet-alert");
+    expect(element).toHaveClass("danger");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-alert theme="turva">Test</duet-alert>`);
+    const element = await page.find("duet-alert >>> .duet-alert");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that adds an icon", async () => {
+    const page = await createPage(`<duet-alert icon="messaging-alert">Test</duet-alert>`);
+    const element = await page.find("duet-alert >>> .duet-alert-icon");
+    expect(element).not.toBeNull();
+  });
+  it("can be dismissed", async () => {
+    const page = await createPage(`<duet-alert dismissible>Test</duet-alert>`);
+    const alert = await page.find("duet-alert");
+    const duetDismiss = await alert.spyOnEvent("duetDismiss");
+    const button = await page.find("duet-alert >>> duet-button");
+    await button.click();
+    expect(duetDismiss).toHaveReceivedEventTimes(1);
+  });
+  it("can have announcements disabled", async () => {
+    const page = await createPage(`<duet-alert variation="danger">Test</duet-alert>`);
+    const alert = await page.find("duet-alert");
+    expect(alert).toEqualAttribute("role", "alert");
+    alert.setProperty("announcements", false);
+    await page.waitForChanges();
+    expect(alert).not.toHaveAttribute("role");
+  });
+});

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

@@ -132,7 +132,8 @@ export class DuetAlert {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -155,7 +156,8 @@ export class DuetAlert {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -166,7 +168,7 @@ export class DuetAlert {
               "name": "default",
               "text": "{fi: \"Sulje viesti\", sv: \"St\u00E4ng meddelandet\", en: \"Close the message\"}"
             }],
-          "text": "Property to change languageDefaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabel when needed"
+          "text": "Property to change languageDefaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabel when needed"
         },
         "attribute": "accessible-label-default",
         "reflect": false,
@@ -220,7 +222,8 @@ export class DuetAlert {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -260,7 +263,8 @@ export class DuetAlert {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -283,7 +287,8 @@ export class DuetAlert {
           "references": {
             "DuetPadding": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
             }
           }
         },
@@ -306,7 +311,8 @@ export class DuetAlert {
           "references": {
             "DuetStatus": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetStatus"
             }
           }
         },
@@ -381,7 +387,8 @@ export class DuetAlert {
           "references": {
             "DuetAlertEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-alert/duet-alert.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-alert/duet-alert.tsx",
+              "id": "src/components/duet-alert/duet-alert.tsx::DuetAlertEvent"
             }
           }
         }
@@ -395,7 +402,8 @@ export class DuetAlert {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -411,7 +419,8 @@ export class DuetAlert {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -430,10 +439,12 @@ export class DuetAlert {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,28 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-badge", () => {
+  it("should render a badge", async () => {
+    const page = await createPage(`<duet-badge>Test</duet-badge>`);
+    const component = await page.find("duet-badge");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-badge margin="none">
+    </duet-badge>`);
+    const element = await page.find("duet-badge");
+    expect(element).toHaveClass("duet-m-0");
+  });
+  it("should provide a property that renders badge in different style variations", async () => {
+    const page = await createPage(`<duet-badge variation="danger">Test</duet-badge>`);
+    const element = await page.find("duet-badge >>> .duet-badge");
+    expect(element).toHaveClass("danger");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-badge theme="turva">Test</duet-badge>`);
+    const element = await page.find("duet-badge >>> .duet-badge");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+});

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

@@ -56,7 +56,8 @@ export class DuetBadge {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -79,7 +80,8 @@ export class DuetBadge {
           "references": {
             "DuetStatus": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetStatus"
             }
           }
         },
@@ -123,7 +125,8 @@ export class DuetBadge {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },

package/lib/collection/components/duet-banner/duet-banner.e2e.js

@@ -0,0 +1,23 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-banner", () => {
+  it("should render a badge", async () => {
+    const page = await createPage(`<duet-banner>Test</duet-banner>`);
+    const component = await page.find("duet-banner");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-banner margin="none">
+    </duet-banner>`);
+    const element = await page.find("duet-banner");
+    expect(element).toHaveClass("duet-m-0");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-banner theme="turva">Test</duet-banner>`);
+    const element = await page.find("duet-banner >>> .duet-banner");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+});

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

@@ -69,7 +69,8 @@ export class DuetBanner {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -92,7 +93,8 @@ export class DuetBanner {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -115,7 +117,8 @@ export class DuetBanner {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -138,7 +141,8 @@ export class DuetBanner {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -161,7 +165,8 @@ export class DuetBanner {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -184,7 +189,8 @@ export class DuetBanner {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -243,7 +249,8 @@ export class DuetBanner {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -266,7 +273,8 @@ export class DuetBanner {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.js

@@ -68,7 +68,8 @@ export class DuetBreadcrumb {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -109,7 +110,8 @@ export class DuetBreadcrumb {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumbs.e2e.js

@@ -0,0 +1,18 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-breadcrumbs", () => {
+  it("should render", async () => {
+    const page = await createPage(`
+    <duet-breadcrumbs>
+      <duet-breadcrumb href="/" icon="damage-home" accessible-label="Etusivu"></duet-breadcrumb>
+      <duet-breadcrumb href="/edut-ja-kampanjat">Edut ja kampanjat</duet-breadcrumb>
+      <duet-breadcrumb href="/edut-ja-kampanjat/pirkanmaa">LähiTapiola Pirkanmaa</duet-breadcrumb>
+    </duet-breadcrumbs>
+    `);
+    const component = await page.find("duet-breadcrumbs");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+});

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

@@ -79,7 +79,8 @@ export class DuetBreadcrumbs {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },