Apply link styles to LinkWrapper (#6)

Apply link styles to LinkWrapper

Author: Dominic Nguyen

src/components/Link.js

@@ -146,7 +146,8 @@ export function Link({ isButton, withArrow, containsIcon, LinkWrapper, children,
   );
 
   if (LinkWrapper) {
-    return <LinkWrapper {...props}>{content}</LinkWrapper>;
+    const StyledLinkWrapper = LinkA.withComponent(LinkWrapper);
+    return <StyledLinkWrapper {...props}>{content}</StyledLinkWrapper>;
   }
   if (isButton) {
     return <LinkButton {...props}>{content}</LinkButton>;

src/components/Link.stories.js

@@ -2,6 +2,7 @@ import React from 'react';
 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';
@@ -53,5 +54,9 @@ storiesOf('Design System|Link', module)
       <Link LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
         has a LinkWrapper like GatsbyLink or NextLink
       </Link>
+      <br />
+      <Link LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
+        <Button>has a LinkWrapper like GatsbyLink or NextLink and a Button child</Button>
+      </Link>
     </div>
   ));

src/components/StoryLinkWrapper.js

@@ -1,29 +1,32 @@
 /* eslint-disable import/no-extraneous-dependencies */
 // This is allows us to test whether the link works via the actions addon
-import React, { Children } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { action } from '@storybook/addon-actions';
 
-const onLinkClick = action('onLinkClick');
+const fireClickAction = action('onLinkClick');
 
-export function StoryLinkWrapper({ href, passHref, children }) {
-  const child = Children.only(children);
+export function StoryLinkWrapper({ children, href, onClick, ...rest }) {
+  const modifiedOnClick = event => {
+    event.preventDefault();
+    onClick();
+    fireClickAction(href);
+  };
 
-  return React.cloneElement(child, {
-    href: passHref && href,
-    onClick: e => {
-      e.preventDefault();
-      onLinkClick(href);
-    },
-  });
+  return (
+    <a href={href} {...rest} onClick={modifiedOnClick}>
+      {children}
+    </a>
+  );
 }
 
 StoryLinkWrapper.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  children: PropTypes.any.isRequired,
   href: PropTypes.string.isRequired,
-  passHref: PropTypes.bool,
-  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func,
 };
 
 StoryLinkWrapper.defaultProps = {
-  passHref: false,
+  onClick: () => {},
 };