Translate, concept for translation and id strings

src/core/client/stream/components/PostCommentForm.tsx

@@ -40,7 +40,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
           )}
         </Field>
         <div className={styles.postButtonContainer}>
-          <Localized id="postCommentForm-submit">
+          <Localized id="comments-postCommentForm-post">
             <Button disabled={submitting} primary>
               Post
             </Button>

src/core/client/stream/components/ReplyList.spec.tsx

@@ -32,7 +32,9 @@ describe("when there is more", () => {
   });
 
   it("calls onLoadMore", () => {
-    wrapper.find("#talk-reply-list--show-all--comment-id").simulate("click");
+    wrapper
+      .find("#talk-comments-replyList-showAll--comment-id")
+      .simulate("click");
     expect((props.onShowAll as SinonSpy).calledOnce).toBe(true);
   });
 });

src/core/client/stream/components/ReplyList.tsx

@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
@@ -17,22 +18,24 @@ export interface ReplyListProps {
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <Indent>
-      <div id={`talk-reply-list--log--${props.commentID}`} role="log">
+      <div id={`talk-comments-replyList-log--${props.commentID}`} role="log">
         {props.comments.map(comment => (
           <CommentContainer key={comment.id} data={comment} gutterBottom />
         ))}
         {props.hasMore && (
-          <Button
-            id={`talk-reply-list--show-all--${props.commentID}`}
-            onClick={props.onShowAll}
-            disabled={props.disableShowAll}
-            secondary
-            invert
-            fullWidth
-            aria-controls={`talk-reply-list--log--${props.commentID}`}
-          >
-            Show All Replies
-          </Button>
+          <Localized id="comments-replyList-showAll">
+            <Button
+              id={`talk-comments-replyList-showAll--${props.commentID}`}
+              aria-controls={`talk-comments-replyList-log--${props.commentID}`}
+              onClick={props.onShowAll}
+              disabled={props.disableShowAll}
+              secondary
+              invert
+              fullWidth
+            >
+              Show All Replies
+            </Button>
+          </Localized>
         )}
       </div>
     </Indent>

src/core/client/stream/components/Stream.spec.tsx

@@ -47,7 +47,7 @@ describe("when there is more", () => {
   });
 
   it("calls onLoadMore", () => {
-    wrapper.find("#talk-stream--load-more").simulate("click");
+    wrapper.find("#talk-comments-stream-loadMore").simulate("click");
     expect(props.onLoadMore.calledOnce).toBe(true);
   });
 

src/core/client/stream/components/Stream.tsx

@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
@@ -26,7 +27,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
     <div>
       <Logo gutterBottom />
       <PostCommentFormContainer assetID={props.assetID} />
-      <div id="talk-stream--log" role="log" aria-live="polite">
+      <div id="talk-comments-stream-log" role="log" aria-live="polite">
         {props.comments.map(comment => (
           <div key={comment.id}>
             <CommentContainer data={comment} gutterBottom />
@@ -34,17 +35,19 @@ const Stream: StatelessComponent<StreamProps> = props => {
           </div>
         ))}
         {props.hasMore && (
-          <Button
-            id={"talk-stream--load-more"}
-            onClick={props.onLoadMore}
-            secondary
-            invert
-            fullWidth
-            disabled={props.disableLoadMore}
-            aria-controls="talk-stream--log"
-          >
-            Load More
-          </Button>
+          <Localized id="comments-stream-loadMore">
+            <Button
+              id={"talk-comments-stream-loadMore"}
+              onClick={props.onLoadMore}
+              secondary
+              invert
+              fullWidth
+              disabled={props.disableLoadMore}
+              aria-controls="talk-comments-stream-log"
+            >
+              Load More
+            </Button>
+          </Localized>
         )}
       </div>
     </div>

src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap

@@ -2,56 +2,71 @@
 
 exports[`renders correctly 1`] = `
 <Indent>
-  <Relay(CommentContainer)
-    data={
-      Object {
-        "id": "comment-1",
+  <div
+    id="talk-comments-replyList-log--comment-id"
+    role="log"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
       }
-    }
-    gutterBottom={true}
-    key="comment-1"
-  />
-  <Relay(CommentContainer)
-    data={
-      Object {
-        "id": "comment-2",
+      gutterBottom={true}
+      key="comment-1"
+    />
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
       }
-    }
-    gutterBottom={true}
-    key="comment-2"
-  />
+      gutterBottom={true}
+      key="comment-2"
+    />
+  </div>
 </Indent>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
 <Indent>
-  <Relay(CommentContainer)
-    data={
-      Object {
-        "id": "comment-1",
-      }
-    }
-    gutterBottom={true}
-    key="comment-1"
-  />
-  <Relay(CommentContainer)
-    data={
-      Object {
-        "id": "comment-2",
-      }
-    }
-    gutterBottom={true}
-    key="comment-2"
-  />
-  <withPropsOnChange(Button)
-    disabled={false}
-    fullWidth={true}
-    id="talk-reply-list--show-all--comment-id"
-    invert={true}
-    onClick={[Function]}
-    secondary={true}
+  <div
+    id="talk-comments-replyList-log--comment-id"
+    role="log"
   >
-    Show All Replies
-  </withPropsOnChange(Button)>
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
+      }
+      gutterBottom={true}
+      key="comment-1"
+    />
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
+      }
+      gutterBottom={true}
+      key="comment-2"
+    />
+    <Localized
+      id="comments-replyList-showAll"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-replyList-log--comment-id"
+        disabled={false}
+        fullWidth={true}
+        id="talk-comments-replyList-showAll--comment-id"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Show All Replies
+      </withPropsOnChange(Button)>
+    </Localized>
+  </div>
 </Indent>
 `;

src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap

@@ -9,42 +9,48 @@ exports[`renders correctly 1`] = `
     assetID="asset-id"
   />
   <div
-    key="comment-1"
+    aria-live="polite"
+    id="talk-comments-stream-log"
+    role="log"
   >
-    <Relay(CommentContainer)
-      data={
-        Object {
-          "id": "comment-1",
+    <div
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
         }
-      }
-      gutterBottom={true}
-    />
-    <Relay(ReplyListContainer)
-      comment={
-        Object {
-          "id": "comment-1",
+        gutterBottom={true}
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
         }
-      }
-    />
-  </div>
-  <div
-    key="comment-2"
-  >
-    <Relay(CommentContainer)
-      data={
-        Object {
-          "id": "comment-2",
+      />
+    </div>
+    <div
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
         }
-      }
-      gutterBottom={true}
-    />
-    <Relay(ReplyListContainer)
-      comment={
-        Object {
-          "id": "comment-2",
+        gutterBottom={true}
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
         }
-      }
-    />
+      />
+    </div>
   </div>
 </div>
 `;
@@ -64,53 +70,64 @@ exports[`when there is more disables load more button 1`] = `
     assetID="asset-id"
   />
   <div
-    key="comment-1"
+    aria-live="polite"
+    id="talk-comments-stream-log"
+    role="log"
   >
-    <Relay(CommentContainer)
-      data={
-        Object {
-          "id": "comment-1",
+    <div
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
         }
-      }
-      gutterBottom={true}
-    />
-    <Relay(ReplyListContainer)
-      comment={
-        Object {
-          "id": "comment-1",
+        gutterBottom={true}
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
         }
-      }
-    />
+      />
+    </div>
+    <div
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+        gutterBottom={true}
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </div>
+    <Localized
+      id="comments-stream-loadMore"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-stream-log"
+        disabled={true}
+        fullWidth={true}
+        id="talk-comments-stream-loadMore"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Load More
+      </withPropsOnChange(Button)>
+    </Localized>
   </div>
-  <div
-    key="comment-2"
-  >
-    <Relay(CommentContainer)
-      data={
-        Object {
-          "id": "comment-2",
-        }
-      }
-      gutterBottom={true}
-    />
-    <Relay(ReplyListContainer)
-      comment={
-        Object {
-          "id": "comment-2",
-        }
-      }
-    />
-  </div>
-  <withPropsOnChange(Button)
-    disabled={true}
-    fullWidth={true}
-    id="talk-stream--load-more"
-    invert={true}
-    onClick={[Function]}
-    secondary={true}
-  >
-    Load More
-  </withPropsOnChange(Button)>
 </div>
 `;
 
@@ -123,52 +140,63 @@ exports[`when there is more renders a load more button 1`] = `
     assetID="asset-id"
   />
   <div
-    key="comment-1"
+    aria-live="polite"
+    id="talk-comments-stream-log"
+    role="log"
   >
-    <Relay(CommentContainer)
-      data={
-        Object {
-          "id": "comment-1",
+    <div
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
         }
-      }
-      gutterBottom={true}
-    />
-    <Relay(ReplyListContainer)
-      comment={
-        Object {
-          "id": "comment-1",
+        gutterBottom={true}
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
         }
-      }
-    />
+      />
+    </div>
+    <div
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+        gutterBottom={true}
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </div>
+    <Localized
+      id="comments-stream-loadMore"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-stream-log"
+        disabled={false}
+        fullWidth={true}
+        id="talk-comments-stream-loadMore"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Load More
+      </withPropsOnChange(Button)>
+    </Localized>
   </div>
-  <div
-    key="comment-2"
-  >
-    <Relay(CommentContainer)
-      data={
-        Object {
-          "id": "comment-2",
-        }
-      }
-      gutterBottom={true}
-    />
-    <Relay(ReplyListContainer)
-      comment={
-        Object {
-          "id": "comment-2",
-        }
-      }
-    />
-  </div>
-  <withPropsOnChange(Button)
-    disabled={false}
-    fullWidth={true}
-    id="talk-stream--load-more"
-    invert={true}
-    onClick={[Function]}
-    secondary={true}
-  >
-    Load More
-  </withPropsOnChange(Button)>
 </div>
 `;