Merge pull request #11 from storybookjs/fix-link-wrapper

Destructure LinkWrapper props to avoid passing them down
storybookjs · Jun 12, 2019 · 0f3a919 · 0f3a919
2 parents 3e24ff0 + 4ede732
commit 0f3a919
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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>