@duetds/components 7.0.13 → 7.1.1

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

@@ -5,6 +5,7 @@ import { h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
+import { nudge } from "../../utils/nudge";
 const CharacterCount = ({ value, maxlength, label, theme }) => {
   if (maxlength == null) {
     return;
@@ -134,6 +135,9 @@ export class DuetTextarea {
       console.warn("[DUET WARNING]: counter requires counter-label to be set");
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus on the specified `duet-textarea`. Use this method instead of the global
    * `textarea.focus()`.
@@ -184,7 +188,8 @@ export class DuetTextarea {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -364,7 +369,8 @@ export class DuetTextarea {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -650,7 +656,8 @@ export class DuetTextarea {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -754,7 +761,8 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+              "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
             }
           }
         }
@@ -774,7 +782,8 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+              "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
             }
           }
         }
@@ -794,7 +803,8 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+              "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
             }
           }
         }
@@ -814,7 +824,8 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+              "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
             }
           }
         }
@@ -831,10 +842,12 @@ export class DuetTextarea {
             }],
           "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-toggle/duet-toggle.e2e.js

@@ -0,0 +1,73 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-toggle", () => {
+  it("should render a toggle", async () => {
+    const page = await createPage(`<duet-toggle></duet-toggle>`);
+    const component = await page.find("duet-toggle");
+    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-toggle margin="none"></duet-toggle>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders aria-controls", async () => {
+    const page = await createPage(`<duet-toggle accessible-controls="test"></duet-toggle>`);
+    const element = await page.find("duet-toggle input");
+    expect(element.getAttribute("aria-controls")).toEqual("test");
+  });
+  it("should provide a property that renders aria-activedescendant", async () => {
+    const page = await createPage(`<duet-toggle accessible-active-descendant="test"></duet-toggle>`);
+    const element = await page.find("duet-toggle input");
+    expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-owns", async () => {
+    const page = await createPage(`<duet-toggle accessible-owns="test"></duet-toggle>`);
+    const element = await page.find("duet-toggle input");
+    expect(element.getAttribute("aria-owns")).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-toggle theme="turva"></duet-toggle>`);
+    const element = await page.find("duet-toggle .duet-toggle");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that adds an ID for the toggle", async () => {
+    const page = await createPage(`<duet-toggle identifier="test"></duet-toggle>`);
+    const element = await page.find("duet-toggle input");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that adds name for the toggle", async () => {
+    const page = await createPage(`<duet-toggle name="test"></duet-toggle>`);
+    const element = await page.find("duet-toggle input");
+    expect(element.getAttribute("name")).not.toBeNull();
+  });
+  it("should provide a property that adds role for the toggle", async () => {
+    const page = await createPage(`<duet-toggle role="test"></duet-toggle>`);
+    const element = await page.find("duet-toggle input");
+    expect(element.getAttribute("role")).not.toBeNull();
+  });
+  it("should provide a property that checks the toggle", async () => {
+    const page = await createPage(`<duet-toggle checked></duet-toggle>`);
+    const element = (await page.find("duet-toggle input"));
+    expect(element.checked).not.toBeNull();
+  });
+  it("should provide a property that adds value for the toggle", async () => {
+    const page = await createPage(`<duet-toggle value="test"></duet-toggle>`);
+    const element = await page.find("duet-toggle input");
+    expect(element.getAttribute("value")).not.toBeNull();
+  });
+  it("should raise a duetChange event when user changes value", async () => {
+    const page = await createPage(`<duet-toggle value="test"></duet-toggle>`);
+    const element = await page.find("duet-toggle");
+    const spy = await element.spyOnEvent("duetChange");
+    await element.click();
+    expect(spy).toHaveReceivedEventDetail({
+      component: "duet-toggle",
+      value: "test",
+      checked: true,
+    });
+  });
+});

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
+import { nudge } from "../../utils/nudge";
 export class DuetToggle {
   constructor() {
     /**
@@ -53,6 +54,9 @@ export class DuetToggle {
       this.value = this.identifier;
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus on the specified `duet-toggle`. Use this method instead of the global
    * `input.focus()`.
@@ -96,7 +100,8 @@ export class DuetToggle {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -119,7 +124,8 @@ export class DuetToggle {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -432,7 +438,8 @@ export class DuetToggle {
           "references": {
             "DuetToggleChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx",
+              "id": "src/components/duet-toggle/duet-toggle.tsx::DuetToggleChangeEvent"
             }
           }
         }
@@ -449,10 +456,12 @@ export class DuetToggle {
             }],
           "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-toolbar/duet-toolbar.js

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

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetToolbarDropdown {
   constructor() {
     this.onClick = () => {
@@ -27,6 +28,9 @@ export class DuetToolbarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       this.open = false;
@@ -83,7 +87,8 @@ export class DuetToolbarDropdown {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -181,10 +186,12 @@ export class DuetToolbarDropdown {
             }],
           "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-toolbar-dropdown-link/duet-toolbar-dropdown-link.js

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetToolbarDropdownLink {
   constructor() {
     this.accessibleLabel = undefined;
@@ -19,6 +20,9 @@ export class DuetToolbarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       const dropdown = this.element.closest("duet-toolbar-dropdown");
@@ -77,7 +81,8 @@ export class DuetToolbarDropdownLink {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetToolbarLink {
   constructor() {
     this.theme = "";
@@ -17,6 +18,9 @@ export class DuetToolbarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -47,7 +51,8 @@ export class DuetToolbarLink {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { nudge } from "../../utils/nudge";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
@@ -21,6 +22,9 @@ export class DuetTooltipButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   async setFocus(options) {
     if (this.buttonElement) {
       this.buttonElement.focus(options);
@@ -95,7 +99,8 @@ export class DuetTooltipButton {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -156,10 +161,12 @@ export class DuetTooltipButton {
             }],
           "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-tooltip/duet-tooltip-popup.js

@@ -4,6 +4,8 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { FocusGuard } from "../../utils/focus-utils";
+import { nudge } from "../../utils/nudge";
+import { Teleport } from "../../utils/teleport";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
@@ -20,11 +22,23 @@ export class DuetTooltipPopup {
     this.placement = undefined;
     this.accessibleCloseLabel = undefined;
   }
+  handleActiveChange() {
+    if (this.active) {
+      this.teleport.go();
+    }
+    else {
+      this.teleport.resume(200);
+    }
+  }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.teleport = new Teleport(this.element);
+  }
+  componentDidLoad() {
+    nudge(this);
   }
   async getArrowElement() {
     return this.arrowEl;
@@ -65,7 +79,8 @@ export class DuetTooltipPopup {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -180,7 +195,8 @@ export class DuetTooltipPopup {
           "resolved": "CustomEvent<any>",
           "references": {
             "CustomEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::CustomEvent"
             }
           }
         }
@@ -194,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>"
@@ -213,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>"
@@ -232,7 +252,8 @@ export class DuetTooltipPopup {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -245,4 +266,10 @@ export class DuetTooltipPopup {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "active",
+        "methodName": "handleActiveChange"
+      }];
+  }
 }

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");
+  });
+});