Add isExternal to LinkButton (#557)

gsoft-inc · Dec 20, 2024 · b002222 · b002222
2 parents 13e2086 + 16ca6cc
commit b002222
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 18 deletions.
diff --git a/.changeset/calm-donkeys-deny.md b/.changeset/calm-donkeys-deny.md
@@ -0,0 +1,6 @@
+---
+"@hopper-ui/components": patch
+"docs": patch
+---
+
+Add isExternal prop to LinkButton to simplify opening a LinkButton to an external tab
diff --git a/apps/docs/content/components/buttons/LinkButton.mdx b/apps/docs/content/components/buttons/LinkButton.mdx
@@ -62,7 +62,7 @@ A link button can be disabled.
 <Example src="buttons/docs/linkButton/state" />
 
 ### External
-Add `rel="noopener noreferrer"` and `target="_blank"` attributes to render and external link button.
+Add isExternal attributes to render an external link button.
 
 <Example src="buttons/docs/linkButton/external" />
 

diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
@@ -491,15 +491,6 @@ export const Previews: Record<string, Preview> = {
     "checkbox/docs/checkboxgroup/itemsDescription": {
         component: lazy(() => import("@/../../packages/components/src/checkbox/docs/checkboxgroup/itemsDescription.tsx"))
     },
-    "ErrorMessage/docs/preview": {
-        component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/preview.tsx"))
-    },
-    "ErrorMessage/docs/noicon": {
-        component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/noicon.tsx"))
-    },
-    "ErrorMessage/docs/multipleerrors": {
-        component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/multipleerrors.tsx"))
-    },
     "Form/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/Form/docs/preview.tsx"))
     },
@@ -521,12 +512,6 @@ export const Previews: Record<string, Preview> = {
     "Form/docs/fluid": {
         component: lazy(() => import("@/../../packages/components/src/Form/docs/fluid.tsx"))
     },
-    "HelperMessage/docs/preview": {
-        component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/preview.tsx"))
-    },
-    "HelperMessage/docs/noicon": {
-        component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/noicon.tsx"))
-    },
     "inputs/docs/numberField/preview": {
         component: lazy(() => import("@/../../packages/components/src/inputs/docs/numberField/preview.tsx"))
     },
@@ -761,6 +746,21 @@ export const Previews: Record<string, Preview> = {
     "IconList/docs/size": {
         component: lazy(() => import("@/../../packages/components/src/IconList/docs/size.tsx"))
     },
+    "ErrorMessage/docs/preview": {
+        component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/preview.tsx"))
+    },
+    "ErrorMessage/docs/noicon": {
+        component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/noicon.tsx"))
+    },
+    "ErrorMessage/docs/multipleerrors": {
+        component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/multipleerrors.tsx"))
+    },
+    "HelperMessage/docs/preview": {
+        component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/preview.tsx"))
+    },
+    "HelperMessage/docs/noicon": {
+        component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/noicon.tsx"))
+    },
     "layout/docs/flex/preview": {
         component: lazy(() => import("@/../../packages/components/src/layout/docs/flex/preview.tsx"))
     },

diff --git a/packages/components/src/buttons/docs/linkButton/external.tsx b/packages/components/src/buttons/docs/linkButton/external.tsx
@@ -3,7 +3,7 @@ import { NewTabIcon } from "@hopper-ui/icons";
 
 export default function Example() {
     return (
-        <LinkButton href="https://www.google.com" target="_blank" rel="noopener noreferrer" >
+        <LinkButton href="https://www.google.com" isExternal>
             <Text>Learn more</Text>
             <NewTabIcon />
         </LinkButton>

diff --git a/packages/components/src/buttons/src/LinkButton.tsx b/packages/components/src/buttons/src/LinkButton.tsx
@@ -50,6 +50,11 @@ export interface LinkButtonProps extends StyledComponentProps<RACLinkProps> {
      * Whether or not the button takes up the width of its container.
      */
     isFluid?: ResponsiveProp<boolean>;
+
+    /**
+     * Whether the button should open in a new tab.
+     */
+    isExternal?: boolean;
 }
 
 function LinkButton(props: LinkButtonProps, ref: ForwardedRef<HTMLAnchorElement>) {
@@ -62,6 +67,9 @@ function LinkButton(props: LinkButtonProps, ref: ForwardedRef<HTMLAnchorElement>
         className,
         children: childrenProp,
         size: sizeProp,
+        isExternal,
+        rel,
+        target,
         isFluid: isFluidProp,
         variant = "primary",
         style: styleProp,
@@ -134,6 +142,8 @@ function LinkButton(props: LinkButtonProps, ref: ForwardedRef<HTMLAnchorElement>
         >
             <RACLink
                 ref={ref}
+                rel={rel ?? (isExternal ? "noopener noreferrer" : undefined)}
+                target={target ?? (isExternal ? "_blank" : undefined)}
                 className={classNames}
                 style={style}
                 slot={props.slot || undefined}

diff --git a/packages/components/src/buttons/tests/chromatic/LinkButton.stories.tsx b/packages/components/src/buttons/tests/chromatic/LinkButton.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
     component: LinkButton,
     args: {
         children: "Click me!",
-        target: "_blank"
+        isExternal: true
     }
 } satisfies Meta<typeof LinkButton>;