Add download prop to Button and Link to support file downloads. (#325)

Author: cjcenizal

src/docs/pages/button/Link.tsx

@@ -1,23 +1,29 @@
 import { useState } from "react";
-import { VuiButtonPrimary, VuiSpacer, VuiToggle } from "../../../lib";
+import { VuiButtonPrimary, VuiFlexContainer, VuiSpacer, VuiToggle } from "../../../lib";
 
 export const Link = () => {
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [isDownload, setIsDownload] = useState<boolean>(false);
 
   return (
     <>
-      <VuiToggle
-        label="Disabled (not clickable, visual)"
-        checked={isDisabled}
-        onChange={() => setIsDisabled(!isDisabled)}
-      />
+      <VuiFlexContainer>
+        <VuiToggle
+          label="Disabled (not clickable, visual)"
+          checked={isDisabled}
+          onChange={() => setIsDisabled(!isDisabled)}
+        />
+
+        <VuiToggle label="File download" checked={isDownload} onChange={() => setIsDownload(!isDownload)} />
+      </VuiFlexContainer>
 
       <VuiSpacer size="m" />
 
       <VuiButtonPrimary
         color="accent"
-        href="https://vectara.com"
-        target="_blank"
+        href={isDownload ? `${window.location.origin}/vectara-favicon.png` : "https://vectara.com"}
+        target={isDownload ? undefined : "_blank"}
+        download={isDownload ? "tiny_vectara_logo.png" : undefined}
         onClick={() => console.log("click")}
         onMouseOver={() => console.log("mouse over")}
         onMouseOut={() => console.log("mouse out")}

src/docs/pages/link/Link.tsx

@@ -1,19 +1,30 @@
-import { VuiLink } from "../../../lib";
+import { useState } from "react";
+import { VuiLink, VuiSpacer, VuiToggle } from "../../../lib";
 import { Subsection } from "../../components/Subsection";
 
 export const Link = () => {
+  const [isDownload, setIsDownload] = useState<boolean>(false);
+
+  const props = {
+    href: isDownload ? `${window.location.origin}/vectara-favicon.png` : "https://vectara.com",
+    target: isDownload ? undefined : "_blank",
+    download: isDownload ? "tiny_vectara_logo.png" : undefined
+  } as const;
+
   return (
     <>
+      <VuiToggle label="File download" checked={isDownload} onChange={() => setIsDownload(!isDownload)} />
+
+      <VuiSpacer size="m" />
+
       <Subsection title="With href and onClick">
-        <VuiLink href="https://vectara.com" target="_blank" onClick={() => alert("Clicked link")}>
+        <VuiLink onClick={() => alert("Clicked link")} {...props}>
           Link
         </VuiLink>
       </Subsection>
 
       <Subsection title="With href only">
-        <VuiLink href="https://vectara.com" target="_blank">
-          Link
-        </VuiLink>
+        <VuiLink {...props}>Link</VuiLink>
       </Subsection>
 
       <Subsection title="With onClick only">

src/lib/components/button/BaseButton.tsx

@@ -38,6 +38,7 @@ export type BaseButtonProps = {
   href?: LinkProps["href"];
   target?: LinkProps["target"];
   track?: LinkProps["track"];
+  download?: LinkProps["download"];
   htmlFor?: string;
   tabIndex?: number;
   title?: string;
@@ -143,7 +144,7 @@ export const BaseButton = forwardRef<HTMLButtonElement | null, Props>(
       onMouseOut,
       onMouseMove,
       tabIndex,
-      ["type"]: isSubmit ? "submit" : "button",
+      type: isSubmit ? "submit" : "button",
       disabled: isDisabled,
       ...rest
     } as const;

src/lib/components/context/Context.tsx

@@ -35,15 +35,18 @@ export const VuiContextProvider = ({
   isThemeIsolated
 }: Props) => {
   const createLink = (linkConfig: LinkProps) => {
-    if (linkProvider) return linkProvider(linkConfig);
-
-    const { className, href, onClick, children, ref, ...rest } = linkConfig;
+    if (!linkProvider || linkConfig.download) {
+      const { className, href, onClick, children, ref, ...rest } = linkConfig;
+
+      // To support downloads, we must use anchor tags, not a react-router Link.
+      return (
+        <a className={className} href={href} onClick={onClick} {...rest}>
+          {children}
+        </a>
+      );
+    }
 
-    return (
-      <a className={className} href={href} onClick={onClick} {...rest}>
-        {children}
-      </a>
-    );
+    return linkProvider(linkConfig);
   };
 
   const getPath = () => {

src/lib/components/link/types.ts

@@ -18,4 +18,5 @@ export type LinkProps = {
   tabIndex?: number;
   "data-testid"?: string;
   ref?: ForwardedRef<HTMLAnchorElement | null>;
+  download?: string;
 };