@duetds/components 7.0.13 → 7.1.1

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

@@ -9,6 +9,7 @@ import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 const icons = {
   search: searchIcon,
   email: emailIcon,
@@ -226,6 +227,7 @@ export class DuetInput {
         this.isPasswordRevealed = false;
       });
     }
+    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -613,7 +615,8 @@ export class DuetInput {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -689,7 +692,8 @@ export class DuetInput {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -730,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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
             }
           }
         },
@@ -753,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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
             }
           }
         },
@@ -933,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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
             }
           }
         },
@@ -973,7 +980,8 @@ export class DuetInput {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -1066,7 +1074,8 @@ export class DuetInput {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -1106,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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1126,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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1146,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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1166,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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1186,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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1203,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>"
@@ -1222,7 +1238,8 @@ export class DuetInput {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1238,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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetLabel {
   constructor() {
     this.theme = "";
@@ -16,6 +17,9 @@ export class DuetLabel {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -52,7 +56,8 @@ export class DuetLabel {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -92,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/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+              "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
             }
           }
         },
@@ -115,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/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+              "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
             }
           }
         },
@@ -131,4 +138,5 @@ export class DuetLabel {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

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/laaksju3/duetds/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

@@ -7,6 +7,8 @@ import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
+import { breakpointToToken } from "../../utils/token-utils";
 /**
  * @part duet-link - piercing selector for styling the link
  * @part block-chevron - piercing selector for styling the block chevron
@@ -24,13 +26,20 @@ 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);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
@@ -40,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
@@ -48,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
@@ -98,7 +126,8 @@ export class DuetLink {
           "references": {
             "DuetLinkVariation": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLinkVariation"
             }
           }
         },
@@ -138,7 +167,8 @@ export class DuetLink {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -167,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"
             }
           }
         },
@@ -231,7 +262,8 @@ export class DuetLink {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -308,7 +340,8 @@ export class DuetLink {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -316,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,
@@ -330,7 +405,8 @@ export class DuetLink {
           "references": {
             "DuetPadding": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
             }
           }
         },
@@ -338,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,
@@ -346,6 +422,11 @@ export class DuetLink {
       }
     };
   }
+  static get states() {
+    return {
+      "isSmallScreen": {}
+    };
+  }
   static get methods() {
     return {
       "setFocus": {
@@ -357,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>"
@@ -372,4 +455,5 @@ export class DuetLink {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }