@duetds/components 7.1.0 → 7.1.1

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

@@ -0,0 +1,53 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-link", () => {
+  it("should render a link", async () => {
+    const page = await createPage(`<duet-link></duet-link>`);
+    const component = await page.find("duet-link");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that renders aria-label", async () => {
+    const page = await createPage(`<duet-link accessible-label="test"></duet-link>`);
+    const element = await page.find("duet-link >>> .duet-link");
+    expect(element.getAttribute("aria-label")).toEqual("test");
+  });
+  it("should provide a property that adds an ID for the link", async () => {
+    const page = await createPage(`<duet-link identifier="test"></duet-link>`);
+    const element = await page.find("duet-link >>> .duet-link");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-link theme="turva"></duet-link>`);
+    const element = await page.find("duet-link >>> .duet-link");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that adds a href for the link", async () => {
+    const page = await createPage(`<duet-link url="test"></duet-link>`);
+    const element = await page.find("duet-link >>> .duet-link");
+    expect(element.getAttribute("href")).toEqual("test");
+  });
+  it("should provide a property that adds renders a target attribute", async () => {
+    const page = await createPage(`<duet-link external></duet-link>`);
+    const element = await page.find("duet-link >>> .duet-link");
+    expect(element.getAttribute("target")).toEqual("_blank");
+    expect(element.getAttribute("rel")).toEqual("noopener");
+  });
+  it("should provide a property that renders the link in different style variations", async () => {
+    const page = await createPage(`<duet-link variation="block"></duet-link>`);
+    const component = await page.find("duet-link");
+    expect(component).toHaveClass("duet-link-block");
+  });
+  it("should provide a property that sets an icon for variations different than default", async () => {
+    const page = await createPage(`<duet-link icon="form-location" variation="block"></duet-link>`);
+    const element = await page.find("duet-link >>> duet-icon");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property to switch off the padding of variations different than default", async () => {
+    const page = await createPage(`<duet-link padding="none" variation="block"></duet-link>`);
+    const element = await page.find("duet-link >>> a");
+    expect(element).toHaveClass("duet-p-0");
+  });
+});

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

@@ -8,6 +8,7 @@ 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 { breakpointToToken } from "../../utils/token-utils";
 /**
  * @part duet-link - piercing selector for styling the link
  * @part block-chevron - piercing selector for styling the block chevron
@@ -25,13 +26,17 @@ export class DuetLink {
     this.external = false;
     this.tabToLink = false;
     this.icon = undefined;
+    this.iconColor = "currentColor";
+    this.iconResponsive = false;
     this.padding = "auto";
+    this.isSmallScreen = false;
   }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.initMediaQuery();
   }
   componentDidLoad() {
     nudge(this);
@@ -44,6 +49,7 @@ export class DuetLink {
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
+    this.destroyMediaQuery();
   }
   /**
    * Sets focus on the specified `duet-link`. Use this method instead of the global
@@ -52,11 +58,29 @@ export class DuetLink {
   async setFocus(options) {
     this.nativeLink.focus(options);
   }
+  initMediaQuery() {
+    if (Build.isServer) {
+      return;
+    }
+    this.screenTestBound = this.screenTest.bind(this);
+    this.mediaQuery = window.matchMedia(breakpointToToken["xx-small"]);
+    this.isSmallScreen = this.mediaQuery.matches;
+    this.mediaQuery.addEventListener("change", this.screenTestBound);
+  }
+  destroyMediaQuery() {
+    if (Build.isServer) {
+      return;
+    }
+    this.mediaQuery.removeEventListener("change", this.screenTestBound);
+  }
+  screenTest(event) {
+    this.isSmallScreen = event.matches;
+  }
   renderContent() {
     return (h(Fragment, null, h("span", { class: "duet-link-content" }, h("slot", null)), Build.isBrowser && this.external && (h(Fragment, null, h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })), h("duet-visually-hidden", null, this.accessibleLabelExternal)))));
   }
   renderGrid() {
-    return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+    return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
   }
   /**
    * render() function
@@ -102,7 +126,8 @@ export class DuetLink {
           "references": {
             "DuetLinkVariation": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLinkVariation"
             }
           }
         },
@@ -142,7 +167,8 @@ export class DuetLink {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -171,7 +197,8 @@ export class DuetLink {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -235,7 +262,8 @@ export class DuetLink {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -312,7 +340,8 @@ export class DuetLink {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -320,11 +349,53 @@ export class DuetLink {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon to display on the left side of the ink text. (only with variations other than \"default\")"
+          "text": "Icon to display on the left side of the ink text (only with \"block\" variation)"
         },
         "attribute": "icon",
         "reflect": false
       },
+      "iconColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconColor",
+          "resolved": "string",
+          "references": {
+            "DuetIconColor": {
+              "location": "import",
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconColor"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color of the icon to display (only with \"block\" variation)"
+        },
+        "attribute": "icon-color",
+        "reflect": false,
+        "defaultValue": "\"currentColor\""
+      },
+      "iconResponsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the icon changes its size responsively (only with \"block\" variation)"
+        },
+        "attribute": "icon-responsive",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "padding": {
         "type": "string",
         "mutable": false,
@@ -334,7 +405,8 @@ export class DuetLink {
           "references": {
             "DuetPadding": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
             }
           }
         },
@@ -342,7 +414,7 @@ export class DuetLink {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls the padding of the component (only with variations other than \"default\")"
+          "text": "Controls the padding of the component (only with \"block\" variation)"
         },
         "attribute": "padding",
         "reflect": false,
@@ -350,6 +422,11 @@ export class DuetLink {
       }
     };
   }
+  static get states() {
+    return {
+      "isSmallScreen": {}
+    };
+  }
   static get methods() {
     return {
       "setFocus": {
@@ -361,10 +438,12 @@ export class DuetLink {
             }],
           "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-list/duet-list.e2e.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -293,7 +293,8 @@ export class DuetMenuBarButton {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -343,10 +344,12 @@ export class DuetMenuBarButton {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

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

@@ -145,7 +145,8 @@ export class DuetMenuBarDropdown {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -213,10 +214,12 @@ export class DuetMenuBarDropdown {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

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

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

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

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