@duetds/components 7.1.0 → 7.1.1

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/laaksju3/duetds/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"
             }
           }
         },

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

@@ -0,0 +1,210 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-button", () => {
+  it("should render a button", async () => {
+    const page = await createPage(`<duet-button></duet-button>`);
+    const component = await page.find("duet-button");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that renders aria-label", async () => {
+    const page = await createPage(`<duet-button accessible-label="test">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("aria-label")).toEqual("test");
+  });
+  it("should provide a property that renders aria-controls", async () => {
+    const page = await createPage(`<duet-button accessible-controls="test">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("aria-controls")).toEqual("test");
+  });
+  it("should provide a property that renders aria-expanded", async () => {
+    const page = await createPage(`<duet-button accessible-expanded="true">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("aria-expanded")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-pressed", async () => {
+    const page = await createPage(`<duet-button accessible-pressed="true">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("aria-pressed")).not.toBeNull();
+  });
+  it("should provide a property that renders button in different style variations", async () => {
+    const page = await createPage(`<duet-button variation="secondary">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element).toHaveClass("secondary");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-button theme="turva">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that expands the button to fill 100% width", async () => {
+    const page = await createPage(`<duet-button expand="true">Button</duet-button>`);
+    const element = await page.find("duet-button");
+    expect(element).toHaveClass("duet-expand");
+  });
+  it("should provide a property that makes the button fixed width even on mobile", async () => {
+    const page = await createPage(`<duet-button fixed>Button</duet-button>`);
+    const element = await page.find("duet-button");
+    expect(element).toHaveClass("duet-fixed");
+  });
+  it("should provide a property that makes the button disabled", async () => {
+    const page = await createPage(`<duet-button disabled>Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID for the button", async () => {
+    const page = await createPage(`<duet-button identifier="test">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that converts the button to a submit", async () => {
+    const page = await createPage(`<duet-button submit>Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("type")).toEqual("submit");
+  });
+  it("should provide a property that adds renders a target attribute", async () => {
+    const page = await createPage(`<duet-button url="#" external>Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("target")).toEqual("_blank");
+    expect(element.getAttribute("rel")).toEqual("noopener");
+  });
+  it("should provide a property that adds renders anchor href", async () => {
+    const page = await createPage(`<duet-button url="#">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("href")).toEqual("#");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-button margin="none">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that removes the padding of the component", async () => {
+    const page = await createPage(`<duet-button padding="none"></duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element).toHaveClass("duet-p-0");
+  });
+  it("should not add anchor-specific attributes to button", async () => {
+    const page = await createPage(`<duet-button>Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element).not.toHaveAttribute("target");
+    expect(element).not.toHaveAttribute("href");
+  });
+  it("should not add button-specific attributes to link", async () => {
+    const page = await createPage(`<duet-button url="#">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element).not.toHaveAttribute("type");
+    expect(element).not.toHaveAttribute("disabled");
+    expect(element).not.toHaveAttribute("name");
+    expect(element).not.toHaveAttribute("value");
+    expect(element).not.toHaveAttribute("aria-pressed");
+  });
+  it("should not add aria-* attributes unless explicitly set", async () => {
+    const page = await createPage(`<duet-button>Button</duet-button>`);
+    const component = await page.find("duet-button");
+    const button = await page.find("duet-button >>> .duet-button");
+    expect(button).not.toHaveAttribute("aria-expanded");
+    expect(button).not.toHaveAttribute("aria-pressed");
+    component.setAttribute("accessible-expanded", "true");
+    component.setAttribute("accessible-pressed", "true");
+    await page.waitForChanges();
+    expect(button).toEqualAttribute("aria-expanded", "true");
+    expect(button).toEqualAttribute("aria-pressed", "true");
+  });
+  it("supports opening links in a new window", async () => {
+    const page = await createPage(`
+      <link rel='stylesheet' href='http://localhost:3334/fonts/lib/localtapiola.css' />
+      <duet-button language="en" url="#" external>Link button</duet-button>
+    `);
+    const hiddenMessage = await page.find("duet-button >>> a duet-visually-hidden");
+    expect(hiddenMessage).not.toBe(null);
+    expect(hiddenMessage.innerText).toContain(", Avautuu uuteen ikkunaan");
+  });
+  describe("form interactions", () => {
+    async function implicitSubmission(fixture) {
+      const input = await fixture.form.find("input");
+      await input.focus();
+      await fixture.page.keyboard.press("Enter");
+    }
+    async function explicitSubmission(fixture) {
+      await fixture.button.click();
+    }
+    async function createFixture(props) {
+      const attrs = Object.entries(props)
+        .map(([attr, value]) => `${attr}="${value}"`)
+        .join(" ");
+      const page = await createPage(`
+        <form>
+          <label>
+            Name: <input name="name" type="text" />
+          </label>
+          <label>
+            Age: <input name="age" type="number" />
+          </label>
+          <duet-button ${attrs}>Submit</duet-button>
+        </form>
+      `);
+      const form = await page.find("form");
+      const button = await page.find("duet-button");
+      const spy = await form.spyOnEvent("submit");
+      return { page, form, spy, button };
+    }
+    describe.each([
+      ["implicit", implicitSubmission],
+      ["explicit", explicitSubmission],
+    ])(`%s form submission`, (_type, doSubmit) => {
+      it("should submit form", async () => {
+        const fixture = await createFixture({ submit: true });
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(1);
+      });
+      it("should only submit form if `submit` attr is `true`", async () => {
+        const fixture = await createFixture({ submit: false });
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(0);
+      });
+      it("should not submit form when `disabled`", async () => {
+        const fixture = await createFixture({ submit: true, disabled: true });
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(0);
+        fixture.button.removeAttribute("disabled");
+        await fixture.page.waitForChanges();
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(1);
+      });
+      it("should not not submit if rendered as a link", async () => {
+        const fixture = await createFixture({ submit: true, url: "test.html" });
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(0);
+      });
+    });
+    it("supports supplying name and value", async () => {
+      const page = await createPage(`
+        <form method="GET">
+          <duet-input name="name" label="name" value="nick"></duet-input>
+          <duet-button submit name="button" value="1">Submit 1</duet-button>
+          <duet-button id="click-me" submit name="button" value="2">Submit 2</duet-button>
+        </form>
+      `);
+      // funnel submitted form data through window object for later assertion
+      await page.$eval("form", (form) => {
+        form.addEventListener("submit", (e) => {
+          e.preventDefault();
+          const formData = new FormData(e.target);
+          formData.append(e.submitter.name, e.submitter.value);
+          // @ts-ignore
+          window.testData = Object.fromEntries(formData);
+        });
+      });
+      const button = await page.find("duet-button#click-me");
+      await button.click();
+      await page.waitForChanges();
+      const data = await page.evaluate(() => window["testData"]);
+      expect(data).toEqual({
+        name: "nick",
+        button: "2",
+      });
+    });
+  });
+});