diff --git a/packages/components/filling-status-line/accordion.js b/packages/components/filling-status-line/accordion.js deleted file mode 100644 index a587eb8e9c..0000000000 --- a/packages/components/filling-status-line/accordion.js +++ /dev/null @@ -1,211 +0,0 @@ -import React, { useState } from "react"; -import styled from "styled-components"; - -import ArrowReactSvgUrl from "PUBLIC_DIR/images/arrow.react.svg?url"; - -import IconButton from "../icon-button"; -import Text from "../text"; -import Box from "../box"; -import Avatar from "../avatar"; - -const AccordionItem = styled.div` - width: 100%; -`; -const AccordionItemInfo = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - height: 38px; - padding: 18px 0; - - .user-avatar { - padding 1px; - border: 2px solid ${(props) => (props.finished ? "#4781D1" : "#A3A9AE")}; - border-radius: 50%; - } - - .icon-button { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transform: rotate(90deg); - } - - .icon-button-rotate { - path { - fill: #4781d1; - } - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transform: rotate(270deg); - } -`; - -const AccordionItemHistory = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - padding-left: 15px; -`; - -const AccordionItemDetailHistory = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - padding-left: 15px; -`; - -const ItemWrapper = styled.div` - display: flex; - align-items: center; - border-left: 2px ${(props) => (props.finished ? "solid" : "dashed")}; - border-color: ${(props) => (props.finished ? "#4781D1" : "#A3A9AE")}; - min-height: 40px; - margin: ${(props) => (props.finished ? "0" : "2px 0")}; - - .filled-status-text { - color: ${(props) => (props.finished ? "#4781D1" : "#657077")}; - } -`; - -const Accordion = ({ - avatar, - displayName, - role, - startFillingStatus, - startFillingDate, - filledAndSignedStatus, - filledAndSignedDate, - returnedByUser, - returnedByUserDate, - comment, - finished, -}) => { - const [isOpen, setIsOpen] = useState(false); - - return ( - - setIsOpen(!isOpen)}> - - - - - - {displayName} - - - {role} - - - - - - - - - - {filledAndSignedStatus} - - - - - {filledAndSignedDate} - - - - {isOpen && ( - <> - - - - {startFillingStatus} - - - - - {startFillingDate} - - - - {returnedByUser && ( - - - - {returnedByUser} - - - - - {returnedByUserDate} - - - )} - - {comment && ( - - - - {comment} - - - - )} - - )} - - ); -}; -export default Accordion; diff --git a/packages/components/filling-status-line/filling-status-accordion.js b/packages/components/filling-status-line/filling-status-accordion.js new file mode 100644 index 0000000000..6242b04536 --- /dev/null +++ b/packages/components/filling-status-line/filling-status-accordion.js @@ -0,0 +1,148 @@ +import React, { useState } from "react"; +import { ReactSVG } from "react-svg"; +import { AccordionItem } from "./styled-filling-status-line"; + +import ArrowReactSvgUrl from "PUBLIC_DIR/images/arrow.react.svg?url"; +import Text from "../text"; +import Box from "../box"; +import Avatar from "../avatar"; + +const FillingStatusAccordion = ({ + avatar, + displayName, + role, + startFilling, + startFillingDate, + filledAndSigned, + filledAndSignedDate, + returnedByUser, + returnedDate, + comment, + isDone, + isInterrupted, +}) => { + const [isOpen, setIsOpen] = useState(false); + + const onClickHandler = () => { + setIsOpen((prev) => !prev); + }; + + return ( + +
+ + + + + + {displayName} + + + {role} + + + + +
+ + {isOpen ? ( + <> +
+
+ + {startFilling} + +
+ + + {startFillingDate} + +
+ + {returnedByUser && ( +
+
+ + {returnedByUser} + +
+ + + {returnedDate} + +
+ )} + + {comment && ( +
+
+ + {comment} + +
+
+ )} + + {isDone && ( +
+
+ + {filledAndSigned} + +
+ + + {filledAndSignedDate} + +
+ )} + + ) : ( +
+
+ + {filledAndSigned} + +
+ + + {filledAndSignedDate} + +
+ )} + + ); +}; +export default FillingStatusAccordion; diff --git a/packages/components/filling-status-line/index.js b/packages/components/filling-status-line/index.js index ccbc0a816a..207d1af990 100644 --- a/packages/components/filling-status-line/index.js +++ b/packages/components/filling-status-line/index.js @@ -1,46 +1,97 @@ import React from "react"; -import Accordion from "./accordion.js"; +import PropTypes from "prop-types"; +import { ReactSVG } from "react-svg"; +import { mockData } from "./mockData.js"; +import { FillingStatusContainer } from "./styled-filling-status-line.js"; +import FillingStatusAccordion from "./filling-status-accordion.js"; +import StatusDoneReactSvgUrl from "PUBLIC_DIR/images/done.react.svg?url"; +import StatusInterruptedSvgUrl from "PUBLIC_DIR/images/interrupted.react.svg?url"; -import DoneReactSvg from "PUBLIC_DIR/images/done.react.svg"; -import { StyledFillingStatusContainer } from "./styled-filling-status-line.js"; import Text from "../text"; import Box from "../box"; -import { Data } from "./data.js"; -const FillingStatusLine = () => { +const FillingStatusLine = ({ + statusDoneText, + statusInterruptedText, + statusDone, + statusInterrupted, +}) => { return ( - - {Data.map((data) => { + + {mockData.map((data) => { return ( - ); })} - - - - Done - - - + {statusInterrupted ? ( + + + + {statusInterruptedText} + + + ) : ( + + + + {statusDoneText} + + + )} + ); }; +FillingStatusLine.propTypes = { + /** Accepts id */ + id: PropTypes.string, + /** Accepts class */ + className: PropTypes.string, + /** Filling status done text*/ + statusDoneText: PropTypes.string, + /** Filling status interrupted text*/ + statusInterruptedText: PropTypes.string, + /** Filling status done*/ + statusDone: PropTypes.bool, + /** Filling status interrupted*/ + statusInterrupted: PropTypes.bool, +}; + +FillingStatusLine.defaultProps = { + statusDoneText: "Done", + statusInterruptedText: "Interrupted", + statusDone: true, + statusInterrupted: false, +}; + export default FillingStatusLine; diff --git a/packages/components/filling-status-line/data.js b/packages/components/filling-status-line/mockData.js similarity index 80% rename from packages/components/filling-status-line/data.js rename to packages/components/filling-status-line/mockData.js index e3277fb14f..4150e48cb8 100644 --- a/packages/components/filling-status-line/data.js +++ b/packages/components/filling-status-line/mockData.js @@ -1,4 +1,4 @@ -export const Data = [ +export const mockData = [ { id: 0, displayName: "Lydia Calzoni", @@ -9,10 +9,8 @@ export const Data = [ filledAndSignedDate: "26.01.2023 13:56", returnedByUser: "Returned by Teacher", returnedByUserDate: "25.01.2023 13:56", - comment: - "The registration block is filled in incorrectly. It is necessary to specify the user ID, and the email is specified. The user ID can be viewed on the profile page.", + comment: "The registration block is filled in incorrectly. It is necessary to specify the user ID, and the email is specified. The user ID can be viewed on the profile page.", avatar: null, - finished: true, }, { id: 1, @@ -26,7 +24,6 @@ export const Data = [ returnedByUserDate: "22.01.2023 13:56", comment: null, avatar: null, - finished: true, }, { id: 2, @@ -40,6 +37,5 @@ export const Data = [ returnedByUserDate: null, comment: null, avatar: null, - finished: false, }, ]; diff --git a/packages/components/filling-status-line/styled-filling-status-line.js b/packages/components/filling-status-line/styled-filling-status-line.js index a8085b523e..c8c656031b 100644 --- a/packages/components/filling-status-line/styled-filling-status-line.js +++ b/packages/components/filling-status-line/styled-filling-status-line.js @@ -1,13 +1,105 @@ import styled from "styled-components"; -export const StyledFillingStatusContainer = styled.div` +const FillingStatusContainer = styled.div` width: 100%; max-width: 425px; padding: 10px; - .done-icon { - width: 32px; - height: 32px; + .status-done-text { + color: ${(props) => (props.isDone ? "#4781D1" : "#A3A9AE")}; + } + + .status-done-icon { + circle, + path { + stroke: ${(props) => (props.isDone ? "#4781D1" : "#A3A9AE")}; + } + } + + .status-interrupted-text { + color: ${(props) => props.isInterrupted && "#F2675A"}; + } + + .status-interrupted-icon { + circle, + path { + stroke: ${(props) => props.isInterrupted && "#F2675A"}; + } + } + + .status-done-icon, + .status-interrupted-icon { margin-right: 10px; } `; + +const AccordionItem = styled.div` + width: 100%; + + .accordion-item-info { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + height: 38px; + padding: 18px 0; + + .user-avatar { + padding 1px; + border: 2px solid #A3A9AE; + border-color: ${(props) => (props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")}; + border-radius: 50%; + } + + .accordion-displayname { + color: #333333; + } + + .accordion-role { + color: #657077; + } + + .arrow-icon { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transform: ${(props) => props.isOpen ? "rotate(270deg)" : "rotate(90deg)"}; + path { + fill: ${(props) => (props.isOpen ? "#4781d1" : "#A3A9AE")}; + } + } + } + + .accordion-item-history { + display: flex; + align-items: center; + justify-content: space-between; + padding-left: 15px; + } + + .accordion-item-wrapper { + display: flex; + align-items: center; + min-height: 40px; + margin: ${(props) => (props.isDone || props.isInterrupted ? "0" : "2px 0")}; + border-left: 2px ${(props) => props.isDone || props.isInterrupted ? "solid" : "dashed"} #A3A9AE; + border-color: ${(props) => (props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")}; + + .status-text { + margin-left: 15px; + color: #657077; + } + + .status-date { + color: #657077; + } + + .filled-status-text { + margin-left: 15px; + color: ${(props) => (props.isDone ? "#4781D1" : "#657077")}; + } + } +`; + +export { FillingStatusContainer, AccordionItem }; diff --git a/public/images/interrupted.react.svg b/public/images/interrupted.react.svg new file mode 100644 index 0000000000..0fdc78761b --- /dev/null +++ b/public/images/interrupted.react.svg @@ -0,0 +1,4 @@ + + + +