Web: Components: filling-status-line
This commit is contained in:
parent
b4209900aa
commit
9d52d935b8
@ -2,6 +2,7 @@ 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";
|
||||
@ -9,8 +10,7 @@ import Avatar from "../avatar";
|
||||
|
||||
const AccordionItem = styled.div`
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
outline: 1px solid grey;
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
const AccordionItemInfo = styled.div`
|
||||
display: flex;
|
||||
@ -25,13 +25,28 @@ const AccordionItemInfo = styled.div`
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-button-rotate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
`;
|
||||
const AccordionItemHistory = styled.div`
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 5px 15px 42px;
|
||||
padding: 15px 5px 15px 15px;
|
||||
`;
|
||||
|
||||
const StyledDivider = styled.div`
|
||||
height: 40px;
|
||||
width: 2px;
|
||||
background-color: #a3a9ae;
|
||||
margin-right: 28px;
|
||||
`;
|
||||
|
||||
const Accordion = ({ avatar, displayName, role, status, date }) => {
|
||||
@ -74,7 +89,7 @@ const Accordion = ({ avatar, displayName, role, status, date }) => {
|
||||
</Box>
|
||||
</Box>
|
||||
<IconButton
|
||||
className="icon-button"
|
||||
className={isOpen ? "icon-button-rotate" : "icon-button"}
|
||||
size={16}
|
||||
iconName={ArrowReactSvgUrl}
|
||||
isOpen={isOpen}
|
||||
@ -82,9 +97,13 @@ const Accordion = ({ avatar, displayName, role, status, date }) => {
|
||||
</AccordionItemInfo>
|
||||
{isOpen && (
|
||||
<AccordionItemHistory>
|
||||
<Text fontSize="12px" lineHeight="16px" color="#657077">
|
||||
{status}
|
||||
</Text>
|
||||
<Box displayProp="flex" alignItems="center">
|
||||
<StyledDivider />
|
||||
<Text fontSize="12px" lineHeight="16px" color="#657077">
|
||||
{status}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Text fontSize="12px" lineHeight="16px" color="#657077">
|
||||
{date}
|
||||
</Text>
|
||||
|
@ -1,16 +1,16 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import Accordion from "./accordion.js";
|
||||
import { Data } from "./data.js";
|
||||
|
||||
const FillingStatusContainer = styled.div`
|
||||
width: 100%;
|
||||
max-width: 425px;
|
||||
`;
|
||||
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 = () => {
|
||||
return (
|
||||
<FillingStatusContainer>
|
||||
<StyledFillingStatusContainer>
|
||||
{Data.map((data) => {
|
||||
return (
|
||||
<Accordion
|
||||
@ -23,7 +23,13 @@ const FillingStatusLine = () => {
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</FillingStatusContainer>
|
||||
<Box displayProp="flex" alignItems="center">
|
||||
<DoneReactSvg className="done-icon" />
|
||||
<Text fontSize="14px" lineHeight="16px" color="#A3A9AE" isBold={true}>
|
||||
Done
|
||||
</Text>
|
||||
</Box>
|
||||
</StyledFillingStatusContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1 +1,14 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const StyledFillingStatusContainer = styled.div`
|
||||
width: 100%;
|
||||
max-width: 425px;
|
||||
outline: 1px solid grey;
|
||||
padding: 10px;
|
||||
|
||||
.done-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
`;
|
||||
|
4
public/images/done.react.svg
Normal file
4
public/images/done.react.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="19" cy="19" r="18" stroke="#A3A9AE" stroke-width="2"/>
|
||||
<path d="M13.5 18.5L17.1464 22.1464C17.3417 22.3417 17.6583 22.3417 17.8536 22.1464L25.5 14.5" stroke="#A3A9AE" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
After Width: | Height: | Size: 324 B |
Loading…
Reference in New Issue
Block a user