From ee30003390bbfc00d240759b0181d8d047c9f50e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 4 Sep 2018 16:02:27 +0200
Subject: [PATCH] Indent comment only

---
 .../components/Comment/IndentedComment.tsx    |  21 ++
 .../client/stream/components/Comment/index.ts |   2 +-
 src/core/client/stream/components/Indent.css  |  11 +-
 .../client/stream/components/Indent.spec.tsx  |  21 +-
 src/core/client/stream/components/Indent.tsx  |  12 +-
 .../stream/components/ReplyList.spec.tsx      |   2 +
 .../client/stream/components/ReplyList.tsx    |  34 +--
 .../__snapshots__/Indent.spec.tsx.snap        |  24 ++-
 .../__snapshots__/ReplyList.spec.tsx.snap     | 196 +++++++++---------
 .../containers/CommentContainer.spec.tsx      |   2 +
 .../stream/containers/CommentContainer.tsx    |   1 +
 .../stream/containers/ReplyListContainer.tsx  |   1 +
 .../CommentContainer.spec.tsx.snap            |   6 +-
 .../ReplyListContainer.spec.tsx.snap          |   4 +
 .../__snapshots__/renderReplies.spec.tsx.snap |  12 +-
 .../showAllReplies.spec.tsx.snap              |  24 ++-
 16 files changed, 241 insertions(+), 132 deletions(-)
 create mode 100644 src/core/client/stream/components/Comment/IndentedComment.tsx

diff --git a/src/core/client/stream/components/Comment/IndentedComment.tsx b/src/core/client/stream/components/Comment/IndentedComment.tsx
new file mode 100644
index 000000000..2460f905b
--- /dev/null
+++ b/src/core/client/stream/components/Comment/IndentedComment.tsx
@@ -0,0 +1,21 @@
+import React, { StatelessComponent } from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Indent from "../Indent";
+import Comment from "./Comment";
+
+export interface IndentedCommentProps extends PropTypesOf<typeof Comment> {
+  indentLevel?: number;
+}
+
+const IndentedComment: StatelessComponent<IndentedCommentProps> = props => {
+  const { indentLevel, ...rest } = props;
+  const CommentElement = <Comment {...rest} />;
+  const CommentwithIndent =
+    (indentLevel && <Indent level={indentLevel}>{CommentElement}</Indent>) ||
+    CommentElement;
+  return CommentwithIndent;
+};
+
+export default IndentedComment;
diff --git a/src/core/client/stream/components/Comment/index.ts b/src/core/client/stream/components/Comment/index.ts
index 173033df9..abb1d79ae 100644
--- a/src/core/client/stream/components/Comment/index.ts
+++ b/src/core/client/stream/components/Comment/index.ts
@@ -1 +1 @@
-export { default, default as Comment, CommentProps } from "./Comment";
+export { default, default as IndentedComment } from "./IndentedComment";
diff --git a/src/core/client/stream/components/Indent.css b/src/core/client/stream/components/Indent.css
index d779d93e0..6aa4c5e7a 100644
--- a/src/core/client/stream/components/Indent.css
+++ b/src/core/client/stream/components/Indent.css
@@ -1,8 +1,11 @@
 .root {
-  border-left: 3px solid;
-  padding-left: var(--spacing-unit);
 }
 
