Updated Link component. (#954)

Co-authored-by: Evan Jacobs <570070+quantizor@users.noreply.github.com>
styled-components · Dec 27, 2023 · f398686 · f398686
1 parent 9a74160
commit f398686
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 4 deletions.
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -11,6 +11,7 @@ export interface LinkProps extends UnstyledLinkProps, Omit<AnchorProps, keyof Un
   ref?: React.Ref<HTMLAnchorElement>;
   unstyled?: boolean;
   white?: boolean;
+  target?: '_self' | '_blank' | '_parent' | '_top';
 }
 
 export default function Link({
@@ -21,6 +22,7 @@ export default function Link({
   title,
   unstyled,
   white,
+  target,
   ...rest
 }: LinkProps) {
   let Child: keyof JSX.IntrinsicElements | React.ComponentType<any> = StyledLink;
@@ -38,7 +40,7 @@ export default function Link({
 
   return (
     <UnstyledLink passHref {...rest}>
-      <Child aria-label={ariaLabel} className={className} title={title} {...dataAttrs}>
+      <Child aria-label={ariaLabel} className={className} title={title} {...dataAttrs} target={target}>
         {children}
       </Child>
     </UnstyledLink>

diff --git a/components/Nav/Social.tsx b/components/Nav/Social.tsx
@@ -63,10 +63,14 @@ const Social = (props: React.ComponentProps<typeof Wrapper>) => (
     {/* <SocialLink href="https://twitter.com/someone">
       <Twitter />
     </SocialLink> */}
-    <SocialLink href="https://github.com/styled-components" title="GitHub: Source code">
+    <SocialLink href="https://github.com/styled-components" title="GitHub: Source code" target="_blank">
       <StyledIcon as={Github} $height={18} />
     </SocialLink>
-    <SocialLink href="https://medium.com/styled-components" title="Medium: Announcements, blog posts, and more">
+    <SocialLink
+      href="https://medium.com/styled-components"
+      title="Medium: Announcements, blog posts, and more"
+      target="_blank"
+    >
       <StyledIcon as={MediumM} $height={18} />
     </SocialLink>
   </Wrapper>

diff --git a/test/components/Link.spec.tsx b/test/components/Link.spec.tsx
@@ -2,7 +2,7 @@ import renderer from 'react-test-renderer';
 import Link, { InlineLink, StyledLink } from '../../components/Link';
 
 test('Link renders correctly', () => {
-  const tree = renderer.create(<Link href="/" />).toJSON();
+  const tree = renderer.create(<Link href="/" target="_blank" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });

diff --git a/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap b/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap
@@ -409,6 +409,7 @@ exports[`Navbar renders correctly 1`] = `
     >
       <a
         className="c18"
+        target="_blank"
         title="GitHub: Source code"
       >
         <svg
@@ -417,6 +418,7 @@ exports[`Navbar renders correctly 1`] = `
       </a>
       <a
         className="c18"
+        target="_blank"
         title="Medium: Announcements, blog posts, and more"
       >
         <svg

diff --git a/test/components/NavBar/__snapshots__/index.spec.tsx.snap b/test/components/NavBar/__snapshots__/index.spec.tsx.snap
@@ -735,11 +735,13 @@ exports[`Nav renders correctly 1`] = `
                     >
                       <Styled(Link)
                         href="https://github.com/styled-components"
+                        target="_blank"
                         title="GitHub: Source code"
                       >
                         <Link
                           className="c18"
                           href="https://github.com/styled-components"
+                          target="_blank"
                           title="GitHub: Source code"
                           unstyled={true}
                         >
@@ -749,6 +751,7 @@ exports[`Nav renders correctly 1`] = `
                           >
                             <a
                               className="c18"
+                              target="_blank"
                               title="GitHub: Source code"
                             >
                               <styled.div
@@ -769,11 +772,13 @@ exports[`Nav renders correctly 1`] = `
                       </Styled(Link)>
                       <Styled(Link)
                         href="https://medium.com/styled-components"
+                        target="_blank"
                         title="Medium: Announcements, blog posts, and more"
                       >
                         <Link
                           className="c18"
                           href="https://medium.com/styled-components"
+                          target="_blank"
                           title="Medium: Announcements, blog posts, and more"
                           unstyled={true}
                         >
@@ -783,6 +788,7 @@ exports[`Nav renders correctly 1`] = `
                           >
                             <a
                               className="c18"
+                              target="_blank"
                               title="Medium: Announcements, blog posts, and more"
                             >
                               <styled.div

diff --git a/test/components/__snapshots__/DocsLayout.spec.tsx.snap b/test/components/__snapshots__/DocsLayout.spec.tsx.snap
@@ -820,11 +820,13 @@ exports[`DocsLayout renders correctly 1`] = `
                           >
                             <Styled(Link)
                               href="https://github.com/styled-components"
+                              target="_blank"
                               title="GitHub: Source code"
                             >
                               <Link
                                 className="c19"
                                 href="https://github.com/styled-components"
+                                target="_blank"
                                 title="GitHub: Source code"
                                 unstyled={true}
                               >
@@ -834,6 +836,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                 >
                                   <a
                                     className="c19"
+                                    target="_blank"
                                     title="GitHub: Source code"
                                   >
                                     <styled.div
@@ -854,11 +857,13 @@ exports[`DocsLayout renders correctly 1`] = `
                             </Styled(Link)>
                             <Styled(Link)
                               href="https://medium.com/styled-components"
+                              target="_blank"
                               title="Medium: Announcements, blog posts, and more"
                             >
                               <Link
                                 className="c19"
                                 href="https://medium.com/styled-components"
+                                target="_blank"
                                 title="Medium: Announcements, blog posts, and more"
                                 unstyled={true}
                               >
@@ -868,6 +873,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                 >
                                   <a
                                     className="c19"
+                                    target="_blank"
                                     title="Medium: Announcements, blog posts, and more"
                                   >
                                     <styled.div

diff --git a/test/components/__snapshots__/Link.spec.tsx.snap b/test/components/__snapshots__/Link.spec.tsx.snap
@@ -44,6 +44,7 @@ exports[`Link renders correctly 1`] = `
 
 <a
   className="c0"
+  target="_blank"
 />
 `;