From cdf618ec3699d744cf424b61ea229616a2c217e3 Mon Sep 17 00:00:00 2001
From: Marcos Mendes <marcosdev.me@gmail.com>
Date: Tue, 3 Jan 2023 07:31:51 -0300
Subject: [PATCH 1/4] feat: add isExternal prop

---
 components/Link.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/Link.js b/components/Link.js
index 86561bff0..1207f3211 100644
--- a/components/Link.js
+++ b/components/Link.js
@@ -33,7 +33,7 @@ export const InlineLink = styled.a.attrs((/* props */) => ({
   }
 `;
 
-const Link = ({ ['aria-label']: ariaLabel, children, className, inline, unstyled, white, ...rest }) => {
+const Link = ({ ['aria-label']: ariaLabel, children, className, inline, unstyled, white, isExternal, ...rest }) => {
   let Child = StyledLink;
   if (inline) {
     Child = InlineLink;
@@ -46,9 +46,14 @@ const Link = ({ ['aria-label']: ariaLabel, children, className, inline, unstyled
     dataAttrs = { 'data-white': white };
   }
 
+  let target;
+  if (isExternal) {
+    target = '_blank';
+  }
+
   return (
     <UnstyledLink {...rest}>
-      <Child aria-label={ariaLabel} href={rest.href} className={className} {...dataAttrs}>
+      <Child aria-label={ariaLabel} href={rest.href} className={className} {...dataAttrs} target={target}>
         {children}
       </Child>
     </UnstyledLink>

From e350d5c89cec092151c725d0fc96522d16937235 Mon Sep 17 00:00:00 2001
From: Marcos Mendes <marcosdev.me@gmail.com>
Date: Tue, 3 Jan 2023 07:32:12 -0300
Subject: [PATCH 2/4] test: update snapshots

---
 .../__snapshots__/MobileNavbar.spec.js.snap    |  3 +++
 .../NavBar/__snapshots__/Navbar.spec.js.snap   |  6 ++++++
 .../NavBar/__snapshots__/index.spec.js.snap    | 18 ++++++++++++++++++
 .../__snapshots__/DocsLayout.spec.js.snap      | 18 ++++++++++++++++++
 4 files changed, 45 insertions(+)

diff --git a/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap b/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
index ce7162743..2e51986e1 100644
--- a/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
@@ -368,6 +368,7 @@ exports[`MobileNavbar renders correctly 1`] = `
         <a
           className="c16"
           href="https://spectrum.chat/styled-components/"
+          target="_blank"
         >
           <svg
             className="c17"
@@ -387,6 +388,7 @@ exports[`MobileNavbar renders correctly 1`] = `
         <a
           className="c16"
           href="https://github.com/styled-components"
+          target="_blank"
         >
           <svg
             className="c18"
@@ -396,6 +398,7 @@ exports[`MobileNavbar renders correctly 1`] = `
         <a
           className="c16"
           href="https://medium.com/styled-components"
+          target="_blank"
         >
           <svg
             className="c18"
diff --git a/test/components/NavBar/__snapshots__/Navbar.spec.js.snap b/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
index 436040d1a..3b9a66f76 100644
--- a/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
@@ -672,6 +672,7 @@ exports[`Navbar renders correctly 1`] = `
         <a
           className="c17"
           href="https://spectrum.chat/styled-components/"
+          target="_blank"
         >
           <svg
             className="c18"
@@ -691,6 +692,7 @@ exports[`Navbar renders correctly 1`] = `
         <a
           className="c17"
           href="https://github.com/styled-components"
+          target="_blank"
         >
           <svg
             className="c19"
@@ -700,6 +702,7 @@ exports[`Navbar renders correctly 1`] = `
         <a
           className="c17"
           href="https://medium.com/styled-components"
+          target="_blank"
         >
           <svg
             className="c19"
@@ -819,6 +822,7 @@ exports[`Navbar renders correctly 1`] = `
           <a
             className="c17"
             href="https://spectrum.chat/styled-components/"
+            target="_blank"
           >
             <svg
               className="c18"
@@ -838,6 +842,7 @@ exports[`Navbar renders correctly 1`] = `
           <a
             className="c17"
             href="https://github.com/styled-components"
+            target="_blank"
           >
             <svg
               className="c19"
@@ -847,6 +852,7 @@ exports[`Navbar renders correctly 1`] = `
           <a
             className="c17"
             href="https://medium.com/styled-components"
+            target="_blank"
           >
             <svg
               className="c19"
diff --git a/test/components/NavBar/__snapshots__/index.spec.js.snap b/test/components/NavBar/__snapshots__/index.spec.js.snap
index 3b6812cea..ca45e03a6 100644
--- a/test/components/NavBar/__snapshots__/index.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/index.spec.js.snap
@@ -874,10 +874,12 @@ exports[`Nav renders correctly 1`] = `
                         >
                           <Social__SocialLink
                             href="https://spectrum.chat/styled-components/"
+                            isExternal={true}
                           >
                             <Link
                               className="c17"
                               href="https://spectrum.chat/styled-components/"
+                              isExternal={true}
                               unstyled={true}
                             >
                               <Link
@@ -886,6 +888,7 @@ exports[`Nav renders correctly 1`] = `
                                 <a
                                   className="c17"
                                   href="https://spectrum.chat/styled-components/"
+                                  target="_blank"
                                 >
                                   <Spectrum>
                                     <Social__Svg
@@ -915,10 +918,12 @@ exports[`Nav renders correctly 1`] = `
                           </Social__SocialLink>
                           <Social__SocialLink
                             href="https://github.com/styled-components"
+                            isExternal={true}
                           >
                             <Link
                               className="c17"
                               href="https://github.com/styled-components"
+                              isExternal={true}
                               unstyled={true}
                             >
                               <Link
@@ -927,6 +932,7 @@ exports[`Nav renders correctly 1`] = `
                                 <a
                                   className="c17"
                                   href="https://github.com/styled-components"
+                                  target="_blank"
                                 >
                                   <Social__StyledIcon
                                     as={[Function]}
@@ -948,10 +954,12 @@ exports[`Nav renders correctly 1`] = `
                           </Social__SocialLink>
                           <Social__SocialLink
                             href="https://medium.com/styled-components"
+                            isExternal={true}
                           >
                             <Link
                               className="c17"
                               href="https://medium.com/styled-components"
+                              isExternal={true}
                               unstyled={true}
                             >
                               <Link
@@ -960,6 +968,7 @@ exports[`Nav renders correctly 1`] = `
                                 <a
                                   className="c17"
                                   href="https://medium.com/styled-components"
+                                  target="_blank"
                                 >
                                   <Social__StyledIcon
                                     as={[Function]}
@@ -1228,10 +1237,12 @@ exports[`Nav renders correctly 1`] = `
                             >
                               <Social__SocialLink
                                 href="https://spectrum.chat/styled-components/"
+                                isExternal={true}
                               >
                                 <Link
                                   className="c17"
                                   href="https://spectrum.chat/styled-components/"
+                                  isExternal={true}
                                   unstyled={true}
                                 >
                                   <Link
@@ -1240,6 +1251,7 @@ exports[`Nav renders correctly 1`] = `
                                     <a
                                       className="c17"
                                       href="https://spectrum.chat/styled-components/"
+                                      target="_blank"
                                     >
                                       <Spectrum>
                                         <Social__Svg
@@ -1269,10 +1281,12 @@ exports[`Nav renders correctly 1`] = `
                               </Social__SocialLink>
                               <Social__SocialLink
                                 href="https://github.com/styled-components"
+                                isExternal={true}
                               >
                                 <Link
                                   className="c17"
                                   href="https://github.com/styled-components"
+                                  isExternal={true}
                                   unstyled={true}
                                 >
                                   <Link
@@ -1281,6 +1295,7 @@ exports[`Nav renders correctly 1`] = `
                                     <a
                                       className="c17"
                                       href="https://github.com/styled-components"
+                                      target="_blank"
                                     >
                                       <Social__StyledIcon
                                         as={[Function]}
@@ -1302,10 +1317,12 @@ exports[`Nav renders correctly 1`] = `
                               </Social__SocialLink>
                               <Social__SocialLink
                                 href="https://medium.com/styled-components"
+                                isExternal={true}
                               >
                                 <Link
                                   className="c17"
                                   href="https://medium.com/styled-components"
+                                  isExternal={true}
                                   unstyled={true}
                                 >
                                   <Link
@@ -1314,6 +1331,7 @@ exports[`Nav renders correctly 1`] = `
                                     <a
                                       className="c17"
                                       href="https://medium.com/styled-components"
+                                      target="_blank"
                                     >
                                       <Social__StyledIcon
                                         as={[Function]}
diff --git a/test/components/__snapshots__/DocsLayout.spec.js.snap b/test/components/__snapshots__/DocsLayout.spec.js.snap
index b93330983..47e05f8d5 100644
--- a/test/components/__snapshots__/DocsLayout.spec.js.snap
+++ b/test/components/__snapshots__/DocsLayout.spec.js.snap
@@ -929,10 +929,12 @@ exports[`DocsLayout renders correctly 1`] = `
                               >
                                 <Social__SocialLink
                                   href="https://spectrum.chat/styled-components/"
+                                  isExternal={true}
                                 >
                                   <Link
                                     className="c18"
                                     href="https://spectrum.chat/styled-components/"
+                                    isExternal={true}
                                     unstyled={true}
                                   >
                                     <Link
@@ -941,6 +943,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                       <a
                                         className="c18"
                                         href="https://spectrum.chat/styled-components/"
+                                        target="_blank"
                                       >
                                         <Spectrum>
                                           <Social__Svg
@@ -970,10 +973,12 @@ exports[`DocsLayout renders correctly 1`] = `
                                 </Social__SocialLink>
                                 <Social__SocialLink
                                   href="https://github.com/styled-components"
+                                  isExternal={true}
                                 >
                                   <Link
                                     className="c18"
                                     href="https://github.com/styled-components"
+                                    isExternal={true}
                                     unstyled={true}
                                   >
                                     <Link
@@ -982,6 +987,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                       <a
                                         className="c18"
                                         href="https://github.com/styled-components"
+                                        target="_blank"
                                       >
                                         <Social__StyledIcon
                                           as={[Function]}
@@ -1003,10 +1009,12 @@ exports[`DocsLayout renders correctly 1`] = `
                                 </Social__SocialLink>
                                 <Social__SocialLink
                                   href="https://medium.com/styled-components"
+                                  isExternal={true}
                                 >
                                   <Link
                                     className="c18"
                                     href="https://medium.com/styled-components"
+                                    isExternal={true}
                                     unstyled={true}
                                   >
                                     <Link
@@ -1015,6 +1023,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                       <a
                                         className="c18"
                                         href="https://medium.com/styled-components"
+                                        target="_blank"
                                       >
                                         <Social__StyledIcon
                                           as={[Function]}
@@ -1291,10 +1300,12 @@ exports[`DocsLayout renders correctly 1`] = `
                                   >
                                     <Social__SocialLink
                                       href="https://spectrum.chat/styled-components/"
+                                      isExternal={true}
                                     >
                                       <Link
                                         className="c18"
                                         href="https://spectrum.chat/styled-components/"
+                                        isExternal={true}
                                         unstyled={true}
                                       >
                                         <Link
@@ -1303,6 +1314,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                           <a
                                             className="c18"
                                             href="https://spectrum.chat/styled-components/"
+                                            target="_blank"
                                           >
                                             <Spectrum>
                                               <Social__Svg
@@ -1332,10 +1344,12 @@ exports[`DocsLayout renders correctly 1`] = `
                                     </Social__SocialLink>
                                     <Social__SocialLink
                                       href="https://github.com/styled-components"
+                                      isExternal={true}
                                     >
                                       <Link
                                         className="c18"
                                         href="https://github.com/styled-components"
+                                        isExternal={true}
                                         unstyled={true}
                                       >
                                         <Link
@@ -1344,6 +1358,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                           <a
                                             className="c18"
                                             href="https://github.com/styled-components"
+                                            target="_blank"
                                           >
                                             <Social__StyledIcon
                                               as={[Function]}
@@ -1365,10 +1380,12 @@ exports[`DocsLayout renders correctly 1`] = `
                                     </Social__SocialLink>
                                     <Social__SocialLink
                                       href="https://medium.com/styled-components"
+                                      isExternal={true}
                                     >
                                       <Link
                                         className="c18"
                                         href="https://medium.com/styled-components"
+                                        isExternal={true}
                                         unstyled={true}
                                       >
                                         <Link
@@ -1377,6 +1394,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                           <a
                                             className="c18"
                                             href="https://medium.com/styled-components"
+                                            target="_blank"
                                           >
                                             <Social__StyledIcon
                                               as={[Function]}

From da4bfa7b455b3eb9e892d8926aba588a5e51e880 Mon Sep 17 00:00:00 2001
From: Marcos Mendes <marcosdev.me@gmail.com>
Date: Tue, 3 Jan 2023 07:35:35 -0300
Subject: [PATCH 3/4] feat: add target blank on all external links

---
 components/BlmBanner.js  |  2 +-
 components/Nav/Social.js | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/BlmBanner.js b/components/BlmBanner.js
index 3e7285a0c..6de6d2901 100644
--- a/components/BlmBanner.js
+++ b/components/BlmBanner.js
@@ -17,7 +17,7 @@ const Banner = styled.a`
 
 export const BlmBanner = () => {
   return (
-    <Banner href="https://support.eji.org/give/153413/#!/donation/checkout">
+    <Banner href="https://support.eji.org/give/153413/#!/donation/checkout" target="_blank">
       #BlackLivesMatter ✊🏿 <span style={{ textDecoration: `underline` }}>Support the Equal Justice Initiative</span>
     </Banner>
   );
diff --git a/components/Nav/Social.js b/components/Nav/Social.js
index d0e8eaff7..a276d2b70 100644
--- a/components/Nav/Social.js
+++ b/components/Nav/Social.js
@@ -42,14 +42,14 @@ const SocialLink = styled(Link).attrs((/* props */) => ({
 `;
 
 const Svg = styled.svg`
-  width: ${p => rem(Number(p.width))};
-  height: ${p => rem(Number(p.height))};
+  width: ${(p) => rem(Number(p.width))};
+  height: ${(p) => rem(Number(p.height))};
 `;
 
 const StyledIcon = styled.div`
   && {
-    width: ${p => rem(Number(p.width))};
-    height: ${p => rem(Number(p.height))};
+    width: ${(p) => rem(Number(p.width))};
+    height: ${(p) => rem(Number(p.height))};
   }
 `;
 
@@ -73,18 +73,18 @@ const Spectrum = () => (
   </Svg>
 );
 
-const Social = props => (
+const Social = (props) => (
   <Wrapper {...props}>
-    <SocialLink href="https://spectrum.chat/styled-components/">
+    <SocialLink href="https://spectrum.chat/styled-components/" isExternal>
       <Spectrum />
     </SocialLink>
     {/* <SocialLink href="https://twitter.com/someone">
       <Twitter />
     </SocialLink> */}
-    <SocialLink href="https://github.com/styled-components">
+    <SocialLink href="https://github.com/styled-components" isExternal>
       <StyledIcon as={Github} height="18" />
     </SocialLink>
-    <SocialLink href="https://medium.com/styled-components">
+    <SocialLink href="https://medium.com/styled-components" isExternal>
       <StyledIcon as={MediumM} height="18" />
     </SocialLink>
   </Wrapper>

From 14618ef97c4c008be464c2b6960a57bcc2bd055d Mon Sep 17 00:00:00 2001
From: Marcos Mendes <marcosdev.me@gmail.com>
Date: Tue, 3 Jan 2023 07:36:00 -0300
Subject: [PATCH 4/4] refactor: remove commented code

---
 components/Nav/Social.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/Nav/Social.js b/components/Nav/Social.js
index a276d2b70..5bd1adc0d 100644
--- a/components/Nav/Social.js
+++ b/components/Nav/Social.js
@@ -78,12 +78,11 @@ const Social = (props) => (
     <SocialLink href="https://spectrum.chat/styled-components/" isExternal>
       <Spectrum />
     </SocialLink>
-    {/* <SocialLink href="https://twitter.com/someone">
-      <Twitter />
-    </SocialLink> */}
+
     <SocialLink href="https://github.com/styled-components" isExternal>
       <StyledIcon as={Github} height="18" />
     </SocialLink>
+
     <SocialLink href="https://medium.com/styled-components" isExternal>
       <StyledIcon as={MediumM} height="18" />
     </SocialLink>