Merge pull request #80 from arcticicestudio/feature/gh-79-core-atom-h…

…tml-element-p

Core Atom HTML Element: P

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 };

src/components/atoms/core/HTMLElements/text-content/P.jsx

@@ -0,0 +1,25 @@
+/*
+ * 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 styled from "styled-components";
+
+/**
+ * A base HTML component that represents a paragraph.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @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;

src/components/atoms/core/HTMLElements/text-content/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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
+ */
+
+/**
+ * @file Provides components that represent basic HTML elements with text content functionality.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @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 };

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(<A to={ROUTE_DOCS}>Docs</A>);
     expect(container.firstChild).toMatchSnapshot();

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`] = `
 </a>
 `;
 
-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`] = `
 </a>
 `;
 
-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`] = `
 </a>
 `;
 
-exports[`snapshot renders inernal URLs with \`to\` prop 1`] = `
+exports[`logical behavior renders inernal URLs with \`to\` prop 1`] = `
 .c0 {
   color: inherit;
   cursor: pointer;

test/components/atoms/core/HTMLElements/text-content/P.test.jsx

@@ -0,0 +1,25 @@
+/*
+ * 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 { P } from "atoms/core/HTMLElements";
+
+describe("theme styles", () => {
+  test("matches the snapshot", () => {
+    const { container } = renderWithTheme(<P>Nord</P>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test("has no top margin", () => {
+    const { container } = renderWithTheme(<P>Nord</P>);
+    expect(container.firstChild).toHaveStyleRule("margin-top", "0");
+  });
+});

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;
+}
+
+<p
+  class="c0"
+>
+  Nord
+</p>
+`;