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
.github/workflows
src
components
test/components

View file

View file

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

View file

@ -1,5 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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 { render } from "@testing-library/react";
import BookmarkList, { import BookmarkList, {
Bookmark,
BookmarkGroup, BookmarkGroup,
IBookmarkGroupProps, IBookmarkGroupProps,
IBookmarkListProps, IBookmarkListProps,
@ -19,7 +20,32 @@ const bookmarkListProps: IBookmarkListProps = {
groups: [bookmarkGroupProps, bookmarkGroupProps], 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( const { asFragment } = render(
<BookmarkGroup <BookmarkGroup
name={bookmarkGroupProps.name} name={bookmarkGroupProps.name}
@ -30,7 +56,7 @@ it("BookmarkGroup snapshot test", () => {
expect(asFragment).toMatchSnapshot(); expect(asFragment).toMatchSnapshot();
}); });
it("BookmarkList snapshot test", () => { it("tests rendering of BookmarkList", () => {
const { asFragment } = render( const { asFragment } = render(
<BookmarkList groups={bookmarkListProps.groups} />, <BookmarkList groups={bookmarkListProps.groups} />,
); );