From 9a489e49c8c623bff34fa17163a432836536e8c5 Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Tue, 28 Nov 2023 10:30:34 -0300
Subject: [PATCH] Added "as" prop to `Link` (#15233)

* feat: added as prop

* feat: added example

* fix: removed undefined from typescript

* fix: rollback change for className

* fix: added undefined

* feat: added as description

* fix: added control as false and updated snapshot
---
 .../__snapshots__/PublicAPI-test.js.snap      |  3 +++
 .../react/src/components/Link/Link.stories.js |  3 +++
 packages/react/src/components/Link/Link.tsx   | 21 ++++++++++++++++---
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index f89912ada8c3..df340fa99a63 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4328,6 +4328,9 @@ Map {
   "Link" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
+      "as": Object {
+        "type": "string",
+      },
       "children": Object {
         "type": "node",
       },
diff --git a/packages/react/src/components/Link/Link.stories.js b/packages/react/src/components/Link/Link.stories.js
index c1034f5a41a2..79b430512d11 100644
--- a/packages/react/src/components/Link/Link.stories.js
+++ b/packages/react/src/components/Link/Link.stories.js
@@ -29,6 +29,9 @@ export default {
         disable: true,
       },
     },
+    as: {
+      control: false,
+    },
     renderIcon: {
       table: {
         disable: true,
diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx
index 11c8dc028415..6d78cb9784df 100644
--- a/packages/react/src/components/Link/Link.tsx
+++ b/packages/react/src/components/Link/Link.tsx
@@ -17,6 +17,12 @@ import React, {
 import { usePrefix } from '../../internal/usePrefix';
 
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as?: string | undefined;
+
   /**
    * @description Indicates the element that represents the
    *   current item within a container or set of related
@@ -70,6 +76,7 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 const Link = React.forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>(
   function Link(
     {
+      as: BaseComponent,
       children,
       className: customClassName,
       href,
@@ -92,7 +99,7 @@ const Link = React.forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>(
     });
     const rel = target === '_blank' ? 'noopener' : undefined;
     const linkProps: AnchorHTMLAttributes<HTMLAnchorElement> = {
-      className,
+      className: BaseComponent ? undefined : className,
       rel,
       target,
     };
@@ -106,15 +113,17 @@ const Link = React.forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>(
       linkProps['aria-disabled'] = true;
     }
 
+    const BaseComponentAsAny = (BaseComponent ?? 'a') as any;
+
     return (
-      <a ref={ref} {...linkProps} {...rest}>
+      <BaseComponentAsAny ref={ref} {...linkProps} {...rest}>
         {children}
         {!inline && Icon && (
           <div className={`${prefix}--link__icon`}>
             <Icon />
           </div>
         )}
-      </a>
+      </BaseComponentAsAny>
     );
   }
 );
@@ -122,6 +131,12 @@ const Link = React.forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>(
 Link.displayName = 'Link';
 
 Link.propTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.string,
+
   /**
    * Provide the content for the Link
    */