Add "newTab" to bookmarks
This commit is contained in:
parent
24d9e6f613
commit
46d001e7bf
4 changed files with 62 additions and 9 deletions
.github/workflows
src
0
.github/workflows/test.yml
vendored
0
.github/workflows/test.yml
vendored
|
@ -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>
|
||||||
|
|
|
@ -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]`;
|
||||||
|
|
|
@ -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} />,
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue