Design Comments

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "node-sass": "4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"

src/App.js

@@ -1,12 +1,10 @@
-import React from 'react';
-import './App.css';
+import React from "react";
+import AppComments from "./components/appComments";
+
+import "./Scss/headings.scss";
 
 function App() {
-  return (
-    <div style={{ display: "flex", justifyContent: "center", alignContent: "center", minHeight: "100vh" }}>
-      <h1>cb-react-comments</h1>
-    </div>
-  );
+  return <AppComments />;
 }
 
 export default App;

src/Scss/headings.scss

@@ -0,0 +1,6 @@
+@import "./theme.scss";
+
+.headingPrimary {
+  font-size: $headingPrimary;
+  font-weight: 600;
+}

src/Scss/theme.scss

@@ -0,0 +1,35 @@
+$colorPrimary: #5158cf;
+$colorPrimaryDrak: #2618fc;
+$colorPrimaryLight: "";
+$colorSecondary: "";
+$colorSecondaryDark: "";
+$colorSecondaryLight: "";
+$colorWhite: #fff;
+$colorGrey: #676773;
+$colorGreyDark: #333340;
+$colorGreyLight: #bfbfbf;
+$colorGreyLight2: #d4d4d4;
+$colorGreyLight3: #e5e5e5;
+$colorGreyLight4: #ededed;
+$colorGreyLight5: #f2f2f2;
+$colorError: #d32f2f;
+$colorRedLight: #f06024;
+$colorRedDark: #fd2e10;
+
+$headingPrimary: 24px;
+$headingSecondary: 18px;
+$headingSmall: 16px;
+
+$borderRadius: 4px;
+$borderRadiusMedium: 6px;
+$borderRadiusLarge: 8px;
+$borderRadiusCircle: 100px;
+
+$boxShadowLight: 1px 1px 10px 1px #f4f2f2;
+$boxShadowDark: 0 20px 60px rgba(0, 0, 0, 0.3);
+
+$BP_LARGEST: 75em; // 1200px because 1200/16 = 75;
+$BP_LARGE: 68.75em; // 1100px because 1100/16 = 68.75;
+$BP_MEDIUM: 56.25em; // 900px because 900/16 = 56.25;
+$BP_SMALL: 37.5em; // 600px because 600/16 = 37.5;
+$BP_SMALLEST: 31.25em; // 600px because 500/16 = 31.25;

src/components/Button/Button.module.scss

@@ -0,0 +1,20 @@
+@import "../../Scss/theme.scss";
+
+.button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: "12px";
+}
+
+.primary {
+  color: $colorPrimary;
+}
+
+.secondary {
+}
+
+.danger {
+  color: $colorRedLight;
+}

src/components/Button/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import styles from "./Button.module.scss";
+
+const Button = ({ children, type, onClick, ...restProps }) => {
+  return (
+    <button
+      className={`${styles.button} ${styles[type]}`}
+      onClick={onClick}
+      {...restProps}
+    >
+      {children}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  children: PropTypes.string,
+  type: PropTypes.string,
+  onClick: PropTypes.func.isRequired
+};
+
+Button.defaultProps = {
+  children: "Button",
+  onClick: () => {},
+  type: "primary"
+};
+
+export default Button;

src/components/Input/Input.module.scss

@@ -0,0 +1,8 @@
+@import "../../Scss/theme.scss";
+
+.inputStyles {
+  width: 100%;
+  outline: none;
+  border-radius: $borderRadius;
+  border-color: $colorGreyLight;
+}

src/components/Input/index.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import styles from "./Input.module.scss";
+
+const Input = ({ value, onChange, ...restProps }) => {
+  return (
+    <textarea
+      className={styles.inputStyles}
+      cols={40}
+      rows={10}
+      value={value}
+      onChange={ev => onChange(ev.target.value)}
+      {...restProps}
+    />
+  );
+};
+
+Input.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+};
+
+Input.defaultProps = {
+  value: "",
+  onChange: () => {}
+};
+
+export default Input;

src/components/addComment/AddComment.module.scss

@@ -0,0 +1,11 @@
+@import "../../Scss/theme.scss";
+
+.wrapper {
+  padding: 32px;
+  background: $colorWhite;
+}
+
+.buttonWrapper {
+  padding: 12px 0px;
+  text-align: right;
+}

