feat: add download and target to web component links

nl-design-system · Nov 12, 2023 · 7cd5532 · 7cd5532
1 parent 94830f6
commit 7cd5532
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 1 deletion.
diff --git a/.changeset/quiet-cows-dream.md b/.changeset/quiet-cows-dream.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/web-component-library-stencil": minor
+---
+
+add `download` and `target` properties to `utrecht-link` and `utrecht-button-link` web components'
diff --git a/packages/storybook-web-component/src/ButtonLink.stories.tsx b/packages/storybook-web-component/src/ButtonLink.stories.tsx
@@ -12,23 +12,29 @@ import { designTokenStory } from './design-token-story';
 interface ButtonLinkStoryProps {
   appearance?: string;
   disabled?: boolean;
+  download?: string;
   external?: boolean;
   href: string;
   placeholder?: boolean;
+  target?: string;
 }
 
 const ButtonLinkStory = ({
   appearance,
   children,
+  download,
   href,
   external,
   placeholder,
+  target,
 }: PropsWithChildren<ButtonLinkStoryProps>) => (
   <UtrechtButtonLink
     appearance={appearance}
+    download={download || undefined}
     external={external || undefined}
     href={href}
     placeholder={placeholder || undefined}
+    target={target || undefined}
   >
     {children}
   </UtrechtButtonLink>
@@ -52,6 +58,13 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    download: {
+      description: 'Filename for download target',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     external: {
       description: 'External',
       control: 'boolean',
@@ -64,6 +77,13 @@ const meta = {
       description: 'Placeholder',
       control: 'boolean',
     },
+    target: {
+      description: 'Target window',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
   },
   args: {
     disabled: false,
@@ -141,4 +161,12 @@ export const Placeholder: Story = {
   },
 };
 
+export const Download: Story = {
+  args: {
+    children: 'Voorbeeldlink',
+    download: 'example.html',
+    href: './',
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-web-component/src/Link.stories.tsx b/packages/storybook-web-component/src/Link.stories.tsx
@@ -20,13 +20,27 @@ const meta = {
         required: true,
       },
     },
+    download: {
+      description: 'Filename for download target',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     href: {
       description: 'Target URL',
       type: {
         name: 'string',
         required: true,
       },
     },
+    target: {
+      description: 'Target window',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
   },
   args: {},
   tags: ['autodocs'],
@@ -57,4 +71,12 @@ export const Default: Story = {
   },
 };
 
+export const Download: Story = {
+  args: {
+    children: 'Voorbeeldlink',
+    download: 'example.html',
+    href: './',
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/web-component-library-stencil/src/components.d.ts b/packages/web-component-library-stencil/src/components.d.ts
@@ -52,9 +52,11 @@ export namespace Components {
     }
     interface UtrechtButtonLink {
         "appearance": string;
+        "download"?: string;
         "external": boolean;
         "href": string;
         "placeholder": boolean;
+        "target"?: string;
     }
     interface UtrechtCheckbox {
         "checked": boolean;
@@ -598,7 +600,9 @@ export namespace Components {
     interface UtrechtIconZwemmen {
     }
     interface UtrechtLink {
+        "download"?: string;
         "href": string;
+        "target"?: string;
     }
     interface UtrechtLinkButton {
         "disabled": boolean;
@@ -2838,9 +2842,11 @@ declare namespace LocalJSX {
     }
     interface UtrechtButtonLink {
         "appearance"?: string;
+        "download"?: string;
         "external"?: boolean;
         "href"?: string;
         "placeholder"?: boolean;
+        "target"?: string;
     }
     interface UtrechtCheckbox {
         "checked"?: boolean;
@@ -3402,7 +3408,9 @@ declare namespace LocalJSX {
     interface UtrechtIconZwemmen {
     }
     interface UtrechtLink {
+        "download"?: string;
         "href"?: string;
+        "target"?: string;
     }
     interface UtrechtLinkButton {
         "disabled"?: boolean;

diff --git a/packages/web-component-library-stencil/src/components/button-link.tsx b/packages/web-component-library-stencil/src/components/button-link.tsx
@@ -14,9 +14,11 @@ import clsx from 'clsx';
 })
 export class ButtonLink {
   @Prop() appearance: string;
+  @Prop() download?: string;
   @Prop() external: boolean;
   @Prop() href: string;
   @Prop() placeholder: boolean;
+  @Prop() target?: string;
   render() {
     return (
       <a
@@ -31,8 +33,10 @@ export class ButtonLink {
           this.appearance === 'subtle-button' && 'utrecht-button-link--subtle',
         )}
         aria-disabled={this.placeholder ? 'true' : undefined}
+        download={typeof this.download === 'string' ? this.download : undefined}
         rel={this.external ? 'external noopener noreferrer' : undefined}
         role={this.placeholder ? 'link' : undefined}
+        target={typeof this.target === 'string' ? this.target : undefined}
       >
         <slot></slot>
       </a>

diff --git a/packages/web-component-library-stencil/src/components/link.tsx b/packages/web-component-library-stencil/src/components/link.tsx
@@ -12,10 +12,17 @@ import { Component, h, Prop } from '@stencil/core';
   shadow: true,
 })
 export class Link {
+  @Prop() download?: string;
   @Prop() href: string;
+  @Prop() target?: string;
   render() {
     return (
-      <a href={typeof this.href === 'string' ? this.href : undefined} class="utrecht-link utrecht-link--html-a">
+      <a
+        download={typeof this.download === 'string' ? this.download : undefined}
+        href={typeof this.href === 'string' ? this.href : undefined}
+        target={typeof this.target === 'string' ? this.target : undefined}
+        class="utrecht-link utrecht-link--html-a"
+      >
         <slot></slot>
       </a>
     );