@duetds/components 7.0.13 → 7.1.1

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

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

@@ -8,6 +8,7 @@ import { Build, Fragment, h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 const i18n = {
   fi: { lahi: "© LähiTapiola", turva: "© Turva" },
@@ -85,6 +86,9 @@ export class DuetFooter {
       ? Array.from(this.element.children).filter(el => el.matches("[slot='info']")).length > 0
       : !!this.element.querySelector(":scope > [slot='info']");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
       prop: "accessibleLabelExternal",
@@ -150,7 +154,8 @@ export class DuetFooter {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -173,7 +178,8 @@ export class DuetFooter {
           "references": {
             "DuetFooterVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+              "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterVariation"
             }
           }
         },
@@ -196,7 +202,8 @@ export class DuetFooter {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -237,7 +244,8 @@ export class DuetFooter {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -300,7 +308,8 @@ export class DuetFooter {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -311,7 +320,7 @@ export class DuetFooter {
               "name": "default",
               "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
             }],
-          "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
+          "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelExternal when needed"
         },
         "attribute": "accessible-label-external-default",
         "reflect": false,
@@ -384,7 +393,8 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+              "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
             }
           }
         }
@@ -404,7 +414,8 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+              "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
             }
           }
         }
@@ -424,7 +435,8 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+              "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
             }
           }
         }
@@ -444,7 +456,8 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+              "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
             }
           }
         }
@@ -464,7 +477,8 @@ export class DuetFooter {
           "references": {
             "DuetFooterAnalyticsEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+              "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterAnalyticsEvent"
             }
           }
         }
@@ -484,7 +498,8 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+              "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
             }
           }
         }

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

@@ -0,0 +1,42 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-grid", () => {
+  it("should render a grid", async () => {
+    const page = await createPage(`<duet-grid></duet-grid>`);
+    const component = await page.find("duet-grid");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that enables the responsive behaviour", async () => {
+    const page = await createPage(`<duet-grid responsive></duet-grid>`);
+    const element = await page.find("duet-grid");
+    expect(element).not.toHaveClass("duet-no-stacking");
+  });
+  it("should provide a property that disabled the responsive behaviour", async () => {
+    const page = await createPage(`<duet-grid responsive="false"></duet-grid>`);
+    const element = await page.find("duet-grid");
+    expect(element).toHaveClass("duet-no-stacking");
+  });
+  it("should provide a property that changes the direction of the items", async () => {
+    const page = await createPage(`<duet-grid direction="vertical"></duet-grid>`);
+    const element = await page.find("duet-grid");
+    expect(element).toHaveClass("duet-grid-direction-vertical");
+  });
+  it("should provide a property that changes the alignment of the items", async () => {
+    const page = await createPage(`<duet-grid alignment="baseline"></duet-grid>`);
+    const element = await page.find("duet-grid");
+    expect(element).toHaveClass("duet-grid-align-baseline");
+  });
+  it("should provide a property that changes the distribution of the items", async () => {
+    const page = await createPage(`<duet-grid distribution="center"></duet-grid>`);
+    const element = await page.find("duet-grid");
+    expect(element).toHaveClass("duet-grid-distribution-center");
+  });
+  it("should provide a property that adjusts aligment on mobile only", async () => {
+    const page = await createPage(`<duet-grid mobile="center"></duet-grid>`);
+    const element = await page.find("duet-grid");
+    expect(element).toHaveClass("duet-grid-mobile-center");
+  });
+});

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

@@ -188,7 +188,8 @@ export class DuetGrid {
           "references": {
             "DuetGridBreakpoint": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetGridBreakpoint"
             }
           }
         },
@@ -211,7 +212,8 @@ export class DuetGrid {
           "references": {
             "DuetDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetDirection"
             }
           }
         },
@@ -252,7 +254,8 @@ export class DuetGrid {
           "references": {
             "DuetGridAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+              "id": "src/components/duet-grid/duet-grid.tsx::DuetGridAlignment"
             }
           }
         },
@@ -275,7 +278,8 @@ export class DuetGrid {
           "references": {
             "DuetGridDistribution": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+              "id": "src/components/duet-grid/duet-grid.tsx::DuetGridDistribution"
             }
           }
         },
@@ -298,7 +302,8 @@ export class DuetGrid {
           "references": {
             "DuetGridMobileAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+              "id": "src/components/duet-grid/duet-grid.tsx::DuetGridMobileAlignment"
             }
           }
         },

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

@@ -118,7 +118,8 @@ export class DuetGridItem {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -141,7 +142,8 @@ export class DuetGridItem {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -185,7 +187,8 @@ export class DuetGridItem {
           "references": {
             "DuetDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetDirection"
             }
           }
         },
@@ -211,7 +214,8 @@ export class DuetGridItem {
           "references": {
             "DuetGridBreakpoint": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetGridBreakpoint"
             }
           }
         },