@duetds/components 7.1.0 → 7.1.2

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

@@ -615,7 +615,8 @@ export class DuetInput {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -691,7 +692,8 @@ export class DuetInput {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -732,7 +734,8 @@ export class DuetInput {
           "references": {
             "DuetInputType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
             }
           }
         },
@@ -755,7 +758,8 @@ export class DuetInput {
           "references": {
             "DuetVariationType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
             }
           }
         },
@@ -935,7 +939,8 @@ export class DuetInput {
           "references": {
             "DuetInputComponentType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
             }
           }
         },
@@ -975,7 +980,8 @@ export class DuetInput {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -1068,7 +1074,8 @@ export class DuetInput {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -1108,7 +1115,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1128,7 +1136,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1148,7 +1157,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1168,7 +1178,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1188,7 +1199,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1205,10 +1217,12 @@ export class DuetInput {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -1224,7 +1238,8 @@ export class DuetInput {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1240,7 +1255,8 @@ export class DuetInput {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,32 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-label", () => {
+  it("should render a label", async () => {
+    const page = await createPage(`<duet-label></duet-label>`);
+    const component = await page.find("duet-label");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-label theme="turva"></duet-label>`);
+    const element = await page.find("duet-label");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that adds an html for for the label", async () => {
+    const page = await createPage(`<duet-label for="test"></duet-label>`);
+    const element = await page.find("duet-label label");
+    expect(element.getAttribute("for")).toEqual("test");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-label margin="none"></duet-label>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that changes the spacing of label", async () => {
+    const page = await createPage(`<duet-label margin="none"></duet-label>`);
+    const element = await page.find("duet-label");
+    expect(element).toHaveClass("duet-m-0");
+  });
+});

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

@@ -56,7 +56,8 @@ export class DuetLabel {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -96,7 +97,8 @@ export class DuetLabel {
           "references": {
             "DuetLabelMargin": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx",
+              "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
             }
           }
         },
@@ -119,7 +121,8 @@ export class DuetLabel {
           "references": {
             "DuetLabelSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx",
+              "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
             }
           }
         },

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

@@ -0,0 +1,32 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-layout", () => {
+  it("should render a layout", async () => {
+    const page = await createPage(`<duet-layout><div slot="main"></div></duet-layout>`);
+    const component = await page.find("duet-layout");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-layout margin="none"><div slot="main"></div></duet-layout>`);
+    const element = await page.find("duet-layout >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that center aligns the layout", async () => {
+    const page = await createPage(`<duet-layout center><div slot="main"></div></duet-layout>`);
+    const element = await page.find("duet-layout >>> .duet-layout");
+    expect(element).toHaveClass("duet-center");
+  });
+  it("should provide a property that adjusts the sidebar when tabs are used", async () => {
+    const page = await createPage(`<duet-layout tabs><div slot="sidebar">test</div></duet-layout>`);
+    const element = await page.find("duet-layout >>> .duet-sidebar-container");
+    expect(element).toHaveClass("has-tabs");
+  });
+  it("should provide a property that middle aligns the layout", async () => {
+    const page = await createPage(`<duet-layout middle><div slot="main"></div></duet-layout>`);
+    const element = await page.find("duet-layout");
+    expect(element).toHaveClass("duet-middle");
+  });
+});

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

@@ -100,7 +100,8 @@ export class DuetLayout {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -123,7 +124,8 @@ export class DuetLayout {
           "references": {
             "DuetLayoutStickyDistance": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-layout/duet-layout.tsx",
+              "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
             }
           }
         },
@@ -200,7 +202,8 @@ export class DuetLayout {
           "references": {
             "DuetBreakpoints": {
               "location": "import",
-              "path": "../../utils/token-utils"
+              "path": "../../utils/token-utils",
+              "id": "src/utils/token-utils.ts::DuetBreakpoints"
             }
           }
         },

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

@@ -115,7 +115,7 @@
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 16px;
-  align-items: center;
+  align-items: start;
   padding: 16px;
   font-weight: 600;
   color: rgb(0, 41, 77);
@@ -131,6 +131,9 @@
   position: relative;
   bottom: 2px;
 }
+.block .block__chevron {
+  align-self: center;
+}
 .block .block__chevron-icon {
   transition: 300ms ease;
 }

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>"