Merge pull request #44 from storybookjs/jsomsanith/fix/link_wrapper_o…

…ptimisation fix: Link - LinkWrapper optimisation
storybookjs · Jun 29, 2019 · f65acb2 · f65acb2
2 parents bd82b09 + b16f5df
commit f65acb2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/src/components/Link.js b/src/components/Link.js
@@ -144,6 +144,17 @@ const LinkButton = styled.button`
   ${linkStyles};
 `;
 
+const applyStyle = LinkWrapper => {
+  return (
+    LinkWrapper &&
+    styled(({ containsIcon, inverse, nochrome, secondary, tertiary, ...linkWrapperRest }) => (
+      <LinkWrapper {...linkWrapperRest} />
+    ))`
+      ${linkStyles};
+    `
+  );
+};
+
 /**
  * Links can contains text and/or icons. Be careful using only icons, you must provide a text alternative via aria-label for accessibility.
  */
@@ -157,23 +168,16 @@ export function Link({ isButton, withArrow, LinkWrapper, children, ...rest }) {
     </Fragment>
   );
 
-  if (LinkWrapper) {
-    const StyledLinkWrapper = styled(
-      ({ containsIcon, inverse, nochrome, secondary, tertiary, ...linkWrapperRest }) => (
-        <LinkWrapper {...linkWrapperRest} />
-      )
-    )`
-      ${linkStyles};
-    `;
-
-    return <StyledLinkWrapper {...rest}>{content}</StyledLinkWrapper>;
-  }
+  const StyledLinkWrapper = applyStyle(LinkWrapper);
 
-  if (isButton) {
-    return <LinkButton {...rest}>{content}</LinkButton>;
+  let SelectedLink = LinkA;
+  if (LinkWrapper) {
+    SelectedLink = StyledLinkWrapper;
+  } else if (isButton) {
+    SelectedLink = LinkButton;
   }
 
-  return <LinkA {...rest}>{content}</LinkA>;
+  return <SelectedLink {...rest}>{content}</SelectedLink>;
 }
 
 Link.propTypes = {

diff --git a/src/components/Link.stories.js b/src/components/Link.stories.js
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { Button } from './Button';
 import { Icon } from './Icon';
 import { Link } from './Link';
 import { StoryLinkWrapper } from './StoryLinkWrapper';
@@ -65,9 +64,5 @@ storiesOf('Design System|Link', module)
       <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>
     </div>
   ));