Add Textarea component.

dist/components/Textarea.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _AbstractComponent2 = require('./AbstractComponent');
+
+var _AbstractComponent3 = _interopRequireDefault(_AbstractComponent2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Textarea = function (_AbstractComponent) {
+  _inherits(Textarea, _AbstractComponent);
+
+  function Textarea() {
+    _classCallCheck(this, Textarea);
+
+    return _possibleConstructorReturn(this, (Textarea.__proto__ || Object.getPrototypeOf(Textarea)).apply(this, arguments));
+  }
+
+  _createClass(Textarea, [{
+    key: 'getModifierObject',
+    value: function getModifierObject() {
+      return {
+        size: this.props.size,
+        view: this.props.view,
+        color: this.props.color,
+        disabled: this.props.disabled
+      };
+    }
+  }, {
+    key: 'delegateEvent',
+    value: function delegateEvent(eventName) {
+      var _this2 = this;
+
+      return function (event) {
+        if (typeof _this2.props[eventName] === 'function') {
+          _this2.props[eventName](event.target.value, event);
+        }
+      };
+    }
+  }, {
+    key: 'renderLabel',
+    value: function renderLabel() {
+      return this.props.label ? _react2.default.createElement(
+        'div',
+        { className: this.getElementName('textarea', 'label') },
+        this.props.label
+      ) : null;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { className: this.getBlockName('textarea', this.getModifierObject()) },
+        this.renderLabel(),
+        _react2.default.createElement('textarea', {
+          name: this.props.name,
+          placeholder: this.props.placeholder,
+          value: this.props.value,
+          disabled: this.props.disabled,
+          onChange: this.delegateEvent('onChange'),
+          onKeyDown: this.delegateEvent('onKeyDown'),
+          onKeyUp: this.delegateEvent('onKeyUp'),
+          onKeyPress: this.delegateEvent('onKeyPress'),
+          onFocus: this.delegateEvent('onFocus'),
+          onBlur: this.delegateEvent('onBlur')
+        })
+      );
+    }
+  }]);
+
+  return Textarea;
+}(_AbstractComponent3.default);
+
+exports.default = Textarea;

dist/example/views/AppView.js

@@ -42,6 +42,10 @@ var _Tabs = require('../../components/Tabs');
 
 var _Tabs2 = _interopRequireDefault(_Tabs);
 
+var _Textarea = require('../../components/Textarea');
+
+var _Textarea2 = _interopRequireDefault(_Textarea);
+
 var _Tooltip = require('../../components/Tooltip');
 
 var _Tooltip2 = _interopRequireDefault(_Tooltip);
@@ -1200,6 +1204,16 @@ var App = function (_React$Component) {
               'Upload'
             ),
             _react2.default.createElement(_Upload2.default, { text: 'Drug file here to upload' })
+          ),
+          _react2.default.createElement(
+            _Block2.default,
+            null,
+            _react2.default.createElement(
+              'h2',
+              null,
+              'Textarea'
+            ),
+            _react2.default.createElement(_Textarea2.default, { label: 'Something' })
           )
         )
       );

dist/index.js

@@ -94,6 +94,15 @@ Object.defineProperty(exports, 'Tabs', {
   }
 });
 
