Fix external link props

adobe · Sep 21, 2020 · 08501fe · 08501fe
1 parent aea63e9
commit 08501fe
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 37 deletions.
diff --git a/packages/gatsby-theme-parliament/src/components/AnnouncementBlock/index.js b/packages/gatsby-theme-parliament/src/components/AnnouncementBlock/index.js
@@ -15,9 +15,11 @@ import { css } from '@emotion/core';
 import '@spectrum-css/typography';
 import { Button, View } from '@adobe/react-spectrum';
 import PropTypes from 'prop-types';
+import { getElementChild, getExternalLinkProps } from '../utils';
 
 const AnnouncementBlock = ({ heading, text, button, theme = 'light' }) => {
-  const link = button?.props?.children;
+  const link = getElementChild(button);
+  const externalLinkProps = getExternalLinkProps(link.props.href);
 
   return (
     <section
@@ -52,7 +54,7 @@ const AnnouncementBlock = ({ heading, text, button, theme = 'light' }) => {
 
         {link && (
           <View marginTop="size-200">
-            <Button elementType="a" href={link.props.href} variant="primary">
+            <Button elementType="a" href={link.props.href} {...externalLinkProps} variant="primary">
               {link.props.children}
             </Button>
           </View>

diff --git a/packages/gatsby-theme-parliament/src/components/Contributors/index.js b/packages/gatsby-theme-parliament/src/components/Contributors/index.js
@@ -14,6 +14,7 @@ import React from 'react';
 import { css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { Flex } from '@adobe/react-spectrum';
+import { getExternalLinkProps } from '../utils';
 
 const Contributors = ({ repository, branch, root, pagePath, contributors = [], externalContributors = [], date }) => {
   externalContributors = externalContributors.map((contributor) => ({
@@ -23,11 +24,12 @@ const Contributors = ({ repository, branch, root, pagePath, contributors = [], e
   // Adding external contributors first
   contributors = [...externalContributors, ...contributors];
 
+  const externalLinkProps = getExternalLinkProps();
+
   return (
     <a
       href={`https://github.com/${repository}/commits/${branch}${root ? `/${root}` : ''}/src/pages/${pagePath}`}
-      target="_blank"
-      rel="noopener noreferrer nofollow"
+      {...externalLinkProps}
       css={css`
         text-decoration: none;
         color: inherit;

diff --git a/packages/gatsby-theme-parliament/src/components/Footer/index.js b/packages/gatsby-theme-parliament/src/components/Footer/index.js
@@ -17,17 +17,14 @@ import { View } from '@adobe/react-spectrum';
 import { Divider } from '@adobe/react-spectrum';
 import { Link } from '@adobe/react-spectrum';
 import '@spectrum-css/typography';
-import { layoutColumns } from '../utils';
+import { layoutColumns, getExternalLinkProps } from '../utils';
 import PropTypes from 'prop-types';
 
 const Heading = ({ children }) => <h3 className="spectrum-Heading--S">{children}</h3>;
 
 const List = ({ children }) => <ul className="spectrum-Body--S">{children}</ul>;
 
-const externalLinkProps = {
-  target: '_blank',
-  rel: 'noopener noreferrer nofollow'
-};
+const externalLinkProps = getExternalLinkProps();
 
 const Footer = ({ hasSideNav = false, isCentered = false }) => (
   <View

diff --git a/packages/gatsby-theme-parliament/src/components/GitHubActions/index.js b/packages/gatsby-theme-parliament/src/components/GitHubActions/index.js
@@ -16,12 +16,14 @@ import { Flex } from '@adobe/react-spectrum';
 import { ActionButton, Text } from '../ActionButton';
 import { Bug, Edit } from '../Icons';
 import { css } from '@emotion/core';
+import { getExternalLinkProps } from '../utils';
+
+const externalLinkProps = getExternalLinkProps();
 
 const commonsProps = {
   elementType: 'a',
   isQuiet: true,
-  target: '_blank',
-  rel: 'noopener noreferrer nofollow'
+  ...externalLinkProps
 };
 
 const GitHubActions = ({ repository, branch, root, pagePath }) => {

diff --git a/packages/gatsby-theme-parliament/src/components/GlobalHeader/index.js b/packages/gatsby-theme-parliament/src/components/GlobalHeader/index.js
@@ -14,7 +14,7 @@ import React, { useRef, useEffect, useState, createRef } from 'react';
 import PropTypes from 'prop-types';
 import nextId from 'react-id-generator';
 import { Link as GatsbyLink } from 'gatsby';
-import { findSelectedTopPage, rootFix, rootFixPages } from '../utils';
+import { findSelectedTopPage, rootFix, rootFixPages, getExternalLinkProps } from '../utils';
 import { css } from '@emotion/core';
 import { Grid, Flex } from '@adobe/react-spectrum';
 import { View } from '@adobe/react-spectrum';
@@ -83,6 +83,8 @@ const GlobalHeader = ({ globalNav, versions, pages, docs, location }) => {
     return () => document.removeEventListener('click', onClick);
   }, []);
 
+  const externalLinkProps = getExternalLinkProps();
+
   return (
     <header
       role="banner"
@@ -319,14 +321,14 @@ const GlobalHeader = ({ globalNav, versions, pages, docs, location }) => {
           </View>
           <View gridArea="console" justifySelf="center">
             {globalNav.console && (
-              <Button variant="primary" elementType="a" href="https://console.adobe.io">
+              <Button variant="primary" elementType="a" href="https://console.adobe.io" {...externalLinkProps}>
                 Console
               </Button>
             )}
           </View>
           <View gridArea="profile" justifySelf="center">
             {globalNav.signIn && (
-              <Button isQuiet variant="primary" elementType="a" href="https://adobe.io">
+              <Button isQuiet variant="primary" elementType="a" href="https://adobe.io" {...externalLinkProps}>
                 Sign in
               </Button>
             )}

diff --git a/packages/gatsby-theme-parliament/src/components/Hero/index.js b/packages/gatsby-theme-parliament/src/components/Hero/index.js
@@ -17,6 +17,7 @@ import { Button } from '@adobe/react-spectrum';
 import { ButtonGroup } from '@adobe/react-spectrum';
 import '@spectrum-css/typography';
 import PropTypes from 'prop-types';
+import { getElementChild, getExternalLinkProps } from '../utils';
 
 const HeroButtons = ({ buttons, variants = ['cta', 'primary'], quiets = [true, true], ...props }) =>
   buttons ? (
@@ -30,10 +31,17 @@ const HeroButtons = ({ buttons, variants = ['cta', 'primary'], quiets = [true, t
           quiet = quiets[1];
         }
 
-        const link = React.Children.toArray(item.props.children)[0];
+        const link = getElementChild(item);
+        const externalLinkProps = getExternalLinkProps(link.props.href);
 
         return (
-          <Button key={i} elementType="a" isQuiet={quiet} href={link.props.href} variant={variant}>
+          <Button
+            key={i}
+            elementType="a"
+            isQuiet={quiet}
+            href={link.props.href}
+            {...externalLinkProps}
+            variant={variant}>
             {link.props.children}
           </Button>
         );

diff --git a/packages/gatsby-theme-parliament/src/components/MDXFilter/index.js b/packages/gatsby-theme-parliament/src/components/MDXFilter/index.js
@@ -21,7 +21,8 @@ import {
   findSelectedPageSiblings,
   findSelectedPageNextPrev,
   findSelectedTopPage,
-  findSelectedPages
+  findSelectedPages,
+  getElementChild
 } from '../utils';
 
 import { Flex } from '@adobe/react-spectrum';
@@ -64,7 +65,7 @@ const filterChildren = ({ childrenArray, tableOfContents, hasSideNav, isJsDoc, q
     // 3) Third child is a paragraph
     if (isFirstChild) {
       if (child?.props?.children?.[0]?.props?.src) {
-        const image = child.props.children[0].props.src.split('/').pop();
+        const image = getElementChild(child).props.src.split('/').pop();
         if (
           image.toLowerCase().startsWith('hero') &&
           childrenArray?.[1]?.props?.mdxType === 'h1' &&

diff --git a/packages/gatsby-theme-parliament/src/components/Menu/index.js b/packages/gatsby-theme-parliament/src/components/Menu/index.js
@@ -17,6 +17,7 @@ import classNames from 'classnames';
 import nextId from 'react-id-generator';
 import '@spectrum-css/menu';
 import { CheckMarkMedium } from '../Icons';
+import { getExternalLinkProps } from '../utils';
 
 const Menu = ({ children }) => {
   return (
@@ -31,15 +32,17 @@ const Menu = ({ children }) => {
   );
 };
 
-const Item = ({ children, isDivider = false, isHighlighted, isSelected, href, ...props }) => {
+const Item = ({ children, isDivider = false, isHighlighted, isSelected, href = '', ...props }) => {
   const Element = href ? 'a' : 'li';
+  const externalLinkProps = getExternalLinkProps(href);
 
   return isDivider ? (
     <li className="spectrum-Menu-divider" role="separator" />
   ) : (
     <Element
       className={classNames('spectrum-Menu-item', { 'is-open': isHighlighted }, { 'is-selected': isSelected })}
       href={href}
+      {...externalLinkProps}
       role="menuitem"
       tabIndex="0"
       {...props}>

diff --git a/packages/gatsby-theme-parliament/src/components/ResourceCard/index.js b/packages/gatsby-theme-parliament/src/components/ResourceCard/index.js
@@ -12,7 +12,7 @@
 
 import React, { useEffect } from 'react';
 import { css } from '@emotion/core';
-import { layoutColumns } from '../utils';
+import { getElementChild, getExternalLinkProps, layoutColumns } from '../utils';
 import '@spectrum-css/typography';
 import '@spectrum-css/card';
 import PropTypes from 'prop-types';
@@ -21,10 +21,8 @@ let horizontalCounter = 0;
 let verticalCounter = 0;
 
 const ResourceCard = ({ theme = 'lightest', width = '100%', variant = 'horizontal', link, heading, text, image }) => {
-  let href = '';
-  if (link) {
-    href = React.Children.toArray(link.props.children)[0].props.href;
-  }
+  const href = getElementChild(link).props.href;
+  const externalProps = getExternalLinkProps(href);
 
   if (width === '33%') {
     width = `${100 / 3}%`;
@@ -68,7 +66,8 @@ const ResourceCard = ({ theme = 'lightest', width = '100%', variant = 'horizonta
       }
 
       if (horizontalCounter % 2 === 0) {
-        extraMargin = 'margin-top: calc(var(--spectrum-global-dimension-size-2400) + var(--spectrum-global-dimension-size-150));';
+        extraMargin =
+          'margin-top: calc(var(--spectrum-global-dimension-size-2400) + var(--spectrum-global-dimension-size-150));';
       } else {
         extraMargin = '';
       }
@@ -91,6 +90,7 @@ const ResourceCard = ({ theme = 'lightest', width = '100%', variant = 'horizonta
         <a
           className={`spectrum-Card spectrum-Card--${variant}`}
           href={href}
+          {...externalProps}
           css={css`
             width: ${layoutColumns(6)};
             height: calc(var(--spectrum-global-dimension-size-2000) - var(--spectrum-global-dimension-size-50));

diff --git a/packages/gatsby-theme-parliament/src/components/Resources/index.js b/packages/gatsby-theme-parliament/src/components/Resources/index.js
@@ -19,6 +19,7 @@ import { Link } from '@adobe/react-spectrum';
 import { View } from '@adobe/react-spectrum';
 import { Flex } from '@adobe/react-spectrum';
 import LinkOut from '@spectrum-icons/workflow/LinkOut';
+import { getElementChild, isExternalLink, getExternalLinkProps } from '../utils';
 
 const Resources = ({ heading, links }) => {
   return (
@@ -39,14 +40,8 @@ const Resources = ({ heading, links }) => {
           padding: 0;
         `}>
         {React.Children.map(links.props.children, (item, i) => {
-          const link = React.Children.toArray(item.props.children)[0];
-          const isExternalLink = link.props.href.startsWith('http://') || link.props.href.startsWith('https://');
-          const externalLinkProps = isExternalLink
-            ? {
-                target: '_blank',
-                rel: 'nofollow noopener noreferrer'
-              }
-            : {};
+          const link = getElementChild(item);
+          const href = link.props.href;
 
           return (
             <li
@@ -56,11 +51,11 @@ const Resources = ({ heading, links }) => {
               `}>
               <Flex>
                 <Link isQuiet={true}>
-                  <a href={link.props.href} {...externalLinkProps}>
+                  <a href={link.props.href} {...getExternalLinkProps(href)}>
                     {link.props.children}
                   </a>
                 </Link>
-                <View marginStart="size-100">{isExternalLink && <LinkOut size="XS" />}</View>
+                <View marginStart="size-100">{isExternalLink(href) && <LinkOut size="XS" />}</View>
               </Flex>
             </li>
           );

diff --git a/packages/gatsby-theme-parliament/src/components/TextBlock/index.js b/packages/gatsby-theme-parliament/src/components/TextBlock/index.js
@@ -17,7 +17,7 @@ import { Flex, View } from '@adobe/react-spectrum';
 import '@spectrum-css/typography';
 import PropTypes from 'prop-types';
 import { YouTube } from '@pauliescanlon/gatsby-mdx-embed';
-import { layoutColumns } from '../utils';
+import { getElementChild, layoutColumns } from '../utils';
 
 let counter = 0;
 const alignMapping = ['flex-start', 'flex-end'];
@@ -89,7 +89,7 @@ const Links = ({ links, isCentered }) =>
 const YouTubeVideo = ({ video }) => {
   let youTubeId = null;
   if (video) {
-    const link = React.Children.toArray(video.props.children)[0];
+    const link = getElementChild(video);
     const url = new URL(link.props.href);
     if (url.hostname.startsWith('youtube.com') || url.hostname.startsWith('www.youtube.com')) {
       const queryParams = new URLSearchParams(url.search);

diff --git a/packages/gatsby-theme-parliament/src/components/utils/index.js b/packages/gatsby-theme-parliament/src/components/utils/index.js
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import React from 'react';
 import { withPrefix } from 'gatsby';
 
 export const rootFix = (pathname) => {
@@ -125,3 +126,15 @@ export const findSelectedPageSiblings = (pathname, pages) => {
 
   return siblings;
 };
+
+export const isExternalLink = (url) => url.startsWith('https://') || url.startsWith('http://');
+
+export const getExternalLinkProps = (url) =>
+  typeof url === 'undefined' || isExternalLink(url)
+    ? {
+        target: '_blank',
+        rel: 'noopener noreferrer nofollow'
+      }
+    : {};
+
+export const getElementChild = (element) => React.Children.toArray(element.props.children)[0];