Fix LinkWrapper props to avoid collisions w React, Gatsby, etc links (#…

…10)

Fix LinkWrapper props to avoid collisions w React, Gatsby, etc links

src/components/Highlight.js

@@ -34,7 +34,7 @@ const HighlightBlock = styled.div`
   }
 `;
 
-class Highlight extends React.Component {
+export class Highlight extends React.Component {
   componentDidMount() {
     this.highlightCode();
   }
@@ -62,5 +62,3 @@ class Highlight extends React.Component {
 Highlight.propTypes = {
   children: PropTypes.node.isRequired,
 };
-
-export default Highlight;

src/components/Highlight.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Highlight from './Highlight';
+import { Highlight } from './Highlight';
 
 const bash = `
 <pre class="language-bash"><code class="language-bash"><span class="token comment"># Highlight bash:</span>

src/components/Link.js

@@ -135,7 +135,7 @@ const LinkButton = styled.button`
   ${linkStyles};
 `;
 
-export function Link({ isButton, withArrow, containsIcon, LinkWrapper, children, ...props }) {
+export function Link({ isButton, withArrow, containsIcon, LinkWrapper, children, ...rest }) {
   const content = (
     <Fragment>
       <LinkInner withArrow={withArrow} containsIcon={containsIcon}>
@@ -147,12 +147,16 @@ export function Link({ isButton, withArrow, containsIcon, LinkWrapper, children,
 
   if (LinkWrapper) {
     const StyledLinkWrapper = LinkA.withComponent(LinkWrapper);
-    return <StyledLinkWrapper {...props}>{content}</StyledLinkWrapper>;
+    const { inverse, nochrome, secondary, tertiary, ...linkWrapperProps } = rest;
+
+    return <StyledLinkWrapper {...linkWrapperProps}>{content}</StyledLinkWrapper>;
   }
+
   if (isButton) {
-    return <LinkButton {...props}>{content}</LinkButton>;
+    return <LinkButton {...rest}>{content}</LinkButton>;
   }
-  return <LinkA {...props}>{content}</LinkA>;
+
+  return <LinkA {...rest}>{content}</LinkA>;
 }
 
 Link.propTypes = {

src/components/index.js

@@ -9,7 +9,7 @@ export * from './Avatar';
 export * from './AvatarList';
 export * from './Badge';
 export * from './Button';
-export { default as Highlight } from './Highlight';
+export * from './Highlight';
 export * from './Icon';
 export * from './Link';
 export * from './Subheading';