diff --git a/src/components/Link/Link.jsx b/src/components/Link/Link.jsx index 76bdeb92..76e5aeca 100644 --- a/src/components/Link/Link.jsx +++ b/src/components/Link/Link.jsx @@ -3,12 +3,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import PropTypes from 'prop-types' import './link.css' -const Link = ({ addClass, href, icon, label, style, ...props }) => { +const Link = ({ addClass, href, icon, label, style, target, ...props }) => { return ( {icon && ( @@ -31,12 +32,14 @@ Link.propTypes = { icon: PropTypes.string, label: PropTypes.string.isRequired, style: PropTypes.shape({}), + target: PropTypes.string, } Link.defaultProps = { addClass: '', icon: '', style: {}, + target: '_self' } export default Link diff --git a/src/components/Link/Link.stories.jsx b/src/components/Link/Link.stories.jsx index 182070da..d2faaabb 100644 --- a/src/components/Link/Link.stories.jsx +++ b/src/components/Link/Link.stories.jsx @@ -36,3 +36,11 @@ NoLabel.args = { label: '', style: {}, } + +export const ExternalLinkInNewTab = Template.bind({}) +ExternalLinkInNewTab.args = { + href: 'https://www.google.com', + label: 'I should open in a new tab', + style: {}, + target: '_blank' +} diff --git a/src/compounds/LinkGroup/LinkGroup.jsx b/src/compounds/LinkGroup/LinkGroup.jsx index 85cc74fd..568a9797 100644 --- a/src/compounds/LinkGroup/LinkGroup.jsx +++ b/src/compounds/LinkGroup/LinkGroup.jsx @@ -6,7 +6,16 @@ import './link-group.css' const LinkGroup = ({ header, headerStyle, links, linkStyle }) => (

{header}

- {links.map(({ name, url }) => )} + {links.map(({ name, url, target }) => + + )}
) @@ -16,6 +25,7 @@ LinkGroup.propTypes = { links: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.isRequired, url: PropTypes.string.isRequired, + target: PropTypes.string, })).isRequired, linkStyle: PropTypes.shape({}), } diff --git a/src/resources/args.js b/src/resources/args.js index daa8fa20..d2620967 100644 --- a/src/resources/args.js +++ b/src/resources/args.js @@ -75,6 +75,11 @@ export const links = [ name: 'Services', url: '/services', }, + { + name: 'External tab link', + url: 'http://www.google.com', + target: '_blank', + }, ] export const sections = [