From d777d15db60de2a6cf92dcc7dbaf3a499460c0d0 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Fri, 26 Jul 2024 16:24:05 +0200
Subject: [PATCH] review dropdown lolo

---
 .../DesignSystem/Dropdown/classes.module.scss | 85 ++++++++++++-------
 .../DesignSystem/Dropdown/index.tsx           | 38 +++++----
 .../SearchBar/classes.module.scss             |  1 +
 .../Components/Layouts/DesignSystem/index.tsx |  1 +
 4 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/src/front/Components/DesignSystem/Dropdown/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/classes.module.scss
index 8406a67c..ccb9c08a 100644
--- a/src/front/Components/DesignSystem/Dropdown/classes.module.scss
+++ b/src/front/Components/DesignSystem/Dropdown/classes.module.scss
@@ -1,45 +1,64 @@
 @import "@Themes/constants.scss";
 
 .root {
-	cursor: pointer;
-	height: 56px;
-
-	display: flex;
-	align-items: center;
-
-	padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
-	gap: var(--spacing-2, 16px);
-
-	border-radius: var(--input-radius, 0px);
-	border: 1px solid var(--dropdown-input-border-default, #d7dce0);
-	background: var(--dropdown-input-background, #fff);
-
-	.content {
-		width: 100%;
-		display: flex;
+	.label {
 		padding: 0px var(--spacing-2, 16px);
+	}
+	.container {
+		cursor: pointer;
+
+		display: flex;
 		align-items: center;
-		flex: 1 0 0;
-	}
+		height: 56px;
 
-	&:hover {
-		border-color: var(--dropdown-input-border-hovered);
-	}
+		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
+		gap: var(--spacing-2, 16px);
 
-	&.active {
-		border-color: var(--dropdown-input-border-filled);
-	}
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--dropdown-input-border-default, #d7dce0);
+		background: var(--dropdown-input-background, #fff);
 
-	&.open {
-		border-color: var(--dropdown-input-border-expanded);
+		.content {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			height: 24px;
+			.value {
+				width: 100%;
+				display: flex;
+				padding: 0px var(--spacing-2, 16px);
+				align-items: center;
+				flex: 1 0 0;
+			}
 
-		svg {
-			transform: rotate(180deg);
+			svg {
+				width: 24px;
+				height: 24px;
+				cursor: pointer;
+				stroke: var(--button-icon-button-default-default);
+			}
+		}
+
+		&:hover {
+			border-color: var(--dropdown-input-border-hovered);
+		}
+
+		&.active {
+			border-color: var(--dropdown-input-border-filled);
+		}
+
+		&.open {
+			border-color: var(--dropdown-input-border-expanded);
+
+			svg {
+				transform: rotate(180deg);
+			}
+		}
+
+		&.disabled {
+			opacity: var(--opacity-disabled, 0.3);
+			pointer-events: none;
 		}
 	}
-
-	&.disabled {
-		opacity: var(--opacity-disabled, 0.3);
-		pointer-events: none;
-	}
 }
diff --git a/src/front/Components/DesignSystem/Dropdown/index.tsx b/src/front/Components/DesignSystem/Dropdown/index.tsx
index 4827bcb3..31d3116d 100644
--- a/src/front/Components/DesignSystem/Dropdown/index.tsx
+++ b/src/front/Components/DesignSystem/Dropdown/index.tsx
@@ -3,7 +3,6 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 
-import IconButton from "../IconButton";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 import classes from "./classes.module.scss";
 import DropdownMenu from "./DropdownMenu";
@@ -11,6 +10,7 @@ import { IOption } from "./DropdownMenu/DropdownOption";
 
 type IProps = {
 	options: IOption[];
+	label?: string;
 	placeholder?: string;
 	disabled?: boolean;
 	onSelect?: (option: IOption) => void;
@@ -36,22 +36,30 @@ export default function Dropdown(props: IProps) {
 
 	return (
 		<DropdownMenu options={options} openable={openable} onSelect={handleOnSelect} selectedOption={selectedOption}>
-			<div
-				className={classNames([
-					classes["root"],
-					openable.isOpen && classes["open"],
-					disabled && classes["disabled"],
-					!!selectedOption && classes["active"],
-				])}
-				onClick={openable.toggle}>
-				<div className={classes["content"]}>
-					<Typography
-						typo={ETypo.TEXT_MD_REGULAR}
-						color={!!selectedOption ? ETypoColor.DROPDOWN_CONTRAST_ACTIVE : ETypoColor.DROPDOWN_CONTRAST_DEFAULT}>
-						{getLabel(selectedOption) ?? placeholder}
+			<div className={classes["root"]}>
+				{props.label && (
+					<Typography className={classes["label"]} typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.CONTRAST_DEFAULT}>
+						{props.label}
 					</Typography>
+				)}
+				<div
+					className={classNames([
+						classes["container"],
+						openable.isOpen && classes["open"],
+						disabled && classes["disabled"],
+						!!selectedOption && classes["active"],
+					])}
+					onClick={openable.toggle}>
+					<div className={classes["content"]}>
+						<Typography
+							className={classes["value"]}
+							typo={!!selectedOption ? ETypo.TEXT_MD_SEMIBOLD : ETypo.TEXT_MD_REGULAR}
+							color={!!selectedOption ? ETypoColor.DROPDOWN_CONTRAST_ACTIVE : ETypoColor.DROPDOWN_CONTRAST_DEFAULT}>
+							{getLabel(selectedOption) ?? placeholder}
+						</Typography>
+						<ChevronDownIcon />
+					</div>
 				</div>
-				<IconButton icon={<ChevronDownIcon />} />
 			</div>
 		</DropdownMenu>
 	);
diff --git a/src/front/Components/DesignSystem/SearchBar/classes.module.scss b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
index a9a21a68..f759e141 100644
--- a/src/front/Components/DesignSystem/SearchBar/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
@@ -41,6 +41,7 @@
 
 	.input-container {
 		display: flex;
+		align-items: center;
 		flex: 1;
 		gap: 8px;
 		padding: 0px var(--spacing-2, 16px);
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 2aadf67e..f2f5e30a 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -127,6 +127,7 @@ export default function DesignSystem() {
 							},
 						]}
 						placeholder="Placeholder"
+						label="Label"
 					/>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Navigation latérale</Typography>
 					<SearchBlockList