fix: respect targets in links

.changeset/link-target-blank.md

@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix(Link): respect `target="_blank"` and modifier clicks instead of always navigating through the router

packages/components/src/components/Link/Link.stories.tsx

@@ -110,6 +110,22 @@ export const AllVariants: Story = {
     },
 };
 
+export const Targets: Story = {
+    render: () => (
+        <RouterProvider navigate={(path: string) => alert(`Navigate to: ${path}`)} useHref={(path: string) => path}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                <Link href="/hello">Default: navigates through the router</Link>
+                <Link href="/hello" target="_self">
+                    target=&quot;_self&quot;: navigates through the router
+                </Link>
+                <Link href="https://www.frontify.com" target="_blank" rel="noopener noreferrer">
+                    target=&quot;_blank&quot;: opens a new tab
+                </Link>
+            </div>
+        </RouterProvider>
+    ),
+};
+
 export const Truncated: Story = {
     args: {
         children: 'This is a very long link text that should be truncated if it overflows the container.',

packages/components/src/components/Link/Link.tsx

@@ -116,6 +116,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
             onContainer,
             onPress,
             disabled = false,
+            target,
             ...props
         },
         ref,
@@ -130,13 +131,24 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
                     return;
                 }
                 onPress?.(event);
+                if (event.defaultPrevented) {
+                    return;
+                }
 
-                if (href) {
+                const shouldUseClientSideNavigation = !target || target === '_self';
+                if (
+                    href &&
+                    shouldUseClientSideNavigation &&
+                    !event.metaKey &&
+                    !event.ctrlKey &&
+                    !event.shiftKey &&
+                    event.button === 0
+                ) {
                     event.preventDefault();
                     navigate(href);
                 }
             },
-            [href, navigate, onPress, disabled],
+            [href, navigate, onPress, disabled, target],
         );
 
         const computedColor = disabled
@@ -160,6 +172,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
                     .join(' ')}
                 ref={ref}
                 href={disabled ? undefined : resolvedHref}
+                target={target}
                 onClick={handleClick}
                 aria-disabled={disabled || undefined}
                 tabIndex={disabled ? -1 : undefined}

packages/components/src/components/Link/__tests__/Link.spec.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { RouterProvider } from '../../RouterProvider/RouterProvider';
 import { Link } from '../Link';
@@ -20,4 +20,47 @@ describe('Link Component', () => {
         const link = screen.getByText('Link Text');
         expect(link).toHaveAttribute('href', '/resolved/foo');
     });
+
+    it('should navigate client-side on a plain click', () => {
+        const navigate = vi.fn();
+
+        render(
+            <RouterProvider navigate={navigate} useHref={(path) => path}>
+                <Link href="/foo">Link Text</Link>
+            </RouterProvider>,
+        );
+
+        fireEvent.click(screen.getByText('Link Text'));
+        expect(navigate).toHaveBeenCalledWith('/foo');
+    });
+
+    it('should let the browser handle links with target="_blank"', () => {
+        const navigate = vi.fn();
+
+        render(
+            <RouterProvider navigate={navigate} useHref={(path) => path}>
+                <Link href="https://example.com" target="_blank">
+                    Link Text
+                </Link>
+            </RouterProvider>,
+        );
+
+        const link = screen.getByText('Link Text');
+        expect(link).toHaveAttribute('target', '_blank');
+        expect(fireEvent.click(link)).toBe(true);
+        expect(navigate).not.toHaveBeenCalled();
+    });
+
+    it('should let the browser handle modifier clicks', () => {
+        const navigate = vi.fn();
+
+        render(
+            <RouterProvider navigate={navigate} useHref={(path) => path}>
+                <Link href="/foo">Link Text</Link>
+            </RouterProvider>,
+        );
+
+        expect(fireEvent.click(screen.getByText('Link Text'), { metaKey: true })).toBe(true);
+        expect(navigate).not.toHaveBeenCalled();
+    });
 });