Adds textfield to coral-UI.

client/coral-configure/components/ConfigureCommentStream.css

@@ -35,3 +35,17 @@ p {
 .wrapper {
   margin-bottom: 20px;
 }
+
+.configSettingQuestionBox {
+  min-height: 100px;
+  margin-bottom: 20px;
+  cursor: pointer;
+  width: auto;
+  height: auto;
+  text-align: left;
+  overflow: visible;
+}
+
+.hidden {
+  display: none;
+}

client/coral-configure/components/ConfigureCommentStream.js

@@ -60,9 +60,13 @@ export default ({handleChange, handleApply, changed, ...props}) => (
               title: lang.t('configureCommentStream.enableQuestionBox'),
               description: lang.t('configureCommentStream.enableQuestionBoxDescription')
             }} />
+          <div className={styles.content}>
+            <div className={`${styles.configSettingQuestionBox} ${props.questionBoxEnable ? null : styles.hidden}`} >
+              Pepe
+            </div>
+          </div>
         </li>
       </ul>
     </div>
   </form>
-
 );

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -28,13 +28,17 @@ class ConfigureStreamContainer extends Component {
     const {elements} = e.target;
     const premod = elements.premod.checked;
     const questionBoxEnable = elements.qboxenable.checked;
+    const questionBoxContent = ''; // elements.qboxcontent.value;
+
+    console.log('debug ', questionBoxContent);
 
     // const premodLinks = elements.premodLinks.checked;
     const {changed} = this.state;
 
     const newConfig = {
       moderation: premod ? 'PRE' : 'POST',
-      questionBoxEnable: questionBoxEnable
+      questionBoxEnable,
+      questionBoxContent
     };
 
     if (changed) {

client/coral-configure/translations.json

@@ -9,7 +9,8 @@
       "enablePremodLinks": "Pre-Moderate Comments Containing Links",
       "enablePremodLinksDescription": "Moderators must approve any comment containing a link before its published.",
       "enableQuestionBox": "Enable Question Box",
-      "enableQuestionBoxDescription": "Commenters will see the next question at the top of the comments stream."
+      "enableQuestionBoxDescription": "Commenters will see a question at the top of the comments stream.",
+      "includeQuestionHere": "Include your question here."
     }
   },
   "es": {
@@ -22,7 +23,8 @@
       "enablePremodLinks": "Pre-Moderar Commentarios que contienen Links",
       "enablePremodLinksDescription": "Los Moderadores deben probar cualquier comentario que contengan links antes de su publicación.",
       "enableQuestionBox": "Activar Caja de Pregunta",
-      "enableQuestionBoxDescription": "La siguiente pregunta estara en la parte de arriba del hilo de comentarios."
+      "enableQuestionBoxDescription": "Una pregunta estara en la parte de arriba del hilo de comentarios.",
+      "includeQuestionHere": "Escribir la pregunta aquí."
     }
   }
 }

client/coral-ui/components/TextField.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Textfield as TextFieldMDL} from 'react-mdl';
+
+const TextField = ({onChange, label, rows}) => (
+  <TextFieldMDL
+    onChange={onChange}
+    label={label}
+    rows={rows}/>
+);
+
+export default TextField;