From ae6e5651049b30b8d71e7bed7744d7b76f07c1c6 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Wed, 22 Apr 2020 08:16:53 -0700
Subject: [PATCH] feat: added ExternalLink component

---
 src/components/ExternalLink.js | 20 ++++++++++++++++++
 src/components/Header.js       | 37 +++++++++-------------------------
 src/components/Header.scss     | 12 +++++------
 3 files changed, 35 insertions(+), 34 deletions(-)
 create mode 100644 src/components/ExternalLink.js

diff --git a/src/components/ExternalLink.js b/src/components/ExternalLink.js
new file mode 100644
index 000000000..f663af4e3
--- /dev/null
+++ b/src/components/ExternalLink.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ExternalLink = ({ href, children }) => (
+  <a
+    href={href}
+    target="_blank"
+    className="ExternalLink"
+    rel="noopener noreferrer"
+  >
+    {children}
+  </a>
+);
+
+ExternalLink.propTypes = {
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default ExternalLink;
diff --git a/src/components/Header.js b/src/components/Header.js
index 017526eba..2781e212a 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Container from './Container';
+import ExternalLink from './ExternalLink';
 import './Header.scss';
 
 const Header = ({ pages }) => {
@@ -33,14 +34,9 @@ const Header = ({ pages }) => {
           <nav className="Header-nav Header-nav--sitesAndTools">
             <ul>
               <li>
-                <a
-                  href="//newrelic.com"
-                  target="_blank"
-                  className="Header-nav-link"
-                  rel="noopener noreferrer"
-                >
+                <ExternalLink href="//newrelic.com">
                   <img src={data.nrLogo.childImageSharp.fixed.src} />
-                </a>
+                </ExternalLink>
               </li>
               <li>
                 <Link to="/" className="Header-nav-link">
@@ -48,36 +44,21 @@ const Header = ({ pages }) => {
                 </Link>
               </li>
               <li>
-                <a
-                  href="//opensource.newrelic.com"
-                  target="_blank"
-                  className="Header-nav-link"
-                  rel="noopener noreferrer"
-                >
+                <ExternalLink href="//opensource.newrelic.com">
                   Open Source
-                </a>
+                </ExternalLink>
               </li>
               <li>
-                <a
-                  href="//docs.newrelic.com"
-                  target="_blank"
-                  className="Header-nav-link"
-                  rel="noopener noreferrer"
-                >
+                <ExternalLink href="//docs.newrelic.com">
                   Documentation
-                </a>
+                </ExternalLink>
               </li>
             </ul>
             <ul>
               <li>
-                <a
-                  href="//github.com/newrelic"
-                  target="_blank"
-                  className="Header-nav-link"
-                  rel="noopener noreferrer"
-                >
+                <ExternalLink href="//github.com/newrelic">
                   <img src={data.ghLogo.childImageSharp.fixed.src} />
-                </a>
+                </ExternalLink>
               </li>
             </ul>
           </nav>
diff --git a/src/components/Header.scss b/src/components/Header.scss
index e55f4d17e..b1ad8c3fc 100644
--- a/src/components/Header.scss
+++ b/src/components/Header.scss
@@ -32,14 +32,14 @@ header.Header {
         padding-right: 0;
       }
     }
-  }
 
-  a.Header-nav-link {
-    padding: 0.6em;
+    a {
+      padding: 0.6em;
 
-    &:hover {
-      cursor: pointer;
-      text-decoration: underline;
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
     }
   }