From f86bab68a14eb683f89bc69dfdb05b75f0a9594a Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Sun, 16 Dec 2018 17:47:10 +0100 Subject: [PATCH] Implement core atom HTML element component "P" This commit implements the core atom `P` that represents the text content (1) HTML element `

`. It uses adjusted styles instead of browser defaults to match Nord Docs style. References: (1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content Associated epic: GH-69 GH-79 --- .../atoms/core/HTMLElements/index.js | 6 ++--- .../A.jsx | 0 .../index.js | 0 .../core/HTMLElements/text-content/P.jsx | 25 +++++++++++++++++++ .../core/HTMLElements/text-content/index.js | 21 ++++++++++++++++ .../inlineTextSemantics/A.test.jsx | 2 +- .../__snapshots__/A.test.jsx.snap | 8 +++--- .../core/HTMLElements/text-content/P.test.jsx | 25 +++++++++++++++++++ .../__snapshots__/P.test.jsx.snap | 14 +++++++++++ 9 files changed, 93 insertions(+), 8 deletions(-) rename src/components/atoms/core/HTMLElements/{inlineTextSemantics => inline-text-semantics}/A.jsx (100%) rename src/components/atoms/core/HTMLElements/{inlineTextSemantics => inline-text-semantics}/index.js (100%) create mode 100644 src/components/atoms/core/HTMLElements/text-content/P.jsx create mode 100644 src/components/atoms/core/HTMLElements/text-content/index.js create mode 100644 test/components/atoms/core/HTMLElements/text-content/P.test.jsx create mode 100644 test/components/atoms/core/HTMLElements/text-content/__snapshots__/P.test.jsx.snap diff --git a/src/components/atoms/core/HTMLElements/index.js b/src/components/atoms/core/HTMLElements/index.js index 4a3885c2..a98b5238 100644 --- a/src/components/atoms/core/HTMLElements/index.js +++ b/src/components/atoms/core/HTMLElements/index.js @@ -15,7 +15,7 @@ * @since 0.3.0 */ -import { A } from "./inlineTextSemantics"; +import { A } from "./inline-text-semantics"; +import { P } from "./text-content"; -/* eslint-disable-next-line import/prefer-default-export */ -export { A }; +export { A, P }; diff --git a/src/components/atoms/core/HTMLElements/inlineTextSemantics/A.jsx b/src/components/atoms/core/HTMLElements/inline-text-semantics/A.jsx similarity index 100% rename from src/components/atoms/core/HTMLElements/inlineTextSemantics/A.jsx rename to src/components/atoms/core/HTMLElements/inline-text-semantics/A.jsx diff --git a/src/components/atoms/core/HTMLElements/inlineTextSemantics/index.js b/src/components/atoms/core/HTMLElements/inline-text-semantics/index.js similarity index 100% rename from src/components/atoms/core/HTMLElements/inlineTextSemantics/index.js rename to src/components/atoms/core/HTMLElements/inline-text-semantics/index.js diff --git a/src/components/atoms/core/HTMLElements/text-content/P.jsx b/src/components/atoms/core/HTMLElements/text-content/P.jsx new file mode 100644 index 00000000..6e62c219 --- /dev/null +++ b/src/components/atoms/core/HTMLElements/text-content/P.jsx @@ -0,0 +1,25 @@ +/* + * 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 styled from "styled-components"; + +/** + * A base HTML component that represents a paragraph. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p + * @since 0.3.0 + */ +const P = styled.p` + margin-top: 0; + margin-bottom: 1em; +`; + +export default P; diff --git a/src/components/atoms/core/HTMLElements/text-content/index.js b/src/components/atoms/core/HTMLElements/text-content/index.js new file mode 100644 index 00000000..854b13b3 --- /dev/null +++ b/src/components/atoms/core/HTMLElements/text-content/index.js @@ -0,0 +1,21 @@ +/* + * 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 + */ + +/** + * @file Provides components that represent basic HTML elements with text content functionality. + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content + * @since 0.3.0 + */ + +import P from "./P"; + +/* eslint-disable-next-line import/prefer-default-export */ +export { P }; diff --git a/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx b/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx index 6d2feacc..3a62cd4e 100644 --- a/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx +++ b/test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx @@ -14,7 +14,7 @@ import { A } from "atoms/core/HTMLElements"; import { ROUTE_DOCS } from "config/routes/mappings"; import { metadataNordDocs } from "data/project"; -describe("snapshot", () => { +describe("logical behavior", () => { test("renders inernal URLs with `to` prop", () => { const { container } = render(Docs); expect(container.firstChild).toMatchSnapshot(); diff --git a/test/components/atoms/core/HTMLElements/inlineTextSemantics/__snapshots__/A.test.jsx.snap b/test/components/atoms/core/HTMLElements/inlineTextSemantics/__snapshots__/A.test.jsx.snap index 38813538..e227c27f 100644 --- a/test/components/atoms/core/HTMLElements/inlineTextSemantics/__snapshots__/A.test.jsx.snap +++ b/test/components/atoms/core/HTMLElements/inlineTextSemantics/__snapshots__/A.test.jsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`snapshot renders external URLs with \`href\` prop 1`] = ` +exports[`logical behavior renders external URLs with \`href\` prop 1`] = ` .c0 { color: inherit; cursor: pointer; @@ -23,7 +23,7 @@ exports[`snapshot renders external URLs with \`href\` prop 1`] = ` `; -exports[`snapshot renders external URLs with \`to\` prop 1`] = ` +exports[`logical behavior renders external URLs with \`to\` prop 1`] = ` .c0 { color: inherit; cursor: pointer; @@ -46,7 +46,7 @@ exports[`snapshot renders external URLs with \`to\` prop 1`] = ` `; -exports[`snapshot renders inernal URLs with \`href\` prop 1`] = ` +exports[`logical behavior renders inernal URLs with \`href\` prop 1`] = ` .c0 { color: inherit; cursor: pointer; @@ -69,7 +69,7 @@ exports[`snapshot renders inernal URLs with \`href\` prop 1`] = ` `; -exports[`snapshot renders inernal URLs with \`to\` prop 1`] = ` +exports[`logical behavior renders inernal URLs with \`to\` prop 1`] = ` .c0 { color: inherit; cursor: pointer; diff --git a/test/components/atoms/core/HTMLElements/text-content/P.test.jsx b/test/components/atoms/core/HTMLElements/text-content/P.test.jsx new file mode 100644 index 00000000..36564bad --- /dev/null +++ b/test/components/atoms/core/HTMLElements/text-content/P.test.jsx @@ -0,0 +1,25 @@ +/* + * 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 { P } from "atoms/core/HTMLElements"; + +describe("theme styles", () => { + test("matches the snapshot", () => { + const { container } = renderWithTheme(

Nord

); + expect(container.firstChild).toMatchSnapshot(); + }); + + test("has no top margin", () => { + const { container } = renderWithTheme(

Nord

); + expect(container.firstChild).toHaveStyleRule("margin-top", "0"); + }); +}); diff --git a/test/components/atoms/core/HTMLElements/text-content/__snapshots__/P.test.jsx.snap b/test/components/atoms/core/HTMLElements/text-content/__snapshots__/P.test.jsx.snap new file mode 100644 index 00000000..a849055d --- /dev/null +++ b/test/components/atoms/core/HTMLElements/text-content/__snapshots__/P.test.jsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + margin-top: 0; + margin-bottom: 1em; +} + +

+ Nord +

+`;