From 0bc88caaa26225ec78c69b447332f4d6df4eecbb Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Thu, 27 Jun 2019 11:15:25 -0600
Subject: [PATCH] Fix Link containsIcon specificity

---
 src/components/Link.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/Link.js b/src/components/Link.js
index 07ae2a70..f981a3f3 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -34,6 +34,19 @@ const linkStyles = css`
     margin-right: 0.4em;
   }
 
+  ${props =>
+    props.containsIcon &&
+    css`
+      svg {
+        height: 1em;
+        width: 1em;
+        vertical-align: middle;
+        position: relative;
+        bottom: 0;
+        margin-right: 0;
+      }
+    `};
+
   ${props =>
     props.secondary &&
     css`
@@ -112,19 +125,6 @@ const LinkInner = styled.span`
         vertical-align: inherit;
       }
     `};
-
-  ${props =>
-    props.containsIcon &&
-    css`
-      svg {
-        height: 1em;
-        width: 1em;
-        vertical-align: middle;
-        position: relative;
-        bottom: 0;
-        margin-right: 0;
-      }
-    `};
 `;
 
 const LinkA = styled.a`
@@ -147,10 +147,10 @@ const LinkButton = styled.button`
 /**
  * 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({ isButton, withArrow, containsIcon, LinkWrapper, children, ...rest }) {
+export function Link({ isButton, withArrow, LinkWrapper, children, ...rest }) {
   const content = (
     <Fragment>
-      <LinkInner withArrow={withArrow} containsIcon={containsIcon}>
+      <LinkInner withArrow={withArrow}>
         {children}
         {withArrow && <Icon icon="arrowright" />}
       </LinkInner>
@@ -159,7 +159,7 @@ export function Link({ isButton, withArrow, containsIcon, LinkWrapper, children,
 
   if (LinkWrapper) {
     const StyledLinkWrapper = styled(
-      ({ inverse, nochrome, secondary, tertiary, ...linkWrapperRest }) => (
+      ({ containsIcon, inverse, nochrome, secondary, tertiary, ...linkWrapperRest }) => (
         <LinkWrapper {...linkWrapperRest} />
       )
     )`