Merge branch 'master' into use-talk-linting-preset

Conflicts:
	package.json

plugins/talk-plugin-comment-content/client/components/CommentContent.js

@@ -5,20 +5,20 @@ const name = 'talk-plugin-comment-content';
 
 const CommentContent = ({comment}) => {
   const textbreaks = comment.body.split('\n');
-  return <div className={`${name}-text`}>
+  return <span className={`${name}-text`}>
     {
       textbreaks.map((line, i) => {
         return (
           <span key={i} className={`${name}-line`}>
             <Linkify properties={{target: '_blank'}}>
-              {line}
+              {line.trim()}
             </Linkify>
-            <br className={`${name}-linebreak`}/>
+            {i !== textbreaks.length - 1 && <br className={`${name}-linebreak`}/>}
           </span>
         );
       })
     }
-  </div>;
+  </span>;
 };
 
 export default CommentContent;

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} from 'plugin-api/beta/client/services';
-import {Slot, CommentAuthorName, CommentTimestamp} from 'plugin-api/beta/client/components';
+import {Slot, CommentAuthorName, CommentTimestamp, CommentContent} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';
 import FeaturedButton from '../containers/FeaturedButton';
@@ -19,9 +19,14 @@ class Comment extends React.Component {
     return (
       <div className={cn(styles.root, `${pluginName}-comment`)}>
 
-        <blockquote className={cn(styles.quote, `${pluginName}-comment-body`)}>
-          {comment.body}
-        </blockquote>
+        <Slot
+          component={'blockquote'}
+          className={cn(styles.quote, `${pluginName}-comment-body`)}
+          fill="commentContent"
+          defaultComponent={CommentContent}
+          data={data}
+          queryData={queryData}
+        />
 
         <div className={cn(`${pluginName}-comment-username-box`)}>
 
@@ -46,7 +51,7 @@ class Comment extends React.Component {
         </div>
 
         <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
-          <div className={cn(styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
+          <div className={cn('talk-embed-stream-comment-actions-container-left', styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
 
             <Slot
               fill="commentReactions"
@@ -64,7 +69,7 @@ class Comment extends React.Component {
               asset={asset}
             />
           </div>
-          <div className={cn(styles.actionsContainer, `${pluginName}-comment-actions`)}>
+          <div className={cn('talk-embed-stream-comment-actions-container-right', styles.actionsContainer, `${pluginName}-comment-actions`)}>
             <button className={cn(styles.goTo, `${pluginName}-comment-go-to`)} onClick={this.viewComment}>
               <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} | {t('talk-plugin-featured-comments.go_to_conversation')} <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
             </button>

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

@@ -34,7 +34,7 @@ export default class Tag extends React.Component {
       <span className={cn(styles.tagContainer, styles.noSelect)} onMouseEnter={this.showTooltip}
         onMouseLeave={this.hideTooltip} onTouchStart={this.showTooltip}
         onTouchEnd={this.hideTooltip} >
-        <span className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip})}>
+        <span className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip}, 'talk-stream-comment-featured-tag-label')}>
           {t('talk-plugin-featured-comments.featured')}
         </span>
         {tooltip && <Tooltip className={styles.tooltip} />}

plugins/talk-plugin-like/client/LikeButton.js

@@ -35,7 +35,7 @@ class LikeButton extends React.Component {
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)}
+          className={cn(styles.button, {[`${styles.liked} talk-plugin-like-liked`]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>

plugins/talk-plugin-offtopic/client/components/OffTopicTag.js

@@ -2,12 +2,13 @@ import React from 'react';
 import styles from './OffTopicTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';
+import cn from 'classnames';
 
 export default (props) => (
   <span>
     {
       isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? (
-        <span className={styles.tag}>
+        <span className={cn(styles.tag, 'talk-stream-comment-offtopic-tag-label')}>
           {t('off_topic')}
         </span>
       ) : null

plugins/talk-plugin-permalink/client/components/PermalinkButton.js

@@ -73,7 +73,9 @@ export default class PermalinkButton extends React.Component {
             ref={(ref) => this.linkButton = ref}
             onClick={this.toggle}
             className={cn(`${name}-button`, styles.button)}>
-            {t('permalink')}
+            <span className='talk-plugin-permalink-button-label'>
+              {t('permalink')}
+            </span>
             <Icon name="link" className={styles.icon}/>
           </button>
 

plugins/talk-plugin-respect/client/RespectButton.js

@@ -35,7 +35,7 @@ class RespectButton extends React.Component {
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.respected]: alreadyReacted}, `${plugin}-button`)}
+          className={cn(styles.button, {[`${styles.respected} talk-plugin-respect-respected`]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>