@duetds/components 7.1.0 → 7.1.2

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

@@ -551,7 +551,8 @@ export class DuetHeader {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -574,7 +575,8 @@ export class DuetHeader {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -602,15 +604,18 @@ export class DuetHeader {
           "resolved": "string | { fi: I18nText; en: I18nText; sv: I18nText; }",
           "references": {
             "Record": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Record"
             },
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             },
             "I18nText": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::I18nText"
             }
           }
         },
@@ -636,7 +641,8 @@ export class DuetHeader {
           "references": {
             "I18nText": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::I18nText"
             }
           }
         },
@@ -660,7 +666,8 @@ export class DuetHeader {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -671,7 +678,7 @@ export class DuetHeader {
               "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,
@@ -707,7 +714,8 @@ export class DuetHeader {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -715,7 +723,7 @@ export class DuetHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Property to change accessibleLabel defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabel when needed"
+          "text": "Property to change accessibleLabel defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabel when needed"
         },
         "attribute": "accessible-label-default",
         "reflect": false,
@@ -992,7 +1000,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1012,7 +1021,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1032,7 +1042,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1052,7 +1063,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1072,7 +1084,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1092,7 +1105,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1112,7 +1126,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1132,7 +1147,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1152,7 +1168,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1172,7 +1189,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1192,7 +1210,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderAnalyticsEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderAnalyticsEvent"
             }
           }
         }
@@ -1212,7 +1231,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderMobileNavToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderMobileNavToggleEvent"
             }
           }
         }
@@ -1232,7 +1252,8 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1249,7 +1270,8 @@ export class DuetHeader {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1268,10 +1290,12 @@ export class DuetHeader {
             }],
           "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-heading/duet-heading.e2e.js

@@ -0,0 +1,27 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-heading", () => {
+  it("should render a heading", async () => {
+    const page = await createPage(`<duet-heading></duet-heading>`);
+    const component = await page.find("duet-heading");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-heading theme="turva"></duet-heading>`);
+    const element = await page.find("duet-heading >>> .duet-heading");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-heading margin="none"></duet-heading>`);
+    const element = await page.find("duet-heading >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders different heading levels", async () => {
+    const page = await createPage(`<duet-heading level="h4"></duet-heading>`);
+    const element = await page.find("duet-heading >>> h4");
+    expect(element).not.toBeNull();
+  });
+});

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

@@ -71,7 +71,8 @@ export class DuetHeading {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -94,7 +95,8 @@ export class DuetHeading {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -117,7 +119,8 @@ export class DuetHeading {
           "references": {
             "DuetVisualHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetVisualHeadingLevel"
             }
           }
         },
@@ -157,7 +160,8 @@ export class DuetHeading {
           "references": {
             "DuetHeadingWeight": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-heading/duet-heading.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-heading/duet-heading.tsx",
+              "id": "src/components/duet-heading/duet-heading.tsx::DuetHeadingWeight"
             }
           }
         },
