@duetds/components 7.1.0 → 7.1.1

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

@@ -0,0 +1,125 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage, isFocused } from "../../utils/test-utils";
+describe("duet-modal", () => {
+  // we want to wait for modal to be focused to ensure close button
+  // automatically receives focus when `active` prop is `true`
+  const isModalFocused = () => {
+    return document.activeElement === document.querySelector("duet-modal");
+  };
+  it("should render a modal", async () => {
+    const page = await createPage(`<duet-modal></duet-modal>`);
+    const component = await page.find("duet-modal");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-modal theme="turva"></duet-modal>`);
+    const element = await page.find("duet-modal >>> .duet-modal-overlay");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that changes the size", async () => {
+    const page = await createPage(`<duet-modal size="small"></duet-modal>`);
+    const element = await page.find("duet-modal >>> .duet-modal");
+    expect(element).toHaveClass("small");
+  });
+  it("should provide a property that sets a heading", async () => {
+    const page = await createPage(`<duet-modal heading="test"></duet-modal>`);
+    const element = await page.find("duet-modal >>> duet-heading");
+    expect(element.textContent).toEqual("test");
+  });
+  it("should provide a property that sets a heading's level", async () => {
+    const page = await createPage(`<duet-modal heading="test" heading-level="h1"></duet-modal>`);
+    const element = await page.find("duet-modal >>> duet-heading");
+    expect(element.getAttribute("level")).toEqual("h1");
+  });
+  it("should provide a property that sets a heading's visual level", async () => {
+    const page = await createPage(`<duet-modal heading="test" heading-visual-level="h4"></duet-modal>`);
+    const element = await page.find("duet-modal >>> duet-heading");
+    expect(element.getAttribute("visual-level")).toEqual("h4");
+  });
+  it("should set a heading's visual level the same as its level if no visual value provided", async () => {
+    const page = await createPage(`<duet-modal heading="test" heading-level="h1"></duet-modal>`);
+    const element = await page.find("duet-modal >>> duet-heading");
+    expect(element.getAttribute("visual-level")).toEqual("h1");
+  });
+  it("should provide a property that sets an icon", async () => {
+    const page = await createPage(`<duet-modal icon="form-location"></duet-modal>`);
+    const element = await page.find("duet-modal >>> duet-icon");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that sets the icon color", async () => {
+    const page = await createPage(`<duet-modal icon="form-location" color="secondary"></duet-modal>`);
+    const element = await page.find("duet-modal >>> duet-icon");
+    expect(element.getAttribute("color")).toEqual("secondary");
+  });
+  it("should provide a property that makes the modal active", async () => {
+    const page = await createPage(`<duet-modal active></duet-modal>`);
+    const element = await page.find("duet-modal >>> .duet-modal-overlay");
+    expect(element).toHaveClass("duet-modal-active");
+  });
+  it("traps focus", async () => {
+    const page = await createPage(`
+      <duet-modal
+        size="small"
+        heading="Modal test"
+        icon="damage-breakage"
+        class="duet-text-center"
+        active
+      >
+        <duet-paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam quis nostrud.
+        </duet-paragraph>
+        <duet-paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+        </duet-paragraph>
+        <duet-collapsible heading="Click to open details">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+          Aperiam impedit, possimus minima repudiandae.
+        </duet-collapsible>
+      </duet-modal>
+    `);
+    await page.find("duet-modal");
+    await page.waitForFunction(isModalFocused);
+    // tab to link in light dom
+    await page.keyboard.press("Tab");
+    const collapsible = await page.find("duet-collapsible >>> button");
+    expect(await isFocused(collapsible)).toBe(true);
+    // focus should now go back to close button
+    await page.keyboard.press("Tab");
+    const closeButton = await page.find("duet-modal >>> duet-button");
+    expect(await isFocused(closeButton)).toBe(true);
+  });
+  it.skip("closes on blur", async () => {
+    const page = await createPage(`
+      <duet-modal
+        size="small"
+        heading="Modal test"
+        icon="damage-breakage"
+        class="duet-text-center"
+        active
+        close-on-blur="true"
+      >
+        <duet-paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam quis nostrud.
+        </duet-paragraph>
+        <duet-paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+        </duet-paragraph>
+        <duet-collapsible heading="Click to open details">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+          Aperiam impedit, possimus minima repudiandae.
+        </duet-collapsible>
+      </duet-modal>
+    `);
+    await page.waitForFunction(isModalFocused);
+    const duetModalInner = await page.find("duet-modal >>>");
+    const duetBody = await page.find("body");
+    expect(duetModalInner.isVisible()).toBeTruthy();
+    duetBody.click();
+    expect(!duetModalInner || duetModalInner.isVisible()).toBeFalsy();
+  });
+});

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

@@ -223,7 +223,8 @@ export class DuetModal {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -252,7 +253,8 @@ export class DuetModal {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -299,7 +301,8 @@ export class DuetModal {
           "references": {
             "DuetModalSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
             }
           }
         },
@@ -409,7 +412,8 @@ export class DuetModal {
           "references": {
             "DuetModalSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
             }
           }
         },
@@ -432,7 +436,8 @@ export class DuetModal {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -473,7 +478,8 @@ export class DuetModal {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -496,7 +502,8 @@ export class DuetModal {
           "references": {
             "DuetVisualHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetVisualHeadingLevel"
             }
           }
         },
@@ -518,7 +525,8 @@ export class DuetModal {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -541,7 +549,8 @@ export class DuetModal {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -645,7 +654,8 @@ export class DuetModal {
           "references": {
             "DuetModalCloseEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalCloseEvent"
             }
           }
         }
@@ -659,7 +669,8 @@ export class DuetModal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -675,7 +686,8 @@ export class DuetModal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,96 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-multiselect", () => {
+  it("should render a multiselect", async () => {
+    const page = await createPage(`<duet-multiselect></duet-multiselect>`);
+    const component = await page.find("duet-multiselect");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-multiselect label="test"></duet-multiselect>`);
+    const element = await page.find("duet-multiselect >>> label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-multiselect margin="none"></duet-multiselect>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-multiselect theme="turva"></duet-multiselect>`);
+    const element = await page.find("duet-multiselect >>> .duet-multiselect-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that makes the  disabled", async () => {
+    const page = await createPage(`<duet-multiselect disabled></duet-multiselect>`);
+    const element = await page.find("duet-multiselect >>> .duet-multiselect");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID", async () => {
+    const page = await createPage(`<duet-multiselect identifier="test"></duet-multiselect>`);
+    const element = await page.find("duet-multiselect >>> .duet-multiselect");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that renders select all and and clear all buttons", async () => {
+    const page = await createPage(`<duet-multiselect all-controls items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
+    const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
+    const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
+    expect(selectAll).not.toBeNull();
+    expect(clearAll).not.toBeNull();
+  });
+  it("should not render select all and and clear all buttons if there are no items", async () => {
+    const page = await createPage(`<duet-multiselect all-controls></duet-multiselect>`);
+    const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
+    const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
+    expect(selectAll).toBeNull();
+    expect(clearAll).toBeNull();
+  });
+  it("should select and clear all when clicking the corresponding buttons", async () => {
+    const page = await createPage(`<duet-multiselect all-controls items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
+    const multiselect = await page.find("duet-multiselect");
+    const multiselectTrigger = await page.find("duet-multiselect >>> .duet-multiselect");
+    const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
+    const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
+    await multiselectTrigger.click();
+    expect(await multiselect.getProperty("value")).toHaveLength(0);
+    await selectAll.click();
+    expect(await multiselect.getProperty("value")).toHaveLength(2);
+    await clearAll.click();
+    expect(await multiselect.getProperty("value")).toHaveLength(0);
+  });
+  it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
+    const page = await createPage(`<duet-multiselect label="Checked" items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
+    const multiselect = await page.find("duet-multiselect >>> .duet-multiselect");
+    await multiselect.click();
+    const checkbox = await page.find("duet-multiselect >>> duet-checkbox");
+    const changeEventSpy = await checkbox.spyOnEvent("duetChange");
+    checkbox.setProperty("checked", true);
+    await page.waitForChanges();
+    expect(changeEventSpy).not.toHaveReceivedEvent();
+    await checkbox.click();
+    expect(changeEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on focus", async () => {
+    const page = await createPage(`<duet-multiselect label="Checked" value="test"></duet-multiselect>`);
+    const multiselect = await page.find("duet-multiselect");
+    const focusEventSpy = await multiselect.spyOnEvent("duetFocus");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(focusEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on blur", async () => {
+    const page = await createPage(`
+      <duet-multiselect label="Checked" value="test"></duet-multiselect>
+      <button>another focusable element</button>
+    `);
+    const multiselect = await page.find("duet-multiselect");
+    const blurEventSpy = await multiselect.spyOnEvent("duetFocus");
+    // focus then blur the checkbox
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(blurEventSpy).toHaveReceivedEvent();
+  });
+});

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

@@ -232,7 +232,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -309,7 +310,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
             }
           }
         },
@@ -330,7 +332,8 @@ export class DuetMultiselect {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -442,7 +445,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
             }
           }
         },
@@ -535,7 +539,8 @@ export class DuetMultiselect {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -576,7 +581,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
             }
           }
         }
@@ -596,7 +602,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
             }
           }
         }
@@ -616,7 +623,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
             }
           }
         }
@@ -633,10 +641,12 @@ export class DuetMultiselect {
             }],
           "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-nav/duet-nav.js

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

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

@@ -0,0 +1,12 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-notification", () => {
+  it("should render a notification", async () => {
+    const page = await createPage(`<duet-notification></duet-notification>`);
+    const component = await page.find("duet-notification");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+});

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

@@ -73,7 +73,8 @@ export class DuetNotification {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -102,7 +103,8 @@ export class DuetNotification {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -110,7 +112,7 @@ export class DuetNotification {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Property to change accessibleLabelUnread defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelUnread when needed"
+          "text": "Property to change accessibleLabelUnread defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelUnread when needed"
         },
         "defaultValue": "{\n    en: \"Unread\",\n    fi: \"Lukematon\",\n    sv: \"Ol\u00E4st\",\n  }"
       },
@@ -216,7 +218,8 @@ export class DuetNotification {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -246,10 +249,12 @@ export class DuetNotification {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"