Rename HTMLElements package to html-elements

The new name now reflect its purpose as package and not as a React
component.

GH-129

src/components/atoms/core/Button/Button.jsx

@@ -11,7 +11,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
-import { A } from "atoms/core/HTMLElements";
+import { A } from "atoms/core/html-elements";
 
 import styles from "./styles";
 

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

@@ -10,7 +10,7 @@
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
-import { A } from "atoms/core/HTMLElements";
+import { A } from "atoms/core/html-elements";
 
 import { calmly, decent, minimal } from "./styles";
 

src/components/atoms/core/html-elements/forms/Input.jsx

@@ -0,0 +1,85 @@
+/*
+ * 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 fontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.nord4
+});
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord6,
+  [MODE_DARK_NIGHT_FROST]: colors.nord3
+});
+
+const backgroundColorHover = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord5,
+  [MODE_DARK_NIGHT_FROST]: colors.nord2
+});
+
+/**
+ * A base HTML component that represents the `<input>` element to create interactive controls for web-based forms in
+ * order to accept data from the user.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+ */
+const Input = styled.input`
+  &[type="checkbox"] {
+    appearance: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1em;
+    width: 1em;
+    margin-right: 0.5em;
+    position: relative;
+    vertical-align: middle;
+    border-radius: 4px;
+    background-color: ${backgroundColor};
+    transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+
+    &:active,
+    &:focus {
+      outline: 0;
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      border-radius: 4px;
+      transition: background-color ${motion.speed.duration.transition.area.medium}ms ease-in-out;
+    }
+
+    &:hover {
+      &:before {
+        background-color: ${backgroundColorHover};
+      }
+    }
+
+    &:checked {
+       &:after {
+         content: "✔";
+         position: absolute;
+         display: inline-block;
+         color: ${fontColor};
+       }
+    }
+`;
+
+export default Input;

src/components/atoms/core/html-elements/forms/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 form functionality.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms
+ */
+
+import Input from "./Input";
+
+export default Input;

src/components/atoms/core/html-elements/index.js

@@ -0,0 +1,50 @@
+/*
+ * 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.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+ */
+
+import Input from "./forms";
+import { A, Code } from "./inline-text-semantics";
+import { Details, Summary } from "./interactive";
+import { H1, H2, H3, H4, H5, H6 } from "./sectioning";
+import { Caption, Table, Td, Th, Tr } from "./tabular";
+import { Blockquote, Figure, Hr, Li, Ol, P, Pre, Ul } from "./text";
+
+export {
+  A,
+  Blockquote,
+  Caption,
+  Code,
+  Details,
+  Figure,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Hr,
+  Input,
+  Li,
+  Ol,
+  P,
+  Pre,
+  Summary,
+  Table,
+  Td,
+  Th,
+  Tr,
+  Ul
+};

src/components/atoms/core/HTMLElements/inline-text-semantics/A.jsx → src/components/atoms/core/html-elements/inline-text-semantics/A.jsx

@@ -64,6 +64,7 @@ const BaseGatsbyLink = styled(Link)`
  *   </A>
  * );
  * <RefLink to="/blog">Blog</RefLink>
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
  * @see https://www.gatsbyjs.org/docs/gatsby-link
  * @see https://github.com/gatsbyjs/gatsby/pull/9892
@@ -83,7 +84,7 @@ const A = ({ children, href, to, linkRef, ...passProps }) =>
 A.propTypes = {
   children: PropTypes.node.isRequired,
   href: PropTypes.node,
-  linkRef: PropTypes.element,
+  linkRef: PropTypes.func,
   to: PropTypes.string
 };
 

src/components/atoms/core/html-elements/inline-text-semantics/Cite.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 styled from "styled-components";
+
+/**
+ * A base HTML component that represents the `<cite>` element to describe a reference to a cited creative work.
+ * It is used in combination with the `Blockquote` (`<blockquote>`) and `Q` (`<q>`) components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q
+ */
+const Cite = styled.cite`
+  display: block;
+  margin-bottom: 2.5em;
+  text-align: right;
+  font-style: inherit;
+
+  &:before {
+    content: "— ";
+    margin-left: -1em;
+  }
+`;
+
+export default Cite;

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

@@ -40,6 +40,7 @@ const Code = styled.code`
     margin-bottom: 1em;
     display: block;
     padding: 1em;
+    font-size: 0.9375em;
   }
 `;
 

src/components/atoms/core/html-elements/inline-text-semantics/Kbd.jsx

@@ -0,0 +1,63 @@
+/*
+ * 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 { darken, lighten, rgba } from "polished";
+
+import { colors, motion, themedMode, typography, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const fontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.font.base[MODE_DARK_NIGHT_FROST]
+});
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.3),
+  [MODE_DARK_NIGHT_FROST]: colors.nord1
+});
+
+const borderColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord4,
+  [MODE_DARK_NIGHT_FROST]: colors.nord2
+});
+
+const borderBottomColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: darken(0.1, colors.nord4),
+  [MODE_DARK_NIGHT_FROST]: lighten(0.1, colors.nord2)
+});
+
+/**
+ * A base HTML component that represents the `<kbd>` element to render a span of inline text denoting textual user
+ * input from a keyboard, voice input, or any other text entry device.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
+ */
+const Kbd = styled.kbd`
+  font-family: ${typography.typefaces.monospace};
+  display: inline-block;
+  font-size: 0.85em;
+  padding: 0.2em 0.4em;
+  line-height: 1;
+  color: ${fontColor};
+  vertical-align: middle;
+  background-color: ${backgroundColor};
+  border: solid 1px ${borderColor};
+  border-bottom-color: ${borderBottomColor};
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 ${borderBottomColor};
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out,
+    border ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out,
+    box-shadow ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out,
+    color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+`;
+
+export default Kbd;

src/components/atoms/core/html-elements/inline-text-semantics/Q.jsx

@@ -0,0 +1,28 @@
+/*
+ * 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 the `<q>` element to indicate that the enclosed text is a short inline
+ * quotation.
+ * It is used in combination with the `Blockquote` (`<blockquote>`) and `Cite` (`<cite>`) components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q
+ */
+const Q = styled.q`
+  quotes: "“" "”" "‘" "’";
+`;
+
+export default Q;

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

@@ -11,11 +11,14 @@
  * @file Provides components that represent basic HTML elements with inline text semantics functionality.
  * @author Arctic Ice Studio <[email protected]>
  * @author Sven Greb <[email protected]>
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics
  * @since 0.3.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics
  */
 
 import A from "./A";
+import Cite from "./Cite";
 import Code from "./Code";
+import Kbd from "./Kbd";
+import Q from "./Q";
 
-export { A, Code };
+export { A, Cite, Code, Kbd, Q };