Add "newTab" to bookmarks

src/components/bookmarks.tsx

@@ -1,3 +1,4 @@
+import { link } from "fs";
 import styled from "styled-components";
 import {
   Headline,
@@ -14,7 +15,7 @@ const GroupContainer = styled.div`
   padding: 1rem 0;
 `;
 
-const Bookmark = styled.a`
+const BookmarkElement = styled.a`
   font-weight: 400;
   text-decoration: none;
   color: ${(props) => props.theme.accentColor};
@@ -29,6 +30,7 @@ const Bookmark = styled.a`
 export interface IBookmarkProps {
   name: string;
   url: string;
+  newTab?: boolean;
 }
 
 export interface IBookmarkGroupProps {
@@ -40,6 +42,22 @@ export interface IBookmarkListProps {
   groups: Array<IBookmarkGroupProps>;
 }
 
+export const Bookmark = ({ name, url, newTab }: IBookmarkProps) => {
+  const linkAttrs =
+    newTab !== undefined && newTab
+      ? {
+          target: "_blank",
+          rel: "noopener noreferrer",
+        }
+      : {};
+
+  return (
+    <BookmarkElement href={url} {...linkAttrs}>
+      {name}
+    </BookmarkElement>
+  );
+};
+
 /**
  * Renders a given bookmark group
  * @param {IBookmarkGroupProps} props given props of the bookmark group
@@ -49,10 +67,13 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
   <Item>
     <GroupContainer>
       <SubHeadline>{name}</SubHeadline>
-      {items.map(({ name, url }, index) => (
-        <Bookmark key={[name, index].join("")} href={url}>
-          {name}
-        </Bookmark>
+      {items.map(({ name, url, newTab }, index) => (
+        <Bookmark
+          key={[name, index].join("")}
+          name={name}
+          url={url}
+          newTab={newTab}
+        />
       ))}
     </GroupContainer>
   </Item>

src/test/components/__snapshots__/bookmarks.spec.tsx.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BookmarkGroup snapshot test 1`] = `[Function]`;
+exports[`tests rendering of Bookmark with newTab=false 1`] = `[Function]`;
 
-exports[`BookmarkList snapshot test 1`] = `[Function]`;
+exports[`tests rendering of Bookmark with newTab=true 1`] = `[Function]`;
+
+exports[`tests rendering of Bookmark without newTab 1`] = `[Function]`;
+
+exports[`tests rendering of BookmarkGroup 1`] = `[Function]`;
+
+exports[`tests rendering of BookmarkList 1`] = `[Function]`;

src/test/components/bookmarks.spec.tsx

@@ -1,5 +1,6 @@
 import { render } from "@testing-library/react";
 import BookmarkList, {
+  Bookmark,
   BookmarkGroup,
   IBookmarkGroupProps,
   IBookmarkListProps,
@@ -19,7 +20,32 @@ const bookmarkListProps: IBookmarkListProps = {
   groups: [bookmarkGroupProps, bookmarkGroupProps],
 };
 
-it("BookmarkGroup snapshot test", () => {
+it("tests rendering of Bookmark with newTab=true", () => {
+  let props = bookmarkGroupProps.items[0];
+  const { asFragment } = render(
+    <Bookmark name={props.name} url={props.url} newTab={true} />,
+  );
+
+  expect(asFragment).toMatchSnapshot();
+});
+
+it("tests rendering of Bookmark with newTab=false", () => {
+  let props = bookmarkGroupProps.items[0];
+  const { asFragment } = render(
+    <Bookmark name={props.name} url={props.url} newTab={false} />,
+  );
+
+  expect(asFragment).toMatchSnapshot();
+});
+
+it("tests rendering of Bookmark without newTab", () => {
+  let props = bookmarkGroupProps.items[0];
+  const { asFragment } = render(<Bookmark name={props.name} url={props.url} />);
+
+  expect(asFragment).toMatchSnapshot();
+});
+
+it("tests rendering of BookmarkGroup", () => {
   const { asFragment } = render(
     <BookmarkGroup
       name={bookmarkGroupProps.name}
@@ -30,7 +56,7 @@ it("BookmarkGroup snapshot test", () => {
   expect(asFragment).toMatchSnapshot();
 });
 
-it("BookmarkList snapshot test", () => {
+it("tests rendering of BookmarkList", () => {
   const { asFragment } = render(
     <BookmarkList groups={bookmarkListProps.groups} />,
   );