feat(calcite-link): Add support for download attribute. #3758

src/components/calcite-link/calcite-link.e2e.ts

@@ -1,15 +1,56 @@
 import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, renders } from "../../tests/commonTests";
+import { accessible, defaults, renders } from "../../tests/commonTests";
 
 describe("calcite-link", () => {
   it("renders", async () => renders("<calcite-link href='/'>link</calcite-link>", { display: "inline" }));
 
+  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("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>`);

src/components/calcite-link/calcite-link.tsx

@@ -31,6 +31,12 @@ export class CalciteLink {
   /** is the link disabled  */
   @Prop({ reflect: true }) 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
+   */
+  @Prop({ reflect: true }) download: string | boolean = false;
+
   /** optionally pass a href - used to determine if the component should render as a link or an anchor */
   @Prop({ reflect: true }) href?: string;
 
@@ -65,7 +71,8 @@ export class CalciteLink {
   }
 
   render(): VNode {
-    const dir = getElementDir(this.el);
+    const { download, el } = this;
+    const dir = getElementDir(el);
 
     const iconStartEl = (
       <calcite-icon
@@ -93,6 +100,11 @@ export class CalciteLink {
       <Host role="presentation">
         <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}
           ref={this.storeTagRef}
           rel={Tag === "a" && this.rel}

src/demos/calcite-link.html

@@ -191,6 +191,24 @@
       </div>
     </div>
 
+    <!-- download link -->
+    <div class="parent">
+      <div class="trigger-external-wrap-paragraph right-aligned-text">Download link: boolean</div>
+
+      <div class="trigger-external-wrap-paragraph">
+        <calcite-link download href="calcite-link.html">Download this page</calcite-link>
+      </div>
+    </div>
+
+    <!-- download link -->
+    <div class="parent">
+      <div class="trigger-external-wrap-paragraph right-aligned-text">Download link: value</div>
+
+      <div class="trigger-external-wrap-paragraph">
+        <calcite-link download="sample-page.html" href="calcite-link.html">Download this page</calcite-link>
+      </div>
+    </div>
+
     <!-- wrapping -->
     <div class="parent">
       <div class="trigger-external-wrap-paragraph right-aligned-text">wrapping</div>