create recognition component

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

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

react-frontend/src/core-components/modal/ModalComponent.js

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

react-frontend/src/create-recognition/AddRecognitionPopup.js

@@ -0,0 +1,49 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import Image from "shared-components/user-image-name/UserImageName";
+import { Modal } from "core-components/modal/ModalComponent";
+import { Button } from "core-components/button/ButtonComponent";
+
+const Border = styled.fieldset`
+  border: 1px solid;
+  border-radius: 8px;
+  opacity: 1;
+  margin-left: 5%;
+  margin-right: 5%;
+`;
+
+const Legend = styled.legend`
+  width: auto;
+  margin-left: 10%;
+  font-size: 0.75em;
+`;
+
+const AddRecognition = ({ show, handleClose, recognitionToImage, comment }) => (
+  <Modal show={show} onHide={handleClose} centered={true} size="xl">
+    <Modal.Header closeButton />
+    <Image imageSrc={recognitionToImage} />
+    <Modal.Body>
+      <Border>
+        <Legend>Your Note</Legend>
+        {comment}
+      </Border>
+    </Modal.Body>
+    <Button variant="secondary" onClick={handleClose}>
+      Close
+    </Button>
+    <Button variant="primary" onClick={handleClose}>
+      Save Changes
+    </Button>
+  </Modal>
+);
+
+AddRecognition.propTypes = {
+  show: PropTypes.bool,
+  handleClose: PropTypes.func,
+  comment: PropTypes.string,
+  recognitionToImage: PropTypes.string,
+};
+
+export default AddRecognition;

react-frontend/src/create-recognition/CreateRecognitionCard.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { Card } from "core-components/card/card";
+import CardBody from "create-recognition/CreateRecognitionCardBody";
+
+const CreateRecognitionCard = () => (
+  <Card>
+    <CardBody />
+  </Card>
+);
+
+export default CreateRecognitionCard;

react-frontend/src/create-recognition/CreateRecognitionCardBody.js

@@ -0,0 +1,107 @@
+import React from "react";
+import { useState } from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { ListGroup } from "react-bootstrap";
+
+import ImageComponent from "core-components/image/ImageComponent";
+import { Card } from "core-components/card/card";
+import { Form } from "core-components/form/FormComponent";
+import CoreValue from "create-recognition/coreValues";
+import { Button } from "core-components/button/ButtonComponent";
+import Image from "shared-components/user-image-name/UserImageName";
+import AddRecognition from "create-recognition/AddRecognitionPopup";
+
+const Wrapper = styled.section`
+  margin-left: 10%;
+  margin-right: 10%;
+  align-items: center;
+`;
+const WrapperForSelectValue = styled.section`
+  margin-left: 18%;
+  margin-right: 18%;
+`;
+
+const coreValues = [
+  {
+    id: 1,
+    coreValueName: "core Value Name 1",
+  },
+  {
+    id: 2,
+    coreValueName: "core Value Name 2",
+  },
+  {
+    id: 3,
+    coreValueName: "core Value Name 3",
+  },
+  {
+    id: 4,
+    coreValueName: "core Value Name 4",
+  },
+];
+
+const CreateRecognitionCardBody = ({
+  EmployeeName,
+  EmployeeImage,
+  Hi5Image,
+  recognitionToImage,
+}) => {
+  const [comment, addComment] = useState(false);
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const onClickAddComment = () => {
+    addComment(true);
+  };
+  const addCommentText = (event) => {
+    addComment(event.target.value);
+  };
+  return (
+    <Card>
+      <WrapperForSelectValue>
+        <Image imageSrc={EmployeeImage} EmployeeName={EmployeeName}></Image>
+        <ImageComponent alt="Hi5Image" img={Hi5Image} src="" />
+        <div> Select Value </div>
+      </WrapperForSelectValue>
+      <Wrapper>
+        <ListGroup horizontal>
+          <CoreValue coreValues={coreValues} />
+        </ListGroup>
+        <div className="text-center">
+          {comment ? (
+            <Form.Control
+              as="textarea"
+              rows="3"
+              onChange={(event) => {
+                addCommentText(event);
+              }}
+            ></Form.Control>
+          ) : (
+            <Button onClick={onClickAddComment}> Add Comments </Button>
+          )}
+        </div>
+        <div className="text-center">
+          <Button onClick={handleShow}> Done </Button>
+        </div>
+      </Wrapper>
+      <AddRecognition
+        show={show}
+        handleClose={handleClose}
+        recognitionToImage={recognitionToImage}
+        EmployeeName={EmployeeName}
+        addComment={addComment}
+      />
+    </Card>
+  );
+};
+
+CreateRecognitionCardBody.propTypes = {
+  EmployeeName: PropTypes.string,
+  EmployeeImage: PropTypes.string,
+  recognitionToImage: PropTypes.string,
+  comment: PropTypes.string,
+  Hi5Image: PropTypes.string,
+};
+
+export default CreateRecognitionCardBody;

