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
carbon-design-system · Nov 28, 2023 · 9a489e4 · 9a489e4
1 parent a8a5ff8
commit 9a489e4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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,22 +113,30 @@ 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>
     );
   }
 );
 
 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
    */