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: () => {}, };