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

storybookjs · Jun 6, 2019 · 192331a · 192331a
1 parent f457bbb
commit 192331a
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/components/Link.js b/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,19 @@ export function Link({ isButton, withArrow, containsIcon, LinkWrapper, children,
 
   if (LinkWrapper) {
     const StyledLinkWrapper = LinkA.withComponent(LinkWrapper);
-    return <StyledLinkWrapper {...props}>{content}</StyledLinkWrapper>;
+    const linkWrapperProps = { ...rest };
+    delete linkWrapperProps.inverse;
+    delete linkWrapperProps.nochrome;
+    delete linkWrapperProps.secondary;
+    delete linkWrapperProps.tertiary;
+    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 = {