Adding new Slot: authorName - Deleting Old Code

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

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

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

@@ -0,0 +1,9 @@
+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.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import AuthorName from 'talk-plugin-author-name/AuthorName';
 import TagLabel from 'talk-plugin-tag-label/TagLabel';
 import PubDate from 'talk-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'talk-plugin-replies';
@@ -26,6 +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';
 
 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
 const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -434,10 +434,17 @@ export default class Comment extends React.Component {
             inline
           />
 
-          <div className={`${styles.commentContainer} talk-stream-comment-container`}>
+          <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
+            <div className={cn(styles.header, 'talk-stream-comment-header')}>
+
+              <Slot
+                className={'talk-stream-comment-user-name'}
+                fill="authorName"
+                defaultComponent={AuthorName}
+                queryData={queryData}
+                {...slotProps}
+              />
 
-            <div className={styles.header}>
-              <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
               {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
               <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >

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

@@ -238,14 +238,8 @@ body {
   line-height: 1.3;
 }
 
-.talk-plugin-author-name-text {
-  display: inline-block;
-  margin: 10px 5px 10px 0;
-  font-weight: bold;
-}
-
-.talk-plugin-author-name-bio-flag {
-  float: right;
+.talk-stream-comment-header {
+  margin: 10px 0;
 }
 
 /* Tag Labels */

client/talk-plugin-author-name/AuthorName.js

@@ -1,31 +0,0 @@
-import React, {Component} from 'react';
-const packagename = 'talk-plugin-author-name';
-
-export default class AuthorName extends Component {
-
-  state = {showTooltip: false}
-
-  handleClick = () => {
-    this.setState((state) => ({
-      showTooltip: !state.showTooltip
-    }));
-  }
-
-  handleMouseLeave = () => {
-    setTimeout(() => {
-      this.setState({
-        showTooltip: false
-      });
-    }, 500);
-  }
-
-  render () {
-    const {author} = this.props;
-    return (
-      <div
-        className={`${packagename}-text`}>
-        {author && author.username}
-      </div>
-    );
-  }
-}

client/talk-plugin-author-name/styles.css

@@ -1,34 +0,0 @@
-.authorName {
-  color: black;
-  display: inline-block;
-  margin: 10px 8px 10px 0;
-}
-
-.hasBio {
-  &:hover {
-     cursor: pointer;
-   }
-}
-
-.arrowDown {
-  top: 0;
-  width: 0;
-  height: 0;
-  margin-top: -2px;
-  margin-left: 2px;
-  display: inline-block;
-  vertical-align: middle;
-  border-bottom: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 3px solid #000000;
-}
-
-.arrowUp {
-  width: 0;
-  height: 0;
-  border-top: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-bottom: 3px solid black;
-}