feat: added ExternalLink component

newrelic · Apr 22, 2020 · ae6e565 · ae6e565
1 parent 032bd30
commit ae6e565
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git a/src/components/ExternalLink.js 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
@@ -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,51 +34,31 @@ 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">
                   Developers
                 </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
@@ -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;
+      }
     }
   }