@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.597

package/dist/collection/components/link/link.e2e.js

@@ -0,0 +1,257 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, defaults, disabled, renders, hidden } from "../../tests/commonTests";
+describe("calcite-link", () => {
+    it("renders", async () => renders("<calcite-link href='/'>link</calcite-link>", { display: "inline" }));
+    it("honors hidden attribute", async () => hidden("calcite-link"));
+    it("defaults", async () => defaults("calcite-link", [
+        {
+            propertyName: "download",
+            defaultValue: false
+        }
+    ]));
+    it("is accessible", async () => {
+        await accessible("<calcite-link href='/'>link</calcite-link>");
+        await accessible("<calcite-link>link</calcite-link>");
+        await accessible("<calcite-link icon-start='plus' icon-end='plus' href='/'>Go</calcite-link>");
+    });
+    it("can be disabled", () => disabled(`<calcite-link href='/'>link</calcite-link>`));
+    it("sets download attribute on internal anchor", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link href="file.jpg">Continue</calcite-link>`);
+        const elementAsLink = await page.find("calcite-link >>> a");
+        expect(elementAsLink).not.toBeNull();
+        expect(await elementAsLink.getProperty("download")).toBe("");
+        expect(elementAsLink).not.toHaveAttribute("download");
+        const element = await page.find("calcite-link");
+        element.setProperty("download", true);
+        await page.waitForChanges();
+        expect(await elementAsLink.getProperty("download")).toBe("");
+        expect(elementAsLink).toHaveAttribute("download");
+        expect(elementAsLink.getAttribute("download")).toBe("");
+        const newFilename = "my-cool-file.jpg";
+        element.setProperty("download", newFilename);
+        await page.waitForChanges();
+        expect(await elementAsLink.getProperty("download")).toBe(newFilename);
+        expect(elementAsLink.getAttribute("download")).toBe(newFilename);
+        element.setProperty("download", false);
+        await page.waitForChanges();
+        expect(await elementAsLink.getProperty("download")).toBe("");
+        expect(elementAsLink).not.toHaveAttribute("download");
+    });
+    it("renders as a span with default props", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link>Continue</calcite-link>`);
+        const element = await page.find("calcite-link");
+        const elementAsSpan = await page.find("calcite-link >>> span");
+        const elementAsLink = await page.find("calcite-link >>> a");
+        const iconStart = await page.find("calcite-link >>> .calcite-link--icon.icon-start");
+        const iconEnd = await page.find("calcite-link >>> .calcite-link--icon.icon-end");
+        expect(element).not.toHaveAttribute("icon-flip-rtl");
+        expect(elementAsLink).toBeNull();
+        expect(elementAsSpan).not.toBeNull();
+        expect(iconStart).toBeNull();
+        expect(iconEnd).toBeNull();
+    });
+    it("should update childElType when href changes", async () => {
+        const page = await newE2EPage({ html: `<calcite-link>Continue</calcite-link>` });
+        const link = await page.find("calcite-link");
+        let elementAsLink;
+        let elementAsSpan;
+        elementAsSpan = await page.find("calcite-link >>> span");
+        elementAsLink = await page.find("calcite-link >>> a");
+        expect(elementAsSpan).not.toBeNull();
+        expect(elementAsLink).toBeNull();
+        link.setProperty("href", "/");
+        await page.waitForChanges();
+        elementAsSpan = await page.find("calcite-link >>> span");
+        elementAsLink = await page.find("calcite-link >>> a");
+        expect(elementAsSpan).toBeNull();
+        expect(elementAsLink).not.toBeNull();
+    });
+    it("renders as a link with default props", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link href="/">Continue</calcite-link>`);
+        const element = await page.find("calcite-link");
+        const elementAsSpan = await page.find("calcite-link >>> span");
+        const elementAsLink = await page.find("calcite-link >>> a");
+        const iconStart = await page.find("calcite-link >>> .calcite-link--icon.icon-start");
+        const iconEnd = await page.find("calcite-link >>> .calcite-link--icon.icon-end");
+        expect(element).not.toHaveAttribute("icon-flip-rtl");
+        expect(elementAsLink).not.toBeNull();
+        expect(elementAsSpan).toBeNull();
+        expect(iconStart).toBeNull();
+        expect(iconEnd).toBeNull();
+    });
+    it("renders as a span with requested props", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link>Continue</calcite-link>`);
+        const elementAsSpan = await page.find("calcite-link >>> span");
+        const elementAsLink = await page.find("calcite-link >>> a");
+        const iconStart = await page.find("calcite-link >>> .calcite-link--icon.icon-start");
+        const iconEnd = await page.find("calcite-link >>> .calcite-link--icon.icon-end");
+        expect(elementAsLink).toBeNull();
+        expect(elementAsSpan).not.toBeNull();
+        expect(iconStart).toBeNull();
+        expect(iconEnd).toBeNull();
+    });
+    it("renders as a link with requested props", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link href="/">Continue</calcite-link>`);
+        const elementAsSpan = await page.find("calcite-link >>> span");
+        const elementAsLink = await page.find("calcite-link >>> a");
+        const iconStart = await page.find("calcite-link >>> .calcite-link--icon.icon-start");
+        const iconEnd = await page.find("calcite-link >>> .calcite-link--icon.icon-end");
+        expect(elementAsLink).not.toBeNull();
+        expect(elementAsSpan).toBeNull();
+        expect(iconStart).toBeNull();
+        expect(iconEnd).toBeNull();
+    });
+    it("passes attributes to rendered child link", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link rel="noopener noreferrer" target="_blank" class="mycustomclass" href="google.com">Continue</calcite-link>`);
+        const elementAsSpan = await page.find("calcite-link >>> span");
+        const elementAsLink = await page.find("calcite-link >>> a");
+        const iconStart = await page.find("calcite-link >>> .calcite-link--icon.icon-start");
+        const iconEnd = await page.find("calcite-link >>> .calcite-link--icon.icon-end");
+        expect(elementAsLink).not.toBeNull();
+        expect(elementAsSpan).toBeNull();
+        expect(elementAsLink).not.toHaveClass("mycustomclass");
+        expect(elementAsLink).toEqualAttribute("href", "google.com");
+        expect(elementAsLink).toEqualAttribute("rel", "noopener noreferrer");
+        expect(elementAsLink).toEqualAttribute("target", "_blank");
+        expect(iconStart).toBeNull();
+        expect(iconEnd).toBeNull();
+    });
+    it("renders with an icon-start", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link icon-start='plus'>Continue</calcite-link>`);
+        const elementAsSpan = await page.find("calcite-link >>> span");
+        const elementAsLink = await page.find("calcite-link >>> a");
+        const iconStart = await page.find("calcite-link >>> .calcite-link--icon.icon-start");
+        const iconEnd = await page.find("calcite-link >>> .calcite-link--icon.icon-end");
+        expect(elementAsLink).toBeNull();
+        expect(elementAsSpan).not.toBeNull();
+        expect(iconStart).not.toBeNull();
+        expect(iconEnd).toBeNull();
+    });
+    it("renders with an icon-end", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link icon-end='plus'>Continue</calcite-link>`);
+        const elementAsSpan = await page.find("calcite-link >>> span");
+        const elementAsLink = await page.find("calcite-link >>> a");
+        const iconStart = await page.find("calcite-link >>> .calcite-link--icon.icon-start");
+        const iconEnd = await page.find("calcite-link >>> .calcite-link--icon.icon-end");
+        expect(elementAsLink).toBeNull();
+        expect(elementAsSpan).not.toBeNull();
+        expect(iconStart).toBeNull();
+        expect(iconEnd).not.toBeNull();
+    });
+    it("renders with an icon-start and icon-end", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-link icon-start='plus' icon-end='plus'>Continue</calcite-link>`);
+        const elementAsSpan = await page.find("calcite-link >>> span");
+        const elementAsLink = await page.find("calcite-link >>> a");
+        const iconStart = await page.find("calcite-link >>> .calcite-link--icon.icon-start");
+        const iconEnd = await page.find("calcite-link >>> .calcite-link--icon.icon-end");
+        expect(elementAsLink).toBeNull();
+        expect(elementAsSpan).not.toBeNull();
+        expect(iconStart).not.toBeNull();
+        expect(iconEnd).not.toBeNull();
+    });
+    describe("link interactivity", () => {
+        const targetPage = "#test";
+        let page;
+        let pageUrl;
+        let targetUrl;
+        beforeEach(async () => {
+            page = await newE2EPage({
+                html: `<calcite-link href="/${targetPage}">link</calcite-link>`
+            });
+            pageUrl = page.url();
+            targetUrl = `${pageUrl}${targetPage}`;
+        });
+        it("keyboard", async () => {
+            const element = await page.find("calcite-link");
+            await element.callMethod("setFocus");
+            await page.keyboard.press("Enter");
+            await page.waitForChanges();
+            expect(page.url()).toBe(targetUrl);
+        });
+        it("mouse", async () => {
+            // workaround for https://github.com/puppeteer/puppeteer/issues/2977
+            await page.$eval("calcite-link", (link) => {
+                link.shadowRoot.querySelector("a").click();
+            });
+            await page.waitForChanges();
+            expect(page.url()).toBe(targetUrl);
+        });
+        it("non user-initiated click event", async () => {
+            const link = await page.find("calcite-link");
+            const clickEvent = await link.spyOnEvent("click");
+            // helps test click behavior via HTMLElement.click()
+            await link.callMethod("click");
+            await page.waitForChanges();
+            expect(page.url()).toBe(targetUrl);
+            // make sure forwarded internal event does not propagate
+            expect(clickEvent).toHaveReceivedEventTimes(1);
+        });
+    });
+    describe("CSS properties for light/dark themes", () => {
+        const linkHtml = `
+      <h3>
+        A link <calcite-link href="#" title="in the middle with an icon" icon-start='launch'>
+        with an icon </calcite-link> in some text.
+      </h3>
+    `;
+        let page;
+        let link;
+        let linkStyles;
+        let linkUnderlineStyle;
+        it("should have defined CSS custom properties", async () => {
+            page = await newE2EPage({ html: linkHtml });
+            linkUnderlineStyle = await page.evaluate(() => {
+                link = document.querySelector("calcite-link");
+                link.style.setProperty("--calcite-link-blue-underline", "red");
+                return window.getComputedStyle(link).getPropertyValue("--calcite-link-blue-underline");
+            });
+            expect(linkUnderlineStyle).toEqual("red");
+        });
+        describe("when theme attribute is not provided", () => {
+            it("should render link background with default value tied to light theme", async () => {
+                page = await newE2EPage({ html: linkHtml });
+                link = await page.find("calcite-link >>> a");
+                linkStyles = await link.getComputedStyle();
+                linkUnderlineStyle = await linkStyles.getPropertyValue("background-image");
+                expect(linkUnderlineStyle).toEqual("linear-gradient(rgb(0, 97, 155), rgb(0, 97, 155)), linear-gradient(rgba(0, 97, 155, 0.4), rgba(0, 97, 155, 0.4))");
+            });
+        });
+        describe("when theme attribute is dark", () => {
+            it("should render link background with value tied to dark theme", async () => {
+                page = await newE2EPage({
+                    html: `<article class="calcite-theme-dark">${linkHtml}</article>`
+                });
+                link = await page.find("calcite-link >>> a");
+                linkStyles = await link.getComputedStyle();
+                linkUnderlineStyle = await linkStyles.getPropertyValue("background-image");
+                expect(linkUnderlineStyle).toEqual("linear-gradient(rgb(0, 160, 255), rgb(0, 160, 255)), linear-gradient(rgba(0, 160, 255, 0.4), rgba(0, 160, 255, 0.4))");
+            });
+        });
+        it("should allow the CSS custom property to be overridden", async () => {
+            const overrideStyle = "rgba(255, 244, 40, 0.5)";
+            page = await newE2EPage({
+                html: `
+        <style>
+          :root {
+            --calcite-link-blue-underline: ${overrideStyle};
+          }
+        </style>
+        ${linkHtml}
+        `
+            });
+            link = await page.find("calcite-link >>> a");
+            linkStyles = await link.getComputedStyle();
+            linkUnderlineStyle = await linkStyles.getPropertyValue("background-image");
+            expect(linkUnderlineStyle).toEqual(`linear-gradient(rgb(0, 97, 155), rgb(0, 97, 155)), linear-gradient(${overrideStyle}, ${overrideStyle})`);
+        });
+    });
+});

package/dist/collection/components/link/link.js

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.597
  */
-import { Component, Element, h, Host, Listen, Method, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -18,12 +18,12 @@ export class Link {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** is the link disabled  */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /**
      * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
      * Without a value, the browser will suggest a filename/extension
-     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download.
      */
     this.download = false;
     this.childElClickHandler = (event) => {
@@ -58,16 +58,12 @@ export class Link {
     const Tag = childElType;
     const role = childElType === "span" ? "link" : null;
     const tabIndex = childElType === "span" ? 0 : null;
-    return (h(Host, { role: "presentation" },
-      h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, 
-        /*
-        When the 'download' property of type 'boolean | string' is set to true, the value is "".
-        This works around that issue for now.
-        */
-        download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target },
-        this.iconStart ? iconStartEl : null,
-        h("slot", null),
-        this.iconEnd ? iconEndEl : null)));
+    return (h(Host, { role: "presentation" }, h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+      /*
+      When the 'download' property of type 'boolean | string' is set to true, the value is "".
+      This works around that issue for now.
+      */
+      download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -91,181 +87,191 @@ export class Link {
   }
   static get is() { return "calcite-link"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["link.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["link.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "is the link disabled"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "download": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | boolean",
-        "resolved": "boolean | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\nWithout a value, the browser will suggest a filename/extension\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download"
-      },
-      "attribute": "download",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass a href - used to determine if the component should render as a link or an anchor"
+      "download": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | boolean",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\nWithout a value, the browser will suggest a filename/extension\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download."
+        },
+        "attribute": "download",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "href",
-      "reflect": true
-    },
-    "iconEnd": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the URL of the linked resource, which can be set as an absolute or relative path."
+        },
+        "attribute": "href",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass an icon to display at the end of a button - accepts calcite ui icon names"
+      "iconEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies an icon to display at the end of the component."
+        },
+        "attribute": "icon-end",
+        "reflect": true
       },
-      "attribute": "icon-end",
-      "reflect": true
-    },
-    "iconFlipRtl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "FlipContext",
-        "resolved": "\"both\" | \"end\" | \"start\"",
-        "references": {
-          "FlipContext": {
-            "location": "import",
-            "path": "../interfaces"
+      "iconFlipRtl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FlipContext",
+          "resolved": "\"both\" | \"end\" | \"start\"",
+          "references": {
+            "FlipContext": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "flip the icon(s) in rtl"
-      },
-      "attribute": "icon-flip-rtl",
-      "reflect": true
-    },
-    "iconStart": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass an icon to display at the start of a button - accepts calcite ui icon names"
-      },
-      "attribute": "icon-start",
-      "reflect": true
-    },
-    "rel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The rel attribute to apply to the hyperlink"
-      },
-      "attribute": "rel",
-      "reflect": true
-    },
-    "target": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+        },
+        "attribute": "icon-flip-rtl",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The target attribute to apply to the hyperlink"
+      "iconStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies an icon to display at the start of the component."
+        },
+        "attribute": "icon-start",
+        "reflect": true
       },
-      "attribute": "target",
-      "reflect": true
-    }
-  }; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the relationship to the linked document defined in `href`."
+        },
+        "attribute": "rel",
+        "reflect": false
       },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the frame or window to open the linked document."
+        },
+        "attribute": "target",
+        "reflect": false
       }
-    }
-  }; }
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "clickHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }