Add "newTab" to bookmarks

This commit is contained in:
Bastian Meissner 2022-01-14 14:53:18 +01:00
parent 24d9e6f613
commit 46d001e7bf
4 changed files with 62 additions and 9 deletions

View file

View file

@ -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>

View file

@ -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]`;

View file

@ -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} />,
);