diff --git a/mock-responses/recognition-listning/recognitionList.json b/mock-responses/recognition-listning/recognitionList.json new file mode 100644 index 000000000..e089cf604 --- /dev/null +++ b/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" + } + } + + ] +} diff --git a/react-frontend/package-lock.json b/react-frontend/package-lock.json index 9013687b6..b2bb683d5 100644 --- a/react-frontend/package-lock.json +++ b/react-frontend/package-lock.json @@ -11626,6 +11626,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==" }, + "react-icons": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz", + "integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==", + "requires": { + "camelcase": "^5.0.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/react-frontend/package.json b/react-frontend/package.json index d39fe5771..a3207a9a8 100644 --- a/react-frontend/package.json +++ b/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", diff --git a/react-frontend/src/core-components/card/CardComponent.js b/react-frontend/src/core-components/card/CardComponent.js new file mode 100644 index 000000000..6e8f5a83f --- /dev/null +++ b/react-frontend/src/core-components/card/CardComponent.js @@ -0,0 +1 @@ +export { Card } from "react-bootstrap"; diff --git a/react-frontend/src/core-components/icon/icons.js b/react-frontend/src/core-components/icon/icons.js new file mode 100644 index 000000000..4083f06e0 --- /dev/null +++ b/react-frontend/src/core-components/icon/icons.js @@ -0,0 +1 @@ +export { BsCircle } from "react-icons/bs"; 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..5816b9e70 --- /dev/null +++ b/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, +}) => ( + + + + + + + + + +
+ +
+ + + + + + + + 1 + + + +); + +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); diff --git a/react-frontend/src/recognition-list-components/RecognitionCardComponent.test.js b/react-frontend/src/recognition-list-components/RecognitionCardComponent.test.js new file mode 100644 index 000000000..298ccc93e --- /dev/null +++ b/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( + + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.js b/react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.js new file mode 100644 index 000000000..ad34fb6ae --- /dev/null +++ b/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 ( +
+
+ ... +
+
+ + + +
+ {givenForName} +
+ got a high five for + + {coreValue} + +
+ {givenAt} +
+
+
+ ); +}; +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); diff --git a/react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.test.js b/react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.test.js new file mode 100644 index 000000000..04f9832e5 --- /dev/null +++ b/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( + + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/react-frontend/src/recognition-list-components/RecognitionListComponent.js b/react-frontend/src/recognition-list-components/RecognitionListComponent.js new file mode 100644 index 000000000..a92ac6f38 --- /dev/null +++ b/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 ( + + {recognitionList.map((recognition, index) => ( + + ))} + + ); +}; + +RecognitionListComponent.propTypes = { + recognitionList: PropTypes.array.isRequired, +}; + +export default React.memo(RecognitionListComponent); diff --git a/react-frontend/src/recognition-list-components/RecognitionListComponent.test.js b/react-frontend/src/recognition-list-components/RecognitionListComponent.test.js new file mode 100644 index 000000000..30bec2f31 --- /dev/null +++ b/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( + + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/react-frontend/src/recognition-list-components/RecognitionTextComponent.js b/react-frontend/src/recognition-list-components/RecognitionTextComponent.js new file mode 100644 index 000000000..60febe8b9 --- /dev/null +++ b/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 }) => ( +
+ + “ + {text} + +
+ + {givenByName} + + +
+
+); + +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); diff --git a/react-frontend/src/recognition-list-components/RecognitionTextComponent.test.js b/react-frontend/src/recognition-list-components/RecognitionTextComponent.test.js new file mode 100644 index 000000000..a163f10df --- /dev/null +++ b/react-frontend/src/recognition-list-components/RecognitionTextComponent.test.js @@ -0,0 +1,13 @@ +import React from "react"; +import { render } from "@testing-library/react"; + +import RecognitionTextComponent from "recognition-list-components/RecognitionTextComponent"; + +describe("Recognition text Component test", () => { + test("should equal snapshot", () => { + const { asFragment } = render( + + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardComponent.test.js.snap b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardComponent.test.js.snap new file mode 100644 index 000000000..a3af5c985 --- /dev/null +++ b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardComponent.test.js.snap @@ -0,0 +1,203 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Recognition Card Component test should equal snapshot 1`] = ` + + .c2 { + width: 12vh; +} + +.c1 { + color: var(--black); + background-color: var(--white); + font-weight: bold; + border: none; +} + +.c4 { + border: 1px solid var(--grey); + border-radius: 11px; + opacity: 1; + margin-left: 5%; + margin-right: 5%; +} + +.c5 { + width: auto; + margin-left: 10%; +} + +.c6 { + width: 7vh; + margin-right: 5%; +} + +.c3 { + border-radius: 20px; + overflow: hidden; +} + +.c7 { + position: absolute; + bottom: 50px; +} + +.c0 { + 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; +} + +
+
+
+
+
+
+ +
+
+
+ Profile +
+
+ +
+ + +
+ +
+
+
+ Core value +
+
+ + “ + + +
+
+ + Profile +
+
+
+
+
+ Core value +
+ + + +
+
+ High five recognition +
+ + + + + + 1 + +
+
+
+ +`; diff --git a/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardHeaderComponent.test.js.snap b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardHeaderComponent.test.js.snap new file mode 100644 index 000000000..226f13bf9 --- /dev/null +++ b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardHeaderComponent.test.js.snap @@ -0,0 +1,68 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Recognition card header Component test should equal snapshot 1`] = ` + + .c1 { + width: 12vh; +} + +.c0 { + color: var(--black); + background-color: var(--white); + font-weight: bold; + border: none; +} + +
+
+ +
+
+
+ Profile +
+
+ +
+ + +
+ +
+
+
+ +`; diff --git a/react-frontend/src/recognition-list-components/__snapshots__/RecognitionListComponent.test.js.snap b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionListComponent.test.js.snap new file mode 100644 index 000000000..aec3de525 --- /dev/null +++ b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionListComponent.test.js.snap @@ -0,0 +1,364 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Recognition list Component test should equal snapshot 1`] = ` + + .c3 { + width: 12vh; +} + +.c2 { + color: var(--black); + background-color: var(--white); + font-weight: bold; + border: none; +} + +.c5 { + border: 1px solid var(--grey); + border-radius: 11px; + opacity: 1; + margin-left: 5%; + margin-right: 5%; +} + +.c6 { + width: auto; + margin-left: 10%; +} + +.c7 { + width: 7vh; + margin-right: 5%; +} + +.c4 { + border-radius: 20px; + overflow: hidden; +} + +.c8 { + position: absolute; + bottom: 50px; +} + +.c1 { + 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; +} + +.c0 { + border: 1px solid var(--grey); + background: var(--white) 0% 0% no-repeat padding-box; + border-radius: 36px; + opacity: 1; +} + +
+
+
+
+
+
+
+ +
+
+
+ Profile +
+
+ +
+ + +
+ +
+
+
+ Core value +
+
+ + “ + + +
+
+ + Profile +
+
+
+
+
+ Core value +
+ + + +
+
+ High five recognition +
+ + + + + + 1 + +
+
+
+
+
+
+
+
+
+ +
+
+
+ Profile +
+
+ +
+ + +
+ +
+
+
+ Core value +
+
+ + “ + + +
+
+ + Profile +
+
+
+
+
+ Core value +
+ + + +
+
+ High five recognition +
+ + + + + + 1 + +
+
+
+
+ +`; diff --git a/react-frontend/src/recognition-list-components/__snapshots__/RecognitionTextComponent.test.js.snap b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionTextComponent.test.js.snap new file mode 100644 index 000000000..fbae9eb0f --- /dev/null +++ b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionTextComponent.test.js.snap @@ -0,0 +1,54 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Recognition text Component test should equal snapshot 1`] = ` + + .c0 { + border: 1px solid var(--grey); + border-radius: 11px; + opacity: 1; + margin-left: 5%; + margin-right: 5%; +} + +.c1 { + width: auto; + margin-left: 10%; +} + +.c2 { + width: 7vh; + margin-right: 5%; +} + +
+
+ + “ + + +
+
+ + Profile +
+
+ +`;