From 0b65e9cd97113cec436ae3ea1d0f957d9830167f Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Mon, 11 Sep 2023 10:36:43 -0400
Subject: [PATCH] forward ref for link

---
 src/components/link/link.tsx | 52 +++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index 1aebff20c..2bb932b43 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -24,34 +24,30 @@ type LinkType = (typeof LINK_VARIANTS)[number];
  *
  * @param {LinkProps} props - The properties of the link.
  */
-export const Link: React.FC<LinkProps> = ({
-    disabled = false,
-    external = true,
-    type = 'primary',
-    iconRight,
-    description,
-    label,
-    href,
-    ...props
-}) => {
-    return (
-        <StyledLink
-            href={disabled ? undefined : href}
-            rel="noopener noreferrer"
-            type={type}
-            disabled={disabled}
-            {...(external && { target: '_blank' })}
-            {...props}
-            data-testid="link"
-        >
-            <div className="flex gap-x-1 items-center mr-0.5">
-                <Label>{label}</Label>
-                {iconRight && <div>{iconRight}</div>}
-            </div>
-            {description && <Description>{description}</Description>}
-        </StyledLink>
-    );
-};
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+    ({ disabled = false, external = true, type = 'primary', iconRight, description, label, href, ...props }, ref) => {
+        return (
+            <StyledLink
+                ref={ref}
+                href={disabled ? undefined : href}
+                rel="noopener noreferrer"
+                type={type}
+                disabled={disabled}
+                {...(external && { target: '_blank' })}
+                {...props}
+                data-testid="link"
+            >
+                <div className="flex gap-x-1 items-center mr-0.5">
+                    <Label>{label}</Label>
+                    {iconRight && <div>{iconRight}</div>}
+                </div>
+                {description && <Description>{description}</Description>}
+            </StyledLink>
+        );
+    },
+);
+
+Link.displayName = 'Link';
 
 type StyledLinkProps = Pick<LinkProps, 'disabled'> & {
     type: NonNullable<LinkProps['type']>;