✨ Beginning document deposit component

src/front/Assets/Icons/deposit-document.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 2.5H7.5C6.83696 2.5 6.20107 2.76339 5.73223 3.23223C5.26339 3.70107 5 4.33696 5 5V25C5 25.663 5.26339 26.2989 5.73223 26.7678C6.20107 27.2366 6.83696 27.5 7.5 27.5H22.5C23.163 27.5 23.7989 27.2366 24.2678 26.7678C24.7366 26.2989 25 25.663 25 25V10L17.5 2.5Z" stroke="#320756" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 22.5V15" stroke="#C5B2D4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.25 18.75H18.75" stroke="#C5B2D4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 2.5V10H25" stroke="#320756" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/front/Components/DesignSystem/DepositDocument/classes.module.scss

@@ -0,0 +1,39 @@
+.root {
+	padding: 24px;
+	background-color: white;
+	border: 1px dashed #e7e7e7;
+	.top-container {
+		display: flex;
+		align-items: center;
+
+		.left {
+			margin-right: 28px;
+		}
+
+		.separator {
+			background-color: #939393;
+			width: 1px;
+            align-self: stretch;
+		}
+
+		.right {
+			margin-left: 18px;
+
+			.title {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+		}
+	}
+
+	.bottom-container {
+        .add-button{
+            .add-document{
+                display: flex;
+                align-items: center;
+                gap: 14px;
+            }
+        }
+	}
+}

src/front/Components/DesignSystem/DepositDocument/index.tsx

@@ -0,0 +1,51 @@
+import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg";
+import PlusIcon from "@Assets/Icons/plus.svg";
+import Image from "next/image";
+import React from "react";
+
+import Button, { EButtonVariant } from "../Button";
+import Tooltip from "../ToolTip";
+import Typography, { ITypo, ITypoColor } from "../Typography";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	title: string;
+	dateAsked: Date;
+};
+type IState = {};
+
+export default class DepositDocument extends React.Component<IProps, IState> {
+	public override render(): JSX.Element {
+		return (
+			<div className={classes["root"]}>
+				<div className={classes["top-container"]}>
+					<div className={classes["left"]}>
+						<Image src={DepositDocumentIcon} alt="Deposit document" />
+					</div>
+					<div className={classes["separator"]} />
+					<div className={classes["right"]}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
+							{this.props.title} <Tooltip text={"Blabla"} />
+						</Typography>
+						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
+							Demandé par le notaire le {this.formatDate(this.props.dateAsked)}
+						</Typography>
+					</div>
+				</div>
+				<div className={classes["bottom-container"]}>
+					<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+							Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
+						</Typography>
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
+	private addDocument() {}
+
+	private formatDate(date: Date) {
+		return date.toLocaleDateString("fr-FR");
+	}
+}

src/front/Components/DesignSystem/Typography/classes.module.scss

@@ -130,6 +130,10 @@
 		color: var(--purple-flash);
 	}
 
+	&.pink-flash {
+		color: var(--pink-flash);
+	}
+
 	&.green-flash {
 		color: var(--green-flash);
 	}

src/front/Components/DesignSystem/Typography/index.tsx

@@ -35,6 +35,7 @@ export enum ITypoColor {
 	GREY = "grey",
 	BLACK = "black",
 	PURPLE_FLASH = "purple-flash",
+	PINK_FLASH = "pink-flash",
 	GREEN_FLASH = "green-flash",
 	ORANGE_FLASH = "orange-flash",
 	RED_FLASH = "red-flash",

src/front/Components/Layouts/ClientDashboard/index.tsx

@@ -1,12 +1,13 @@
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import Base from "@Front/Components/Layouts/Base";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import React from "react";
 
 import classes from "./classes.module.scss";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
-import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 
 type IProps = {};
 type IState = {
@@ -30,12 +31,12 @@ export default class ClientDashboard extends Base<IProps, IState> {
 					{this.renderHeader()}
 					<div className={classes["sub-container"]}>
 						<div className={classes["content"]}>
-							<div className={classes["component-to-replace"]}></div>
+							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
-							<div className={classes["component-to-replace"]}></div>
+							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
-							<div className={classes["component-to-replace"]}></div>
+							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
-							<div className={classes["component-to-replace"]}></div>
+							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
-							<div className={classes["component-to-replace"]}></div>
+							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
-							<div className={classes["component-to-replace"]}></div>
+							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
 						</div>
 						<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
 						<Typography typo={ITypo.P_16} className={classes["text"]}>
@@ -62,7 +63,7 @@ export default class ClientDashboard extends Base<IProps, IState> {
 								Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
 								document correspondant.
 							</Typography>
-							<div className={classes["component-to-replace"]}></div>
+							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
 						</div>
 					</Confirm>
 				</div>
@@ -84,7 +85,7 @@ export default class ClientDashboard extends Base<IProps, IState> {
 					</Typography>
 
 					<Typography typo={ITypo.P_16} className={classes["text"]}>
-						Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.
Veuillez
+						Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.Veuillez
 						glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
 						document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à
 						l’aide du bouton ci-dessus.