DOP-4562: new LinkNewTab role (#1307)

src/components/ComponentFactory.js

@@ -78,6 +78,7 @@ import RoleGUILabel from './Roles/GUILabel';
 import RoleHighlight from './Roles/Highlight';
 import RoleIcon from './Roles/Icon';
 import RoleKbd from './Roles/Kbd';
+import RoleLinkNewTab from './Roles/LinkNewTab';
 import RoleRed from './Roles/Red';
 import RoleGold from './Roles/Gold';
 import RoleRequired from './Roles/Required';
@@ -122,6 +123,7 @@ const roleMap = {
   subscript: Subscript,
   sup: Superscript,
   superscript: Superscript,
+  'link-new-tab': RoleLinkNewTab,
 };
 
 const componentMap = {

src/components/Link.js

@@ -93,6 +93,7 @@ const Link = ({
   showLinkArrow,
   hideExternalIcon: hideExternalIconProp,
   showExternalIcon,
+  openInNewTab,
   ...other
 }) => {
   if (!to) to = '';
@@ -142,7 +143,7 @@ const Link = ({
       className={joinClassNames(lgLinkStyling, className)}
       href={to}
       hideExternalIcon={!showExtIcon}
-      target={target}
+      target={openInNewTab ? '_blank' : target}
       {...anchorProps}
     >
       {children}

src/components/Roles/LinkNewTab.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ComponentFactory from '../ComponentFactory';
+import Link from '../Link';
+
+const LinkNewTab = ({ nodeData: { children, target } }) => (
+  <Link to={target} openInNewTab={true}>
+    {children.map((node, i) => (
+      <ComponentFactory key={i} nodeData={node} />
+    ))}
+  </Link>
+);
+
+LinkNewTab.propTypes = {
+  nodeData: PropTypes.shape({
+    children: PropTypes.arrayOf(PropTypes.object).isRequired,
+    target: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default LinkNewTab;