fix: update lefnav icon logic (#196)

* fix: update icon logic. closes #195

* update prop name

packages/example/src/gatsby-theme-carbon/components/LeftNav/ResourceLinks.js

@@ -2,10 +2,11 @@ import React from 'react';
 import ResourceLinks from 'gatsby-theme-carbon/src/components/LeftNav/ResourceLinks';
 
 const links = [
-  { title: 'Github', href: 'https://github.com' },
+  { title: 'Resources', href: '/resources' },
   { title: 'Storybook', href: 'https://react.carbondesignsystem.com' },
 ];
 
-const CustomResources = () => <ResourceLinks links={links} />;
+// shouldOpenNewTabs: true if outbound links should open in a new tab
+const CustomResources = () => <ResourceLinks shouldOpenNewTabs links={links} />;
 
 export default CustomResources;

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss

@@ -7,3 +7,20 @@
 .current-item .current-item-text {
   color: #171717;
 }
+
+.resource-link {
+  &:first-of-type {
+    margin-top: $spacing-05;
+  }
+}
+// Moves icons to the right
+.outboundLink {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+// Icons
+.outboundLink div {
+  display: inline-block !important;
+  flex: 0;
+}

packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js

@@ -2,24 +2,53 @@ import React from 'react';
 import { SideNavLink } from 'carbon-components-react/lib/components/UIShell';
 import { Link } from 'gatsby';
 import LaunchIcon from '@carbon/icons-react/es/launch/16';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
 
-const LeftNavResourceLinks = ({ links }) =>
-  links ? (
+import { resourceLink, outboundLink } from './LeftNav.module.scss';
+
+const LeftNavResourceLinks = ({ links, shouldOpenNewTabs }) => {
+  if (!links) return null;
+
+  const shouldOpenNewTabsProps = {
+    ...(shouldOpenNewTabs && { rel: 'noopener noreferrer', target: '_blank' }),
+  };
+
+  return (
     <>
       <hr className="bx--side-nav__divider" />
-      {links.map((link, i) => (
-        <SideNavLink
-          key={i}
-          style={{ marginTop: i === 0 ? '1rem' : 0 }}
-          icon={<LaunchIcon />}
-          href={link.href}
-          className="bx--side-nav--website-link"
-          element={!link.href.includes('http') ? Link : 'a'}
-        >
-          {link.title}
-        </SideNavLink>
-      ))}
+      {links.map(({ title, href, ...rest }, i) => {
+        const outbound = !/^\/(?!\/)/.test(href);
+        return (
+          <SideNavLink
+            key={i}
+            style={{ marginTop: i === 0 ? '1rem' : 0 }}
+            icon={<LaunchIcon />}
+            // eslint-disable-next-line jsx-a11y/aria-proptypes
+            aria-current=""
+            to={href}
+            href={href}
+            className={cx(resourceLink, { [outboundLink]: outbound })}
+            element={outbound ? 'a' : Link}
+            {...shouldOpenNewTabsProps}
+          >
+            {title}
+          </SideNavLink>
+        );
+      })}
     </>
-  ) : null;
+  );
+};
+
+LeftNavResourceLinks.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.objectOf({
+      title: PropTypes.string,
+      href: PropTypes.string,
+    })
+  ),
+  // true if outbound links should open in a new tab
+  shouldOpenNewTabs: PropTypes.bool,
+};
 
 export default LeftNavResourceLinks;