Merge pull request #196 from scientist-softserv/footer-links-in-new-tab-option

add target option to links

Author: summer-cook

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 (
     <a
       href={href}
       className={`link ${addClass}`}
       style={style}
+      target={target}
       {...props}
     >
       {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

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'
+}

src/compounds/LinkGroup/LinkGroup.jsx

@@ -6,7 +6,16 @@ import './link-group.css'
 const LinkGroup = ({ header, headerStyle, links, linkStyle }) => (
   <div className='link-group-container'>
     <p className='link-group-header mb-2' style={headerStyle}>{header}</p>
-    {links.map(({ name, url }) => <Link href={url} key={name} label={name} addClass='link-group-links' style={linkStyle} />)}
+    {links.map(({ name, url, target }) =>
+      <Link
+        href={url}
+        key={name}
+        label={name}
+        target={target}
+        addClass='link-group-links'
+        style={linkStyle}
+      />
+    )}
   </div>
 )
 
@@ -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({}),
 }

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 = [