component for recognition listing

mock-responses/recognition-listning/recognitionList.json

@@ -0,0 +1,53 @@
+{
+"recognitionList":[
+    {
+      "id":1,
+      "text":
+      "i give high five to avinash for writing block on react strap document",
+      "given_for_user": {
+            "id": 1,
+            "first_name": "avinash",
+            "last_name": "mane",
+            "profile_image_url":"https://i.picsum.photos/id/2/200/200.jpg"
+       },
+      "given_by_user": {
+            "id": 2,
+            "first_name": "onkar",
+            "last_name": "hasabe",
+            "profile_image_url": "https://i.picsum.photos/id/2/200/200.jpg"
+      },
+      "given_at": 1234567890,
+      "coreValue": {
+           "id": 3,
+           "text": "core value text",
+           "description": "desc",
+           "thumbnail": "https://i.picsum.photos/id/654/300/200.jpg"
+      }
+    },
+
+    {
+      "id":1,
+      "text":"give high five to avinash writing block on react strap document",
+      "given_for_user": {
+            "id": 1,
+            "first_name": "avinash",
+            "last_name": "mane",
+            "profile_image_url":"https://i.picsum.photos/id/2/200/200.jpg"
+       },
+      "given_by_user": {
+            "id": 2,
+            "first_name": "onkar",
+            "last_name": "hasabe",
+            "profile_image_url": "https://i.picsum.photos/id/2/200/200.jpg"
+      },
+     "given_at": 1234567890,
+      "coreValue": {
+           "id": 3,
+           "text": "core value text",
+           "description": "desc",
+           "thumbnail_url": "https://i.picsum.photos/id/654/300/200.jpg"
+      }
+    }
+
+  ]
+}

react-frontend/package.json

@@ -13,6 +13,7 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.0",
     "react-dom": "^16.13.1",
+    "react-icons": "^3.10.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",

react-frontend/src/core-components/card/CardComponent.js

@@ -0,0 +1 @@
+export { Card } from "react-bootstrap";

react-frontend/src/core-components/icon/icons.js

@@ -0,0 +1 @@
+export { BsCircle } from "react-icons/bs";

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

@@ -0,0 +1,97 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import { Row, Col } from "core-components/grid/GridComponent";
+import { Card } from "core-components/card/CardComponent";
+import { BsCircle } from "core-components/icon/icons";
+import ImageComponent from "core-components/image/ImageComponent";
+import RecognitionCardHeaderComponent from "recognition-list-components/RecognitionCardHeaderComponent";
+import RecognitionTextComponent from "recognition-list-components/RecognitionTextComponent";
+import HighFiveComponent from "shared-components/high-five-components/HighFiveComponent";
+
+const CoreValueImage = styled(ImageComponent)`
+  border-radius: 20px;
+  overflow: hidden;
+`;
+
+const HighFive = styled(HighFiveComponent)`
+  position: absolute;
+  bottom: 50px;
+`;
+
+const CardComponent = styled(Card)`
+  border-radius: 20px;
+  margin: 20px 20px;
+  box-shadow: 0px 5px 20px var(--box-shadow-color);
+  opacity: 1;
+  background: var(--white) 0% 0% no-repeat padding-box;
+`;
+
+const RecognitionCardComponent = ({
+  givenByName,
+  givenByImage,
+  givenForName,
+  givenForImage,
+  givenAt,
+  text,
+  coreValue,
+  coreValueImage,
+}) => (
+  <CardComponent>
+    <Card.Body>
+      <Row>
+        <Col sm="12" md="7">
+          <RecognitionCardHeaderComponent
+            givenAt={givenAt}
+            givenForName={givenForName}
+            coreValue={coreValue}
+            givenForImage={givenForImage}
+          />
+          <CoreValueImage
+            src={coreValueImage}
+            alt="Core value"
+            className="d-sm-block d-xs-block d-md-none mt-2"
+          />
+          <RecognitionTextComponent
+            givenByImage={givenByImage}
+            givenByName={givenByName}
+            text={text}
+          />
+        </Col>
+        <Col className="d-none d-md-block text-center">
+          <div>
+            <CoreValueImage
+              src={coreValueImage}
+              alt="Core value"
+              className="mt-2"
+            />
+          </div>
+          <BsCircle size="50px" className="mt-4" color="red" />
+        </Col>
+      </Row>
+      <HighFive />
+      <Card.Footer className="bg-white">
+        <span className="font-weight-bold text-muted">+</span>
+        <span className="font-weight-bold text-dark">1</span>
+      </Card.Footer>
+    </Card.Body>
+  </CardComponent>
+);
+
+RecognitionCardComponent.propTypes = {
+  givenByName: PropTypes.string.isRequired,
+  givenByImage: PropTypes.string,
+  givenForName: PropTypes.string.isRequired,
+  givenForImage: PropTypes.string,
+  givenAt: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  coreValue: PropTypes.string.isRequired,
+  coreValueImage: PropTypes.string,
+};
+
+RecognitionCardComponent.defaultProps = {
+  coreValueImage: "https://i.picsum.photos/id/654/300/200.jpg",
+};
+
+export default React.memo(RecognitionCardComponent);