react-frontend/src/create-recognition/CreateRecognitionCardHeader.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { Card } from "core-components/card/card";
+
+const CreateRecognitionCardHeader = () => <Card.Header> </Card.Header>;
+
+export default CreateRecognitionCardHeader;

react-frontend/src/create-recognition/coreValues.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import CoreValue from "shared-components/core-value/coreValue";
+
+const CoreValues = ({ coreValues, fontSize, backgroundColor }) =>
+  coreValues.map((coreValue, index) => (
+    <CoreValue
+      key={index}
+      coreValueName={coreValue.coreValueName}
+      fontSize={fontSize}
+      backgroundColor={backgroundColor}
+    />
+  ));
+
+CoreValues.propTypes = {
+  coreValues: PropTypes.arrayOf(
+    PropTypes.shape({
+      coreValueName: PropTypes.string.isRequired,
+      fontSize: PropTypes.string,
+      backgroundColor: PropTypes.string,
+    })
+  ),
+};
+
+export default CoreValues;

react-frontend/src/shared-components/core-value/CoreValueText.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Styled from "styled-components";
+
+const Wrapper = Styled.div`
+  font-size: ${({ fontSize }) => fontSize};
+`;
+
+const CoreValueComponent = ({ coreValueName, fontSize }) => {
+  return <Wrapper fontSize={fontSize}>{coreValueName}</Wrapper>;
+};
+
+CoreValueComponent.defaultProps = {
+  fontSize: "1em",
+};
+
+CoreValueComponent.propTypes = {
+  coreValueName: PropTypes.string.isRequired,
+  fontSize: PropTypes.string,
+};
+
+export default CoreValueComponent;

react-frontend/src/shared-components/core-value/coreValue.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Styled from "styled-components";
+
+import CoreValueIcon from "shared-components/core-value-icon/coreValueIconComponent"; //todo: will work after core value addition
+import CoreValueText from "shared-components/core-value/CoreValueText";
+
+const Wrapper = Styled.div`
+  max-width: 70px;
+  min-height: 100px;
+  border-radius: 10px;
+  text-align: center;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  opacity: 1;
+`;
+
+const CoreValueComponent = ({ coreValueName, fontSize, backgroundColor }) => {
+  const onClick = () => {
+    // todo
+  };
+  return (
+    <Wrapper
+      className="m-auto"
+      onClick={onClick}
+      backgroundColor={backgroundColor}
+    >
+      <CoreValueIcon size="50" color="red" />
+      <CoreValueText coreValueName={coreValueName} fontSize={fontSize} />
+    </Wrapper>
+  );
+};
+
+CoreValueComponent.defaultProps = {
+  backgroundColor: "var(--rust)",
+};
+
+CoreValueComponent.propTypes = {
+  coreValueName: PropTypes.string.isRequired,
+  fontSize: PropTypes.string,
+  backgroundColor: PropTypes.string,
+};
+
+export default CoreValueComponent;