From 1a10a42dbfa74e5aa7c5147d2b000173e717b38f Mon Sep 17 00:00:00 2001 From: onkar-josh Date: Tue, 2 Jun 2020 13:36:31 +0530 Subject: [PATCH 1/5] created a button component as shared for create recognition --- .../CreateRecognitionButton.js | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 react-frontend/src/shared-components/create-reccognition-button/CreateRecognitionButton.js diff --git a/react-frontend/src/shared-components/create-reccognition-button/CreateRecognitionButton.js b/react-frontend/src/shared-components/create-reccognition-button/CreateRecognitionButton.js new file mode 100644 index 000000000..96f0e1684 --- /dev/null +++ b/react-frontend/src/shared-components/create-reccognition-button/CreateRecognitionButton.js @@ -0,0 +1,56 @@ +import React from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; + +import PlusSign from "shared-components/plus-sign/PlusSign"; //todo depend upon peerly logo + +const ButtonComponent = styled.div` + background: transparent url(${(props) => props.imageUrl}) 90% 60% no-repeat + padding-box; + opacity: 1; + box-shadow: 0px 3px 6px #0000004e; + width: 45px; + height: 45px; + background-color: var(--rust); + border: none; + border-radius: 50%; + margin-top: 7.5px; + margin-left: 7.5px; +`; + +const PlusSignWrapper = styled.div` + position: absolute; + margin-left: 10px; + margin-top: 8px; + font-size: 23px; + color: var(--white); +`; + +const RoundCircle = styled.div` + position: absolute; + background: var(--white) 0% 0% no-repeat padding-box; + box-shadow: 0px 3px 6px #0000004e; + opacity: 1; + border-radius: 50%; + width: 60px; + height: 60px; +`; + +const CreateRecognitionButton = ({ onClick, imageUrl }) => { + return ( + + + + + + + + ); +}; + +CreateRecognitionButton.propTypes = { + onClick: PropTypes.func.isRequired, + imageUrl: PropTypes.string.isRequired, +}; + +export default React.memo(CreateRecognitionButton); From e45957e2fc61c7312888817a806011a9a9a9ad20 Mon Sep 17 00:00:00 2001 From: onkar-josh Date: Tue, 2 Jun 2020 13:39:58 +0530 Subject: [PATCH 2/5] created a panel with add recognition button --- .../CreateRecognitionLeftPanel.js | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 react-frontend/src/shared-components/create-recognition-left-panel/CreateRecognitionLeftPanel.js diff --git a/react-frontend/src/shared-components/create-recognition-left-panel/CreateRecognitionLeftPanel.js b/react-frontend/src/shared-components/create-recognition-left-panel/CreateRecognitionLeftPanel.js new file mode 100644 index 000000000..de8a48cb1 --- /dev/null +++ b/react-frontend/src/shared-components/create-recognition-left-panel/CreateRecognitionLeftPanel.js @@ -0,0 +1,69 @@ +import React from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; + +import { Card } from "core-components/card/card"; +import Img from "shared-components/user-image-name/UserImageName"; +import { Row } from "core-components/grid/GridComponent"; +import CreateRecognitionButton from "shared-components/create-reccognition-button/CreateRecognitionButton"; + +const ButtonComponentWrapper = styled.div` + position: absolute; + margin-top: 200px; + margin-left: -35px; +`; + +const CreateRecognitionLeftPanel = ({ + hi5ImageForButton, + emaployeeImage, + employeeName, + hi5CollectedImage, + hi5Collected, +}) => { + const onClick = () => { + //todo + }; + return ( + + + + + + + + + + + + + + ); +}; + +CreateRecognitionLeftPanel.propTypes = { + hi5ImageForButton: PropTypes.string.isRequired, + emaployeeImage: PropTypes.string.isRequired, + employeeName: PropTypes.string.isRequired, + hi5CollectedImage: PropTypes.string.isRequired, + hi5Collected: PropTypes.string.isRequired, +}; + +export default CreateRecognitionLeftPanel; From c19b392556fde2b77d016a954e80ee8ec999258c Mon Sep 17 00:00:00 2001 From: onkar-josh Date: Tue, 2 Jun 2020 14:28:25 +0530 Subject: [PATCH 3/5] updated file name --- .../CreateRecognitionButton.js | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.js diff --git a/react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.js b/react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.js new file mode 100644 index 000000000..96f0e1684 --- /dev/null +++ b/react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.js @@ -0,0 +1,56 @@ +import React from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; + +import PlusSign from "shared-components/plus-sign/PlusSign"; //todo depend upon peerly logo + +const ButtonComponent = styled.div` + background: transparent url(${(props) => props.imageUrl}) 90% 60% no-repeat + padding-box; + opacity: 1; + box-shadow: 0px 3px 6px #0000004e; + width: 45px; + height: 45px; + background-color: var(--rust); + border: none; + border-radius: 50%; + margin-top: 7.5px; + margin-left: 7.5px; +`; + +const PlusSignWrapper = styled.div` + position: absolute; + margin-left: 10px; + margin-top: 8px; + font-size: 23px; + color: var(--white); +`; + +const RoundCircle = styled.div` + position: absolute; + background: var(--white) 0% 0% no-repeat padding-box; + box-shadow: 0px 3px 6px #0000004e; + opacity: 1; + border-radius: 50%; + width: 60px; + height: 60px; +`; + +const CreateRecognitionButton = ({ onClick, imageUrl }) => { + return ( + + + + + + + + ); +}; + +CreateRecognitionButton.propTypes = { + onClick: PropTypes.func.isRequired, + imageUrl: PropTypes.string.isRequired, +}; + +export default React.memo(CreateRecognitionButton); From 3f905ce745484a62eda3ca29b1b6427453716097 Mon Sep 17 00:00:00 2001 From: onkar-josh Date: Tue, 2 Jun 2020 14:29:31 +0530 Subject: [PATCH 4/5] added test cases --- .../CreateRecognitionButton.test.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.test.js diff --git a/react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.test.js b/react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.test.js new file mode 100644 index 000000000..0a1b33205 --- /dev/null +++ b/react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.test.js @@ -0,0 +1,18 @@ +import React from "react"; +import { render } from "@testing-library/react"; + +import CreateRecognitionButton from "shared-components/create-recognition-button/CreateRecognitionButton"; + +describe("Image component test", () => { + const onClick = () => { + onClick; + }; + + test("renders + sign for the component", () => { + const { getByText } = render( + + ); + const testImage = getByText("+"); + expect(testImage).toBeInTheDocument(); + }); +}); From 61879800be88d4b7f355f7eeec4abeffee7f3e9d Mon Sep 17 00:00:00 2001 From: onkar-josh Date: Tue, 2 Jun 2020 14:29:58 +0530 Subject: [PATCH 5/5] removed old directory --- .../CreateRecognitionButton.js | 56 ------------------- 1 file changed, 56 deletions(-) delete mode 100644 react-frontend/src/shared-components/create-reccognition-button/CreateRecognitionButton.js diff --git a/react-frontend/src/shared-components/create-reccognition-button/CreateRecognitionButton.js b/react-frontend/src/shared-components/create-reccognition-button/CreateRecognitionButton.js deleted file mode 100644 index 96f0e1684..000000000 --- a/react-frontend/src/shared-components/create-reccognition-button/CreateRecognitionButton.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import PropTypes from "prop-types"; - -import PlusSign from "shared-components/plus-sign/PlusSign"; //todo depend upon peerly logo - -const ButtonComponent = styled.div` - background: transparent url(${(props) => props.imageUrl}) 90% 60% no-repeat - padding-box; - opacity: 1; - box-shadow: 0px 3px 6px #0000004e; - width: 45px; - height: 45px; - background-color: var(--rust); - border: none; - border-radius: 50%; - margin-top: 7.5px; - margin-left: 7.5px; -`; - -const PlusSignWrapper = styled.div` - position: absolute; - margin-left: 10px; - margin-top: 8px; - font-size: 23px; - color: var(--white); -`; - -const RoundCircle = styled.div` - position: absolute; - background: var(--white) 0% 0% no-repeat padding-box; - box-shadow: 0px 3px 6px #0000004e; - opacity: 1; - border-radius: 50%; - width: 60px; - height: 60px; -`; - -const CreateRecognitionButton = ({ onClick, imageUrl }) => { - return ( - - - - - - - - ); -}; - -CreateRecognitionButton.propTypes = { - onClick: PropTypes.func.isRequired, - imageUrl: PropTypes.string.isRequired, -}; - -export default React.memo(CreateRecognitionButton);