added recognition card component

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);

react-frontend/src/recognition-list-components/RecognitionTextComponent.js

@@ -1,30 +1,50 @@
 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`
   width: auto;
   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);

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);