Web: Components: filling-status-line

packages/components/filling-status-line/accordion.js

@@ -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>

packages/components/filling-status-line/index.js

@@ -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>
   );
 };
 

packages/components/filling-status-line/styled-filling-status-line.js

@@ -1 +1,14 @@
-import styled from "styled-components";
+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;
+  }
+`;

public/images/done.react.svg

@@ -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>