feat(react-card): add isExternal prop (#997)

* feat: add isExternal prop to card component

* update: remove legacy behavior

* add prop to live component

* Create forty-paws-tease.md

* fix: pass prop down to component

.changeset/forty-paws-tease.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/react-card": minor
+---
+
+feat(react-card): add isExternal prop to allow card link to open in new tab

packages/card/card.tsx

@@ -14,9 +14,15 @@ function Card({
   meta,
   description,
   productBadges,
+  isExternal,
 }: CardProps) {
   return (
-    <CardPrimitive.Card appearance={appearance} heading={heading} link={link}>
+    <CardPrimitive.Card
+      appearance={appearance}
+      heading={heading}
+      link={link}
+      isExternal={isExternal}
+    >
       {thumbnail ? (
         <CardPrimitive.Thumbnail src={thumbnail.src} alt={thumbnail.alt} />
       ) : null}

packages/card/docs.mdx

@@ -20,6 +20,7 @@ A component used to promote and link to marketing pages, always using a descript
       ]}
       heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…"
       description="Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…"
+			isExternal
     />
     <Card
       appearance="dark"

packages/card/primitives.tsx

@@ -27,8 +27,14 @@ const Card = React.forwardRef<HTMLAnchorElement, CardPrimitiveProps>(
       withArrow = true,
       heading,
       link,
+      isExternal,
       children,
     } = props
+
+    const linkProps = isExternal
+      ? { target: '_blank', rel: 'noopener noreferrer' }
+      : {}
+
     return (
       <div className={classNames(s.card, s[appearance])} data-testid="wpl-card">
         <div className={s.contentContainer}>
@@ -38,10 +44,13 @@ const Card = React.forwardRef<HTMLAnchorElement, CardPrimitiveProps>(
             {withArrow ? <IconArrowRight24 /> : null}
           </div>
 
-          <Link href={link} legacyBehavior>
-            {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-            <a ref={ref} className={s.link} aria-label={heading} />
-          </Link>
+          <Link
+            href={link}
+            ref={ref}
+            className={s.link}
+            aria-label={heading}
+            {...linkProps}
+          />
         </div>
       </div>
     )

packages/card/props.js

@@ -73,6 +73,11 @@ const baseProps = {
     required: true,
     testValue: 'https://hashicorp.com',
   },
+  isExternal: {
+    type: 'boolean',
+    description: 'If true, card link opens in new tab',
+    required: false,
+  },
 }
 
 const thumbnailProps = {

packages/card/types.ts

@@ -19,6 +19,7 @@ export interface BaseCardProps {
   withArrow?: boolean
   heading: string
   link: string
+  isExternal?: boolean
 }
 
 export interface CardPrimitiveProps extends BaseCardProps {