Adds fake comment component.

client/coral-sign-in/components/CreateUsernameDialog.js

@@ -3,7 +3,10 @@ import TextField from 'coral-ui/components/TextField';
 import Alert from './Alert';
 import Button from 'coral-ui/components/Button';
 import {Dialog} from 'coral-ui';
+import FakeComment from './FakeComment';
+
 import styles from './styles.css';
+
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
@@ -25,9 +28,14 @@ const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmit
         </h1>
       </div>
       <div>
-        <p class={styles.yourusername}>{lang.t('createdisplay.yourusername')}</p>
-        <div class="styles.example">Example</div>
-        <p class={styles.ifyoudont}>{lang.t('createdisplay.ifyoudontchangeyourname')}</p>
+        <p className={styles.yourusername}>{lang.t('createdisplay.yourusername')}</p>
+        <FakeComment
+          className={styles.fakeComment}
+          username="Pepe"
+          created_at={Date.now()}
+          body={lang.t('createdisplay.fakecommentbody')}
+        />
+        <p className={styles.ifyoudont}>{lang.t('createdisplay.ifyoudontchangeyourname')}</p>
         { props.auth.error && <Alert>{props.auth.error}</Alert> }
         <form id="saveUsername" onSubmit={handleSubmitUsername}>
           { props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }

client/coral-sign-in/components/FakeComment.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import styles from 'coral-embed-stream/src/Comment.css';
+
+import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
+import AuthorName from 'coral-plugin-author-name/AuthorName';
+import Content from 'coral-plugin-commentcontent/CommentContent';
+import PubDate from 'coral-plugin-pubdate/PubDate';
+import {ReplyButton} from 'coral-plugin-replies';
+import FlagComment from 'coral-plugin-flags/FlagComment';
+import LikeButton from 'coral-plugin-likes/LikeButton';
+
+class FakeComment extends React.Component {
+  constructor (props) {
+    super(props);
+  }
+
+  render () {
+    const {username, created_at, body} = this.props;
+
+    return (
+      <div
+        className={`comment ${styles.Comment}`}
+        style={{marginLeft: 0 * 30}}>
+        <hr aria-hidden={true} />
+        <AuthorName
+          author={{'name': username}}/>
+        <PubDate created_at={created_at} />
+        <Content body={body} />
+          <div className="commentActionsLeft">
+              <LikeButton
+                like={{}}
+                id="commentID"
+                postLike={()=>{return;}}
+                deleteAction={()=>{return;}}
+                showSignInDialog={()=>{return;}}
+                currentUser={{}}
+              />
+              <ReplyButton
+                onClick={() => {}}
+                parentCommentId={'commentID'}
+                currentUserId={{}}
+                banned={false}
+              />
+            </div>
+        <div className="commentActionsRight">
+          <PermalinkButton articleURL={''} commentId={'commentId'} />
+          <FlagComment />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FakeComment;

client/coral-sign-in/components/styles.css

@@ -159,6 +159,7 @@ input.error{
 
 .ifyoudont {
   display: block;
+  margin-top: 15px;
 }
 
 .saveusername {
@@ -178,3 +179,8 @@ input.error{
   color: white;
   min-width: 200px;
 }
+
+.fakeComment {
+  display: block;
+  margin-bottom: 5px;
+}

client/coral-sign-in/translations.js

@@ -36,6 +36,8 @@ export default {
       username: 'Username',
       continue: 'Continue with the same Facebook username',
       save: 'Save',
+      fakecommentdate: '1 minute ago',
+      fakecommentbody: 'This is an example comment. Readers can share their thoughts and opinions with newsrooms in the comments section.',
       requiredField: 'Required field',
       errorCreate: 'Error when changing username',
       checkTheForm: 'Invalid Form. Please, check the fields',
@@ -79,6 +81,8 @@ export default {
       username: 'Nombre',
       continue: 'Continuar con nombre de Facebook',
       save: 'Guardar',
+      fakecommentdate: 'hace un minuto',
+      fakecommentbody: 'Este es un comentario de ejemplo. Las lectoras pueden compartir sus ideas  y opiniones con los periodistas en la sección de comentarios.',
       requiredField: 'Campo necesario',
       errorCreate: 'Hubo un error al cambiar el nombre de usuario',
       checkTheForm: 'Formulario Invalido. Por favor, verifica los campos',