feat: added support for --only flag

Merge pull request #1731 from coralproject/next-watcher-flags

Watcher --only
Use JSDocs comments (#1727)


Merge branch 'next' into prevent-compile-loop-relay
Merge pull request #1726 from coralproject/prevent-compile-loop-relay

[next] Adapt relay watch config
[next] Remove nodemon (#1725)

* Remove old nodemon configs

* Remove nodemon

[next] Jest implementation for React Components (#1733)

* Make jest testing work with custom path and css modules

* Add first test

* feat: added unit tests to ci

* fix: updated package-lock.json

* Update cssTransform.js

* Update cssTransform.js

* Fix test in ci

Adapt files.exclude (#1736)


Permalink ui

Adding Copy to clipboard functionality

WIP

clean request

wip

progress

progress

work in progress

wip

ui functionality

Translations :/

wip

Merge branch 'permalink' of github.com:coralproject/talk into permalink

* 'permalink' of github.com:coralproject/talk: (42 commits)
  [next] Support server side jest testing (#1747)
  Update snapshots
  Add comments
  Remove precss
  Move react-responsive to dev deps
  Remove comment
  Mobile first approach
  Support standard css variables, dynamically set spacing-unit
  Add docs
  Fully implement Flex and MatchMedia
  Responsive Components <3
  fix: linting
  fix: adjusted pageInfo
  Remove obsoloe snapshot
  Move jsdom to dev deps
  Mark comments as always returning a value
  Add comment
  Fix unit tests
  Translate, concept for translation and id strings
  Add aria props
  ...

Adding Attachment and Popover Component

merge conflicts

progress

Any

Working

Support for refs

Ready

Merge branch 'permalink' of github.com:coralproject/talk into permalink

* 'permalink' of github.com:coralproject/talk: (101 commits)
  Ready
  Support for refs
  Working
  Any
  progress
  merge conflicts
  Make timeagoFormatter optional
  More colors
  Colors
  Short circuit endless respawn
  fix: new mongo parser
  Remove jest from watcher config, as it doesnt run well inside
  Add jest set
  Apply suggestions
  Move react-timeago to dev
  Upgrade docz
  Cleanup docz scripts
  Support watcher sets
  [next] Support server side jest testing (#1747)
  Make filter only a pure function
  ...

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

@@ -0,0 +1,14 @@
+/* Here we add global stylings for body and document */
+:global {
+  body {
+    margin: "0";
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.root {
+}

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

@@ -0,0 +1,22 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import App from "./App";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof App> = {
+    asset: {},
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders correctly when asset is null", () => {
+  const props: PropTypesOf<typeof App> = {
+    asset: null,
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -1,33 +1,22 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Center } from "talk-ui/components";
+import { Flex } from "talk-ui/components";
 
-import AssetListContainer from "../containers/AssetListContainer";
-import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import StreamContainer from "../containers/StreamContainer";
-import Logo from "./Logo";
+
+import * as styles from "./App.css";
 
 export interface AppProps {
-  assets?: any | null;
-  asset?: {
-    id: string;
-    isClosed: boolean;
-    comments: any | null;
-  } | null;
+  asset: {} | null;
 }
 
 const App: StatelessComponent<AppProps> = props => {
-  if (props.assets) {
-    return <AssetListContainer assets={props.assets} />;
-  }
   if (props.asset) {
     return (
-      <Center>
-        <Logo gutterBottom />
-        <StreamContainer comments={props.asset.comments} />
-        <PostCommentFormContainer assetID={props.asset.id} />
-      </Center>
+      <Flex justifyContent="center" className={styles.root}>
+        <StreamContainer asset={props.asset} />
+      </Flex>
     );
   }
   return <div>Asset not found </div>;

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

@@ -1,16 +0,0 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
-export interface AssetListProps {
-  assets: ReadonlyArray<{ id: string; title: string | null }>;
-}
-
-const AssetList: StatelessComponent<AssetListProps> = props => {
-  return (
-    <div>
-      {props.assets.map(asset => <div key={asset.id}>{asset.title}</div>)}
-    </div>
-  );
-};
-
-export default AssetList;

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

@@ -1,11 +0,0 @@
-.root {
-  width: 400px;
-}
-
-.gutterBottom {
-  margin-bottom: calc(2px * $spacing-unit);
-}
-
-.author {
-  font-weight: $font-weight-medium;
-}

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

@@ -1,32 +0,0 @@
-import cn from "classnames";
-import React from "react";
-import { StatelessComponent } from "react";
-
-import { Typography } from "talk-ui/components";
-
-import * as styles from "./Comment.css";
-
-export interface CommentProps {
-  className?: string;
-  author: {
-    username: string;
-  } | null;
-  body: string | null;
-  gutterBottom?: boolean;
-}
-
-const Comment: StatelessComponent<CommentProps> = props => {
-  const rootClassName = cn(styles.root, props.className, {
-    [styles.gutterBottom]: props.gutterBottom,
-  });
-  return (
-    <div className={rootClassName}>
-      <Typography className={styles.author} gutterBottom>
-        {props.author && props.author.username}
-      </Typography>
-      <Typography>{props.body}</Typography>
-    </div>
-  );
-};
-
-export default Comment;

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

@@ -0,0 +1,19 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Comment from "./Comment";
+
+it("renders username and body", () => {
+  const props: PropTypesOf<typeof Comment> = {
+    id: "comment-id",
+    author: {
+      username: "Marvin",
+    },
+    body: "Woof",
+    createdAt: "1995-12-17T03:24:00.000Z",
+  };
+  const wrapper = shallow(<Comment {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -0,0 +1,43 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import { StatelessComponent } from "react";
+import { Button, Popover, Typography } from "talk-ui/components";
+import PermalinkPopover from "../PermalinkPopover";
+import Timestamp from "./Timestamp";
+import TopBar from "./TopBar";
+import Username from "./Username";
+
+export interface CommentProps {
+  id: string;
+  className?: string;
+  author: {
+    username: string;
+  } | null;
+  body: string | null;
+  createdAt: string;
+}
+
+const Comment: StatelessComponent<CommentProps> = props => {
+  return (
+    <div role="article">
+      <TopBar>
+        {props.author && <Username>{props.author.username}</Username>}
+        <Timestamp>{props.createdAt}</Timestamp>
+      </TopBar>
+      <Typography>{props.body}</Typography>
+      <div>
+        <Popover body={<PermalinkPopover commentId={props.id} />}>
+          {({ toggleShow, ref }) => (
+            <Button onClick={toggleShow} innerRef={ref} primary>
+              <Localized id="comments-permalink-share">
+                <span>Share</span>
+              </Localized>
+            </Button>
+          )}
+        </Popover>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;

src/core/client/stream/components/Comment/Timestamp.css

@@ -0,0 +1,3 @@
+.root {
+  composes: timestamp from "talk-ui/shared/typography.css";
+}

src/core/client/stream/components/Comment/Timestamp.spec.tsx

@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Timestamp from "./Timestamp";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Timestamp> = {
+    children: "1995-12-17T03:24:00.000Z",
+  };
+  const wrapper = shallow(<Timestamp {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/components/Comment/Timestamp.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { RelativeTime } from "talk-ui/components";
+
+import * as styles from "./Timestamp.css";
+
+export interface TimestampProps {
+  children: string;
+}
+
+const Timestamp: StatelessComponent<TimestampProps> = props => (
+  <RelativeTime className={styles.root} date={props.children} />
+);
+
+export default Timestamp;

src/core/client/stream/components/Comment/TopBar.css

@@ -0,0 +1,3 @@
+.root {
+  margin-bottom: calc(0.5 * var(--spacing-unit));
+}

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

@@ -0,0 +1,45 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+import { UIContext, UIContextProps } from "talk-ui/components";
+
+import TopBar from "./TopBar";
+
+it("renders correctly on small screens", () => {
+  const props: PropTypesOf<typeof TopBar> = {
+    children: <div>Hello World</div>,
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 320,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <TopBar {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly on big screens", () => {
+  const props: PropTypesOf<typeof TopBar> = {
+    children: <div>Hello World</div>,
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 1600,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <TopBar {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});

src/core/client/stream/components/Comment/TopBar.tsx

@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex, MatchMedia } from "talk-ui/components";
+
+import * as styles from "./TopBar.css";
+
+export interface TopBarProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const TopBar: StatelessComponent<TopBarProps> = props => {
+  const rootClassName = cn(styles.root, props.className);
+  return (
+    <MatchMedia minWidth="xs">
+      {matches => (
+        <Flex
+          className={rootClassName}
+          alignItems="baseline"
+          direction={matches ? "row" : "column"}
+          itemGutter={matches ? true : "half"}
+        >
+          {props.children}
+        </Flex>
+      )}
+    </MatchMedia>
+  );
+};
+
+export default TopBar;

src/core/client/stream/components/Comment/Username.css

@@ -0,0 +1,3 @@
+.root {
+  line-height: 1;
+}

src/core/client/stream/components/Comment/Username.spec.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+import { UIContext, UIContextProps } from "talk-ui/components";
+
+import Username from "./Username";
+
+it("renders correctly on small screens", () => {
+  const props: PropTypesOf<typeof Username> = {
+    children: "Marvin",
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 320,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <Username {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly on big screens", () => {
+  const props: PropTypesOf<typeof Username> = {
+    children: "Marvin",
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 1600,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <Username {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});

src/core/client/stream/components/Comment/Username.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { MatchMedia, Typography } from "talk-ui/components";
+
+import * as styles from "./Username.css";
+
+export interface UsernameProps {
+  children: string;
+}
+
+const Username: StatelessComponent<UsernameProps> = props => {
+  return (
+    <MatchMedia minWidth="xs">
+      {matches => (
+        <Typography
+          variant={matches ? "heading2" : "heading3"}
+          className={styles.root}
+          component="span"
+        >
+          {props.children}
+        </Typography>
+      )}
+    </MatchMedia>
+  );
+};
+
+export default Username;

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders username and body 1`] = `
+<div
+  role="article"
+>
+  <TopBar>
+    <Username>
+      Marvin
+    </Username>
+    <Timestamp>
+      1995-12-17T03:24:00.000Z
+    </Timestamp>
+  </TopBar>
+  <withPropsOnChange(Typography)>
+    Woof
+  </withPropsOnChange(Typography)>
+</div>
+`;

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

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(RelativeTime)
+  className="Timestamp-root"
+  date="1995-12-17T03:24:00.000Z"
+/>
+`;

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

@@ -0,0 +1,21 @@
+// 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>
+`;
+
+exports[`renders correctly on small screens 1`] = `
+<div
+  className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly on big screens 1`] = `
+<span
+  className="Typography-root Typography-heading2 Username-root"
+>
+  Marvin
+</span>
+`;
+
+exports[`renders correctly on small screens 1`] = `
+<span
+  className="Typography-root Typography-heading3 Username-root"
+>
+  Marvin
+</span>
+`;

src/core/client/stream/components/Comment/index.ts

@@ -0,0 +1 @@
+export { default, default as Comment, CommentProps } from "./Comment";

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

@@ -0,0 +1,8 @@
+.root {
+  border-left: 3px solid;
+  padding-left: var(--spacing-unit);
+}
+
+.level0 {
+  border-color: var(--palette-secondary-darkest);
+}

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

@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Indent from "./Indent";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Indent> = {
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<Indent {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -0,0 +1,15 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+
+import * as styles from "./Indent.css";
+
+export interface IndentProps {
+  level?: number;
+  children: React.ReactNode;
+}
+
+const Indent: StatelessComponent<IndentProps> = props => {
+  return <div className={cn(styles.root, styles.level0)}>{props.children}</div>;
+};
+
+export default Indent;

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

@@ -0,0 +1,13 @@
+.textField {
+  margin-right: 5px;
+}
+
+.root {
+  background-color: #ffffff;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  padding: 6px 10px;
+  display: flex;
+}

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

@@ -0,0 +1,60 @@
+import { Localized } from "fluent-react/compat";
+import React, { CSSProperties } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { RefHandler } from "react-popper";
+import { Button, TextField } from "talk-ui/components";
+import * as styles from "./PermalinkPopover.css";
+
+interface InnerProps {
+  commentId: string;
+  style?: CSSProperties;
+  innerRef?: RefHandler;
+}
+
+interface State {
+  copied: boolean;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+  };
+
+  public onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  public toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
+  public render() {
+    const { commentId, style, innerRef } = this.props;
+    const { copied } = this.state;
+    return (
+      <div className={styles.root} style={style} ref={innerRef}>
+        <TextField defaultValue={commentId} className={styles.textField} />
+        <CopyToClipboard text={commentId} onCopy={this.onCopy}>
+          <Button primary>
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </div>
+    );
+  }
+}
+
+export default PermalinkPopover;

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

@@ -3,10 +3,12 @@
 
   display: block;
   height: 100px;
-  width: 400px;
-  margin-bottom: calc(2px * $spacing-unit);
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: var(--spacing-unit);
 }
 
-.postButton {
-  float: right;
+.postButtonContainer {
+  display: flex;
+  justify-content: flex-end;
 }

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

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

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

@@ -0,0 +1,42 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+import sinon, { SinonSpy } from "sinon";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ReplyList from "./ReplyList";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ReplyList> = {
+    commentID: "comment-id",
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onShowAll: noop,
+    hasMore: false,
+    disableShowAll: false,
+  };
+  const wrapper = shallow(<ReplyList {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when there is more", () => {
+  const props: PropTypesOf<typeof ReplyList> = {
+    commentID: "comment-id",
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onShowAll: sinon.spy(),
+    hasMore: true,
+    disableShowAll: false,
+  };
+
+  const wrapper = shallow(<ReplyList {...props} />);
+  it("renders a load more button", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("calls onLoadMore", () => {
+    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

@@ -0,0 +1,50 @@
+import { Localized } from "fluent-react/compat";
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { Button, Flex } from "talk-ui/components";
+
+import CommentContainer from "../containers/CommentContainer";
+import Indent from "./Indent";
+
+export interface ReplyListProps {
+  commentID: string;
+  comments: ReadonlyArray<{ id: string }>;
+  onShowAll: () => void;
+  hasMore: boolean;
+  disableShowAll: boolean;
+}
+
+const ReplyList: StatelessComponent<ReplyListProps> = props => {
+  return (
+    <Indent>
+      <Flex
+        direction="column"
+        id={`talk-comments-replyList-log--${props.commentID}`}
+        role="log"
+        itemGutter
+      >
+        {props.comments.map(comment => (
+          <CommentContainer key={comment.id} data={comment} />
+        ))}
+        {props.hasMore && (
+          <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>
+        )}
+      </Flex>
+    </Indent>
+  );
+};
+
+export default ReplyList;

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

@@ -0,0 +1,4 @@
+.root {
+  width: 100%;
+  max-width: 400px;
+}

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

@@ -0,0 +1,47 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+import sinon, { SinonSpy } from "sinon";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Stream from "./Stream";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Stream> = {
+    assetID: "asset-id",
+    isClosed: false,
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onLoadMore: noop,
+    disableLoadMore: false,
+    hasMore: false,
+  };
+  const wrapper = shallow(<Stream {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when there is more", () => {
+  const props: PropTypesOf<typeof Stream> = {
+    assetID: "asset-id",
+    isClosed: false,
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onLoadMore: sinon.spy(),
+    disableLoadMore: false,
+    hasMore: true,
+  };
+
+  const wrapper = shallow(<Stream {...props} />);
+  it("renders a load more button", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("calls onLoadMore", () => {
+    wrapper.find("#talk-comments-stream-loadMore").simulate("click");
+    expect((props.onLoadMore as SinonSpy).calledOnce).toBe(true);
+  });
+
+  const wrapperDisabledButton = shallow(<Stream {...props} disableLoadMore />);
+  it("disables load more button", () => {
+    expect(wrapperDisabledButton).toMatchSnapshot();
+  });
+});

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

@@ -1,18 +1,58 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
+import { Button, Flex } from "talk-ui/components";
+
 import CommentContainer from "../containers/CommentContainer";
+import PostCommentFormContainer from "../containers/PostCommentFormContainer";
+import ReplyListContainer from "../containers/ReplyListContainer";
+import Logo from "./Logo";
+import * as styles from "./Stream.css";
 
 export interface StreamProps {
+  assetID: string;
+  isClosed: boolean;
   comments: ReadonlyArray<{ id: string }>;
+  onLoadMore: () => void;
+  hasMore: boolean;
+  disableLoadMore: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <div>
-      {props.comments.map(comment => (
-        <CommentContainer key={comment.id} data={comment} gutterBottom />
-      ))}
+    <div className={styles.root}>
+      <Logo gutterBottom />
+      <PostCommentFormContainer assetID={props.assetID} />
+      <Flex
+        direction="column"
+        id="talk-comments-stream-log"
+        role="log"
+        aria-live="polite"
+        itemGutter
+      >
+        {props.comments.map(comment => (
+          <Flex direction="column" key={comment.id} itemGutter>
+            <CommentContainer data={comment} />
+            <ReplyListContainer comment={comment} />
+          </Flex>
+        ))}
+        {props.hasMore && (
+          <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>
+        )}
+      </Flex>
     </div>
   );
 };

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Flex
+  className="App-root"
+  justifyContent="center"
+>
+  <Relay(StreamContainer)
+    asset={Object {}}
+  />
+</Flex>
+`;
+
+exports[`renders correctly when asset is null 1`] = `
+<div>
+  Asset not found 
+</div>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Indent-root Indent-level0"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;

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

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Indent>
+  <Flex
+    direction="column"
+    id="talk-comments-replyList-log--comment-id"
+    itemGutter={true}
+    role="log"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
+      }
+      key="comment-1"
+    />
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
+      }
+      key="comment-2"
+    />
+  </Flex>
+</Indent>
+`;
+
+exports[`when there is more renders a load more button 1`] = `
+<Indent>
+  <Flex
+    direction="column"
+    id="talk-comments-replyList-log--comment-id"
+    itemGutter={true}
+    role="log"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
+      }
+      key="comment-1"
+    />
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
+      }
+      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>
+  </Flex>
+</Indent>
+`;

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

@@ -0,0 +1,214 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+  </Flex>
+</div>
+`;
+
+exports[`when there is more disables load more button 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+    <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>
+  </Flex>
+</div>
+`;
+
+exports[`when there is more renders a load more button 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+    <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>
+  </Flex>
+</div>
+`;