Implemented base HTML components for <pre> and <code> elements

The `Code` component represents a `<code>` base HTML element to render
short fragments of computer code. It is related
o and commonly used with the `Pre` component that represents the `<pre>`
element to render preformatted text using a non-proportional "monspace"
font.

GH-112

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

@@ -15,8 +15,8 @@
  * @since 0.3.0
  */
 
-import { A } from "./inline-text-semantics";
+import { A, Code } from "./inline-text-semantics";
 import { H1, H2, H3, H4, H5, H6 } from "./sectioning";
-import { P } from "./text";
+import { P, Pre } from "./text";
 
-export { A, H1, H2, H3, H4, H5, H6, P };
+export { A, Code, H1, H2, H3, H4, H5, H6, P, Pre };

src/components/atoms/core/HTMLElements/inline-text-semantics/Code.jsx

@@ -0,0 +1,46 @@
+/*
+ * 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";
+
+import { colors, motion, themedMode, typography, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+import { Pre } from "../text";
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord6,
+  [MODE_DARK_NIGHT_FROST]: colors.nord1
+});
+
+/**
+ * A base HTML component that represents the `<code>` element to render short fragments of computer code.
+ * The actual text is rendered as base HTML element `<pre>` that is represented through the `Pre` component.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
+ */
+const Code = styled.code`
+  font-family: ${typography.typefaces.monospace};
+  font-weight: 500;
+  font-size: 0.85em;
+  padding: 0.2em 0.4em;
+  background-color: ${backgroundColor};
+  border-radius: 4px;
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+
+  ${Pre} & {
+    margin-bottom: 1em;
+    display: block;
+    padding: 1em;
+  }
+`;
+
+export default Code;

src/components/atoms/core/HTMLElements/inline-text-semantics/index.js

@@ -16,6 +16,6 @@
  */
 
 import A from "./A";
+import Code from "./Code";
 
-/* eslint-disable-next-line import/prefer-default-export */
-export { A };
+export { A, Code };

src/components/atoms/core/HTMLElements/text/Pre.jsx

@@ -0,0 +1,37 @@
+/*
+ * 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";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord6,
+  [MODE_DARK_NIGHT_FROST]: colors.nord1
+});
+
+/**
+ * A base HTML component that represents the `<pre>` element to render preformatted text using a non-proportional
+ * "monspace" font.
+ * It is related to and commonly used with a `<code>` element that is represented by the `Code` component.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
+ */
+const Pre = styled.pre`
+  background-color: ${backgroundColor};
+  overflow: auto;
+  white-space: pre;
+  border-radius: 4px;
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+`;
+
+export default Pre;

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

@@ -16,6 +16,6 @@
  */
 
 import P from "./P";
+import Pre from "./Pre";
 
-/* eslint-disable-next-line import/prefer-default-export */
-export { P };
+export { P, Pre };