From 491212adaf9cde0d0d9ce29c7ea70e5430424adc Mon Sep 17 00:00:00 2001
From: Michael Pande <git@e2e.no>
Date: Thu, 29 Aug 2024 16:04:22 +0200
Subject: [PATCH 1/3] Added ref to link

---
 src/components/Link/index.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Link/index.jsx b/src/components/Link/index.jsx
index cfbfa491..ee4d1eb1 100644
--- a/src/components/Link/index.jsx
+++ b/src/components/Link/index.jsx
@@ -14,6 +14,7 @@ const Link = ({
   title,
   onClick = () => {},
   standAlone,
+  ref,
 }) => {
   const classNames = `ssb-link${linkType ? ` ${linkType}` : ''}${standAlone ? ' stand-alone' : ''}
 		${negative ? ' negative' : ''}${icon ? ' with-icon' : ''}${className ? ` ${className}` : ''}`
@@ -29,6 +30,7 @@ const Link = ({
       aria-label={ariaLabel}
       title={title}
       onClick={onClick}
+      ref={ref}
     >
       {icon && <div className='icon-wrapper'>{icon}</div>}
       {children && <span className='link-text'>{children}</span>}

From cb9a08d77018bd20e50ab521395211930a89b2ad Mon Sep 17 00:00:00 2001
From: Michael Pande <git@e2e.no>
Date: Thu, 29 Aug 2024 16:22:56 +0200
Subject: [PATCH 2/3] Added ref to proptype

---
 src/components/Link/index.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Link/index.jsx b/src/components/Link/index.jsx
index ee4d1eb1..bf884047 100644
--- a/src/components/Link/index.jsx
+++ b/src/components/Link/index.jsx
@@ -51,6 +51,7 @@ Link.propTypes = {
   title: PropTypes.string,
   onClick: PropTypes.func,
   standAlone: PropTypes.bool,
+  ref: PropTypes.object,
 }
 
 export default Link

From 8f37c443cef4d37d79f19278bb92f522fbf85093 Mon Sep 17 00:00:00 2001
From: Michael Pande <git@e2e.no>
Date: Fri, 30 Aug 2024 14:18:32 +0200
Subject: [PATCH 3/3] Use forwardRef instead

---
 src/components/Link/index.jsx | 77 ++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/src/components/Link/index.jsx b/src/components/Link/index.jsx
index bf884047..db8e47c5 100644
--- a/src/components/Link/index.jsx
+++ b/src/components/Link/index.jsx
@@ -1,42 +1,46 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
-const Link = ({
-  ariaLabel,
-  children,
-  className,
-  href,
-  icon,
-  isExternal = false,
-  linkType,
-  negative = false,
-  tabIndex,
-  title,
-  onClick = () => {},
-  standAlone,
-  ref,
-}) => {
-  const classNames = `ssb-link${linkType ? ` ${linkType}` : ''}${standAlone ? ' stand-alone' : ''}
-		${negative ? ' negative' : ''}${icon ? ' with-icon' : ''}${className ? ` ${className}` : ''}`
+const Link = forwardRef(
+  (
+    {
+      ariaLabel,
+      children,
+      className,
+      href,
+      icon,
+      isExternal = false,
+      linkType,
+      negative = false,
+      tabIndex,
+      title,
+      onClick = () => {},
+      standAlone,
+    },
+    ref
+  ) => {
+    const classNames = `ssb-link${linkType ? ` ${linkType}` : ''}${standAlone ? ' stand-alone' : ''}
+    ${negative ? ' negative' : ''}${icon ? ' with-icon' : ''}${className ? ` ${className}` : ''}`
 
-  return (
-    // eslint-disable-next-line react/jsx-no-target-blank
-    <a
-      className={classNames.replace(/\s\s+/g, ' ').trim()}
-      href={href}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noopener noreferrer' : undefined}
-      tabIndex={tabIndex}
-      aria-label={ariaLabel}
-      title={title}
-      onClick={onClick}
-      ref={ref}
-    >
-      {icon && <div className='icon-wrapper'>{icon}</div>}
-      {children && <span className='link-text'>{children}</span>}
-    </a>
-  )
-}
+    return (
+      // eslint-disable-next-line react/jsx-no-target-blank
+      <a
+        className={classNames.replace(/\s\s+/g, ' ').trim()}
+        href={href}
+        target={isExternal ? '_blank' : undefined}
+        rel={isExternal ? 'noopener noreferrer' : undefined}
+        tabIndex={tabIndex}
+        aria-label={ariaLabel}
+        title={title}
+        onClick={onClick}
+        ref={ref}
+      >
+        {icon && <div className='icon-wrapper'>{icon}</div>}
+        {children && <span className='link-text'>{children}</span>}
+      </a>
+    )
+  }
+)
 
 Link.propTypes = {
   ariaLabel: PropTypes.string,
@@ -51,7 +55,6 @@ Link.propTypes = {
   title: PropTypes.string,
   onClick: PropTypes.func,
   standAlone: PropTypes.bool,
-  ref: PropTypes.object,
 }
 
 export default Link