From 4ede732eb333a33b41fa34c98736f5c01c67f15c Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Wed, 12 Jun 2019 11:16:18 -0600
Subject: [PATCH] Destructure LinkWrapper props to avoid passing them down

---
 src/components/Link.js         | 13 +++++++++----
 src/components/Link.stories.js | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Link.js b/src/components/Link.js
index 53bc294e..fe293171 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -146,10 +146,15 @@ export function Link({ isButton, withArrow, containsIcon, LinkWrapper, children,
   );
 
   if (LinkWrapper) {
-    const StyledLinkWrapper = LinkA.withComponent(LinkWrapper);
-    const { inverse, nochrome, secondary, tertiary, ...linkWrapperProps } = rest;
-
-    return <StyledLinkWrapper {...linkWrapperProps}>{content}</StyledLinkWrapper>;
+    const StyledLinkWrapper = styled(
+      ({ inverse, nochrome, secondary, tertiary, ...linkWrapperRest }) => (
+        <LinkWrapper {...linkWrapperRest} />
+      )
+    )`
+      ${linkStyles};
+    `;
+
+    return <StyledLinkWrapper {...rest}>{content}</StyledLinkWrapper>;
   }
 
   if (isButton) {
diff --git a/src/components/Link.stories.js b/src/components/Link.stories.js
index 59d86c81..f0e6cbfb 100644
--- a/src/components/Link.stories.js
+++ b/src/components/Link.stories.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
@@ -7,6 +8,12 @@ import { Icon } from './Icon';
 import { Link } from './Link';
 import { StoryLinkWrapper } from './StoryLinkWrapper';
 
+const CustomLink = styled(Link)`
+  && {
+    color: red;
+  }
+`;
+
 const onLinkClick = action('onLinkClick');
 storiesOf('Design System|Link', module)
   .addParameters({ component: Link })
@@ -51,10 +58,14 @@ storiesOf('Design System|Link', module)
         is actually a button
       </Link>
       <br />
-      <Link LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
+      <Link tertiary LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
         has a LinkWrapper like GatsbyLink or NextLink
       </Link>
       <br />
+      <CustomLink tertiary LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
+        has a LinkWrapper like GatsbyLink or NextLink with custom styling
+      </CustomLink>
+      <br />
       <Link LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
         <Button>has a LinkWrapper like GatsbyLink or NextLink and a Button child</Button>
       </Link>