From b39662f3955c4c39f11e99e8566c788f87b75d60 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Fri, 26 Jul 2024 11:05:13 +0200
Subject: [PATCH] :sparkles: add option nav

---
 .../DropdownOption/classes.module.scss        | 12 ++++++
 .../DropdownMenu/DropdownOption/index.tsx     | 38 +++++++++++++++----
 .../DesignSystem/Dropdown/index.tsx           | 10 ++++-
 .../Components/Layouts/DesignSystem/index.tsx |  4 ++
 4 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/classes.module.scss
index 884a962d..e959747b 100644
--- a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/classes.module.scss
+++ b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/classes.module.scss
@@ -10,6 +10,18 @@
 
 	background: var(--dropdown-option-background-default, #fff);
 
+	svg {
+		width: 24px;
+		height: 24px;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		flex: 1 0 0;
+	}
+
 	&:hover {
 		background-color: var(--dropdown-option-background-hovered);
 	}
diff --git a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/index.tsx b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/index.tsx
index 05be3eb9..1970ab48 100644
--- a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/index.tsx
+++ b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption/index.tsx
@@ -1,13 +1,13 @@
+import IconButton from "@Front/Components/DesignSystem/IconButton";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { useCallback } from "react";
 
 import classes from "./classes.module.scss";
-import IconButton from "@Front/Components/DesignSystem/IconButton";
 
 export type IOption = {
 	id: string;
-	label: string;
+	label: string | { text: string; subtext: string };
 };
 
 type IProps = {
@@ -23,12 +23,34 @@ export default function DropdownOption(props: IProps) {
 
 	return (
 		<div className={classes["root"]} onClick={handleOnClick}>
-			<Typography
-				typo={isActive ? ETypo.TEXT_MD_SEMIBOLD : ETypo.TEXT_MD_REGULAR}
-				color={isActive ? ETypoColor.DROPDOWN_CONTRAST_ACTIVE : ETypoColor.DROPDOWN_CONTRAST_DEFAULT}>
-				{option.label}
-			</Typography>
-			{isActive && <IconButton icon={<CheckIcon />} />}
+			{getContent(option.label)}
+			{isActive && <CheckIcon />}
 		</div>
 	);
+
+	function getContent(label: string | { text: string; subtext: string }) {
+		if (typeof label === "string") {
+			return (
+				<Typography
+					typo={isActive ? ETypo.TEXT_MD_SEMIBOLD : ETypo.TEXT_MD_REGULAR}
+					color={isActive ? ETypoColor.DROPDOWN_CONTRAST_ACTIVE : ETypoColor.DROPDOWN_CONTRAST_DEFAULT}>
+					{label}
+				</Typography>
+			);
+		}
+		return (
+			<div className={classes["content"]}>
+				<Typography
+					typo={ETypo.TEXT_MD_LIGHT}
+					color={isActive ? ETypoColor.NAVIGATION_BUTTON_CONTRAST_ACTIVE : ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
+					{label.text}
+				</Typography>
+				<Typography
+					typo={ETypo.TEXT_MD_BOLD}
+					color={isActive ? ETypoColor.NAVIGATION_BUTTON_CONTRAST_ACTIVE : ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
+					{label.subtext}
+				</Typography>
+			</div>
+		);
+	}
 }
diff --git a/src/front/Components/DesignSystem/Dropdown/index.tsx b/src/front/Components/DesignSystem/Dropdown/index.tsx
index a819e349..8bd40c39 100644
--- a/src/front/Components/DesignSystem/Dropdown/index.tsx
+++ b/src/front/Components/DesignSystem/Dropdown/index.tsx
@@ -34,11 +34,19 @@ export default function Dropdown(props: IProps) {
 					<Typography
 						typo={ETypo.TEXT_MD_REGULAR}
 						color={!!selectedOption ? ETypoColor.DROPDOWN_CONTRAST_ACTIVE : ETypoColor.DROPDOWN_CONTRAST_DEFAULT}>
-						{selectedOption?.label ?? placeholder}
+						{getLabel(selectedOption) ?? placeholder}
 					</Typography>
 				</div>
 				<IconButton icon={<ChevronDownIcon />} />
 			</div>
 		</DropdownMenu>
 	);
+
+	function getLabel(option: IOption | null): string | null {
+		if (!option) return null;
+		if (typeof option.label === "string") {
+			return option.label;
+		}
+		return `${option.label.text} ${option.label.subtext}`;
+	}
 }
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 708e58a8..774e41d5 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -97,6 +97,10 @@ export default function DesignSystem() {
 								id: "3",
 								label: "Option 3",
 							},
+							{
+								id: "4",
+								label: { text: "Option 4", subtext: "Subtext" },
+							},
 						]}
 						placeholder="Placeholder"
 					/>