react-frontend/src/recognition-list-components/RecognitionCardComponent.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import RecognitionCardComponent from "recognition-list-components/RecognitionCardComponent";
+
+describe("Recognition Card Component test", () => {
+  test("should equal snapshot", () => {
+    const { asFragment } = render(
+      <RecognitionCardComponent
+        givenByName="Roy"
+        givenForName="David"
+        givenAt="Today 10:30 AM"
+        coreValue="positive"
+        text="give high five for good work"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import { Form } from "core-components/form/FormComponent";
+import { Button } from "core-components/button/ButtonComponent";
+import ImageComponent from "core-components/image/ImageComponent";
+
+const ProfileImage = styled.div`
+  width: 12vh;
+`;
+
+const MenuButton = styled(Button)`
+  color: var(--black);
+  background-color: var(--white);
+  font-weight: bold;
+  border: none;
+`;
+
+const RecognitionCardHeaderComponent = ({
+  givenAt,
+  givenForName,
+  givenForImage,
+  coreValue,
+}) => {
+  return (
+    <div>
+      <div className="d-flex justify-content-end">
+        <MenuButton>...</MenuButton>
+      </div>
+      <div className="d-flex flex-row">
+        <ProfileImage>
+          <ImageComponent
+            src={givenForImage}
+            roundedCircle={true}
+            alt="Profile"
+          />
+        </ProfileImage>
+        <div className="text-start ml-2">
+          <Form.Label className="font-weight-bold ">{givenForName}</Form.Label>
+          <div>
+            <Form.Label> got a high five for</Form.Label>
+            <Form.Label className="ml-1 font-weight-bold">
+              {coreValue}
+            </Form.Label>
+          </div>
+          <Form.Label className="text-muted">{givenAt}</Form.Label>
+        </div>
+      </div>
+    </div>
+  );
+};
+RecognitionCardHeaderComponent.propTypes = {
+  givenForName: PropTypes.string.isRequired,
+  givenForImage: PropTypes.string,
+  givenAt: PropTypes.string.isRequired,
+  coreValue: PropTypes.string.isRequired,
+};
+
+RecognitionCardHeaderComponent.defaultProps = {
+  givenForImage: "https://i.picsum.photos/id/2/200/200.jpg",
+};
+
+export default React.memo(RecognitionCardHeaderComponent);

react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.test.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import RecognitionCardHeaderComponent from "recognition-list-components/RecognitionCardHeaderComponent";
+
+describe("Recognition card header Component test", () => {
+  test("should equal snapshot", () => {
+    const { asFragment } = render(
+      <RecognitionCardHeaderComponent
+        givenForName="Roy"
+        coreValue="positive"
+        givenAt="Today 10:30 AM"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import RecognitionCardComponent from "recognition-list-components/RecognitionCardComponent";
+
+const Wrapper = styled.div`
+  border: 1px solid var(--grey);
+  background: var(--white) 0% 0% no-repeat padding-box;
+  border-radius: 36px;
+  opacity: 1;
+`;
+
+const RecognitionListComponent = ({ recognitionList }) => {
+  const getDateFormate = (timestamp) =>
+    new Date(timestamp * 1000).toDateString();
+
+  return (
+    <Wrapper>
+      {recognitionList.map((recognition, index) => (
+        <RecognitionCardComponent
+          key={index}
+          givenByName={`${recognition.given_by_user.first_name} ${recognition.given_by_user.last_name}`}
+          givenByImage={recognition.given_by_user.profile_image_url}
+          givenForName={`${recognition.given_for_user.first_name} ${recognition.given_for_user.last_name}`}
+          givenForImage={recognition.given_for_user.profile_image_url}
+          givenAt={getDateFormate(recognition.given_at)}
+          text={recognition.text}
+          coreValue={recognition.coreValue.text}
+          coreValueImage={recognition.coreValue.thumbnail_url}
+        />
+      ))}
+    </Wrapper>
+  );
+};
+
+RecognitionListComponent.propTypes = {
+  recognitionList: PropTypes.array.isRequired,
+};
+
+export default React.memo(RecognitionListComponent);

react-frontend/src/recognition-list-components/RecognitionListComponent.test.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import RecognitionListComponent from "recognition-list-components/RecognitionListComponent";
+import recognitionList from "../../../mock-responses/recognition-listning/recognitionList.json";
+
+describe("Recognition list Component test", () => {
+  test("should equal snapshot", () => {
+    const { asFragment } = render(
+      <RecognitionListComponent
+        recognitionList={recognitionList.recognitionList}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import { Form } from "core-components/form/FormComponent";
+import ImageComponent from "core-components/image/ImageComponent";
+
+const Border = styled.fieldset`
+  border: 1px solid var(--grey);
+  border-radius: 11px;
+  opacity: 1;
+  margin-left: 5%;
+  margin-right: 5%;
+`;
+
+const Legend = styled.legend`
+  width: auto;
+  margin-left: 10%;
+`;
+
+const ProfileImage = styled(ImageComponent)`
+  width: 7vh;
+  margin-right: 5%;
+`;
+
+const RecognitionTextComponent = ({ text, givenByName, givenByImage }) => (
+  <div>
+    <Border>
+      <Legend>“</Legend>
+      <Form.Label className="px-2 pb-2 pt-0">{text}</Form.Label>
+    </Border>
+    <div className="d-flex justify-content-end w-100">
+      <Form.Label className="font-weight-bold text-dark">
+        {givenByName}
+      </Form.Label>
+      <ProfileImage src={givenByImage} roundedCircle={true} alt="Profile" />
+    </div>
+  </div>
+);
+
+RecognitionTextComponent.propTypes = {
+  text: PropTypes.string.isRequired,
+  givenByName: PropTypes.string.isRequired,
+  givenByImage: PropTypes.string,
+};
+
+RecognitionTextComponent.defaultProps = {
+  givenByImage: "https://i.picsum.photos/id/2/200/200.jpg",
+};
+
+export default React.memo(RecognitionTextComponent);