Select option

src/front/Assets/Icons/question-mark-circle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.87891 7.51884C11.0505 6.49372 12.95 6.49372 14.1215 7.51884C15.2931 8.54397 15.2931 10.206 14.1215 11.2312C13.9176 11.4096 13.6917 11.5569 13.4513 11.6733C12.7056 12.0341 12.0002 12.6716 12.0002 13.5V14.25M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 17.25H12.0075V17.2575H12V17.25Z" stroke="#24282E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -3,43 +3,75 @@
 .root {
 	cursor: pointer;
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
+
+	color: var(--text-primary, #24282e);
+	font-size: 16px;
+	font-style: normal;
+	font-weight: var(--font-text-weight-regular, 400);
+	line-height: normal;
+	letter-spacing: 0.08px;
+	gap: var(--Radius-lg, 16px);
+
+	.content {
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		.label {
+			color: var(--text-primary, #24282e);
+			font-weight: var(--font-text-weight-regular, 400);
+		}
+		.description {
+			color: var(--text-secondary, #47535d);
+			font-weight: var(--font-text-weight-light, 300);
+		}
+	}
+
 	&.disabled {
-		cursor: not-allowed;
+		opacity: var(--opacity-disabled, 0.3);
 	}
 
 	input[type="checkbox"] {
-		appearance: none;
+		cursor: pointer;
-		background-color: transparent;
+		display: flex;
-		width: 16px;
+		width: 20px;
-		height: 16px;
+		height: 20px;
-		border: 1px solid var(--color-secondary-500);
+		flex-direction: column;
-		border-radius: 2px;
+		align-items: flex-start;
 		margin-right: 16px;
-		display: grid;
+		gap: 8px;
-		place-content: center;
+		border-radius: var(--radius-xs, 2px);
+		border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
+
+		&:hover {
+			border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
+		}
+
+		&:active {
+			border: 2px solid var(--select-option-unselected-pressed-border, #3e474e);
+		}
 
 		&:disabled {
 			cursor: not-allowed;
+			border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
 		}
 	}
 
-	input[type="checkbox"]::before {
+	// input[type="checkbox"]::before {
-		content: url("../../../Assets/Icons/check_white.svg");
+	// 	content: url("../../../Assets/Icons/check_white.svg");
-		place-content: flex-start;
+	// 	place-content: flex-start;
-		display: grid;
+	// 	display: grid;
-		width: 16px;
+	// 	width: 16px;
-		height: 16px;
+	// 	height: 16px;
-		background-color: var(--color-secondary-500);
+	// 	background-color: var(--color-secondary-500);
-		border-radius: 2px;
+	// 	border-radius: 2px;
-		transform: scale(0);
+	// 	transform: scale(0);
-	}
+	// }
 
-	input[type="checkbox"]:checked::before {
+	// input[type="checkbox"]:checked::before {
-		transform: scale(1);
+	// 	transform: scale(1);
-	}
+	// }
 
-	.tooltip {
+	// .tooltip {
-		margin-left: 16px;
+	// }
-	}
 }

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

@@ -47,7 +47,19 @@ export default class CheckBox extends React.Component<IProps, IState> {
 						checked={this.state.checked}
 						disabled={this.props.disabled}
 					/>
+					<div className={classes["content"]}>
+						{this.props.option.label && (
+							<Typography className={classes["label"]} typo={ETypo.TEXT_SM_SEMIBOLD}>
 								{this.props.option.label}
+							</Typography>
+						)}
+						{this.props.option.description && (
+							<Typography className={classes["description"]} typo={ETypo.TEXT_SM_REGULAR}>
+								{this.props.option.description}
+							</Typography>
+						)}
+					</div>
+
 					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
 				</label>
 			</Typography>

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

@@ -4,37 +4,74 @@
 	cursor: pointer;
 	user-select: none;
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
+	color: var(--text-primary, #24282e);
+
+	font-size: 16px;
+	font-style: normal;
+	font-weight: var(--font-text-weight-regular, 400);
+	line-height: normal;
+	letter-spacing: 0.08px;
+	gap: var(--Radius-lg, 16px);
+
+	.content {
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		.label {
+			color: var(--text-primary, #24282e);
+			font-weight: var(--font-text-weight-regular, 400);
+		}
+		.description {
+			color: var(--text-secondary, #47535d);
+			font-weight: var(--font-text-weight-light, 300);
+		}
+	}
+
+	&.disabled {
+		opacity: var(--opacity-disabled, 0.3);
+	}
 
 	input[type="radio"] {
-		appearance: none;
+		cursor: pointer;
-		background-color: transparent;
+		width: 20px;
-		width: 15px;
+		height: 20px;
-		height: 15px;
+		border-radius: var(--radius-full, 360px);
-		border: 1px solid var(--color-secondary-500);
+		border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
-		border-radius: 100px;
 		margin-right: 16px;
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
-		justify-content: center;
+		flex-direction: column;
-		margin-top: auto;
+		gap: 8px;
-		margin-bottom: auto;
+
+		&:hover {
+			border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
 		}
 
-	input[type="radio"]::before {
+		&:active {
-		content: "";
+			border: 2px solid var(--select-option-unselected-pressed-border, #3e474e);
-		width: 11px;
-		height: 11px;
-		background-color: var(--color-secondary-500);
-		border-radius: 100px;
-		transform: scale(0);
 		}
 
-	input[type="radio"]:checked::before {
+		&:disabled {
-		transform: scale(1);
+			cursor: not-allowed;
+			border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
+		}
 	}
 
-	.tooltip {
+	// input[type="radio"]::before {
-		margin-left: 16px;
+	// 	content: "";
-	}
+	// 	width: 11px;
+	// 	height: 11px;
+	// 	background-color: var(--color-secondary-500);
+	// 	border-radius: 100px;
+	// 	transform: scale(0);
+	// }
+
+	// input[type="radio"]:checked::before {
+	// 	transform: scale(1);
+	// }
+
+	// .tooltip {
+	// 	margin-left: 16px;
+	// }
 }

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

@@ -5,7 +5,6 @@ import Typography, { ETypo, ETypoColor } from "../Typography";
 import classes from "./classes.module.scss";
 
 type IProps = {
-	children: React.ReactNode;
 	name: string;
 	toolTip?: string;
 	checked?: boolean;
@@ -13,6 +12,8 @@ type IProps = {
 	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 	value: string;
 	disabled: boolean;
+	description?: string;
+	label?: string;
 };
 
 export default class RadioBox extends React.Component<IProps> {
@@ -32,7 +33,19 @@ export default class RadioBox extends React.Component<IProps> {
 						value={this.props.value}
 						disabled={this.props.disabled}
 					/>
-					{this.props.children}
+					<div className={classes["content"]}>
+						{this.props.label && (
+							<Typography className={classes["label"]} typo={ETypo.TEXT_SM_SEMIBOLD}>
+								{this.props.label}
+							</Typography>
+						)}
+						{this.props.description && (
+							<Typography className={classes["description"]} typo={ETypo.TEXT_SM_REGULAR}>
+								{this.props.description}
+							</Typography>
+						)}
+					</div>
+
 					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
 				</label>
 			</Typography>

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

@@ -1,4 +1,5 @@
-import ToolTipIcon from "@Assets/Icons/tool-tip.svg";
+// import ToolTipIcon from "@Assets/Icons/tool-tip.svg";
+import QuestionMark from "@Assets/Icons/question-mark-circle.svg";
 import styled from "@emotion/styled";
 import TooltipMUI, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
 import Image from "next/image";
@@ -48,7 +49,7 @@ export default class Tooltip extends React.Component<IProps, IState> {
 		return (
 			<LightTooltip title={this.props.text} placement="top" arrow>
 				<span className={this.props.className} style={!this.props.isNotFlex ? { display: "flex" } : {}}>
-					<Image src={ToolTipIcon} alt="toolTip icon" />
+					<Image src={QuestionMark} alt="toolTip icon" />
 				</span>
 			</LightTooltip>
 		);

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

@@ -28,6 +28,8 @@ import { useCallback, useMemo, useState } from "react";
 
 import classes from "./classes.module.scss";
 import Menu from "@Front/Components/DesignSystem/Menu";
+import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -798,6 +800,55 @@ export default function DesignSystem() {
 						variant={EAlertVariant.NEUTRAL}
 					/>
 				</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}
+					/>
+				</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}
+					/>
+				</div>
+
 				<Footer />
 			</div>
 		</DefaultTemplate>

src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx

@@ -10,7 +10,6 @@ import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import { MultiValue } from "react-select";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 
 type IProps = {
 	isCreateDocumentModalVisible: boolean;
@@ -128,13 +127,9 @@ export default function ParameterDocuments(props: IProps) {
 			confirmText={"Ajouter"}>
 			<div className={classes["add-document-form-container"]}>
 				<div className={classes["radiobox-container"]}>
-					<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
+					<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"} label="Document existant"/>
-						<Typography typo={ETypo.TEXT_LG_REGULAR}>Document existant</Typography>
-					</RadioBox>
 
-					<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
+					<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"} label="Créer un document">
-						<Typography typo={ETypo.TEXT_LG_REGULAR}>Créer un document</Typography>
-					</RadioBox>
 				</div>
 				{addOrEditDocument === "add" && (
 					<>

src/front/Components/Layouts/Folder/CreateFolder/index.tsx

@@ -165,12 +165,19 @@ export default function CreateFolder(): JSX.Element {
 							Donner l'accès au dossier
 						</Typography>
 						<div className={classes["radio-container"]}>
-							<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office">
+							<RadioBox
-								Sélectionner tout l'office
+								name="file_access"
-							</RadioBox>
+								defaultChecked
-							<RadioBox name="file_access" onChange={radioOnChange} value="select_collaborators">
+								onChange={radioOnChange}
-								Sélectionner certains collaborateurs
+								value="whole_office"
-							</RadioBox>
+								label="Sélectionner tout l'office"
+							/>
+							<RadioBox
+								name="file_access"
+								onChange={radioOnChange}
+								value="select_collaborators"
+								label="Sélectionner certains collaborateurs"
+							/>
 						</div>
 						{folderAccessType === "select_collaborators" && (
 							<div className={classes["collaborators-container"]}>