+var _Textarea = require('./components/Textarea');
+
+Object.defineProperty(exports, 'Textarea', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Textarea).default;
+  }
+});
+
 var _Tooltip = require('./components/Tooltip');
 
 Object.defineProperty(exports, 'Tooltip', {
@@ -121,6 +130,15 @@ Object.defineProperty(exports, 'Progress', {
   }
 });
 
+var _Upload = require('./components/Upload');
+
+Object.defineProperty(exports, 'Upload', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Upload).default;
+  }
+});
+
 var _settings = require('./settings');
 
 Object.defineProperty(exports, 'settings', {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modular-ui",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

src/components/Textarea.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import AbstractComponent from './AbstractComponent';
+
+export default class Textarea extends AbstractComponent {
+  getModifierObject() {
+    return {
+      size: this.props.size,
+      view: this.props.view,
+      color: this.props.color,
+      disabled: this.props.disabled
+    };
+  }
+
+  delegateEvent(eventName) {
+    return (event) => {
+      if (typeof this.props[eventName] === 'function') {
+        this.props[eventName](event.target.value, event);
+      }
+    };
+  }
+
+  renderLabel() {
+    return this.props.label ? (
+      <div className={this.getElementName('textarea', 'label')}>{this.props.label}</div>
+    ) : null;
+  }
+
+  render() {
+    return (
+      <div className={this.getBlockName('textarea', this.getModifierObject())}>
+        {this.renderLabel()}
+        <textarea
+          name={this.props.name}
+          placeholder={this.props.placeholder}
+          value={this.props.value}
+          disabled={this.props.disabled}
+          onChange={this.delegateEvent('onChange')}
+          onKeyDown={this.delegateEvent('onKeyDown')}
+          onKeyUp={this.delegateEvent('onKeyUp')}
+          onKeyPress={this.delegateEvent('onKeyPress')}
+          onFocus={this.delegateEvent('onFocus')}
+          onBlur={this.delegateEvent('onBlur')}
+        />
+      </div>
+    )
+  }
+}

src/example/views/AppView.js

@@ -8,6 +8,7 @@ import Icon from '../../components/Icon';
 import Loading from '../../components/Loading';
 import Pill from '../../components/Pill';
 import Tabs from '../../components/Tabs';
+import Textarea from '../../components/Textarea';
 import Tooltip from '../../components/Tooltip';
 import Progress from '../../components/Progress';
 import Upload from '../../components/Upload';
@@ -460,6 +461,10 @@ export default class App extends React.Component {
             <h2>Upload</h2>
             <Upload text="Drug file here to upload" />
           </Block>
+          <Block>
+            <h2>Textarea</h2>
+            <Textarea label="Something" />
+          </Block>
         </Block>
       </div>
     );

src/index.js

@@ -8,8 +8,10 @@ export {default as Form} from './components/Form';
 export {default as Loading} from './components/Loading';
 export {default as Pill} from './components/Pill';
 export {default as Tabs} from './components/Tabs';
+export {default as Textarea} from './components/Textarea';
 export {default as Tooltip} from './components/Tooltip';
 export {default as Portal} from './components/Portal';
 export {default as Progress} from './components/Progress';
+export {default as Upload} from './components/Upload';
 
 export {default as settings} from './settings';

styles/dist/default/index.css

@@ -15319,6 +15319,41 @@ body {
 .c-tabs.-size-48 .c-tabs--option > *:first-child {
   margin-left: 0;
 }
+.c-textarea textarea {
+  height: 48px;
+  font-size: 16px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  padding: 8px;
+  background: #eee;
+  border: 1px solid #bbb;
+  outline: none;
+}
+.c-textarea textarea:focus {
+  border: 1px solid #08a;
+}
+.c-textarea--label {
+  font-size: 14px;
+  color: #444;
+  padding: 4px 0;
+}
+.c-textarea.-size-48 textarea {
+  height: 48px;
+  padding: 0 12px;
+  font-size: 16px;
+}
+.c-textarea.-size-64 textarea {
+  height: 64px;
+  padding: 0 16px;
+  font-size: 16px;
+}
+.c-textarea.-size-128 textarea {
+  height: 128px;
+  padding: 0 32px;
+  font-size: 16px;
+}
 .c-tooltip {
   position: absolute;
   z-index: 1000;

styles/src/default/index.styl

@@ -9,5 +9,6 @@
 @import "pill.styl";
 @import "progress.styl";
 @import "tabs.styl";
+@import "textarea.styl";
 @import "tooltip.styl";
 @import "upload.styl";

styles/src/default/textarea.styl

@@ -0,0 +1,37 @@
+@import "constants.styl";
+
+textarea-size($size, $font-size) {
+  height: $size;
+  font-size: $font-size;
+}
+
+.c-textarea {
+  textarea {
+    textarea-size(48px, 16px);
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+    padding: 8px;
+    background: $color-light-grey;
+    border: 1px solid $color-grey;
+    outline: none;
+    &:focus {
+      border: 1px solid $color-primary;
+    }
+  }
+  &--label {
+    font-size: 14px;
+    color: $color-dark-grey;
+    padding: 4px 0;
+  }
+  &.-size-48 textarea {
+    input-size(48px, 16px);
+  }
+  &.-size-64 textarea {
+    input-size(64px, 16px);
+  }
+  &.-size-128 textarea {
+    input-size(128px, 16px);
+  }
+}

tests/components/Input.test.js

@@ -9,7 +9,7 @@ describe('Input', () => {
         size="4"
         color="primary"
         view="flat"
-        didabled
+        disabled
       />
     ).toJSON();
 

tests/components/Textarea.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Textarea from '../../src/components/Textarea';
+
+describe('Textarea', () => {
+  it('should render Textarea', () => {
+    const tree = renderer.create(
+      <Textarea
+        size="128"
+        color="primary"
+        view="flat"
+        disabled
+      />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});