From c7bb69d972da4c07e693987633e5a297ca7d3103 Mon Sep 17 00:00:00 2001
From: Avinash Mane <avimanepatil@gmail.com>
Date: Thu, 28 May 2020 19:19:07 +0530
Subject: [PATCH] added recognition card component

---
 .../RecognitionCardComponent.js               | 93 +++++++++++++++++++
 .../RecognitionTextComponent.js               | 36 +++++--
 .../RecognitionTopBarComponent.js             | 16 ++--
 .../CoreValueIconComponent.js                 | 15 ---
 .../CoreValueIconComponent.test.js            | 11 ---
 .../profile-components/ProfileComponent.js    | 45 ---------
 .../ProfileComponent.test.js                  | 18 ----
 7 files changed, 129 insertions(+), 105 deletions(-)
 create mode 100644 react-frontend/src/recognition-list-components/RecognitionCardComponent.js
 delete mode 100644 react-frontend/src/shared-components/core-value-icon-component/CoreValueIconComponent.js
 delete mode 100644 react-frontend/src/shared-components/core-value-icon-component/CoreValueIconComponent.test.js
 delete mode 100644 react-frontend/src/shared-components/profile-components/ProfileComponent.js
 delete mode 100644 react-frontend/src/shared-components/profile-components/ProfileComponent.test.js

diff --git a/react-frontend/src/recognition-list-components/RecognitionCardComponent.js b/react-frontend/src/recognition-list-components/RecognitionCardComponent.js
new file mode 100644
index 000000000..79eac6518
--- /dev/null
+++ b/react-frontend/src/recognition-list-components/RecognitionCardComponent.js
@@ -0,0 +1,93 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { Row, Card, Col } from "react-bootstrap";
+import ImageComponent from "core-components/image/ImageComponent";
+import RecognitionTopBarComponent from "./RecognitionTopBarComponent";
+import RecognitionTextComponent from "./RecognitionTextComponent";
+import CoreValueIconComponent from "shared-components/core-value-icon-components/CoreValueIconComponent";
+import HighFiveComponent from "shared-components/high-five-components/HighFiveComponent";
+
+const ImgD = styled.div`
+  border-radius: 20px;
+  height: 70%;
+  width: auto;
+  overflow: hidden;
+`;
+
+const ImgM = styled.div`
+  border-radius: 20px;
+  height: auto;
+  width: auto;
+  overflow: hidden;
+`;
+
+const HighFive = styled.div`
+  position: absolute;
+  bottom: 50px;
+`;
+
+const RecognitionCardComponent = ({
+  recognitionFor,
+  recognitionBy,
+  recognitionOn,
+  recognitionText,
+  coreValue,
+  highFiveCount,
+  image,
+}) => (
+  <Card
+    className="my-4 mx-2 shadow p-3 mb-4 border border-secondary bg-light grey"
+    style={{ borderRadius: "36px" }}
+  >
+    <Card.Body>
+      <Row>
+        <Col sm="12" md="7">
+          <RecognitionTopBarComponent
+            recognitionFor={recognitionFor}
+            recognitionOn={recognitionOn}
+            coreValue={coreValue}
+          />
+          <ImgM className="bg-dark d-sm-block d-md-none mt-2">
+            <ImageComponent src={image} />
+          </ImgM>
+          <RecognitionTextComponent
+            recognitionText={recognitionText}
+            recognitionBy={recognitionBy}
+          />
+        </Col>
+        <Col className="d-none d-md-block">
+          <Col className=" d-flex  justify-content-center">
+            <Row className="d-flex flex-column">
+              <ImgD>
+                <ImageComponent src={image} />
+              </ImgD>
+              <Col className="d-flex justify-content-center align-items-center">
+                <CoreValueIconComponent size="50px" color="red" />
+              </Col>
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+      <HighFive>
+        <HighFiveComponent />
+      </HighFive>
+    </Card.Body>
+    <Card.Footer className="bg-light grey">
+      <span className="font-weight-bold text-muted">+</span>
+      <span className="font-weight-bold text-dark">{highFiveCount}</span>
+    </Card.Footer>
+  </Card>
+);
+
+RecognitionCardComponent.propTypes = {
+  recognitionFor: PropTypes.object.isRequired,
+  recognitionBy: PropTypes.object.isRequired,
+  recognitionOn: PropTypes.string.isRequired,
+  recognitionText: PropTypes.string.isRequired,
+  coreValue: PropTypes.string.isRequired,
+  highFiveCount: PropTypes.number.isRequired,
+  image: PropTypes.string.isRequired,
+};
+
+export default React.memo(RecognitionCardComponent);
diff --git a/react-frontend/src/recognition-list-components/RecognitionTextComponent.js b/react-frontend/src/recognition-list-components/RecognitionTextComponent.js
index b09d0ae50..80fc57ba8 100644
--- a/react-frontend/src/recognition-list-components/RecognitionTextComponent.js
+++ b/react-frontend/src/recognition-list-components/RecognitionTextComponent.js
@@ -1,13 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-
+import { Row } from "react-bootstrap";
 import LabelComponent from "core-components/label/LabelComponent";
