Add TextFields

Add as simple as possible TextField that dangerously affect
global scope by styling <input> and <label> elements using
type selector.

It should be moved to proper place in Foundation at some point.

Author: viktor-yakubiv

src/elements/forms/index.css

@@ -0,0 +1 @@
+@import url('text-field.css');

src/elements/forms/index.js

@@ -0,0 +1 @@
+export TextField from './text-field'

src/elements/forms/text-field.css

@@ -0,0 +1,76 @@
+:root {
+  --component-padding: 1rem;
+  --label-padding-x: .25em;
+  --label-padding-y: .125em;
+  --form-control-corner-radius: var(--component-corner-radius, 2px);
+  --form-control-padding-x: var(--component-padding, 1rem);
+  --form-control-padding-y: var(--component-padding, 1rem);
+}
+
+/* Global styles */
+
+/* TODO: Move to Foundation partially */
+
+input {
+  display: block;
+  width: 100%;
+  padding: var(--form-control-padding-y) var(--form-control-padding-x);
+  border: 1px solid var(--primary);
+  border-radius: var(--form-control-corner-radius, 2px);
+  height: calc(2 * var(--form-control-padding-y) + 1em);
+
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+::placeholder {
+  color: var(--gray-600);
+  opacity: 0;
+  transition: 150ms;
+  transform: translateY(calc(1em + var(--form-control-padding-y)));
+}
+
+:focus::placeholder {
+  opacity: 1;
+  transform: none;
+}
+
+label {
+  position: absolute;
+  display: block;
+  margin:
+    calc(var(--form-control-padding-y) - var(--label-padding-y))
+    calc(var(--form-control-padding-x) - var(--label-padding-x));
+  padding: var(--label-padding-y) var(--label-padding-x);
+  color: var(--primary);
+  transition: 150ms;
+  top: 0;
+  line-height: 1;
+  transform-origin: left;
+  border-radius: var(--form-control-corner-radius, 2px);
+}
+
+:matches(input, select, textarea):focus + label,
+:matches(input, select, textarea):not(:placeholder-shown) + label {
+  transform: translateY(calc(-1 * var(--form-control-padding-y) - 0.4375em));
+  font-size: var(--font-size-small, 0.875em);
+  background: var(--white, #fff);
+}
+
+/* Text field */
+
+.container {
+  position: relative;
+}
+
+/* Size variations */
+
+.small {
+  --form-control-padding-y: calc(0.75 * var(--component-padding));
+}
+
+.large {
+  --form-control-padding-y: calc(1.25 * var(--component-padding));
+}

src/elements/forms/text-field.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import textFieldClassNames from './text-field.css'
+
+import { classNames } from 'utils'
+
+/**
+ * Unique ID generator
+ *
+ * Based on @gordonbrander's gist.
+ * See: https://gist.github.com/gordonbrander/2230317
+ *
+ * > Math.random should be unique because of its seeding algorithm.
+ * > Convert it to base 36 (numbers + letters), and grab the first 9 characters
+ * > after the decimal.
+ *
+ * @return {string}
+ */
+const generateId = () =>
+  Math.random()
+    .toString(36)
+    .substr(2, 9)
+
+const TextField = ({
+  children,
+  id,
+  className,
+  label,
+  size,
+  tag: Tag = 'div',
+  ...inputProps
+}) => {
+  const controlId = [id, 'control'].join('-')
+
+  return (
+    <Tag
+      id={id}
+      className={classNames
+        // prevents passing 'default' to the class list
+        .use('container', { [size]: size !== 'default' }, className)
+        .withModule(textFieldClassNames)}
+    >
+      <input id={controlId} {...inputProps} />
+      <label htmlFor={controlId}>{label}</label>
+    </Tag>
+  )
+}
+
+TextField.propTypes = {
+  /**
+   * Label for the text field
+   */
+  label: PropTypes.node.isRequired,
+  /**
+   * Size variation. Affects height only.
+   */
+  size: PropTypes.oneOf(['default', 'small', 'large']),
+  /**
+   * An ID that will be used to link input and label. It's necessary for
+   * accessibility.
+   *
+   * If not passed, it will be generated automatically using a random string.
+   */
+  id: PropTypes.string,
+}
+
+TextField.defaultProps = {
+  size: 'default',
+  id: generateId(),
+}
+
+export default TextField

src/elements/forms/text-field.md

@@ -0,0 +1,47 @@
+### Type variations
+
+Example with a search input:
+
+```jsx
+<TextField
+  id="search"
+  type="search"
+  name="search"
+  label="Search"
+  placeholder="Type to search..."
+/>
+```
+
+Example with a password:
+
+```jsx
+<TextField
+  id="login-password"
+  type="password"
+  name="password"
+  label="Password"
+  placeholder="🔒 Something secure"
+/>
+```
+
+### Size variations
+
+#### Small
+
+```jsx
+<TextField
+  label="Name"
+  placeholder="e.g. John Doe"
+  size="small"
+/>
+```
+
+#### Large
+
+```jsx
+<TextField
+  label="Name"
+  placeholder="e.g. John Doe"
+  size="large"
+/>
+```

src/elements/index.css

@@ -0,0 +1 @@
+@import url('forms/index.css');

src/elements/index.js

@@ -1 +1,2 @@
 export Heading from './heading'
+export * from './forms'

src/index.css

@@ -1,3 +1,4 @@
 @import url('foundation/index.css');
+@import url('elements/index.css');
 
 @import url('components/icon/index.css');