@duetds/components 7.1.0 → 7.1.2

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.js

@@ -79,7 +79,8 @@ export class DuetTooltipPopup {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -194,7 +195,8 @@ export class DuetTooltipPopup {
           "resolved": "CustomEvent<any>",
           "references": {
             "CustomEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::CustomEvent"
             }
           }
         }
@@ -208,10 +210,12 @@ export class DuetTooltipPopup {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLElement"
             }
           },
           "return": "Promise<HTMLElement>"
@@ -227,10 +231,12 @@ export class DuetTooltipPopup {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLElement"
             }
           },
           "return": "Promise<HTMLElement>"
@@ -246,7 +252,8 @@ export class DuetTooltipPopup {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,99 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage, isFocused } from "../../utils/test-utils";
+function getTrigger(page) {
+  return page.find(`duet-tooltip-button >>> button[aria-expanded]`);
+}
+async function getPopup(page) {
+  const button = await getTrigger(page);
+  return page.find(`duet-tooltip-popup >>> #${button.getAttribute("aria-controls")}`);
+}
+async function openWithClick(page) {
+  const trigger = await getTrigger(page);
+  const popup = await getPopup(page);
+  await trigger.click();
+  await popup.waitForVisible();
+}
+async function closeWithClick(page) {
+  const trigger = await getTrigger(page);
+  const popup = await getPopup(page);
+  await trigger.click();
+  await popup.waitForNotVisible();
+}
+async function clickOutside(page) {
+  const popup = await getPopup(page);
+  await page.mouse.click(0, 0);
+  await page.waitForChanges();
+  await popup.waitForNotVisible();
+}
+async function clickCloseButton(page) {
+  const popup = await getPopup(page);
+  const closeButton = await page.find(`duet-tooltip-popup >>> .duet-tooltip-close`);
+  await closeButton.click();
+  await popup.waitForNotVisible();
+}
+async function closeWithEsc(page) {
+  const popup = await getPopup(page);
+  await page.keyboard.press("Escape");
+  await page.waitForChanges();
+  await popup.waitForNotVisible();
+}
+describe("duet-tooltip", () => {
+  it("should render a tooltip", async () => {
+    const page = await createPage(`<duet-tooltip></duet-tooltip>`);
+    const component = await page.find("duet-tooltip");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  describe("behavior", () => {
+    it("can be toggled open and closed via the trigger", async () => {
+      const page = await createPage(`<duet-tooltip label="Example label">Example content</duet-tooltip>`);
+      const trigger = await getTrigger(page);
+      const popup = await getPopup(page);
+      await openWithClick(page);
+      // focus *should* be moved to popup on open
+      expect(trigger).toEqualAttribute("aria-expanded", "true");
+      expect(await isFocused(popup)).toBe(true);
+      await closeWithClick(page);
+      // focus *should* be moved to trigger on close
+      expect(trigger).toEqualAttribute("aria-expanded", "false");
+      expect(await isFocused(trigger)).toBe(true);
+    });
+    it("closes on click of close button", async () => {
+      const page = await createPage(`<duet-tooltip label="Example label">Example content</duet-tooltip>`);
+      const trigger = await getTrigger(page);
+      await openWithClick(page);
+      expect(trigger).toEqualAttribute("aria-expanded", "true");
+      await clickCloseButton(page);
+      // focus *should* be moved to trigger on close button click
+      expect(trigger).toEqualAttribute("aria-expanded", "false");
+      expect(await isFocused(trigger)).toBe(true);
+    });
+    it("closes on click outside", async () => {
+      const page = await createPage(`<duet-tooltip label="Example label">Example content</duet-tooltip>`);
+      const trigger = await getTrigger(page);
+      await openWithClick(page);
+      expect(trigger).toEqualAttribute("aria-expanded", "true");
+      await clickOutside(page);
+      // focus *should not* be moved anywhere on click outside
+      expect(trigger).toEqualAttribute("aria-expanded", "false");
+      expect(await isFocused(trigger)).toBe(false);
+    });
+    it("closes on Escape key", async () => {
+      const page = await createPage(`<duet-tooltip label="Example label">Example content</duet-tooltip>`);
+      const trigger = await getTrigger(page);
+      await openWithClick(page);
+      expect(trigger).toEqualAttribute("aria-expanded", "true");
+      await closeWithEsc(page);
+      // focus *should* be moved to trigger if closing with escape
+      expect(trigger).toEqualAttribute("aria-expanded", "false");
+      expect(await isFocused(trigger)).toBe(true);
+    });
+  });
+  it("supports passing a prefix to accessible label", async () => {
+    const page = await createPage(`<duet-tooltip accessible-label="Tooltip label" accessible-input-label="Input name">Example content</duet-tooltip>`);
+    const trigger = await getTrigger(page);
+    expect(trigger).toEqualText("Input name, Tooltip label");
+  });
+});

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

@@ -223,7 +223,8 @@ export class DuetTooltip {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -246,7 +247,8 @@ export class DuetTooltip {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -275,7 +277,8 @@ export class DuetTooltip {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -342,7 +345,8 @@ export class DuetTooltip {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -407,7 +411,8 @@ export class DuetTooltip {
           "references": {
             "DuetTooltipBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
+              "id": "src/components/duet-tooltip/duet-tooltip.tsx::DuetTooltipBreakpoint"
             }
           }
         },
@@ -430,7 +435,8 @@ export class DuetTooltip {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },

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

@@ -0,0 +1,103 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+const ANIMATION_DELAY = 600;
+describe("duet-tray", () => {
+  it("should render a tray", async () => {
+    const page = await createPage(`<duet-tray></duet-tray>`);
+    const component = await page.find("duet-tray");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-tray theme="turva"></duet-tray>`);
+    const element = await page.find("duet-tray >>> .duet-tray");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that makes the tray active", async () => {
+    const page = await createPage(`<duet-tray active></duet-tray>`);
+    const element = await page.find("duet-tray >>> .duet-tray");
+    expect(element).toHaveClass("duet-tray-is-active");
+  });
+  it("should provide a property that disables responsive behaviour", async () => {
+    const page = await createPage(`<duet-tray responsive="false"></duet-tray>`);
+    const element = await page.find("duet-tray >>> .duet-tray");
+    expect(element).not.toHaveClass("duet-tray-is-responsive");
+  });
+  it("should not have hidden state enabled by default", async () => {
+    const page = await createPage(`<duet-tray>content</duet-tray>`);
+    const element = await page.find("duet-tray >>> .duet-tray");
+    expect(element).not.toHaveClass("duet-tray-is-hidden");
+  });
+  it("should not be active by default", async () => {
+    const page = await createPage(`<duet-tray>content</duet-tray>`);
+    const element = await page.find("duet-tray >>> .duet-tray");
+    expect(element).not.toHaveClass("duet-tray-is-active");
+  });
+  it("allows for additional content in an expandable region", async () => {
+    const page = await createPage(`
+      <meta charset="utf-8" />
+      <duet-tray response="false" active>
+        <duet-grid alignment="center">
+          <duet-grid-item margin="none" fill>
+            <duet-paragraph size="small" margin="none"> Total price </duet-paragraph>
+          </duet-grid-item>
+          <duet-grid-item margin="none">
+            <span class="duet-font-size-m duet-font-weight-semi-bold">189,90 €</span>
+          </duet-grid-item>
+        </duet-grid>
+        <div slot="additional">
+          <duet-list>
+            <duet-list-item>
+              <span slot="label">Label 1</span>
+              <span slot="value">Value 1</span>
+            </duet-list-item>
+            <duet-list-item>
+              <span slot="label">Label 2</span>
+              <span slot="value">Value 2</span>
+            </duet-list-item>
+            <duet-list-item>
+              <span slot="label">Label 3</span>
+              <span slot="value">Value 3</span>
+            </duet-list-item>
+          </duet-list>
+        </div>
+      </duet-tray>
+      <duet-paragraph class="outside">Something outside to click on</duet-paragraph>
+    `);
+    // ensure everything is correct from an a11y perspective
+    const button = await page.find("duet-tray >>> .duet-tray-button");
+    expect(button).toEqualAttribute("aria-expanded", "false");
+    expect(button).toHaveAttribute("aria-controls");
+    // initially, expandable area should not be visible
+    const expandable = await page.find(`duet-tray >>> #${button.getAttribute("aria-controls")}`);
+    expect(await expandable.isVisible()).toBe(false);
+    // click to open
+    await button.click();
+    await page.waitForChanges();
+    // then expandable area *should* be visible
+    expect(button).toEqualAttribute("aria-expanded", "true");
+    expect(await expandable.isVisible()).toBe(true);
+    // click to close
+    await button.click();
+    await page.waitForChanges();
+    await page.waitForTimeout(ANIMATION_DELAY);
+    // then expandable area *should not* be visible
+    expect(button).toEqualAttribute("aria-expanded", "false");
+    expect(await expandable.isVisible()).toBe(false);
+    // click to open (again)
+    await button.click();
+    await page.waitForChanges();
+    expect(button).toEqualAttribute("aria-expanded", "true");
+    expect(await expandable.isVisible()).toBe(true);
+    // click on something outside of tray
+    const outsideElement = await page.find(".outside");
+    await outsideElement.click();
+    await page.waitForChanges();
+    await page.waitForTimeout(ANIMATION_DELAY);
+    // then expandable area *should not* be visible
+    expect(button).toEqualAttribute("aria-expanded", "false");
+    expect(await expandable.isVisible()).toBe(false);
+  });
+});

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

@@ -120,7 +120,8 @@ export class DuetTray {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -149,7 +150,8 @@ export class DuetTray {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -196,7 +198,8 @@ export class DuetTray {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -243,7 +246,8 @@ export class DuetTray {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

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

@@ -0,0 +1,49 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+import { getBrowsedFiles } from "./mock.helpers";
+const fileList = getBrowsedFiles();
+describe("duet-upload", () => {
+  it("should render an upload component", async () => {
+    const page = await createPage(`<duet-upload></duet-upload>`);
+    const component = await page.find("duet-upload");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should render an upload component & populate the file list", async () => {
+    const page = await createPage(`<duet-upload files=${fileList}></duet-upload>`);
+    const component = await page.find("duet-upload");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a way to retrieve errorCodes", async () => {
+    const page = await createPage(`<duet-upload files=${fileList}></duet-upload>`);
+    const component = await page.find("duet-upload");
+    expect(component).not.toBeNull();
+    const errorCodes = (await component.getProperty("errorCodes")) || null;
+    console.log(errorCodes);
+    expect(errorCodes).not.toBeNull();
+    console.log(errorCodes);
+    expect(errorCodes[0].type).toBe("default");
+  });
+  it("should provide a way to change errorCodes", async () => {
+    const page = await createPage(`<duet-upload files=${fileList}></duet-upload>`);
+    const component = await page.find("duet-upload");
+    const errorCodes = (await component.getProperty("errorCodes")) || null;
+    expect(errorCodes).not.toBeNull();
+    errorCodes[0] = {
+      type: "default",
+      system_message: "unknown error",
+      message: {
+        fi: "test",
+        sv: "test",
+        en: "test",
+      },
+    };
+    component.setProperty("errorCodes", errorCodes);
+    component.setProperty("files", fileList);
+    await page.waitForChanges();
+    expect(component.getAttribute("files").length).toBe(7);
+  });
+});