show different copy per # of replies

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

@@ -243,6 +243,7 @@ class Comment extends React.Component {
               assetId={asset.id}
               comments={comment.replies}
               parentId={comment.id}
+              replyCount={comment.replyCount}
               moreComments={comment.replyCount > comment.replies.length}
               loadMore={loadMore}/>
           </div>

client/coral-embed-stream/src/LoadMore.js

@@ -24,22 +24,44 @@ const loadMoreComments = (assetId, comments, loadMore, parentId) => {
   });
 };
 
-const LoadMore = ({assetId, comments, loadMore, moreComments, parentId}) => (
-  moreComments
-  ? <Button
-      className='coral-load-more'
-      onClick={() => loadMoreComments(assetId, comments, loadMore, parentId)}>
-      {
-        lang.t('loadMore')
-      }
-    </Button>
-  : null
-);
+class LoadMore extends React.Component {
+
+  componentDidMount () {
+    this.initialState = true;
+  }
+
+  replyCountFormat = (count) => {
+    if (count === 1) {
+      return lang.t('viewReply');
+    }
+
+    if (this.initialState) {
+      return lang.t('viewAllRepliesInitial', count);
+    } else {
+      return lang.t('viewAllReplies', count);
+    }
+  }
+
+  render () {
+    const {assetId, comments, loadMore, moreComments, parentId, replyCount} = this.props;
+    return moreComments
+      ? <Button
+        className='coral-load-more'
+        onClick={() => {
+          this.initialState = false;
+          loadMoreComments(assetId, comments, loadMore, parentId);
+        }}>
+        {this.replyCountFormat(replyCount)}
+      </Button>
+      : null;
+  }
+}
 
 LoadMore.propTypes = {
   assetId: PropTypes.string.isRequired,
   comments: PropTypes.array.isRequired,
   moreComments: PropTypes.bool.isRequired,
+  replyCount: PropTypes.number.isRequired,
   loadMore: PropTypes.func.isRequired
 };
 

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

@@ -425,6 +425,8 @@ button.coral-load-more {
   cursor: pointer;
   padding: 10px;
   border-radius: 2px;
+  line-height: 1em;
+  text-transform: capitalize;
 }
 
 button.coral-load-more:hover {

client/coral-framework/translations.json

@@ -4,7 +4,6 @@
     "successUpdateSettings": "The changes you have made have been applied to the comment stream on this article",
     "successNameUpdate": "Your username has been updated",
     "contentNotAvailable": "This content is not available",
-    "loadMore": "View more",
     "bannedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Report, or write comments. Please contact us if you have any questions.",
     "editName": {
       "msg": "Your account is currently suspended because your username has been deemed inappropriate. To restore your account, please enter a new username. Please contact us if you have any questions.",
@@ -12,6 +11,9 @@
       "button": "Submit",
       "error": "Usernames can contain letters, numbers and _ only"
     },
+    "viewReply": "view reply",
+    "viewAllRepliesInitial": "view all {0} replies",
+    "viewAllReplies": "view {0} replies",
     "newCount": "View {0} more {1}",
     "comment": "comment",
     "comments": "comments",
@@ -43,7 +45,9 @@
     "contentNotAvailable": "El contenido no se encuentra disponible",
     "bannedAccountMsg": "Tu cuenta se encuentra suspendida. Esto significa que no puedes dar Like, Marcar o escribir commentarios.",
     "editNameMsg": "",
-    "loadMore": "Ver más",
+    "viewReply": "",
+    "viewAllRepliesInitial": "",
+    "viewAllReplies": "",
     "newCount": "Ver {0} {1} más",
     "comment": "commentario",
     "comments": "commentarios",