From d4109c8fcac50fd42bbe697f4a3fb9c153c7a2fe Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Mon, 13 Feb 2017 16:51:31 -0800
Subject: [PATCH] Adds textfield to coral-UI.

---
 .../components/ConfigureCommentStream.css          | 14 ++++++++++++++
 .../components/ConfigureCommentStream.js           |  6 +++++-
 .../containers/ConfigureStreamContainer.js         |  6 +++++-
 client/coral-configure/translations.json           |  6 ++++--
 client/coral-ui/components/TextField.js            | 11 +++++++++++
 5 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 client/coral-ui/components/TextField.js

diff --git a/client/coral-configure/components/ConfigureCommentStream.css b/client/coral-configure/components/ConfigureCommentStream.css
index 8526edc09..dfa860995 100644
--- a/client/coral-configure/components/ConfigureCommentStream.css
+++ b/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;
+}
diff --git a/client/coral-configure/components/ConfigureCommentStream.js b/client/coral-configure/components/ConfigureCommentStream.js
index e986e8d0d..4298384e0 100644
--- a/client/coral-configure/components/ConfigureCommentStream.js
+++ b/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>
-
 );
diff --git a/client/coral-configure/containers/ConfigureStreamContainer.js b/client/coral-configure/containers/ConfigureStreamContainer.js
index 54dd31f4e..2f0b01800 100644
--- a/client/coral-configure/containers/ConfigureStreamContainer.js
+++ b/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) {
diff --git a/client/coral-configure/translations.json b/client/coral-configure/translations.json
index fe1045662..bd45d6159 100644
--- a/client/coral-configure/translations.json
+++ b/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í."
     }
   }
 }
diff --git a/client/coral-ui/components/TextField.js b/client/coral-ui/components/TextField.js
new file mode 100644
index 000000000..9cdddf5c8
--- /dev/null
+++ b/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;