src/components/addComment/index.js

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import Input from "../Input";
+import Button from "../Button";
+
+import styles from "./AddComment.module.scss";
+
+const AddComment = ({ onClick, buttonLabel, onChange, ...restProps }) => {
+  const [commentText, setCommentText] = useState("");
+
+  const handleCommentText = text => setCommentText(text);
+
+  return (
+    <div className={styles.wrapper} {...restProps}>
+      <Input onChange={handleCommentText} value={commentText} />
+      <div className={styles.buttonWrapper}>
+        <Button type="primary" onClick={() => alert("Adding comment...")}>
+          Add comment
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+AddComment.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  onChange: PropTypes.func
+};
+
+AddComment.defaultProps = {
+  onClick: () => {},
+  onChange: () => {}
+};
+
+export default AddComment;

src/components/appComments/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+import AddComment from "../addComment";
+import CommentsList from "../commentsList";
+
+const AppComments = ({ ...restProps }) => {
+  return (
+    <>
+      <div
+        style={{
+          padding: "24px",
+          borderBottom: "1px solid #ccc"
+        }}
+      >
+        <div className="headingPrimary">Comments</div>
+      </div>
+      <CommentsList />
+      <AddComment />
+    </>
+  );
+};
+
+export default AppComments;

src/components/commentItem/CommentItem.module.scss

@@ -0,0 +1,59 @@
+@import "../../Scss/theme.scss";
+
+.item {
+  padding: 12px;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $colorGreyLight2;
+  }
+}
+
+.imageWrapper {
+  display: flex;
+  align-items: center;
+  padding-bottom: 12px;
+}
+
+.image {
+  width: 38px;
+  height: 38px;
+  border-radius: $borderRadiusCircle;
+}
+
+.name {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.comment {
+  font-size: 14px;
+  color: #333;
+  width: 60%;
+  line-height: 20px;
+
+  @media only screen and (max-width: $BP_MEDIUM) {
+    width: 100%;
+  }
+}
+
+.commentWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media only screen and (max-width: $BP_MEDIUM) {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+
+.editWrapper {
+  padding: 12px 0px;
+  text-align: right;
+}
+
+.buttonWrapper {
+  padding: 12px 0px;
+  text-align: right;
+}

src/components/commentItem/index.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import Button from "../Button";
+import Input from "../Input";
+
+import styles from "./CommentItem.module.scss";
+
+const CommentItem = ({ details, ...restProps }) => {
+  const [editMode, setEditMode] = useState(false);
+  const [
+    commentText,
+    setCommentText
+  ] = useState(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+  perspiciatis nesciunt quasi hic facilis optio, sint atque. Quia
+  obcaecati provident architecto, sunt ab ea voluptatem eum magni amet,
+  voluptatibus sed. VERY BAD`);
+
+  const handleCommentText = text => setCommentText(text);
+
+  if (!editMode) {
+    return (
+      <div className={styles.item}>
+        <div className={styles.imageWrapper}>
+          <img
+            className={styles.image}
+            alt="demo"
+            src="https://jpoissonnier.gallerycdn.vsassets.io/extensions/jpoissonnier/vscode-styled-components/0.0.26/1553589418918/Microsoft.VisualStudio.Services.Icons.Default"
+          />
+          <div className={styles.name}>Default Name</div>
+        </div>
+        <div className={styles.commentWrapper}>
+          <div className={styles.comment}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+            perspiciatis nesciunt quasi hic facilis optio, sint atque. Quia
+            obcaecati provident architecto, sunt ab ea voluptatem eum magni
+            amet, voluptatibus sed.
+          </div>
+          <Button type="primary" onClick={() => setEditMode(true)}>
+            Edit
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.editWrapper}>
+      <Input value={`${commentText}`} onChange={handleCommentText} autoFocus />
+
+      <div className={styles.buttonWrapper}>
+        <Button type="danger" onClick={() => setEditMode(false)}>
+          Cancel
+        </Button>
+        <Button type="primary" onClick={() => alert("saving")}>
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+CommentItem.propTypes = {
+  details: PropTypes.object
+};
+
+CommentItem.defaultProps = {
+  details: {}
+};
+
+export default CommentItem;

src/components/commentsList/CommentsList.module.scss

@@ -0,0 +1,6 @@
+@import "../../Scss/theme.scss";
+
+.wrapper {
+  padding: 32px;
+  background-color: $colorWhite;
+}