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] :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} />