-.level0 {
-  border-color: var(--palette-grey-darkest);
+.level1 {
+  padding-left: var(--spacing-unit);
+  border-left: 3px solid var(--palette-grey-darkest);
+}
+
+.noBorder {
+  border: 0;
 }
diff --git a/src/core/client/stream/components/Indent.spec.tsx b/src/core/client/stream/components/Indent.spec.tsx
index 3108ba209..9654922a7 100644
--- a/src/core/client/stream/components/Indent.spec.tsx
+++ b/src/core/client/stream/components/Indent.spec.tsx
@@ -5,10 +5,29 @@ import { PropTypesOf } from "talk-framework/types";
 
 import Indent from "./Indent";
 
-it("renders correctly", () => {
+it("renders level0", () => {
   const props: PropTypesOf<typeof Indent> = {
     children: <div>Hello World</div>,
   };
   const wrapper = shallow(<Indent {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
+
+it("renders level1", () => {
+  const props: PropTypesOf<typeof Indent> = {
+    level: 1,
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<Indent {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders without border", () => {
+  const props: PropTypesOf<typeof Indent> = {
+    level: 1,
+    noBorder: true,
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<Indent {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Indent.tsx b/src/core/client/stream/components/Indent.tsx
index 7ea8fddf3..1c33c3f26 100644
--- a/src/core/client/stream/components/Indent.tsx
+++ b/src/core/client/stream/components/Indent.tsx
@@ -5,11 +5,21 @@ import * as styles from "./Indent.css";
 
 export interface IndentProps {
   level?: number;
+  noBorder?: boolean;
   children: React.ReactNode;
 }
 
 const Indent: StatelessComponent<IndentProps> = props => {
-  return <div className={cn(styles.root, styles.level0)}>{props.children}</div>;
+  return (
+    <div
+      className={cn(styles.root, {
+        [styles.level1]: props.level === 1,
+        [styles.noBorder]: props.noBorder,
+      })}
+    >
+      {props.children}
+    </div>
+  );
 };
 
 export default Indent;
diff --git a/src/core/client/stream/components/ReplyList.spec.tsx b/src/core/client/stream/components/ReplyList.spec.tsx
index 9d214aaed..6ec16f23f 100644
--- a/src/core/client/stream/components/ReplyList.spec.tsx
+++ b/src/core/client/stream/components/ReplyList.spec.tsx
@@ -18,6 +18,7 @@ it("renders correctly", () => {
     onShowAll: noop,
     hasMore: false,
     disableShowAll: false,
+    indentLevel: 1,
   };
   const wrapper = shallow(<ReplyListN {...props} />);
   expect(wrapper).toMatchSnapshot();
@@ -31,6 +32,7 @@ describe("when there is more", () => {
     onShowAll: sinon.spy(),
     hasMore: true,
     disableShowAll: false,
+    indentLevel: 1,
   };
 
   const wrapper = shallow(<ReplyListN {...props} />);
diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/components/ReplyList.tsx
index 9e6897514..91db3770e 100644
--- a/src/core/client/stream/components/ReplyList.tsx
+++ b/src/core/client/stream/components/ReplyList.tsx
@@ -19,23 +19,25 @@ export interface ReplyListProps {
   onShowAll: () => void;
   hasMore: boolean;
   disableShowAll: boolean;
+  indentLevel?: number;
 }
 
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
-    <Indent>
-      <HorizontalGutter
-        id={`talk-comments-replyList-log--${props.comment.id}`}
-        role="log"
-      >
-        {props.comments.map(comment => (
-          <CommentContainer
-            key={comment.id}
-            comment={comment}
-            asset={props.asset}
-          />
-        ))}
-        {props.hasMore && (
+    <HorizontalGutter
+      id={`talk-comments-replyList-log--${props.comment.id}`}
+      role="log"
+    >
+      {props.comments.map(comment => (
+        <CommentContainer
+          key={comment.id}
+          comment={comment}
+          asset={props.asset}
+          indentLevel={props.indentLevel}
+        />
+      ))}
+      {props.hasMore && (
+        <Indent level={props.indentLevel} noBorder>
           <Localized id="comments-replyList-showAll">
             <Button
               id={`talk-comments-replyList-showAll--${props.comment.id}`}
@@ -48,9 +50,9 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
               Show All Replies
             </Button>
           </Localized>
-        )}
-      </HorizontalGutter>
-    </Indent>
+        </Indent>
+      )}
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
index 910c819b2..d1b2bd78f 100644
--- a/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
@@ -1,8 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`renders level0 1`] = `
 <div
-  className="Indent-root Indent-level0"
+  className="Indent-root"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders level1 1`] = `
+<div
+  className="Indent-root Indent-level1"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders without border 1`] = `
+<div
+  className="Indent-root Indent-level1 Indent-noBorder"
 >
   <div>
     Hello World
diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
index 60efc9399..6a009c7a8 100644
--- a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
@@ -1,73 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<Indent>
-  <withPropsOnChange(HorizontalGutter)
-    id="talk-comments-replyList-log--comment-id"
-    role="log"
-  >
-    <Relay(CommentContainer)
-      asset={
-        Object {
-          "id": "asset-id",
-        }
+<withPropsOnChange(HorizontalGutter)
+  id="talk-comments-replyList-log--comment-id"
+  role="log"
+>
+  <Relay(CommentContainer)
+    asset={
+      Object {
+        "id": "asset-id",
       }
-      comment={
-        Object {
-          "id": "comment-1",
-        }
+    }
+    comment={
+      Object {
+        "id": "comment-1",
       }
-      key="comment-1"
-    />
-    <Relay(CommentContainer)
-      asset={
-        Object {
-          "id": "asset-id",
-        }
+    }
+    indentLevel={1}
+    key="comment-1"
+  />
+  <Relay(CommentContainer)
+    asset={
+      Object {
+        "id": "asset-id",
       }
-      comment={
-        Object {
-          "id": "comment-2",
-        }
+    }
+    comment={
+      Object {
+        "id": "comment-2",
       }
-      key="comment-2"
-    />
-  </withPropsOnChange(HorizontalGutter)>
-</Indent>
+    }
+    indentLevel={1}
+    key="comment-2"
+  />
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`when there is more disables load more button 1`] = `
-<Indent>
-  <withPropsOnChange(HorizontalGutter)
-    id="talk-comments-replyList-log--comment-id"
-    role="log"
+<withPropsOnChange(HorizontalGutter)
+  id="talk-comments-replyList-log--comment-id"
+  role="log"
+>
+  <Relay(CommentContainer)
+    asset={
+      Object {
+        "id": "asset-id",
+      }
+    }
+    comment={
+      Object {
+        "id": "comment-1",
+      }
+    }
+    indentLevel={1}
+    key="comment-1"
+  />
+  <Relay(CommentContainer)
+    asset={
+      Object {
+        "id": "asset-id",
+      }
+    }
+    comment={
+      Object {
+        "id": "comment-2",
+      }
+    }
+    indentLevel={1}
+    key="comment-2"
+  />
+  <Indent
+    level={1}
+    noBorder={true}
   >
-    <Relay(CommentContainer)
-      asset={
-        Object {
-          "id": "asset-id",
-        }
-      }
-      comment={
-        Object {
-          "id": "comment-1",
-        }
-      }
-      key="comment-1"
-    />
-    <Relay(CommentContainer)
-      asset={
-        Object {
-          "id": "asset-id",
-        }
-      }
-      comment={
-        Object {
-          "id": "comment-2",
-        }
-      }
-      key="comment-2"
-    />
     <Localized
       id="comments-replyList-showAll"
     >
@@ -82,42 +87,47 @@ exports[`when there is more disables load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(HorizontalGutter)>
-</Indent>
+  </Indent>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
-<Indent>
-  <withPropsOnChange(HorizontalGutter)
-    id="talk-comments-replyList-log--comment-id"
-    role="log"
+<withPropsOnChange(HorizontalGutter)
+  id="talk-comments-replyList-log--comment-id"
+  role="log"
+>
+  <Relay(CommentContainer)
+    asset={
+      Object {
+        "id": "asset-id",
+      }
+    }
+    comment={
+      Object {
+        "id": "comment-1",
+      }
+    }
+    indentLevel={1}
+    key="comment-1"
+  />
+  <Relay(CommentContainer)
+    asset={
+      Object {
+        "id": "asset-id",
+      }
+    }
+    comment={
+      Object {
+        "id": "comment-2",
+      }
+    }
+    indentLevel={1}
+    key="comment-2"
+  />
+  <Indent
+    level={1}
+    noBorder={true}
   >
-    <Relay(CommentContainer)
-      asset={
-        Object {
-          "id": "asset-id",
-        }
-      }
-      comment={
-        Object {
-          "id": "comment-1",
-        }
-      }
-      key="comment-1"
-    />
-    <Relay(CommentContainer)
-      asset={
-        Object {
-          "id": "asset-id",
-        }
-      }
-      comment={
-        Object {
-          "id": "comment-2",
-        }
-      }
-      key="comment-2"
-    />
     <Localized
       id="comments-replyList-showAll"
     >
@@ -132,6 +142,6 @@ exports[`when there is more renders a load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(HorizontalGutter)>
-</Indent>
+  </Indent>
+</withPropsOnChange(HorizontalGutter)>
 `;
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index 3a110194d..2541a87d8 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -22,6 +22,7 @@ it("renders username and body", () => {
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
     },
+    indentLevel: 1,
   };
 
   const wrapper = shallow(<CommentContainerN {...props} />);
@@ -41,6 +42,7 @@ it("renders body only", () => {
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
     },
+    indentLevel: 1,
   };
 
   const wrapper = shallow(<CommentContainerN {...props} />);
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index cc42c6304..8624110fd 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -14,6 +14,7 @@ import PermalinkButtonContainer from "./PermalinkButtonContainer";
 interface InnerProps {
   comment: CommentData;
   asset: AssetData;
+  indentLevel?: number;
 }
 
 interface State {
diff --git a/src/core/client/stream/containers/ReplyListContainer.tsx b/src/core/client/stream/containers/ReplyListContainer.tsx
index 710984e3a..590cbb437 100644
--- a/src/core/client/stream/containers/ReplyListContainer.tsx
+++ b/src/core/client/stream/containers/ReplyListContainer.tsx
@@ -39,6 +39,7 @@ export class ReplyListContainer extends React.Component<InnerProps> {
         onShowAll={this.showAll}
         hasMore={this.props.relay.hasMore()}
         disableShowAll={this.state.disableShowAll}
+        indentLevel={1}
       />
     );
   }
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index 91b9bbb01..85fc8463c 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders body only 1`] = `
 <React.Fragment>
-  <Comment
+  <IndentedComment
     author={
       Object {
         "username": null,
@@ -22,13 +22,14 @@ exports[`renders body only 1`] = `
       </React.Fragment>
     }
     id="comment-id"
+    indentLevel={1}
   />
 </React.Fragment>
 `;
 
 exports[`renders username and body 1`] = `
 <React.Fragment>
-  <Comment
+  <IndentedComment
     author={
       Object {
         "username": "Marvin",
@@ -48,6 +49,7 @@ exports[`renders username and body 1`] = `
       </React.Fragment>
     }
     id="comment-id"
+    indentLevel={1}
   />
 </React.Fragment>
 `;
diff --git a/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
index 9abc32ecc..b2fac6503 100644
--- a/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
@@ -37,6 +37,7 @@ exports[`renders correctly 1`] = `
     ]
   }
   disableShowAll={false}
+  indentLevel={1}
   onShowAll={[Function]}
 />
 `;
@@ -81,6 +82,7 @@ exports[`when has more replies renders hasMore 1`] = `
   }
   disableShowAll={false}
   hasMore={true}
+  indentLevel={1}
   onShowAll={[Function]}
 />
 `;
@@ -123,6 +125,7 @@ exports[`when has more replies when showing all disables show all button 1`] = `
   }
   disableShowAll={true}
   hasMore={true}
+  indentLevel={1}
   onShowAll={[Function]}
 />
 `;
@@ -165,6 +168,7 @@ exports[`when has more replies when showing all enable show all button after loa
   }
   disableShowAll={false}
   hasMore={true}
+  indentLevel={1}
   onShowAll={[Function]}
 />
 `;
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 2ebca65ec..30b74fa08 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -249,12 +249,12 @@ exports[`renders comment stream 1`] = `
           </div>
         </div>
         <div
-          className="Indent-root Indent-level0"
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-with-replies"
+          role="log"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-replies"
-            role="log"
+            className="Indent-root Indent-level1"
           >
             <div
               className="Comment-root"
@@ -304,6 +304,10 @@ exports[`renders comment stream 1`] = `
                 </button>
               </div>
             </div>
+          </div>
+          <div
+            className="Indent-root Indent-level1"
+          >
             <div
               className="Comment-root"
               role="article"
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index bb44e5208..0bd13c339 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -197,12 +197,12 @@ exports[`renders comment stream 1`] = `
           </div>
         </div>
         <div
-          className="Indent-root Indent-level0"
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-0"
+          role="log"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-0"
-            role="log"
+            className="Indent-root Indent-level1"
           >
             <div
               className="Comment-root"
@@ -252,6 +252,10 @@ exports[`renders comment stream 1`] = `
                 </button>
               </div>
             </div>
+          </div>
+          <div
+            className="Indent-root Indent-level1 Indent-noBorder"
+          >
             <button
               aria-controls="talk-comments-replyList-log--comment-0"
               className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
@@ -473,12 +477,12 @@ exports[`show all replies 1`] = `
           </div>
         </div>
         <div
-          className="Indent-root Indent-level0"
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-0"
+          role="log"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-0"
-            role="log"
+            className="Indent-root Indent-level1"
           >
             <div
               className="Comment-root"
@@ -528,6 +532,10 @@ exports[`show all replies 1`] = `
                 </button>
               </div>
             </div>
+          </div>
+          <div
+            className="Indent-root Indent-level1"
+          >
             <div
               className="Comment-root"
               role="article"