@@ -180,7 +184,8 @@ export class DuetHeading {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -203,7 +208,8 @@ export class DuetHeading {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

package/lib/collection/components/duet-hero/duet-hero.css

@@ -162,6 +162,12 @@
 .duet-hero.duet-hero-campaign .background img, .duet-hero.duet-hero-section .background img {
   height: 100%;
 }
+.duet-hero.duet-hero-campaign .background img.cover, .duet-hero.duet-hero-section .background img.cover {
+  object-fit: cover;
+}
+.duet-hero.duet-hero-campaign .background img.center, .duet-hero.duet-hero-section .background img.center {
+  object-position: center;
+}
 @media (min-width: 1440px) {
   .duet-hero.duet-hero-campaign .background img, .duet-hero.duet-hero-section .background img {
     width: 100%;

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

@@ -0,0 +1,172 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-hero", () => {
+  it("should render a hero area", async () => {
+    const page = await createPage(`<duet-hero></duet-hero>`);
+    const component = await page.find("duet-hero");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-hero theme="turva"></duet-hero>`);
+    const element = await page.find("duet-hero >>> .duet-hero");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that sets pre-heading", async () => {
+    const page = await createPage(`<duet-hero pre-heading="test"></duet-hero>`);
+    const element = await page.find("duet-hero >>> .duet-hero-pre");
+    expect(element.textContent).toEqual("test");
+  });
+  it("should provide a property that sets the heading", async () => {
+    const page = await createPage(`<duet-hero heading="test #473895ur8oiojoP!"></duet-hero>`);
+    const element = await page.find("duet-hero >>> duet-heading");
+    expect(element.textContent).toEqual("test #473895ur8oiojoP!");
+  });
+  it("should provide a property that changes the heading level", async () => {
+    const page = await createPage(`<duet-hero heading="test #473895ur8oiojoP!" level="h5"></duet-hero>`);
+    const element = await page.find("duet-hero >>> duet-heading");
+    expect(element.getAttribute("level")).toEqual("h5");
+  });
+  it("should provide a property that sets the description", async () => {
+    const page = await createPage(`<duet-hero description="test #473895ur8oiojoP!"></duet-hero>`);
+    const element = await page.find("duet-hero >>> duet-paragraph >>> .duet-paragraph");
+    expect(element.textContent).toEqual("test #473895ur8oiojoP!");
+  });
+  it("should provide a property that sets an icon for the action button", async () => {
+    const page = await createPage(`<duet-hero button-label="test #473895ur8oiojoP!" button-id="test"></duet-hero>`);
+    const element = await page.find("duet-hero >>> duet-button >>> .duet-button-icon");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that sets an ID for the action button", async () => {
+    const page = await createPage(`<duet-hero button-label="test #473895ur8oiojoP!" button-id="test"></duet-hero>`);
+    const element = await page.find("duet-hero >>> duet-button >>> #test");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that sets the icon size", async () => {
+    const page = await createPage(`<duet-hero button-label="test #473895ur8oiojoP!" icon="action-add" icon-size="large"></duet-hero>`);
+    await page.waitForChanges();
+    const element = await page.find("duet-hero >>> duet-button >>> .large");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that sets the image for hero area", async () => {
+    const page = await createPage(`<duet-hero image="http://localhost:3334/icons/lib/assets/action-add-circle.svg"></duet-hero>`);
+    const element = await page.find("duet-hero >>> .duet-hero-image");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that changes the style variation to light", async () => {
+    const page = await createPage(`<duet-hero variation="light"></duet-hero>`);
+    const element = await page.find("duet-hero >>> .duet-hero-light");
+    expect(element).not.toBeNull();
+  });
+  it("should not render image if the image property isn’t used", async () => {
+    const page = await createPage(`<duet-hero title="test"></duet-hero>`);
+    const element = await page.find("duet-hero >>> .duet-hero-image");
+    expect(element).toBeNull();
+  });
+  it("should not render button if the buttonLabel property isn’t used", async () => {
+    const page = await createPage(`<duet-hero title="test"></duet-hero>`);
+    const element = await page.find("duet-hero >>> duet-button");
+    expect(element).toBeNull();
+  });
+  it("should not render intro text if the description property isn’t used", async () => {
+    const page = await createPage(`<duet-hero title="test"></duet-hero>`);
+    const element = await page.find("duet-hero >>> .duet-hero-paragraph");
+    expect(element).toBeNull();
+  });
+  it("should provide a property that sets action items", async () => {
+    const page = await createPage(`<duet-hero></duet-hero>`);
+    await page.$eval("duet-hero", (el) => {
+      el.variation = "gray";
+      el.actions = [
+        { label: "Ilmoita vahingosta", href: "/foo", icon: "navigation-make-claim" },
+        { label: "Päivitä vakuutusta", href: "#", icon: "action-edit-2" },
+        { label: "Tee rekisteröintimuutos", href: "#", icon: "messaging-terms", external: true },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-hero >>> .duet-hero-links .duet-hero-link:first-child");
+    expect(element.getAttribute("href")).toEqual("/foo");
+  });
+  it("should provide a property that sets list items", async () => {
+    const page = await createPage(`<duet-hero></duet-hero>`);
+    await page.$eval("duet-hero", (el) => {
+      el.variation = "gray";
+      el.listItems = [
+        { label: "Ilmoita vahingosta", value: "test" },
+        { label: "Päivitä vakuutusta", value: "test" },
+        { label: "Tee rekisteröintimuutos", value: "test" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-hero >>> duet-list");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that sets the back link", async () => {
+    const page = await createPage(`<duet-hero></duet-hero>`);
+    await page.$eval("duet-hero", (el) => {
+      el.variation = "gray";
+      el.back = { label: "Takaisin", href: "#" };
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-hero >>> .duet-hero-back");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that sets language", async () => {
+    const page = await createPage(`<duet-hero language="en"></duet-hero>`);
+    await page.$eval("duet-hero", (el) => {
+      el.variation = "gray";
+      el.actions = [
+        { label: "Ilmoita vahingosta", href: "#", icon: "navigation-make-claim" },
+        { label: "Päivitä vakuutusta", href: "#", icon: "action-edit-2" },
+        { label: "Tee rekisteröintimuutos", href: "#", icon: "messaging-terms", external: true },
+      ];
+    });
+    const element = await page.find("duet-hero >>> duet-visually-hidden");
+    expect(element.textContent).toEqual(", Avautuu uuteen ikkunaan");
+  });
+  it("should automatically refresh itself when content changes", async () => {
+    const page = await createPage(`<duet-hero language="en"></duet-hero>`);
+    await page.$eval("duet-hero", (el) => {
+      el.variation = "gray";
+      el.actions = [{ label: "Ilmoita vahingosta", href: "#", icon: "navigation-make-claim" }];
+    });
+    const element = await page.find("duet-hero");
+    // should be updated when setting the *attribute*
+    element.setAttribute("actions", '[{ "label": "test", "href": "#", "icon": "navigation-make-claim" }]');
+    await page.waitForChanges();
+    const test = await page.find("duet-hero >>> .duet-hero-links .duet-hero-link:first-child");
+    expect(test).toEqualText("test");
+    // should also be updated when setting the label *property*
+    element.setProperty("actions", [{ label: "test 2", href: "#", icon: "navigation-make-claim" }]);
+    await page.waitForChanges();
+    expect(test).toEqualText("test 2");
+  });
+  describe("analytics", () => {
+    let page;
+    const ANALYTICS_EVENT_NAME = "some test event";
+    beforeEach(async () => {
+      page = await createPage(`<duet-hero heading="Laskut" button-label="Vaihda e-laskutukseen" button-url="#"></duet-hero>`);
+      await page.$eval("duet-hero", (hero, analyticsId) => {
+        hero.buttonData = { analytics: analyticsId };
+      }, ANALYTICS_EVENT_NAME);
+    });
+    it("allows analytics to be set for the hero button", async () => {
+      const button = await page.find("duet-hero >>> duet-button");
+      const analyticsSpy = await page.spyOnEvent("duetAnalytics");
+      await button.click();
+      expect(analyticsSpy).toHaveReceivedEventTimes(1);
+      expect(analyticsSpy).toHaveReceivedEventDetail({
+        analyticsId: ANALYTICS_EVENT_NAME,
+        component: "duet-hero",
+      });
+    });
+    it("doesn't add analytics attributes when elements other than button clicked", async () => {
+      const heading = await page.find("duet-hero >>> duet-heading");
+      const analyticsSpy = await page.spyOnEvent("duetAnalytics");
+      await heading.click();
+      expect(analyticsSpy).toHaveReceivedEventTimes(0);
+    });
+  });
+});