Updates

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import styles from './AuthorName.css';
-
-const AuthorName = ({comment}) => 
-  <span className={styles.authorName}>
-    {comment.user.username}
-  </span>;
-
-export default AuthorName;

client/coral-embed-stream/src/components/Comment.css

@@ -163,6 +163,7 @@
 .header {
   display: flex;
   align-items: center;
+  margin: 10px 0;
 }
 
 .content {
@@ -171,3 +172,7 @@
 .footer {
   min-height: 10px;
 }
+
+.username {
+  margin-right: 5px;
+} 

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

@@ -25,7 +25,7 @@ import {EditableCommentContent} from './EditableCommentContent';
 import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
 import CommentContainer from '../containers/Comment';
-import AuthorName from './AuthorName';
+import {CommentAuthorName} from 'coral-framework/components';
 
 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
 const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -438,9 +438,9 @@ export default class Comment extends React.Component {
             <div className={cn(styles.header, 'talk-stream-comment-header')}>
 
               <Slot
-                className={'talk-stream-comment-user-name'}
+                className={cn(styles.username, 'talk-stream-comment-user-name')}
                 fill="commentAuthorName"
-                defaultComponent={AuthorName}
+                defaultComponent={CommentAuthorName}
                 queryData={queryData}
                 {...slotProps}
               />

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

@@ -238,10 +238,6 @@ body {
   line-height: 1.3;
 }
 
-.talk-stream-comment-header {
-  margin: 10px 0;
-}
-
 /* Tag Labels */
 
 .talk-plugin-tag-label {

client/coral-framework/components/CommentAuthorName.css

@@ -1,4 +1,3 @@
 .authorName {
-  margin-right: 5px;
   font-weight: bold;
 }

client/coral-framework/components/CommentAuthorName.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './CommentAuthorName.css';
+
+const CommentAuthorName = ({comment}) => 
+  <span className={styles.authorName}>
+    {comment.user.username}
+  </span>;
+
+export default CommentAuthorName;

client/coral-framework/components/index.js

@@ -1 +1,2 @@
 export {default as Slot} from './Slot';
+export {default as CommentAuthorName} from './CommentAuthorName';

plugin-api/beta/client/components/index.js

@@ -1,2 +1,3 @@
 export {Slot} from 'coral-framework/components';
 export {default as ClickOutside} from 'coral-framework/components/ClickOutside';
+export {default as CommentAuthorName} from 'coral-framework/components/CommentAuthorName';

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

@@ -64,4 +64,4 @@
 
 .actionsContainer {
   text-align: right;
-}
+}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
 import {t, timeago} from 'plugin-api/beta/client/services';
-import {Slot} from 'plugin-api/beta/client/components';
+import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';
 
@@ -26,7 +26,9 @@ class Comment extends React.Component {
           <Slot
             className={cn(styles.username, `${pluginName}-comment-username`)}
             fill="commentAuthorName"
-            comment={comment}
+            defaultComponent={CommentAuthorName}
+            queryData={{comment, asset, root}}
+            data={data}
             inline
           />