diff --git a/src/components/atoms/core/Link/Link.jsx b/src/components/atoms/core/Link/Link.jsx new file mode 100644 index 00000000..93e96d21 --- /dev/null +++ b/src/components/atoms/core/Link/Link.jsx @@ -0,0 +1,42 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @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; diff --git a/src/components/atoms/core/Link/index.js b/src/components/atoms/core/Link/index.js new file mode 100644 index 00000000..19903a1b --- /dev/null +++ b/src/components/atoms/core/Link/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./Link"; diff --git a/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx b/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx index 3a62cd4e..ed474c6e 100644 --- a/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx +++ b/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(Docs); + expect(container.firstChild).toHaveAttribute("href", ROUTE_DOCS); expect(container.firstChild).toMatchSnapshot(); }); test("renders inernal URLs with `href` prop", () => { const { container } = render(Docs); + expect(container.firstChild).toHaveAttribute("href", ROUTE_DOCS); expect(container.firstChild).toMatchSnapshot(); }); test("renders external URLs with `href` prop", () => { const { container } = render(Docs); + expect(container.firstChild).toHaveAttribute("href", metadataNordDocs.homepage); expect(container.firstChild).toMatchSnapshot(); }); test("renders external URLs with `to` prop", () => { const { container } = render(Docs); + expect(container.firstChild).toHaveAttribute("href", metadataNordDocs.homepage); expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/test/components/atoms/core/Link/Link.test.jsx b/test/components/atoms/core/Link/Link.test.jsx new file mode 100644 index 00000000..5627f02b --- /dev/null +++ b/test/components/atoms/core/Link/Link.test.jsx @@ -0,0 +1,35 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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(Nord); + expect(container.firstChild).toMatchSnapshot(); + }); + + test("matches the snapshot with `calmly` variant", () => { + const { container } = renderWithTheme(Nord); + expect(container.firstChild).toMatchSnapshot(); + }); + + test("matches the snapshot with `decent` variant", () => { + const { container } = renderWithTheme(Nord); + expect(container.firstChild).toMatchSnapshot(); + }); + + test("matches the snapshot with `minimal` variant", () => { + const { container } = renderWithTheme(Nord); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/atoms/core/Link/__snapshots__/Link.test.jsx.snap b/test/components/atoms/core/Link/__snapshots__/Link.test.jsx.snap new file mode 100644 index 00000000..1bce632a --- /dev/null +++ b/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; +} + + + Nord + +`; + +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; +} + + + Nord + +`; + +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; +} + + + Nord + +`; + +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; +} + + + Nord + +`;