Skip to content

Commit

Permalink
Updated Link component. (#954)
Browse files Browse the repository at this point in the history 
Co-authored-by: Evan Jacobs <570070+quantizor@users.noreply.github.com>
  • Loading branch information
@b8zeek @quantizor
b8zeek and quantizor authored Dec 27, 2023
1 parent 9a74160 commit f398686
Show file tree
Hide file tree
Showing 7 changed files with 25 additions and 4 deletions.
4 changes: 3 additions & 1 deletion components/Link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -21,6 +22,7 @@ export default function Link({
title,
unstyled,
white,
target,
...rest
}: LinkProps) {
let Child: keyof JSX.IntrinsicElements | React.ComponentType<any> = StyledLink;
Expand All @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions components/Nav/Social.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/components/Link.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down
2 changes: 2 additions & 0 deletions test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,7 @@ exports[`Navbar renders correctly 1`] = `
>
<a
className="c18"
target="_blank"
title="GitHub: Source code"
>
<svg
Expand All @@ -417,6 +418,7 @@ exports[`Navbar renders correctly 1`] = `
</a>
<a
className="c18"
target="_blank"
title="Medium: Announcements, blog posts, and more"
>
<svg
Expand Down
6 changes: 6 additions & 0 deletions test/components/NavBar/__snapshots__/index.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand All @@ -749,6 +751,7 @@ exports[`Nav renders correctly 1`] = `
>
<a
className="c18"
target="_blank"
title="GitHub: Source code"
>
<styled.div
Expand All @@ -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}
>
Expand All @@ -783,6 +788,7 @@ exports[`Nav renders correctly 1`] = `
>
<a
className="c18"
target="_blank"
title="Medium: Announcements, blog posts, and more"
>
<styled.div
Expand Down
6 changes: 6 additions & 0 deletions test/components/__snapshots__/DocsLayout.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand All @@ -834,6 +836,7 @@ exports[`DocsLayout renders correctly 1`] = `
>
<a
className="c19"
target="_blank"
title="GitHub: Source code"
>
<styled.div
Expand All @@ -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}
>
Expand All @@ -868,6 +873,7 @@ exports[`DocsLayout renders correctly 1`] = `
>
<a
className="c19"
target="_blank"
title="Medium: Announcements, blog posts, and more"
>
<styled.div
Expand Down
1 change: 1 addition & 0 deletions test/components/__snapshots__/Link.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ exports[`Link renders correctly 1`] = `
<a
className="c0"
target="_blank"
/>
`;

Expand Down

0 comments on commit f398686

Please sign in to comment.