From 6eb5fd3dc003f4b38f4e66c640a7315d81c2d63f Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Fri, 31 Jul 2020 22:30:21 -0700
Subject: [PATCH] feat: render external icon for related links that navigate
 outside of the site

---
 src/components/PageLayout/RelatedContent.js | 27 ++++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/PageLayout/RelatedContent.js b/src/components/PageLayout/RelatedContent.js
index 820981ad5..499206aa2 100644
--- a/src/components/PageLayout/RelatedContent.js
+++ b/src/components/PageLayout/RelatedContent.js
@@ -103,13 +103,13 @@ const RelatedContent = ({ page }) => {
                 const tag = Object.keys(SITE_TAGS).find((tag) =>
                   resource.url.startsWith(SITE_TAGS[tag])
                 );
+                const isDeveloperSite = tag === 'developer';
 
                 const url = new URL(resource.url);
-                const LinkElement = tag === 'developer' ? Link : ExternalLink;
-                const props =
-                  tag === 'developer'
-                    ? { to: url.pathname }
-                    : { href: resource.url };
+                const LinkElement = isDeveloperSite ? Link : ExternalLink;
+                const props = isDeveloperSite
+                  ? { to: url.pathname }
+                  : { href: resource.url };
 
                 return (
                   <li
@@ -125,7 +125,22 @@ const RelatedContent = ({ page }) => {
                         margin-bottom: 0.25rem;
                       `}
                     >
-                      {resource.title}
+                      <span
+                        css={css`
+                          vertical-align: middle;
+                        `}
+                      >
+                        {resource.title}
+                      </span>
+                      {!isDeveloperSite && (
+                        <Icon
+                          name={Icon.TYPE.EXTERNAL_LINK}
+                          css={css`
+                            margin-left: 0.25rem;
+                            vertical-align: middle;
+                          `}
+                        />
+                      )}
                     </LinkElement>
                     <Tag>{tag}</Tag>
                   </li>