@duetds/components 7.0.13 → 7.1.1

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

@@ -14,6 +14,7 @@ import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
@@ -258,6 +259,9 @@ export class DuetHeader {
     inheritGlobalTheme(this);
     this.refresh();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     for (let i = 0; i < this.mql.length; i++) {
       // addEventListener is not available in Stencil hydrate
@@ -547,7 +551,8 @@ export class DuetHeader {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -570,7 +575,8 @@ export class DuetHeader {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -598,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::I18nText"
             }
           }
         },
@@ -632,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::I18nText"
             }
           }
         },
@@ -656,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"
             }
           }
         },
@@ -667,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,
@@ -703,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"
             }
           }
         },
@@ -711,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,
@@ -988,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1008,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1028,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1048,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1068,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1088,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1108,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1128,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1148,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1168,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1188,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderAnalyticsEvent"
             }
           }
         }
@@ -1208,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderMobileNavToggleEvent"
             }
           }
         }
@@ -1228,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/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
             }
           }
         }
@@ -1245,7 +1270,8 @@ export class DuetHeader {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1264,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

@@ -3,6 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 import { sanitizeString } from "../../utils/string-utils";
 import { getColorByName } from "../../utils/token-utils";
 /**
@@ -25,6 +26,9 @@ export class DuetHeading {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -67,7 +71,8 @@ export class DuetHeading {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -90,7 +95,8 @@ export class DuetHeading {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -113,7 +119,8 @@ export class DuetHeading {
           "references": {
             "DuetVisualHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetVisualHeadingLevel"
             }
           }
         },
@@ -153,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/laaksju3/duetds/packages/components/src/components/duet-heading/duet-heading.tsx",
+              "id": "src/components/duet-heading/duet-heading.tsx::DuetHeadingWeight"
             }
           }
         },
@@ -176,7 +184,8 @@ export class DuetHeading {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -199,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

@@ -124,6 +124,21 @@
   margin: 0;
   background: none;
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
+    min-height: 490px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
+    min-height: 540px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
+    min-height: 620px;
+  }
+}
 .duet-hero.duet-hero-campaign .background-area, .duet-hero.duet-hero-section .background-area {
   height: 1px;
   margin-bottom: -1px;
@@ -490,6 +505,21 @@
     margin: 8rem 0 13rem;
   }
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-section {
+    min-height: 490px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-section {
+    min-height: auto;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-section {
+    min-height: 560px;
+  }
+}
 @media (min-width: 62em) {
   .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);
+    });
+  });
+});