Changes model and add admin.

client/coral-admin/src/containers/Configure.css

@@ -23,6 +23,12 @@
   cursor: pointer;
 }
 
+.configSettingInfoBox {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
 .configSettingEmbed {
   border: 1px solid #ccc;
   border-radius: 4px;

client/coral-admin/src/containers/Configure.js

@@ -7,7 +7,7 @@ import {
   ListItem,
   ListItemContent,
   ListItemAction,
-  //Textfield,
+  Textfield,
   Checkbox,
   Button,
   Icon
@@ -36,6 +36,16 @@ class Configure extends React.Component {
     this.props.dispatch(updateSettings({moderation}));
   }
 
+  updateInfoBoxEnable () {
+    const infoboxEnable = this.props.settings.infoBoxEnable;
+    this.props.dispatch(updateSettings({infoboxEnable}));
+  }
+
+  updateInfoBoxContent () {
+    const infoboxContent = this.props.settings.infoBoxContent;
+    this.props.dispatch(updateSettings({infoboxContent}));
+  }
+
   saveSettings () {
     this.props.dispatch(saveSettingsToServer());
   }
@@ -50,6 +60,18 @@ class Configure extends React.Component {
         </ListItemAction>
         Enable pre-moderation
       </ListItem>
+      <ListItem className={styles.configSettingInfoBox}>
+        <ListItemAction>
+          <Checkbox
+            onClick={this.updateInfoBoxEnable.bind(this)}
+            checked={this.props.settings.infoBoxEnable} />
+        </ListItemAction>
+        <Textfield
+          onChange={this.updateInfoBoxContent}
+          expandable
+          label='Include your text here'
+          value={this.props.settings.infoBoxContent}/>
+      </ListItem>
       {/*
       <ListItem className={styles.configSetting}>
         <ListItemAction><Checkbox /></ListItemAction>

client/coral-embed-stream/src/CommentStream.js

@@ -7,6 +7,7 @@ import {
 } from '../../coral-framework';
 import {connect} from 'react-redux';
 import CommentBox from '../../coral-plugin-commentbox/CommentBox';
+import InfoBox from '../../coral-plugin-infobox/InfoBox';
 import Content from '../../coral-plugin-commentcontent/CommentContent';
 import PubDate from '../../coral-plugin-pubdate/PubDate';
 import Count from '../../coral-plugin-comment-count/CommentCount';
@@ -100,6 +101,9 @@ class CommentStream extends Component {
         rootItem
         ? <div>
           <div id="commentBox">
+            <InfoBox
+              content={this.props.config.infoBox.content}
+              enable={this.props.config.infoBox.enable}/>
             <Count
               id={rootItemId}
               items={this.props.items}/>

client/coral-embed-stream/style/default.css

@@ -49,6 +49,17 @@ hr {
   font-weight: bold;
 }
 
+/* Info Box Styles */
+.coral-plugin-infobox-info {
+  position: fixed;
+  bottom: 0;
+  border: 0;
+  background: rgb(105,105,105);
+  color: white;
+  border-radius: 2px;
+  font-weight: bold;
+}
+
 /* Comment Box Styles */
 .coral-plugin-commentbox-container {
   display: flex;

client/coral-plugin-infobox/InfoBox.js

@@ -0,0 +1,11 @@
+import React from 'react';
+const packagename = 'coral-plugin-infobox';
+
+const InfoBox = ({enable, content}) =>
+<div
+  className={`${packagename}-info`}
+  hidden={`${!enable}`}>
+  {content}
+</div>;
+
+export default InfoBox;

client/coral-plugin-infobox/__tests__/infoBox.spec.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {expect} from 'chai';
+import InfoBox from '../InfoBox';
+
+describe('InfoBox', () => {
+  let comment;
+  let render;
+  beforeEach(() => {
+    comment = {};
+    const postItem = (item) => {
+      comment.posted = item;
+      return Promise.resolve(4);
+    };
+    render = shallow(<InfoBox
+      postItem={postItem}
+      updateItem={(e) => comment.text = e.target.value}
+      item_id={'1'}
+      comments={['1', '2', '3']}/>);
+  });
+
+  it('should render the InfoBox appropriately', () => {
+    expect(render.contains('<div class="InfoBox"')).to.be.truthy;
+    expect(render.contains('<button class="postCommentButton"')).to.be.truthy;
+  });
+});