add send button to input

web/app/components/input/__button/input__button.scss

@@ -0,0 +1,23 @@
+@import '../input.vars';
+
+.input__button {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  width: $buttonWidth;
+  height: 100%;
+  padding: 0 10px;
+  font-size: 16px;
+  border: 0;
+  background: #00aaaa;
+  border-radius: 0 $borderRadius $borderRadius 0;
+  color: #fff;
+  cursor: pointer;
+
+  &:hover {
+    background: #00ffff;
+  }
+}

web/app/components/input/__field/input__field.scss

@@ -0,0 +1,32 @@
+@import '../input.vars';
+
+.input__field {
+  $lineHeight: 1.4;
+  $fontSize: 16px;
+  $paddingVrt: 10px;
+  $height: $fontSize * $lineHeight + $paddingVrt * 2;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: $height;
+  min-height: $height;
+  padding: $paddingVrt ($buttonWidth + 8px) $paddingVrt 15px;
+  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  box-shadow: 0 0 0 1px #eee;
+  border: 0;
+  border-radius: $borderRadius;
+  resize: none;
+
+  &:focus {
+    box-shadow: 0 0 0 1px #aaa;
+    outline: none;
+  }
+
+  &:valid {
+    + .input__button {
+      display: block;
+    }
+  }
+}

web/app/components/input/index.js

@@ -1,3 +1,6 @@
 export { default } from './input';
 
 require('./input.scss');
+
+require('./__button/input__button.scss');
+require('./__field/input__field.scss');

web/app/components/input/input.jsx

@@ -8,18 +8,25 @@ export default class Input extends Component {
   }
 
   autoResize() {
-    this.rootNode.style.height = '';
-    this.setState({ height: this.rootNode.scrollHeight });
+    this.fieldNode.style.height = '';
+    this.setState({ height: this.fieldNode.scrollHeight });
   }
 
   render(props, { height }) {
     return (
-      <textarea
-        className={b('input', props)}
-        onInput={this.autoResize}
-        style={{ height }}
-        ref={r => (this.rootNode = r)}
-      >{props.children}</textarea>
+      <div className={b('input', props)}>
+        <textarea
+          className="input__field"
+          onInput={this.autoResize}
+          style={{ height }}
+          ref={r => (this.fieldNode = r)}
+          required
+        >
+        {props.children}
+        </textarea>
+
+        <button className="input__button" type="button">Send</button>
+      </div>
     );
   }
 }

web/app/components/input/input.scss

@@ -1,24 +1,4 @@
 .input {
-  $lineHeight: 1.4;
-  $fontSize: 16px;
-  $paddingVrt: 10px;
-  $height: $fontSize * $lineHeight + $paddingVrt * 2;
-
-  box-sizing: border-box;
-  width: 100%;
-  height: $height;
-  min-height: $height;
-  padding: $paddingVrt 15px;
-  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
-  font-size: $fontSize;
-  line-height: $lineHeight;
-  box-shadow: 0 0 0 1px #eee;
-  border: 0;
-  border-radius: 4px;
-  resize: none;
-
-  &:focus {
-    box-shadow: 0 0 0 1px #aaa;
-    outline: none;
-  }
+  position: relative;
+  font-size: 0;
 }

web/app/components/input/input.vars.scss

@@ -0,0 +1,2 @@
+$borderRadius: 4px;
+$buttonWidth: 72px;