fix: allow link to open in a new tab if internal (#97)

bloom-housing · Dec 2, 2024 · 3414236 · 3414236
1 parent cd2c6da
commit 3414236
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/actions/Link.tsx b/src/actions/Link.tsx
@@ -37,7 +37,9 @@ const Link = (props: LinkProps) => {
   const classNames = ["seeds-link"]
 
   const tailIcon = shouldShowExternalLinkIcon(props) ? (
-    <Icon><ArrowTopRightOnSquareIcon /></Icon>
+    <Icon>
+      <ArrowTopRightOnSquareIcon />
+    </Icon>
   ) : (
     props.tailIcon
   )
@@ -46,28 +48,29 @@ const Link = (props: LinkProps) => {
   if (props.leadIcon) classNames.push("has-lead-icon")
   if (tailIcon) classNames.push("has-tail-icon")
 
-  const additionalProps = {
+  let additionalProps: { [key: string]: unknown } = {
     id: props.id,
     className: classNames.join(" "),
     "aria-label": props.ariaLabel,
     "aria-hidden": props.ariaHidden,
   }
 
+  if (props.newWindowTarget) {
+    additionalProps = { ...additionalProps, target: "_blank", rel: "noreferrer" }
+  }
+
+  const { LinkComponent } = useContext(NavigationContext)
+
   if (props.href && isExternalLink(props.href)) {
     return (
-      <a
-        href={props.href}
-        target={props.newWindowTarget ? "_blank" : undefined}
-        {...additionalProps}
-      >
+      <a href={props.href} {...additionalProps}>
         {props.leadIcon}
         {props.children}
         {tailIcon}
         {props.newWindowTarget && <ExternalLinkScreenReaderText />}
       </a>
     )
   } else {
-    const { LinkComponent } = useContext(NavigationContext)
     return (
       <LinkComponent href={props.href} {...additionalProps}>
         {props.leadIcon}

diff --git a/src/actions/__stories__/Link.stories.tsx b/src/actions/__stories__/Link.stories.tsx
@@ -30,6 +30,9 @@ export const ExternalLink = () => (
     <Link href="https://www.exygy.com" newWindowTarget>
       External Link (New Window)
     </Link>
+    <Link href="/test" newWindowTarget>
+      Internal Link (New Window)
+    </Link>
     <Link href="https://www.exygy.com" hideExternalLinkIcon>
       External Link (Same Window)
     </Link>