creating textarea component

ui/src/components/textarea/index.js

@@ -0,0 +1,146 @@
+const React = require('react');
+
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  boxes,
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  baseBox
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const Label = styled.label`
+  color: ${props => props.error ? colors.alert : colors.fonts.regular}
+`;
+
+const InputField = styled.textarea`
+  background: ${colors.brandSecondary};
+  color: ${props => props.error ? colors.alert : colors.fonts.semibold}
+  display: block;
+  font-size: 16px;
+  padding: ${remcalc('15 18')};
+  visibility: visible;
+  width: 100%;
+  min-height: ${remcalc(96)};
+  ${baseBox()};
+  border-color: ${props => props.error ? colors.alert : ''};
+  
+  &:focus {
+    border-color: ${boxes.border.checked};
+    outline: none;
+  }
+`;
+
+const Error = styled.span`
+  float: right;
+  color: ${colors.alert};
+  font-size: ${remcalc(14)};
+`;
+
+const Textarea = ({
+  autoComplete,
+  autoFocus,
+  children,
+  className,
+  disabled = false,
+  error,
+  form,
+  id,
+  inputMode,
+  label,
+  labelledby,
+  list,
+  name,
+  onChange,
+  pattern,
+  placeholder,
+  readOnly,
+  required,
+  selectionDirection,
+  spellCheck,
+  style,
+  tabIndex,
+  type,
+  value
+}) => {
+  const _label = label || children;
+  const _children = label && children ? children : null;
+  const _error = error ? (<Error>{error}</Error>) : null;
+
+  return (
+    <div>
+      <Label
+        error={error}
+        htmlFor={id}
+      >
+        {_label}
+      </Label>
+      {_error}
+      <InputField
+        aria-labelledby={labelledby}
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        error={error}
+        form={form}
+        id={id}
+        inputMode={inputMode}
+        list={list}
+        name={name}
+        onChange={onChange}
+        pattern={pattern}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        required={required}
+        selectionDirection={selectionDirection}
+        spellCheck={spellCheck}
+        tabIndex={tabIndex}
+        type={type}
+        value={value}
+      />
+      {_children}
+    </div>
+  );
+};
+
+Textarea.propTypes = {
+  autoComplete: React.PropTypes.string,
+  autoFocus: React.PropTypes.bool,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  error: React.PropTypes.string,
+  form: React.PropTypes.string,
+  id: React.PropTypes.string,
+  inputMode: React.PropTypes.string,
+  label: React.PropTypes.string,
+  labelledby: React.PropTypes.string,
+  list: React.PropTypes.string,
+  name: React.PropTypes.string,
+  onChange: React.PropTypes.func,
+  pattern: React.PropTypes.string,
+  placeholder: React.PropTypes.string,
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
+  spellCheck: React.PropTypes.bool,
+  style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string,
+  type: React.PropTypes.string,
+  value: React.PropTypes.string
+};
+
+module.exports = Textarea;

ui/src/components/textarea/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 Input = require('ui/input');
+
+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/textarea/story.js

@@ -0,0 +1,24 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Textarea = require('./');
+
+storiesOf('Textarea', module)
+  .add('Default', () => (
+    <Base>
+      <Textarea placeholder="I am the placeholder" />
+    </Base>
+  ))
+  .add('Error', () => (
+    <Base>
+      <Textarea
+        error="Somethings missing"
+        placeholder="There was an error"
+        value="alexw/makeusproud.com"
+      />
+    </Base>
+  ));

ui/src/index.js

@@ -24,5 +24,6 @@ module.exports = {
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
   Tooltip: require('./components/tooltip'),
+  Textarea: require('./components/textarea'),
   Widget: require('./components/widget'),
 };