From aef0f433c9f06315238ddae86d55e22dcd1db158 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 7 Apr 2017 14:12:51 -0300
Subject: [PATCH] Slots and off topic plugin

---
 client/coral-embed-stream/src/Comment.js     | 2 +-
 client/coral-framework/components/Slot.js    | 5 +++--
 client/coral-plugin-commentbox/CommentBox.js | 3 +++
 plugins/coral-plugin-respect/client/index.js | 1 +
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 45f2ef084..7928320e2 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -158,7 +158,7 @@ class Comment extends React.Component {
             ? <TagLabel><BestIndicator /></TagLabel>
           : null }
           <PubDate created_at={comment.created_at} />
-          <Slot fill="commentInfoBar" commentId={comment.id} />
+          <Slot fill="commentInfoBar" commentId={comment.id} inline/>
 
           <Content body={comment.body} />
           <div className="commentActionsLeft comment__action-container">
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index 3d1d61328..c1e5dfe65 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -1,11 +1,12 @@
 import React, {Component} from 'react';
 import {getSlotElements} from 'coral-framework/helpers/plugins';
+import styles from './Slot.css';
 
 class Slot extends Component {
   render() {
-    const {fill, ...rest} = this.props;
+    const {fill, inline = false, ...rest} = this.props;
     return (
-      <div>
+      <div className={inline ? styles.inline : ''}>
         {getSlotElements(fill, rest)}
       </div>
     );
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 19472ef70..3b2aa887d 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -2,6 +2,8 @@ import React, {Component, PropTypes} from 'react';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
 import {Button} from 'coral-ui';
+import {Slot} from 'coral-framework';
+import styles from './styles.css';
 
 const name = 'coral-plugin-commentbox';
 
@@ -102,6 +104,7 @@ class CommentBox extends Component {
             `${charCount - length} ${lang.t('characters-remaining')}`
           }
         </div>
+        <Slot fill="commentBoxDetail" inline/>
         <div className={`${name}-button-container`}>
           {
             isReply && (
diff --git a/plugins/coral-plugin-respect/client/index.js b/plugins/coral-plugin-respect/client/index.js
index 2caa6611b..a336786d6 100644
--- a/plugins/coral-plugin-respect/client/index.js
+++ b/plugins/coral-plugin-respect/client/index.js
@@ -1,4 +1,5 @@
 import RespectButton from './containers/RespectButton';
+
 export default {
   slots: {
     commentDetail: [RespectButton],