Featured Comments container, and FeaturedComment component

client/coral-embed-stream/src/components/Stream.js

@@ -238,7 +238,12 @@ class Stream extends React.Component {
             </div>
           : <p>{asset.settings.closedMessage}</p>}
 
-        <Slot fill="stream" />
+        <Slot 
+          fill="stream"
+          data={this.props.data}
+          root={this.props.root}
+          view={view}
+        />
 
         {loggedIn && (
           <ModerationLink

plugins/talk-plugin-featured-comments/client/components/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './styles.css';
+import {timeago} from 'coral-framework/services/i18n';
+
+const FeaturedComment = ({comment}) => {
+  return (
+    <div className={styles.featuredComment}>
+      <p>
+        {comment.body}
+      </p>
+      <footer>
+        <div>
+          <strong>
+            {comment.user.username}
+          </strong>
+          <span>
+            ,{timeago(comment.created_at)}
+          </span>
+        </div>
+        <a>
+          Go to Coneversation >
+        </a>
+      </footer>
+    </div>
+  );
+};
+
+export default FeaturedComment;

plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from './styles.css';
+import FeaturedComment from './FeaturedComment';
+
+const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length;
+
+class FeaturedComments extends React.Component {
+  render() {
+
+    const {view : comments}  = this.props;
+
+    const featuredComments = comments.reduce((acc, curr) => {
+      if (isFeatured(curr.tags)) {
+        acc.push(curr);
+      }
+
+      return acc;
+    }, []);
+
+    return (
+      <div className={styles.featuredComments}>
+        {
+          featuredComments.map((comment, i) => 
+            <FeaturedComment 
+              comment={comment}
+              key={i}
+            />
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default FeaturedComments;

plugins/talk-plugin-featured-comments/client/components/styles.css

@@ -22,7 +22,7 @@
 }
 
 .tag {
-  background: #f7917a;
+  background-color: #f7917a;
   font-size: 12px;
   font-weight: bold;
   color: white;
@@ -30,4 +30,10 @@
   margin: 0px 5px;
   padding: 5px 5px;
   border-radius: 2px;
+}
+
+.featuredComments {
+  padding: 20px;
+  background-color: #f9f9f9;
+  margin: 10px 0;
 }

plugins/talk-plugin-featured-comments/client/index.js

@@ -1,11 +1,13 @@
 import translations from './translations.json';
 import FeaturedTag from './components/FeaturedTag';
 import FeaturedButton from './components/FeaturedButton';
+import FeaturedComments from './components/FeaturedComments';
 
 export default {
   translations,
   slots: {
     commentInfoBar: [FeaturedTag],
-    commentReactions: [FeaturedButton]
+    commentReactions: [FeaturedButton],
+    stream: [FeaturedComments]
   }
 };