From 78ba82cc05eb44444f5f9432171e687ccf16b1ea Mon Sep 17 00:00:00 2001
From: Christian Ruttorf <chris@oafx.de>
Date: Thu, 13 Dec 2018 17:42:50 +0100
Subject: [PATCH] add localization for QuestionBoxBuilder title, add PropTypes
 for QuestionBoxBuilder

---
 .../tabs/configure/components/QuestionBoxBuilder.js  | 12 +++++++++++-
 .../src/tabs/configure/components/Settings.js        |  1 +
 locales/de.yml                                       |  1 +
 locales/en.yml                                       |  1 +
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
index 64593fc43..67fae6e3d 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import QuestionBox from '../../../components/QuestionBox';
 import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './QuestionBoxBuilder.css';
 import { Icon } from 'coral-ui';
@@ -12,6 +13,7 @@ const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
 class QuestionBoxBuilder extends React.Component {
   render() {
     const {
+      title,
       questionBoxIcon,
       questionBoxContent,
       onContentChange,
@@ -20,7 +22,7 @@ class QuestionBoxBuilder extends React.Component {
 
     return (
       <div className={styles.root}>
-        <h4>Include an Icon</h4>
+        <h4>{title}</h4>
 
         <ul className={styles.iconList}>
           {icons.map(item => {
@@ -53,4 +55,12 @@ class QuestionBoxBuilder extends React.Component {
   }
 }
 
+QuestionBoxBuilder.propTypes = {
+  title: PropTypes.string,
+  questionBoxIcon: PropTypes.string,
+  questionBoxContent: PropTypes.string,
+  onContentChange: PropTypes.func,
+  onIconChange: PropTypes.func,
+};
+
 export default QuestionBoxBuilder;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.js b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
index 2b1e49c84..32f04be68 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
@@ -69,6 +69,7 @@ class Settings extends React.Component {
             {questionBoxEnable && (
               <div className={styles.questionBoxContainer}>
                 <QuestionBoxBuilder
+                  title={t('configure.include_an_icon')}
                   questionBoxIcon={questionBoxIcon}
                   questionBoxContent={questionBoxContent}
                   onIconChange={onQuestionBoxIconChange}
diff --git a/locales/de.yml b/locales/de.yml
index 53e44f46a..06653c5c6 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -136,6 +136,7 @@ de:
     code_of_conduct_summary_desc: 'Verfassen Sie eine Einleitung, die über jedem Kommentarbereich erscheint. Nützlich z.B. für Community-Richtlinien.'
     include_question_here: 'Stellen Sie Ihre Frage hier:'
     include_text: 'Fügen Sie Ihren Text hier ein.'
+    include_an_icon: 'Fügen Sie ein Icon hinzu'
     moderate: Moderieren
     moderation_settings: Moderations-Einstellungen
     open: Öffnen
diff --git a/locales/en.yml b/locales/en.yml
index 41a036528..02f9876d2 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -139,6 +139,7 @@ en:
     hours: Hours
     code_of_conduct_summary: 'Summary of your Code of Conduct'
     code_of_conduct_summary_desc: 'This message will appear above every comments stream on your site. Click here to learn more about writing a good code.'
+    include_an_icon: 'Include an Icon'
     include_question_here: 'Write your question here:'
     include_text: 'Include your text here.'
     moderate: Moderate