From a813a4e57ea4ba6b01b85690a9e7e79c4a5ff057 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Thu, 8 Aug 2024 13:37:24 +0200
Subject: [PATCH 1/2] :sparkles: seprator and wip drag and drop

---
 .../DragAndDrop/classes.module.scss           |  27 +++
 .../DesignSystem/DragAndDrop/index.tsx        |  35 ++++
 .../Separator/classes.module.scss             |  24 +++
 .../DesignSystem/Separator/index.tsx          |  33 ++++
 .../DesignSystem/Typography/index.tsx         |   2 +
 .../Layouts/DesignSystem/classes.module.scss  |   7 +-
 .../Components/Layouts/DesignSystem/index.tsx | 157 ++++++++++--------
 7 files changed, 213 insertions(+), 72 deletions(-)
 create mode 100644 src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/DragAndDrop/index.tsx
 create mode 100644 src/front/Components/DesignSystem/Separator/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/Separator/index.tsx

diff --git a/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss b/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
new file mode 100644
index 00000000..30993fb9
--- /dev/null
+++ b/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
@@ -0,0 +1,27 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: inline-flex;
+	padding: var(--spacing-2, 16px) var(--Radius-2xl, 32px) var(--spacing-2, 16px) var(--spacing-xl, 32px);
+	align-items: center;
+	gap: var(--spacing-4, 32px);
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm, 8px);
+
+		.deposit-document {
+			display: flex;
+			gap: var(--spacing-sm, 8px);
+		}
+	}
+
+	svg{
+		min-width: var(--spacing-3, 24px);
+		min-height: var(--spacing-3, 24px);
+		width: var(--spacing-3, 24px);
+		height: var(--spacing-3, 24px);
+		stroke: var(--color-primary-500);
+	}
+}
diff --git a/src/front/Components/DesignSystem/DragAndDrop/index.tsx b/src/front/Components/DesignSystem/DragAndDrop/index.tsx
new file mode 100644
index 00000000..1fe559a9
--- /dev/null
+++ b/src/front/Components/DesignSystem/DragAndDrop/index.tsx
@@ -0,0 +1,35 @@
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import React from "react";
+import { DocumentPlusIcon } from "@heroicons/react/24/outline";
+
+import classes from "./classes.module.scss";
+import classNames from "classnames";
+import Separator, { ESeperatorColor, ESeperatorDirection } from "../Separator";
+import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "../Button";
+
+type IProps = {};
+
+export default function DragAndDrop(props: IProps) {
+	const {} = props;
+
+	return (
+		<div className={classNames(classes["root"])}>
+			<DocumentPlusIcon />
+			<Separator direction={ESeperatorDirection.VERTICAL} color={ESeperatorColor.STRONG} size={64} />
+			<div className={classes["content"]}>
+				<div className={classes["deposit-document"]}>
+					<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.TEXT_PRIMARY}>
+						Drag and Drop ou
+					</Typography>
+					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.SM}>
+						parcourir
+					</Button>
+				</div>
+
+				<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.TEXT_SECONDARY}>
+					Description
+				</Typography>
+			</div>
+		</div>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Separator/classes.module.scss b/src/front/Components/DesignSystem/Separator/classes.module.scss
new file mode 100644
index 00000000..51b570fd
--- /dev/null
+++ b/src/front/Components/DesignSystem/Separator/classes.module.scss
@@ -0,0 +1,24 @@
+@import "@Themes/constants.scss";
+
+.root {
+	height: 2px;
+	width: 100%;
+	background-color: var(--separator-stroke-default);
+
+	&.vertical {
+		width: 2px;
+		height: 100%;
+	}
+
+	&.light {
+		background-color: var(--separator-stroke-light);
+	}
+
+	&.strong {
+		background-color: var(--separator-stroke-strong);
+	}
+
+	&.contrast {
+		background-color: var(--separator-stroke-contrast);
+	}
+}
diff --git a/src/front/Components/DesignSystem/Separator/index.tsx b/src/front/Components/DesignSystem/Separator/index.tsx
new file mode 100644
index 00000000..21ccbc1e
--- /dev/null
+++ b/src/front/Components/DesignSystem/Separator/index.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import classes from "./classes.module.scss";
+import classNames from "classnames";
+
+export enum ESeperatorColor {
+	LIGHT = "light",
+	DEFAULT = "default",
+	STRONG = "strong",
+	CONTRAST = "contrast",
+}
+
+export enum ESeperatorDirection {
+	HORIZONTAL = "horizontal",
+	VERTICAL = "vertical",
+}
+
+type IProps = {
+	color?: ESeperatorColor;
+	direction?: ESeperatorDirection;
+	size?: number;
+};
+
+export default function Separator(props: IProps) {
+	const { color = ESeperatorColor.DEFAULT, direction = ESeperatorDirection.HORIZONTAL, size } = props;
+
+	return (
+		<div
+			className={classNames(classes["root"], classes[color], classes[direction])}
+			style={direction === ESeperatorDirection.HORIZONTAL ? { width: size } : { height: size }}
+		/>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 584397a6..248cad65 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -149,6 +149,8 @@ export enum ETypoColor {
 	INPUT_ERROR = "--input-error",
 
 	TEXT_ACCENT = "--text-accent",
+	TEXT_PRIMARY = "--text-primary",
+	TEXT_SECONDARY = "--text-secondary",
 
 	CONTRAST_DEFAULT = "--contrast-default",
 	CONTRAST_HOVERED = "--contrast-hovered",
diff --git a/src/front/Components/Layouts/DesignSystem/classes.module.scss b/src/front/Components/Layouts/DesignSystem/classes.module.scss
index c0f72ca1..22111a86 100644
--- a/src/front/Components/Layouts/DesignSystem/classes.module.scss
+++ b/src/front/Components/Layouts/DesignSystem/classes.module.scss
@@ -3,15 +3,16 @@
 	flex-direction: column;
 	gap: 32px;
 	.components {
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
 		max-width: 600px;
+
 		.inputs {
 			display: flex;
 			flex-direction: column;
 			gap: 24px;
 		}
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
 
 		.rows {
 			display: flex;
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 0eab5b90..619f47dd 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -36,6 +36,8 @@ import classes from "./classes.module.scss";
 import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Toggle, { EToggleSize } from "@Front/Components/DesignSystem/Toggle";
+import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
+import DragAndDrop from "@Front/Components/DesignSystem/DragAndDrop";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -83,78 +85,95 @@ export default function DesignSystem() {
 
 	return (
 		<DefaultTemplate title={"DesignSystem"}>
-			<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
 			<Newsletter isOpen={false} />
 			<div className={classes["root"]}>
-				<div />
-				<div className={classes["rows"]}>
-					<CheckboxesInputElement
-						option={{
-							label: "Default",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-					/>
-					<CheckboxesInputElement
-						option={{
-							label: "Checked",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-						checked={true}
-					/>
-					<CheckboxesInputElement
-						option={{
-							label: "Disabled",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-						disabled={true}
-					/>
-					<CheckboxesInputElement
-						option={{
-							label: "Checked & Disabled",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-						checked={true}
-						disabled={true}
-					/>
-				</div>
-
-				<div className={classes["rows"]}>
-					<RadioBox name="document" value={"new client"} description="Test" label="Créer un document" toolTip="test" />
-					<RadioBox
-						name="document"
-						value={"new client"}
-						description="Test"
-						label="Créer un document"
-						toolTip="test"
-						defaultChecked={true}
-					/>
-					<RadioBox
-						name="document"
-						value={"new client"}
-						description="Test"
-						label="Créer un document"
-						toolTip="test"
-						disabled={true}
-					/>
-					<RadioBox
-						name="document"
-						value={"new client"}
-						description="Test"
-						label="Créer un document"
-						toolTip="test"
-						checked={true}
-						disabled={true}
-					/>
-				</div>
+				<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
 				<div className={classes["components"]}>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Drag and Drop</Typography>
+					<DragAndDrop />
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Separators</Typography>
+					<div className={classes["rows"]}>
+						<Separator color={ESeperatorColor.DEFAULT} direction={ESeperatorDirection.HORIZONTAL} />
+						<Separator color={ESeperatorColor.LIGHT} direction={ESeperatorDirection.HORIZONTAL} />
+						<Separator color={ESeperatorColor.STRONG} direction={ESeperatorDirection.HORIZONTAL} />
+						<Separator color={ESeperatorColor.CONTRAST} direction={ESeperatorDirection.HORIZONTAL} />
+					</div>
+					<div className={classes["rows"]} style={{ height: 70, justifyContent: "space-around" }}>
+						<Separator color={ESeperatorColor.DEFAULT} direction={ESeperatorDirection.VERTICAL} />
+						<Separator color={ESeperatorColor.LIGHT} direction={ESeperatorDirection.VERTICAL} />
+						<Separator color={ESeperatorColor.STRONG} direction={ESeperatorDirection.VERTICAL} />
+						<Separator color={ESeperatorColor.CONTRAST} direction={ESeperatorDirection.VERTICAL} />
+					</div>
+
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Checkboxes</Typography>
+					<div className={classes["rows"]}>
+						<CheckboxesInputElement
+							option={{
+								label: "Default",
+								value: "all",
+								description: "Description",
+							}}
+							toolTip="test"
+						/>
+						<CheckboxesInputElement
+							option={{
+								label: "Checked",
+								value: "all",
+								description: "Description",
+							}}
+							toolTip="test"
+							checked={true}
+						/>
+						<CheckboxesInputElement
+							option={{
+								label: "Disabled",
+								value: "all",
+								description: "Description",
+							}}
+							toolTip="test"
+							disabled={true}
+						/>
+						<CheckboxesInputElement
+							option={{
+								label: "Checked & Disabled",
+								value: "all",
+								description: "Description",
+							}}
+							toolTip="test"
+							checked={true}
+							disabled={true}
+						/>
+					</div>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Radio boxes</Typography>
+					<div className={classes["rows"]}>
+						<RadioBox name="document" value={"new client"} description="Test" label="Créer un document" toolTip="test" />
+						<RadioBox
+							name="document"
+							value={"new client"}
+							description="Test"
+							label="Créer un document"
+							toolTip="test"
+							defaultChecked={true}
+						/>
+						<RadioBox
+							name="document"
+							value={"new client"}
+							description="Test"
+							label="Créer un document"
+							toolTip="test"
+							disabled={true}
+						/>
+						<RadioBox
+							name="document"
+							value={"new client"}
+							description="Test"
+							label="Créer un document"
+							toolTip="test"
+							checked={true}
+							disabled={true}
+						/>
+					</div>
+
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Toggle</Typography>
 					<div className={classes["rows"]}>
 						<Toggle size={EToggleSize.MD} />

From b6565833b16904ee06891519c4922bf68fd39c5e Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Thu, 8 Aug 2024 17:49:01 +0200
Subject: [PATCH 2/2] :sparkles: drag and drop

---
 .../DocumentElement/classes.module.scss       |  39 ++++
 .../DragAndDrop/DocumentElement/index.tsx     |  37 ++++
 .../DragAndDrop/classes.module.scss           |  49 ++++-
 .../DesignSystem/DragAndDrop/index.tsx        | 168 +++++++++++++++---
 .../Components/Layouts/DesignSystem/index.tsx |   2 +-
 5 files changed, 266 insertions(+), 29 deletions(-)
 create mode 100644 src/front/Components/DesignSystem/DragAndDrop/DocumentElement/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/DragAndDrop/DocumentElement/index.tsx

diff --git a/src/front/Components/DesignSystem/DragAndDrop/DocumentElement/classes.module.scss b/src/front/Components/DesignSystem/DragAndDrop/DocumentElement/classes.module.scss
new file mode 100644
index 00000000..cdba1ed0
--- /dev/null
+++ b/src/front/Components/DesignSystem/DragAndDrop/DocumentElement/classes.module.scss
@@ -0,0 +1,39 @@
+@import "@Themes/constants.scss";
+
+.root {
+    display: flex;
+    max-width: 357px;
+    width: 100%;
+    gap: var(--spacing-sm, 8px);
+    justify-content: space-between;
+    align-items: center;
+
+    .content {
+        display: flex;
+        gap: var(--spacing-sm, 8px);
+        align-items: center;
+
+        .file-name {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 277px;
+        }
+    }
+
+    svg {
+        min-width: var(--spacing-3, 24px);
+        min-height: var(--spacing-3, 24px);
+        width: var(--spacing-3, 24px);
+        height: var(--spacing-3, 24px);
+        stroke: var(--color-primary-500);
+    }
+
+	.error{
+		min-width: var(--spacing-3, 24px);
+		min-height: var(--spacing-3, 24px);
+		width: var(--spacing-3, 24px);
+		height: var(--spacing-3, 24px);
+		stroke: var(--color-error-500);
+	}
+}
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/DragAndDrop/DocumentElement/index.tsx b/src/front/Components/DesignSystem/DragAndDrop/DocumentElement/index.tsx
new file mode 100644
index 00000000..efb8aa20
--- /dev/null
+++ b/src/front/Components/DesignSystem/DragAndDrop/DocumentElement/index.tsx
@@ -0,0 +1,37 @@
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { CheckCircleIcon, XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import React from "react";
+
+import IconButton, { EIconButtonVariant } from "../../IconButton";
+import Loader from "../../Loader";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	isLoading: boolean;
+	file: File | null;
+	onRemove: () => void;
+	error?: string;
+};
+
+export default function DocumentElement(props: IProps) {
+	const { isLoading, onRemove, file, error } = props;
+
+	return (
+		<div className={classes["root"]}>
+			<div className={classes["content"]}>
+				{isLoading ? <Loader /> : !error ? <CheckCircleIcon /> : <XCircleIcon className={classes["error"]} />}
+				{error && (
+					<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.COLOR_ERROR_500} className={classes["file-name"]}>
+						{error}
+					</Typography>
+				)}
+				{file && !error && (
+					<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.TEXT_SECONDARY} className={classes["file-name"]}>
+						{file.name}
+					</Typography>
+				)}
+			</div>
+			<IconButton onClick={onRemove} icon={<XMarkIcon />} variant={error ? EIconButtonVariant.ERROR : EIconButtonVariant.NEUTRAL} />
+		</div>
+	);
+}
diff --git a/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss b/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
index 30993fb9..0c3fae28 100644
--- a/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
+++ b/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
@@ -2,22 +2,57 @@
 
 .root {
 	display: inline-flex;
+	flex-direction: column;
+	gap: var(--spacing-3, 24px);
+
+	width: fit-content;
 	padding: var(--spacing-2, 16px) var(--Radius-2xl, 32px) var(--spacing-2, 16px) var(--spacing-xl, 32px);
-	align-items: center;
-	gap: var(--spacing-4, 32px);
+
+	border-radius: var(--Radius-md, 8px);
+	border: 1px dashed var(--dropdown-input-border-hovered, #b4bec5);
+
+	&:hover {
+		border-color: var(--dropdown-input-border-expanded);
+		background: var(--primary-weak-higlight, #e5eefa);
+	}
 
 	.content {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-sm, 8px);
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-4, 32px);
 
-		.deposit-document {
+		.browse-document-container {
 			display: flex;
+			flex-direction: column;
 			gap: var(--spacing-sm, 8px);
+
+			.browse-document {
+				display: flex;
+				gap: var(--spacing-sm, 8px);
+
+				&.desktop {
+					@media screen and (max-width: $screen-s) {
+						display: none;
+					}
+				}
+
+				&.mobile {
+					display: none;
+					@media screen and (max-width: $screen-s) {
+						display: flex;
+					}
+				}
+			}
 		}
 	}
 
-	svg{
+	.documents {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm, 8px);
+	}
+
+	svg {
 		min-width: var(--spacing-3, 24px);
 		min-height: var(--spacing-3, 24px);
 		width: var(--spacing-3, 24px);
diff --git a/src/front/Components/DesignSystem/DragAndDrop/index.tsx b/src/front/Components/DesignSystem/DragAndDrop/index.tsx
index 1fe559a9..16ce9619 100644
--- a/src/front/Components/DesignSystem/DragAndDrop/index.tsx
+++ b/src/front/Components/DesignSystem/DragAndDrop/index.tsx
@@ -1,35 +1,161 @@
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
-import React from "react";
 import { DocumentPlusIcon } from "@heroicons/react/24/outline";
-
-import classes from "./classes.module.scss";
 import classNames from "classnames";
-import Separator, { ESeperatorColor, ESeperatorDirection } from "../Separator";
-import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "../Button";
+import React, { useCallback, useRef, useState } from "react";
 
-type IProps = {};
+import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "../Button";
+import Separator, { ESeperatorColor, ESeperatorDirection } from "../Separator";
+import classes from "./classes.module.scss";
+import DocumentElement from "./DocumentElement";
+
+type IProps = {
+	name?: string;
+	title: string;
+	description: string;
+};
+
+type IMimeTypes = {
+	extension: string;
+	size: number;
+};
+
+const mimeTypesAccepted: { [key: string]: IMimeTypes } = {
+	"application/pdf": {
+		extension: "pdf",
+		size: 41943040,
+	},
+	"image/jpeg": {
+		extension: "jpeg",
+		size: 41943040,
+	},
+	"image/png": {
+		extension: "png",
+		size: 41943040,
+	},
+	"image/jpg": {
+		extension: "jpg",
+		size: 41943040,
+	},
+};
+
+type IDocument = {
+	id: string;
+	file: File | null;
+	isLoading: boolean;
+	error?: string;
+};
 
 export default function DragAndDrop(props: IProps) {
-	const {} = props;
+	const { name, title, description } = props;
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	const [documents, setDocuments] = useState<IDocument[]>([]);
+
+	const handleFiles = useCallback((files: File[]) => {
+		files.forEach((file) => {
+			setDocuments((prevDocs) => [...prevDocs, { id: file.name, file: file, isLoading: true }]);
+			setTimeout(() => {
+				if (mimeTypesAccepted[file.type]) {
+					const newDoc: IDocument = { id: file.name, file, isLoading: false };
+					setDocuments((prevDocs) => prevDocs.map((doc) => (doc.id === newDoc.id ? newDoc : doc)));
+				} else {
+					const errorDoc: IDocument = { id: file.name, file: null, isLoading: false, error: "Type de fichier non accepté" };
+					setDocuments((prevDocs) => prevDocs.map((doc) => (doc.id === errorDoc.id ? errorDoc : doc)));
+				}
+			}, 1000);
+		});
+	}, []);
+
+	const handleDrop = useCallback(
+		(event: React.DragEvent<HTMLDivElement>) => {
+			event.preventDefault();
+			const files = Array.from(event.dataTransfer.files);
+			handleFiles(files);
+		},
+		[handleFiles],
+	);
+
+	const handleRemove = useCallback((id: string) => {
+		setDocuments((prevDocs) => prevDocs.filter((doc) => doc.id !== id));
+	}, []);
+
+	const handleBrowse = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>) => {
+			const files = Array.from(event.target.files || []);
+			handleFiles(files);
+		},
+		[handleFiles],
+	);
+
+	const triggerFileInput = () => {
+		if (fileInputRef.current) {
+			fileInputRef.current.click();
+		}
+	};
 
 	return (
-		<div className={classNames(classes["root"])}>
-			<DocumentPlusIcon />
-			<Separator direction={ESeperatorDirection.VERTICAL} color={ESeperatorColor.STRONG} size={64} />
+		<div className={classNames(classes["root"])} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
 			<div className={classes["content"]}>
-				<div className={classes["deposit-document"]}>
-					<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.TEXT_PRIMARY}>
-						Drag and Drop ou
-					</Typography>
-					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.SM}>
-						parcourir
-					</Button>
-				</div>
+				<DocumentPlusIcon />
+				<Separator direction={ESeperatorDirection.VERTICAL} color={ESeperatorColor.STRONG} size={64} />
+				<div className={classes["browse-document-container"]}>
+					<div className={classNames(classes["browse-document"], classes["desktop"])}>
+						<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.TEXT_PRIMARY}>
+							{title}
+						</Typography>
+						<Button
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}
+							onClick={triggerFileInput}>
+							{inputFile()}
+							parcourir
+						</Button>
+					</div>
 
-				<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.TEXT_SECONDARY}>
-					Description
-				</Typography>
+					<div className={classNames(classes["browse-document"], classes["mobile"])}>
+						<Button
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}
+							onClick={triggerFileInput}>
+							{inputFile()}
+							Ajouter un document
+						</Button>
+					</div>
+
+					<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.TEXT_SECONDARY}>
+						{description}
+					</Typography>
+				</div>
 			</div>
+			{documents.length > 0 && (
+				<div className={classes["documents"]}>
+					{documents.map((doc) => (
+						<DocumentElement
+							key={doc.id}
+							isLoading={doc.isLoading}
+							file={doc.file}
+							onRemove={() => handleRemove(doc.id)}
+							error={doc.error}
+						/>
+					))}
+				</div>
+			)}
 		</div>
 	);
+
+	function inputFile() {
+		return (
+			<input
+				ref={fileInputRef}
+				name={name}
+				type="file"
+				multiple
+				accept={Object.keys(mimeTypesAccepted).join(",")}
+				onChange={handleBrowse}
+				hidden
+			/>
+		);
+	}
 }
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 619f47dd..187dc05f 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -90,7 +90,7 @@ export default function DesignSystem() {
 				<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Drag and Drop</Typography>
-					<DragAndDrop />
+					<DragAndDrop name="test" title="Upload de document" description="Description" />
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Separators</Typography>
 					<div className={classes["rows"]}>
 						<Separator color={ESeperatorColor.DEFAULT} direction={ESeperatorDirection.HORIZONTAL} />