From fa2fb1ffc1d878467324bd66bba404debf238007 Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Tue, 18 Aug 2020 16:45:43 -0600
Subject: [PATCH] Forward ref for button, link components

---
 src/components/Button.js | 38 +++++++++++++++++++++++---------------
 src/components/Link.js   |  8 ++++----
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index bfaf805f..f031b25f 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { darken, rgba, opacify } from 'polished';
@@ -453,20 +453,28 @@ ButtonComponentPicker.defaultProps = {
   ...buttonStyleDefaultProps,
 };
 
-export function Button({ children, isDisabled, isLoading, loadingText, ...rest }) {
-  const content = (
-    <>
-      <Text>{children}</Text>
-      {isLoading && <Loading>{loadingText || 'Loading...'}</Loading>}
-    </>
-  );
-
-  return (
-    <StyledButton as={ButtonComponentPicker} disabled={isDisabled} isLoading={isLoading} {...rest}>
-      {content}
-    </StyledButton>
-  );
-}
+export const Button = forwardRef(
+  ({ children, isDisabled, isLoading, loadingText, ...rest }, ref) => {
+    const content = (
+      <>
+        <Text>{children}</Text>
+        {isLoading && <Loading>{loadingText || 'Loading...'}</Loading>}
+      </>
+    );
+
+    return (
+      <StyledButton
+        as={ButtonComponentPicker}
+        disabled={isDisabled}
+        isLoading={isLoading}
+        ref={ref}
+        {...rest}
+      >
+        {content}
+      </StyledButton>
+    );
+  }
+);
 
 Button.propTypes = {
   ...buttonStyleProps,
diff --git a/src/components/Link.js b/src/components/Link.js
index a2527c5d..8058a7df 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { darken } from 'polished';
@@ -178,7 +178,7 @@ LinkComponentPicker.defaultProps = {
 /**
  * Links can contains text and/or icons. Be careful using only icons, you must provide a text alternative via aria-label for accessibility.
  */
-export function Link({ children, withArrow, ...rest }) {
+export const Link = forwardRef(({ children, withArrow, ...rest }, ref) => {
   const content = (
     <>
       <LinkInner withArrow={withArrow}>
@@ -189,11 +189,11 @@ export function Link({ children, withArrow, ...rest }) {
   );
 
   return (
-    <StyledLink as={LinkComponentPicker} {...rest}>
+    <StyledLink as={LinkComponentPicker} ref={ref} {...rest}>
       {content}
     </StyledLink>
   );
-}
+});
 
 Link.propTypes = {
   children: PropTypes.node,