implement <Input /> base component (fixes #44)

ui/src/components/input/index.js

@@ -0,0 +1,60 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Input = ({
+  children,
+  className,
+  disabled = false,
+  id,
+  label,
+  onChange,
+  placeholder,
+  style,
+  type,
+  value
+}) => {
+  const _label = label || children;
+  const _children = label && children ? children : null;
+
+  const cn = classNames(
+    className,
+    styles['input-group']
+  );
+
+  const labelledby = `${styles.label}-label`;
+
+  return (
+    <div className={cn}>
+      <label className={styles.label} htmlFor={id}>
+        {_label}
+      </label>
+      <input
+        aria-labelledby={labelledby}
+        className={styles.input}
+        disabled={disabled}
+        id={id}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type}
+        value={value}
+      />
+      {_children}
+    </div>
+  );
+};
+
+Input.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  id: React.PropTypes.string,
+  label: React.PropTypes.string,
+  onChange: React.PropTypes.func,
+  placeholder: React.PropTypes.string,
+  style: React.PropTypes.object,
+  type: React.PropTypes.string,
+  value: React.PropTypes.string
+};
+
+module.exports = Input;

ui/src/components/input/readme.md

@@ -0,0 +1,60 @@
+# Input
+
+## demo
+
+```embed
+const  React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Input = require('./index.js');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Input
+          placeholder='Enter email'
+          label='Email Address'
+          type='email'
+        >
+          <small>We'll never share your email with anyone else.</small>
+        </Input>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Input placeholder='Password' type='password'>
+          Password
+        </Input>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Radio = require('ui/radio');
+
+module.exports = () => {
+  return (
+    <div>
+      <Input
+        placeholder='Enter email'
+        label='Email Address'
+        type='email'
+      >
+        <small>We'll never share your email with anyone else.</small>
+      </Input>
+      <Input placeholder='Password' type='password'>
+        Password
+      </Input>
+    </div>
+  );
+}
+```

ui/src/components/input/style.css

@@ -0,0 +1,34 @@
+~boxes: "../../shared/constants.js";
+~colors: "../../shared/constants.js";
+
+:root {
+  --background-color: ~colors.background;
+  --border-color: ~colors.border;
+  --border-selected-color: ~colors.borderSelected;
+  --border-radius: remCalc(~boxes.borderRadius);
+  --inset-box-shadow: ~boxes.insetShaddow;
+}
+
+.input-group {
+  & .input {
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--inset-box-shadow);
+    border-radius: var(--border-radius);
+    height: 50px;
+    width: 100%;
+    display: block;
+    visibility: visible;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    &:focus {
+      border-color: var(--border-selected-color);
+      outline: none;
+    }
+  }
+
+  & .label {
+    color: #464646;
+  }
+}

ui/src/docs.js

@@ -9,6 +9,7 @@ module.exports = {
     Base: require('./components/base/readme.md'),
     Container: require('./components/container/readme.md'),
     Row: require('./components/row/readme.md'),
+    Input: require('./components/input/readme.md'),
     Radio: require('./components/radio/readme.md'),
     'Radio Group': require('./components/radio-group/readme.md'),
     Column: require('./components/column/readme.md'),

ui/src/index.js

@@ -9,6 +9,7 @@ module.exports = {
   Tab: require('./components/tab'),
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
+  Input: require('./components/input'),
   Radio: require('./components/radio'),
   RadioGroup: require('./components/radio-group'),
   Widget: require('./components/widget')

ui/src/shared/constants.js

@@ -68,7 +68,8 @@ const sizes = {
 
 const boxes = {
   borderRadius: 4,
-  bottomShaddow: '0 2px 0 0 rgba(0,0,0,0.05)'
+  bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
+  insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)'
 };
 
 const forms = {
@@ -79,7 +80,10 @@ const colors = {
   brandPrimary: '#364acd',
   brandSecondary: '#160d42',
   grayLight: '#818a91',
-  confirmation: '#38C647'
+  confirmation: '#38C647',
+  background: '#ffffff',
+  border: '#D8D8D8',
+  borderSelected: '#1D35BC'
 };
 
 const typography = {

ui/test/index.js

@@ -89,3 +89,9 @@ test('renders <Widget> without exploding', (t) => {
   const wrapper = shallow(<Widget />);
   t.deepEqual(wrapper.length, 1);
 });
+
+test('renders <Input> without exploding', (t) => {
+  const Input = require('../src/components/input');
+  const wrapper = shallow(<Input />);
+  t.deepEqual(wrapper.length, 1);
+});