+import ImageComponent from "core-components/image/ImageComponent";
 
 const Border = styled.fieldset`
-  border: 1px solid #dae2e3;
+  border: 1px solid;
   border-radius: 11px;
   opacity: 1;
+  margin-left: 5%;
+  margin-right: 5%;
 `;
 
 const Legend = styled.legend`
@@ -15,16 +18,33 @@ const Legend = styled.legend`
   margin-left: 10%;
 `;
 
-const RecognitionTextComponent = ({ text, className }) => (
-  <Border className={className}>
-    <Legend>“</Legend>
-    <LabelComponent text={text} className="p-2" />
-  </Border>
+const Img = styled.div`
+  width: 7vh;
+  margin-right: 5%;
+`;
+
+const RecognitionTextComponent = ({ recognitionText, recognitionBy }) => (
+  <Row className="d-flex flex-column">
+    <Border>
+      <Legend>“</Legend>
+      <LabelComponent text={recognitionText} className="px-2 pb-2 pt-0" />
+    </Border>
+    <Row className="d-flex justify-content-end">
+      <LabelComponent
+        text={recognitionBy.name}
+        className="font-weight-bold text-dark"
+      />
+      <Img>
+        <ImageComponent src={recognitionBy.image} roundedCircle="true" />
+      </Img>
+    </Row>
+  </Row>
 );
 
 RecognitionTextComponent.propTypes = {
   className: PropTypes.string,
-  text: PropTypes.string.isRequired,
+  recognitionText: PropTypes.string.isRequired,
+  recognitionBy: PropTypes.object.isRequired,
 };
 
 export default React.memo(RecognitionTextComponent);
diff --git a/react-frontend/src/recognition-list-components/RecognitionTopBarComponent.js b/react-frontend/src/recognition-list-components/RecognitionTopBarComponent.js
index 75e2537b5..333b7134c 100644
--- a/react-frontend/src/recognition-list-components/RecognitionTopBarComponent.js
+++ b/react-frontend/src/recognition-list-components/RecognitionTopBarComponent.js
@@ -16,7 +16,7 @@ const Img = styled.div`
 `;
 
 const RecognitionTopBarComponent = (props) => {
-  const { recognition_on, recognition_for, core_value } = props;
+  const { recognitionOn, recognitionFor, coreValue } = props;
   return (
     <Col>
       <Row className="d-flex justify-content-end">
@@ -29,32 +29,32 @@ const RecognitionTopBarComponent = (props) => {
       <Row className="d-flex flex-column-left">
         <Img>
           <ImageComponent
-            src={recognition_for.image}
+            src={recognitionFor.name}
             roundedCircle="true"
             alt="profile"
           />
         </Img>
         <Row className="d-flex flex-column text-start ml-4">
           <LabelComponent
-            text={recognition_for.name}
+            text={recognitionFor.image}
             className="font-weight-bold "
           />
           <Row className="d-flex flex-row">
             <LabelComponent text="got a high five for" />
             <LabelComponent
-              text={core_value}
+              text={coreValue}
               className="font-weight-bold ml-1"
             />
           </Row>
-          <LabelComponent text={recognition_on} className="text-muted" />
+          <LabelComponent text={recognitionOn} className="text-muted" />
         </Row>
       </Row>
     </Col>
   );
 };
 RecognitionTopBarComponent.propTypes = {
-  recognition_for: PropTypes.object.isRequired,
-  recognition_on: PropTypes.string.isRequired,
-  core_value: PropTypes.string.isRequired,
+  recognitionFor: PropTypes.object.isRequired,
+  recognitionOn: PropTypes.string.isRequired,
+  coreValue: PropTypes.string.isRequired,
 };
 export default React.memo(RecognitionTopBarComponent);
diff --git a/react-frontend/src/shared-components/core-value-icon-component/CoreValueIconComponent.js b/react-frontend/src/shared-components/core-value-icon-component/CoreValueIconComponent.js
deleted file mode 100644
index f8cd93ce5..000000000
--- a/react-frontend/src/shared-components/core-value-icon-component/CoreValueIconComponent.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { BsCircle } from "react-icons/bs";
-
-const CoreValueIconComponent = (props) => {
-  const { size, color } = props;
-  return <BsCircle size={size} color={color} data-testid="CoreValueIcon" />;
-};
-
-CoreValueIconComponent.propTypes = {
-  size: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
-};
-
-export default CoreValueIconComponent;
diff --git a/react-frontend/src/shared-components/core-value-icon-component/CoreValueIconComponent.test.js b/react-frontend/src/shared-components/core-value-icon-component/CoreValueIconComponent.test.js
deleted file mode 100644
index edc70c163..000000000
--- a/react-frontend/src/shared-components/core-value-icon-component/CoreValueIconComponent.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import CoreValueIconComponent from "./CoreValueIconComponent";
-
-it("renders image component with image", () => {
-  const { getByTestId } = render(
-    <CoreValueIconComponent size="50px" color="red" />
-  );
-  const testIcon = getByTestId("CoreValueIcon");
-  expect(testIcon).toBeInTheDocument();
-});
diff --git a/react-frontend/src/shared-components/profile-components/ProfileComponent.js b/react-frontend/src/shared-components/profile-components/ProfileComponent.js
deleted file mode 100644
index 880896b27..000000000
--- a/react-frontend/src/shared-components/profile-components/ProfileComponent.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-
-import ImageComponent from "core-components/image/ImageComponent";
-import Row from "core-components/row/RowComponent";
-import LabelComponent from "core-components/label/LabelComponent";
-
-const Img = styled.div`
-  width: 8vh;
-`;
-
-const ProfileComponent = ({
-  roundedCircle,
-  className,
-  profileImage,
-  profileName,
-}) => {
-  return (
-    <Row className={className}>
-      <Img>
-        <ImageComponent
-          src={profileImage}
-          roundedCircle={roundedCircle}
-          alt="profile"
-        />
-      </Img>
-      <LabelComponent className="font-weight-bold" text={profileName} />
-    </Row>
-  );
-};
-
-ProfileComponent.propTypes = {
-  className: PropTypes.string,
-  roundedCircle: PropTypes.bool,
-  profileImage: PropTypes.string.isRequired,
-  profileName: PropTypes.string.isRequired,
-};
-
-ProfileComponent.defaultProps = {
-  roundedCircle: true,
-  className: "d-flex justify-content-around",
-};
-
-export default React.memo(ProfileComponent);
diff --git a/react-frontend/src/shared-components/profile-components/ProfileComponent.test.js b/react-frontend/src/shared-components/profile-components/ProfileComponent.test.js
deleted file mode 100644
index 556587893..000000000
--- a/react-frontend/src/shared-components/profile-components/ProfileComponent.test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-
-import ImageComponent from "core-components/image/ImageComponent";
-import LabelComponent from "core-components/image/ImageComponent";
-
-describe("Image component test", () => {
-  test("renders image component with image", () => {
-    const { getByAltText } = render(<ImageComponent />);
-    const testImage = getByAltText("profile");
-    expect(testImage).toBeInTheDocument();
-  });
-
-  test("LabelComponent should equal to text", () => {
-    const { getByText } = render(<LabelComponent text="name" />);
-    expect(getByText("name")).toHaveTextContent("name");
-  });
-});