@duetds/components 7.1.0 → 7.1.2

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

@@ -0,0 +1,105 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-list", () => {
+  it("should render a definition list", async () => {
+    const page = await createPage("<duet-list></duet-list>");
+    const component = await page.find("duet-list");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`
+      <duet-list theme="turva">
+        <duet-list-item>
+          <span slot="label">Nimi</span>
+          <span slot="value">Lasse Makinen</span>
+        </duet-list-item>
+      </duet-list>
+    `);
+    const element = await page.find("duet-list duet-list-item");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`
+      <duet-list margin="none">
+        <duet-list-item>
+          <span slot="label">Nimi</span>
+          <span slot="value">Lasse Makinen</span>
+        </duet-list-item>
+      </duet-list>
+    `);
+    const element = await page.find("duet-list >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders list in different style variations", async () => {
+    const page = await createPage(`
+      <duet-list variation="striped">
+        <duet-list-item>
+          <span slot="label">Nimi</span>
+          <span slot="value">Lasse Makinen</span>
+        </duet-list-item>
+      </duet-list>
+    `);
+    const element = await page.find("duet-list duet-list-item");
+    expect(element).toHaveClass("duet-list-striped");
+  });
+  it("should provide a property that allows to disable vertical stacking", async () => {
+    const page = await createPage(`
+      <duet-list responsive="false">
+        <duet-list-item>
+          <span slot="label">Nimi</span>
+          <span slot="value">Lasse Makinen</span>
+        </duet-list-item>
+      </duet-list>
+    `);
+    const element = await page.find("duet-list duet-list-item");
+    expect(element).toHaveClass("duet-no-stacking");
+    expect(element).not.toHaveClass("duet-list-item-breakpoint-small");
+  });
+  it("should provide a property that in responsive mode adjusts the alignment of the list items on mobile breakpoint", async () => {
+    const page = await createPage(`
+      <duet-list mobile="center">
+        <duet-list-item>
+          <span slot="label">Nimi</span>
+          <span slot="value">Lasse Makinen</span>
+        </duet-list-item>
+      </duet-list>
+    `);
+    const element = await page.find("duet-list .duet-list-mobile-center");
+    expect(element).not.toBeNull();
+  });
+  it("should provide property that in responsive mode switches the breakpoint used to trigger the content stacking", async () => {
+    const page = await createPage(`
+      <duet-list breakpoint="large">
+        <duet-list-item>
+          <span slot="label">Nimi</span>
+          <span slot="value">Lasse Makinen</span>
+        </duet-list-item>
+      </duet-list>
+    `);
+    const element = await page.find("duet-list .duet-list-item-breakpoint-large");
+    expect(element).not.toBeNull();
+  });
+  it("should automatically refresh itself when content changes", async () => {
+    const page = await createPage(`
+      <duet-list>
+        <duet-list-item>
+          <span slot="label">Nimi</span>
+          <span slot="value">Lasse Makinen</span>
+        </duet-list-item>
+      </duet-list>
+    `);
+    const element = await page.find("duet-list");
+    // should be updated when setting the *attribute*
+    element.setAttribute("variation", "striped");
+    await page.waitForChanges();
+    const test = await page.find("duet-list-item");
+    expect(test).toHaveClass("duet-list-striped");
+    // should also be updated when setting the label *property*
+    element.setProperty("variation", "default");
+    await page.waitForChanges();
+    expect(test).not.toHaveClass("duet-list-striped");
+  });
+});

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

@@ -97,7 +97,8 @@ export class DuetList {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -120,7 +121,8 @@ export class DuetList {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -143,7 +145,8 @@ export class DuetList {
           "references": {
             "DuetPadding": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
             }
           }
         },
@@ -166,7 +169,8 @@ export class DuetList {
           "references": {
             "DuetListMobileAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+              "id": "src/components/duet-list/duet-list.tsx::DuetListMobileAlignment"
             }
           }
         },
@@ -189,7 +193,8 @@ export class DuetList {
           "references": {
             "DuetListBreakpoint": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetListBreakpoint"
             }
           }
         },
@@ -212,7 +217,8 @@ export class DuetList {
           "references": {
             "DuetListVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+              "id": "src/components/duet-list/duet-list.tsx::DuetListVariation"
             }
           }
         },
@@ -235,7 +241,8 @@ export class DuetList {
           "references": {
             "DuetListLabelWidth": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+              "id": "src/components/duet-list/duet-list.tsx::DuetListLabelWidth"
             }
           }
         },

package/lib/collection/components/duet-list-item/duet-list-item.js

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

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

@@ -0,0 +1,42 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-logo", () => {
+  it("should render a logo", async () => {
+    const page = await createPage(`<duet-logo></duet-logo>`);
+    const component = await page.find("duet-logo");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-logo theme="turva"></duet-logo>`);
+    const element = await page.find("duet-logo >>> .duet-logo");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-logo margin="none"></duet-logo>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that changes the size of the logo", async () => {
+    const page = await createPage(`<duet-logo size="large"></duet-logo>`);
+    const element = await page.find("duet-logo >>> .duet-logo");
+    expect(element).toHaveClass("large");
+  });
+  it("should provide a property that changes logo’s href", async () => {
+    const page = await createPage(`<duet-logo href="demo"></duet-logo>`);
+    const element = await page.find("duet-logo >>> .duet-logo");
+    expect(element.getAttribute("href")).toEqual("demo");
+  });
+  it("should provide a property that changes logo’s language", async () => {
+    const page = await createPage(`<duet-logo language="en"></duet-logo>`);
+    const element = await page.find("duet-logo >>> .duet-logo svg title");
+    expect(element.textContent).toEqual("LocalTapiola");
+  });
+  it("should provide a property that changes logo to inverse mode", async () => {
+    const page = await createPage(`<duet-logo inverse></duet-logo>`);
+    const element = await page.find("duet-logo >>> .duet-logo svg");
+    expect(element.getAttribute("fill")).toEqual("rgb(255, 255, 255)");
+  });
+});

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

@@ -110,7 +110,8 @@ export class DuetLogo {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -133,7 +134,8 @@ export class DuetLogo {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -174,7 +176,8 @@ export class DuetLogo {
           "references": {
             "DuetLogoSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-logo/duet-logo.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-logo/duet-logo.tsx",
+              "id": "src/components/duet-logo/duet-logo.tsx::DuetLogoSize"
             }
           }
         },
@@ -215,7 +218,8 @@ export class DuetLogo {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -254,7 +258,8 @@ export class DuetLogo {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -287,10 +292,12 @@ export class DuetLogo {
             }],
           "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-menu-bar/duet-menu-bar.js

@@ -156,7 +156,8 @@ export class DuetMenuBar {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -265,7 +266,8 @@ export class DuetMenuBar {
           "references": {
             "DuetMenuBarChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
+              "id": "src/components/duet-menu-bar/duet-menu-bar.tsx::DuetMenuBarChangeEvent"
             }
           }
         }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -293,7 +293,8 @@ export class DuetMenuBarButton {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -343,10 +344,12 @@ export class DuetMenuBarButton {
             }],
           "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-menu-bar-dropdown/duet-menu-bar-dropdown.js

@@ -145,7 +145,8 @@ export class DuetMenuBarDropdown {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -213,10 +214,12 @@ export class DuetMenuBarDropdown {
             }],
           "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-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.js

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

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

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

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/mgibas/workspace/duet/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/mgibas/workspace/duet/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/mgibas/workspace/duet/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>"