Address feedback

adobe · Aug 3, 2020 · 5a4a8b8 · 5a4a8b8
1 parent 0b99aa8
commit 5a4a8b8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/packages/gatsby-theme-parliament/src/components/Heading.js b/packages/gatsby-theme-parliament/src/components/Heading.js
@@ -34,7 +34,7 @@ const createHeading = (level, { id, children, className, css: styles, ...props }
   const HeadingTag = `h${level}`;
   const isHeading1 = level === 1;
   const isHeading2 = level === 2;
-  const marginLink = `var(--spectrum-global-dimension-static-size-${isHeading2 ? '100' : '50'}`;
+  const marginLink = `margin-inline-start: var(--spectrum-global-dimension-static-size-${isHeading2 ? '100' : '50'});`;
 
   return (
     <>
@@ -66,7 +66,7 @@ const createHeading = (level, { id, children, className, css: styles, ...props }
           <Link
             href={`#${id}`}
             css={css`
-              margin-inline-start: ${marginLink};
+              ${marginLink}
             `}>
             #
           </Link>

diff --git a/packages/gatsby-theme-parliament/src/components/Resources.js b/packages/gatsby-theme-parliament/src/components/Resources.js
@@ -38,25 +38,27 @@ const Resources = ({ heading, links }) => {
         `}>
         {React.Children.toArray(links.props.children).map((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"
+          } : {};
 
           return (
             <li
               key={i}
               css={css`
                 margin-top: var(--spectrum-global-dimension-static-size-200);
               `}>
-              <Link
-                href={link.props.href}
-                target="_blank"
-                rel="nofollow noopener noreferrer">
+              <Link href={link.props.href} {...externalLinkProps}>
                 <span
                   css={css`
                     display: inline-flex;
                     margin-right: var(--spectrum-global-dimension-static-size-100);
                   `}>
                   {link.props.children}
                 </span>
-                <LinkOut size="XS" />
+                {isExternalLink && <LinkOut size="XS" />}
               </Link>
             </li>
           );