Merge branch 'next' into permalink-i18n-readOnly

src/core/client/stream/components/App.css

@@ -1,7 +1,8 @@
 /* Here we add global stylings for body and document */
 :global {
   body {
-    margin: "0";
+    margin: 0;
+    padding: 2px 8px;
 
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;

src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap

@@ -1,21 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly on big screens 1`] = `
-<div
-  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders correctly on small screens 1`] = `
-<div
-  className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;

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

@@ -1,3 +1,7 @@
+.root {
+  width: 100%;
+}
+
 .textarea {
   composes: bodyCopy from "talk-ui/shared/typography.css";
 

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

@@ -20,7 +20,7 @@ export interface PostCommentFormProps {
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
-      <form autoComplete="off" onSubmit={handleSubmit}>
+      <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
         <Field name="body" validate={required}>
           {({ input, meta }) => (
             <div>

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

@@ -7,6 +7,7 @@ import { Button, Flex } from "talk-ui/components";
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
+import UserBoxContainer from "../containers/UserBoxContainer";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -20,7 +21,8 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <div className={styles.root}>
+    <Flex className={styles.root} direction="column" itemGutter>
+      <UserBoxContainer />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"
@@ -50,7 +52,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
           </Localized>
         )}
       </Flex>
-    </div>
+    </Flex>
   );
 };
 

src/core/client/stream/components/UserBoxUnauthenticated.css

@@ -0,0 +1,3 @@
+.joinText {
+  margin-right: var(--spacing-unit);
+}

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

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxUnauthenticated from "./UserBoxUnauthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxUnauthenticated> = {
+    onSignIn: noop,
+    onRegister: noop,
+  };
+  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -0,0 +1,49 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { Button, Flex, Typography } from "talk-ui/components";
+
+import * as styles from "./UserBoxUnauthenticated.css";
+
+export interface UserBoxUnauthenticatedProps {
+  onSignIn: () => void;
+  onRegister: () => void;
+}
+
+const UserBoxUnauthenticated: StatelessComponent<
+  UserBoxUnauthenticatedProps
+> = props => {
+  return (
+    <Flex>
+      <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
+        <Typography
+          className={styles.joinText}
+          variant="bodyCopyBold"
+          component="span"
+        >
+          Join the conversation
+        </Typography>
+      </Localized>
+      <Typography variant="bodyCopyBold" component="span">
+        |
+      </Typography>
+      <Localized id="comments-userBoxUnauthenticated-signIn">
+        <Button color="primary" size="small" onClick={props.onSignIn}>
+          Sign in
+        </Button>
+      </Localized>
+      <Localized id="comments-userBoxUnauthenticated-register">
+        <Button
+          color="primary"
+          size="small"
+          variant="outlined"
+          onClick={props.onRegister}
+        >
+          Register
+        </Button>
+      </Localized>
+    </Flex>
+  );
+};
+
+export default UserBoxUnauthenticated;

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

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -55,13 +58,16 @@ exports[`renders correctly 1`] = `
       />
     </withPropsOnChange(Flex)>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;
 
 exports[`when there is more disables load more button 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -127,13 +133,16 @@ exports[`when there is more disables load more button 1`] = `
       </withPropsOnChange(Button)>
     </Localized>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -199,5 +208,5 @@ exports[`when there is more renders a load more button 1`] = `
       </withPropsOnChange(Button)>
     </Localized>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;

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

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)>
+  <Localized
+    id="comments-userBoxUnauthenticated-joinTheConversation"
+  >
+    <withPropsOnChange(Typography)
+      className="UserBoxUnauthenticated-joinText"
+      component="span"
+      variant="bodyCopyBold"
+    >
+      Join the conversation
+    </withPropsOnChange(Typography)>
+  </Localized>
+  <withPropsOnChange(Typography)
+    component="span"
+    variant="bodyCopyBold"
+  >
+    |
+  </withPropsOnChange(Typography)>
+  <Localized
+    id="comments-userBoxUnauthenticated-signIn"
+  >
+    <withPropsOnChange(Button)
+      color="primary"
+      onClick={[Function]}
+      size="small"
+    >
+      Sign in
+    </withPropsOnChange(Button)>
+  </Localized>
+  <Localized
+    id="comments-userBoxUnauthenticated-register"
+  >
+    <withPropsOnChange(Button)
+      color="primary"
+      onClick={[Function]}
+      size="small"
+      variant="outlined"
+    >
+      Register
+    </withPropsOnChange(Button)>
+  </Localized>
+</withPropsOnChange(Flex)>
+`;