diff --git a/src/components/Link.js b/src/components/Link.js
index ca836a91..892b96f9 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -146,7 +146,8 @@ export function Link({ isButton, withArrow, containsIcon, LinkWrapper, children,
);
if (LinkWrapper) {
- return {content};
+ const StyledLinkWrapper = LinkA.withComponent(LinkWrapper);
+ return {content};
}
if (isButton) {
return {content};
diff --git a/src/components/Link.stories.js b/src/components/Link.stories.js
index 6f7665ca..59d86c81 100644
--- a/src/components/Link.stories.js
+++ b/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)
has a LinkWrapper like GatsbyLink or NextLink
+
+
+
+
));
diff --git a/src/components/StoryLinkWrapper.js b/src/components/StoryLinkWrapper.js
index 95087994..034e08ed 100644
--- a/src/components/StoryLinkWrapper.js
+++ b/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 (
+
+ {children}
+
+ );
}
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: () => {},
};