Implement core atom component Link

Implemented the core atom `Link` that wraps the base HTML element atom
component the `A` (1) and adds matching brand styles to it.

References:
  (1) #70

Associated epic: GH-63
GH-105

src/components/atoms/core/Link/Link.jsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import { A } from "atoms/core/HTMLElements";
+
+import { calmly, decent, minimal } from "./styles";
+
+const variants = {
+  calmly,
+  decent,
+  minimal
+};
+
+/**
+ * A wrapper for the base HTML component `A` with multiple styles that can be selected through the `variant` prop.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const Link = styled(A)`
+  ${({ variant }) => variants[variant]};
+`;
+
+Link.propTypes = {
+  variant: PropTypes.oneOf(Object.keys(variants))
+};
+
+Link.defaultProps = {
+  variant: "calmly"
+};
+
+export default Link;

src/components/atoms/core/Link/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+export { default } from "./Link";

test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx

@@ -17,21 +17,25 @@ import { metadataNordDocs } from "data/project";
 describe("logical behavior", () => {
   test("renders inernal URLs with `to` prop", () => {
     const { container } = render(<A to={ROUTE_DOCS}>Docs</A>);
+    expect(container.firstChild).toHaveAttribute("href", ROUTE_DOCS);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test("renders inernal URLs with `href` prop", () => {
     const { container } = render(<A href={ROUTE_DOCS}>Docs</A>);
+    expect(container.firstChild).toHaveAttribute("href", ROUTE_DOCS);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test("renders external URLs with `href` prop", () => {
     const { container } = render(<A href={metadataNordDocs.homepage}>Docs</A>);
+    expect(container.firstChild).toHaveAttribute("href", metadataNordDocs.homepage);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test("renders external URLs with `to` prop", () => {
     const { container } = render(<A to={metadataNordDocs.homepage}>Docs</A>);
+    expect(container.firstChild).toHaveAttribute("href", metadataNordDocs.homepage);
     expect(container.firstChild).toMatchSnapshot();
   });
 });

test/components/atoms/core/Link/Link.test.jsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { renderWithTheme } from "nord-docs-test-utils";
+import Link from "atoms/core/Link";
+
+describe("theme styles", () => {
+  test("matches the snapshot with default variant", () => {
+    const { container } = renderWithTheme(<Link>Nord</Link>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test("matches the snapshot with `calmly` variant", () => {
+    const { container } = renderWithTheme(<Link variant="calmly">Nord</Link>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test("matches the snapshot with `decent` variant", () => {
+    const { container } = renderWithTheme(<Link variant="decent">Nord</Link>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test("matches the snapshot with `minimal` variant", () => {
+    const { container } = renderWithTheme(<Link variant="minimal">Nord</Link>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

test/components/atoms/core/Link/__snapshots__/Link.test.jsx.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`theme styles matches the snapshot with \`calmly\` variant 1`] = `
+.c1 {
+  color: inherit;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:active,
+.c1:focus,
+.c1:hover,
+.c1:visited {
+  outline: none;
+}
+
+.c0 {
+  border-radius: 0.25em;
+  color: #5e81ac;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
+}
+
+.c0:hover,
+.c0:active,
+.c0:focus {
+  background-color: rgba(236,239,244,0.45);
+  color: #5e81ac;
+}
+
+<a
+  class="c0 c1"
+  href=""
+>
+  Nord
+</a>
+`;
+
+exports[`theme styles matches the snapshot with \`decent\` variant 1`] = `
+.c1 {
+  color: inherit;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:active,
+.c1:focus,
+.c1:hover,
+.c1:visited {
+  outline: none;
+}
+
+.c0 {
+  border-bottom: 1px solid #5e81ac;
+  color: #2e3440;
+  -webkit-transition: color 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out;
+}
+
+.c0:hover,
+.c0:active,
+.c0:focus {
+  color: #5e81ac;
+}
+
+<a
+  class="c0 c1"
+  href=""
+>
+  Nord
+</a>
+`;
+
+exports[`theme styles matches the snapshot with \`minimal\` variant 1`] = `
+.c1 {
+  color: inherit;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:active,
+.c1:focus,
+.c1:hover,
+.c1:visited {
+  outline: none;
+}
+
+.c0 {
+  border-bottom: 1px solid #5e81ac;
+  -webkit-transition: border-bottom-color 0.2s ease-in-out;
+  transition: border-bottom-color 0.2s ease-in-out;
+}
+
+.c0:hover,
+.c0:active,
+.c0:focus {
+  border-bottom-color: #2e3440;
+}
+
+<a
+  class="c0 c1"
+  href=""
+>
+  Nord
+</a>
+`;
+
+exports[`theme styles matches the snapshot with default variant 1`] = `
+.c1 {
+  color: inherit;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:active,
+.c1:focus,
+.c1:hover,
+.c1:visited {
+  outline: none;
+}
+
+.c0 {
+  border-radius: 0.25em;
+  color: #5e81ac;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
+}
+
+.c0:hover,
+.c0:active,
+.c0:focus {
+  background-color: rgba(236,239,244,0.45);
+  color: #5e81ac;
+}
+
+<a
+  class="c0 c1"
+  href=""
+>
+  Nord
+</a>
+`;