@duetds/components 7.1.0 → 7.1.2

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -368,7 +368,8 @@ export class DuetDatePicker {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -480,7 +481,8 @@ export class DuetDatePicker {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -503,7 +505,8 @@ export class DuetDatePicker {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -532,7 +535,8 @@ export class DuetDatePicker {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -754,7 +758,8 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerDirection": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+              "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerDirection"
             }
           }
         },
@@ -795,7 +800,8 @@ export class DuetDatePicker {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -889,7 +895,8 @@ export class DuetDatePicker {
           "resolved": "ValidityState",
           "references": {
             "ValidityState": {
-              "location": "global"
+              "location": "global",
+              "id": "global::ValidityState"
             }
           }
         },
@@ -926,7 +933,8 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+              "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerChangeEvent"
             }
           }
         }
@@ -946,7 +954,8 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerFocusEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+              "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerFocusEvent"
             }
           }
         }
@@ -966,7 +975,8 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerFocusEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+              "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerFocusEvent"
             }
           }
         }
@@ -983,10 +993,12 @@ export class DuetDatePicker {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -1002,7 +1014,8 @@ export class DuetDatePicker {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1021,7 +1034,8 @@ export class DuetDatePicker {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,32 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+import { getColorByName } from "../../utils/token-utils";
+describe("duet-divider", () => {
+  it("should render a divider", async () => {
+    const page = await createPage(`<duet-divider></duet-divider>`);
+    const component = await page.find("duet-divider");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-divider theme="turva"></duet-divider>`);
+    const element = await page.find("duet-divider >>> .duet-divider");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-divider margin="none"></duet-divider>`);
+    const element = await page.find("duet-divider >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that changes color", async () => {
+    const page = await createPage(`<duet-divider color="color-success"></duet-divider>`);
+    const backgroundColor = await page.evaluate(() => {
+      const divider = document.querySelector("duet-divider").shadowRoot.querySelector(".duet-divider");
+      return window.getComputedStyle(divider).backgroundColor;
+    });
+    const expectedColor = getColorByName("color-success");
+    expect(backgroundColor).toEqual(expectedColor);
+  });
+});

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

@@ -52,7 +52,8 @@ export class DuetDivider {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -75,7 +76,8 @@ export class DuetDivider {
           "references": {
             "DuetDividerMargin": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-divider/duet-divider.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-divider/duet-divider.tsx",
+              "id": "src/components/duet-divider/duet-divider.tsx::DuetDividerMargin"
             }
           }
         },
@@ -98,7 +100,8 @@ export class DuetDivider {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },

package/lib/collection/components/duet-editable-table/duet-editable-table.e2e.js

@@ -0,0 +1,29 @@
+/*!
+ * Built with Duet Design System
+ */
+import { getAllFixturesFiles } from "../../utils/fixture-utils";
+import { createPage } from "../../utils/test-utils";
+const ressources = getAllFixturesFiles(__dirname);
+describe("duet-editable-table", () => {
+  it("should render an duet-editable-table component", async () => {
+    const page = await createPage(ressources.fixtures.table_with_actions_and_sorting);
+    const component = await page.find("duet-editable-table");
+    const items = await page.evaluate(() => {
+      function mapToObj(inputMap) {
+        const obj = {};
+        inputMap.forEach(function (value, key) {
+          obj[key] = value;
+        });
+        return obj;
+      }
+      const element = document.querySelector("duet-editable-table");
+      const items = element.rows;
+      // the map is not serializable (natively) so we need to pass it along as an object
+      return mapToObj(items);
+    });
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+    //expect items to match fixture items
+    expect(Object.keys(items).length).toBe(10);
+  });
+});

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -191,7 +191,8 @@ export class DuetEditableTable {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -214,7 +215,8 @@ export class DuetEditableTable {
           "references": {
             "DuetTableVariant": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTableVariant"
             }
           }
         },
@@ -255,7 +257,8 @@ export class DuetEditableTable {
           "references": {
             "DuetTableStickyDistance": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTableStickyDistance"
             }
           }
         },
@@ -278,7 +281,8 @@ export class DuetEditableTable {
           "references": {
             "DuetTableBreakpoint": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTableBreakpoint"
             }
           }
         },
@@ -301,7 +305,8 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableActions": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableActions"
             }
           }
         },
@@ -325,7 +330,8 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableColumns": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableColumns"
             }
           }
         },
@@ -349,7 +355,8 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableRows": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableRows"
             }
           }
         },
@@ -409,7 +416,8 @@ export class DuetEditableTable {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -483,7 +491,8 @@ export class DuetEditableTable {
           "references": {
             "DuetTableToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableToggleEvent"
             }
           }
         }
@@ -503,7 +512,8 @@ export class DuetEditableTable {
           "references": {
             "DuetTableMenuEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableMenuEvent"
             }
           }
         }

package/lib/collection/components/duet-empty-state/duet-empty-state.e2e.js

@@ -0,0 +1,16 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-empty-state", () => {
+  it("should render an empty state", async () => {
+    const page = await createPage("<duet-empty-state></duet-empty-state>");
+    const component = await page.find("duet-empty-state");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that changes the theme", async () => {
+    const page = await createPage("<duet-empty-state theme='turva'></duet-empty-state>");
+    const element = await page.find("duet-empty-state >>> .duet-empty-state");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+});

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -53,7 +53,8 @@ export class DuetEmptyState {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -76,7 +77,8 @@ export class DuetEmptyState {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -99,7 +101,8 @@ export class DuetEmptyState {
           "references": {
             "DuetEmptyStateSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+              "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStateSize"
             }
           }
         },

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

@@ -0,0 +1,13 @@
+/*!
+ * Built with Duet Design System
+ */
+import { getAllFixturesFiles } from "../../utils/fixture-utils";
+import { createPage } from "../../utils/test-utils";
+const { fixtures } = getAllFixturesFiles(__dirname);
+describe("duet-fieldset", () => {
+  it("should render an empty state", async () => {
+    const page = await createPage(fixtures.basic_fieldset);
+    const component = await page.find("duet-fieldset");
+    expect(component).not.toBeNull();
+  });
+});

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

@@ -81,7 +81,8 @@ export class DuetFieldset {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -104,7 +105,8 @@ export class DuetFieldset {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -217,7 +219,8 @@ export class DuetFieldset {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },

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

@@ -0,0 +1,186 @@
+/*!
+ * Built with Duet Design System
+ */
+import { getAllFixturesFiles } from "../../utils/fixture-utils";
+import { createPage } from "../../utils/test-utils";
+const { fixtures } = getAllFixturesFiles(__dirname);
+describe("duet-footer", () => {
+  it("should render a navigation", async () => {
+    const page = await createPage(fixtures.default_footer);
+    const component = await page.find("duet-footer");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that sets language", async () => {
+    const page = await createPage(fixtures.default_footer);
+    const element = await page.find("duet-footer >>> duet-logo");
+    expect(element.getAttribute("language")).toEqual("fi");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-footer margin="none"></duet-footer>`);
+    const element = await page.find("duet-footer >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-footer theme="turva"></duet-footer>`);
+    const element = await page.find("duet-footer >>> .duet-footer");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that changes logo’s href", async () => {
+    const page = await createPage(`<duet-footer logo-href="demo"></duet-footer>`);
+    const element = await page.find("duet-footer >>> duet-logo");
+    expect(element.getAttribute("href")).toEqual("demo");
+  });
+  it("should provide a property that renders navigation items", async () => {
+    const page = await createPage(fixtures.default_footer);
+    await page.$eval("duet-footer", (el) => {
+      el.items = [
+        { label: "Hae korvausta", href: "#", icon: "navigation-make-claim" },
+        { label: "Osta vakuutus", href: "#", icon: "action-buy-insurance" },
+        { label: "Yhteystiedot", href: "#", icon: "form-tel" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-footer >>> .duet-footer-link");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders menu items", async () => {
+    const page = await createPage(fixtures.default_footer);
+    await page.$eval("duet-footer", (el) => {
+      el.menu = [
+        { label: "Hae korvausta", href: "#" },
+        { label: "Osta vakuutus", href: "#" },
+        { label: "Yhteystiedot", href: "#" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-footer >>> p a");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders the footer in simple mode", async () => {
+    const page = await createPage(fixtures.footer_using_simple_variation);
+    const element = await page.find("duet-footer >>> .duet-footer-simple");
+    expect(element).not.toBeNull();
+  });
+  it("should automatically refresh itself when content changes", async () => {
+    const page = await createPage(fixtures.default_footer);
+    await page.$eval("duet-footer", (el) => {
+      el.items = [
+        { label: "Hae korvausta", href: "#", icon: "navigation-make-claim" },
+        { label: "Osta vakuutus", href: "#", icon: "action-buy-insurance" },
+        { label: "Yhteystiedot", href: "#", icon: "form-tel" },
+      ];
+    });
+    const element = await page.find("duet-footer");
+    // should be updated when setting the *attribute*
+    element.setAttribute("items", '[{ "label": "test", "href": "#", "icon": "navigation-make-claim" }]');
+    await page.waitForChanges();
+    let test = await page.find("duet-footer >>> .duet-footer-link");
+    expect(test).toEqualText("test");
+    // should also be updated when setting the label *property*
+    element.setProperty("items", [{ label: "test 2", href: "#", icon: "navigation-make-claim" }]);
+    await page.waitForChanges();
+    test = await page.find("duet-footer >>> .duet-footer-link");
+    expect(test).toEqualText("test 2");
+  });
+  describe("events", () => {
+    let page;
+    let footer;
+    const props = {
+      items: [
+        { label: "item 1", id: "item-1", icon: "form-tel" },
+        { label: "item 2", id: "item-2", icon: "navigation-make-claim" },
+      ],
+      menu: [{ label: "menu 1", id: "menu-1" }],
+      logoHref: "/logo",
+    };
+    beforeEach(async () => {
+      page = await createPage(fixtures.default_footer);
+      footer = await page.find("duet-footer");
+      await page.$eval("duet-footer", (footer, props) => {
+        Object.assign(footer, props);
+      }, props);
+      await page.waitForChanges();
+    });
+    it("raises events when logo is clicked", async () => {
+      const logo = await page.find("duet-footer >>> duet-logo");
+      const changeSpy = await footer.spyOnEvent("duetChange");
+      const logoSpy = await footer.spyOnEvent("duetLogoClick");
+      await logo.click();
+      const expected = {
+        component: "duet-footer",
+        data: { href: props.logoHref, label: "logo" },
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(logoSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when the menu is clicked", async () => {
+      const menu = await page.find("duet-footer >>> #menu-1");
+      const changeSpy = await footer.spyOnEvent("duetChange");
+      const menuSpy = await footer.spyOnEvent("duetMenuClick");
+      await menu.click();
+      const expected = {
+        component: "duet-footer",
+        data: props.menu[0],
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(menuSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when an item is clicked", async () => {
+      const item = await page.find("duet-footer >>> #item-1");
+      const changeSpy = await footer.spyOnEvent("duetChange");
+      const itemSpy = await footer.spyOnEvent("duetItemClick");
+      await item.click();
+      const expected = {
+        component: "duet-footer",
+        data: props.items[0],
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(itemSpy.firstEvent.detail).toEqual(expected);
+    });
+  });
+  describe("analytics", () => {
+    let page;
+    beforeEach(async () => {
+      page = await createPage(`
+        <duet-footer
+          items='[
+            { "label": "item 1", "id": "item-1", "analyticsId": "item analytics", "icon": "form-tel"} ,
+            { "label": "item 2", "id": "item-2", "icon": "form-tel" }
+          ]'
+          menu='[{ "label": "menu 1", "id": "menu-1", "analyticsId": "menu analytics"}]'
+        ></duet-footer>
+      `);
+    });
+    it("allows analytics to be set for footer items", async () => {
+      const item1 = await page.find("duet-footer >>> #item-1");
+      expect(item1).not.toBeNull();
+      const analyticsSpy = await page.spyOnEvent("duetAnalytics");
+      await item1.click();
+      expect(analyticsSpy).toHaveReceivedEventDetail({
+        analyticsId: "item analytics",
+        component: "duet-footer",
+      });
+    });
+    it("allows analytics to be set for menu items", async () => {
+      const menu1 = await page.find("duet-footer >>> #menu-1");
+      expect(menu1).not.toBeNull();
+      const analyticsSpy = await page.spyOnEvent("duetAnalytics");
+      await menu1.click();
+      expect(analyticsSpy).toHaveReceivedEventDetail({
+        analyticsId: "menu analytics",
+        component: "duet-footer",
+      });
+    });
+    it("does nothing when items without analytics are clicked", async () => {
+      const item2 = await page.find("duet-footer >>> #item-2");
+      expect(item2).not.toBeNull();
+      const analyticsSpy = await page.spyOnEvent("duetAnalytics");
+      await item2.click();
+      expect(analyticsSpy).toHaveReceivedEventTimes(0);
+    });
+  });
+});