✨ Page done

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

@@ -90,7 +90,7 @@
 		}
 	}
 
-	&[fullwidth="true"] {
+	&[fullwidthattr="true"] {
 		width: 100%;
 		flex: 1;
 	}

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

@@ -13,7 +13,7 @@ type IProps = {
 	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 	children?: React.ReactNode;
 	variant?: EButtonVariant;
-	fullwidth?: "true" | "false";
+	fullwidth?: boolean;
 	icon?: string;
 	iconstyle?: CSSProperties;
 	disabled?: boolean;
@@ -23,12 +23,12 @@ type IProps = {
 };
 
 export default function Button(props: IProps) {
-	const {
+	let {
 		variant = EButtonVariant.PRIMARY,
 		disabled = false,
 		type = "button",
 		isloading = "false",
-		fullwidth = "false",
+		fullwidth = false,
 		iconposition = "right",
 		onClick,
 		children,
@@ -36,10 +36,13 @@ export default function Button(props: IProps) {
 		iconstyle,
 	} = props;
 
-	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
+	const fullwidthattr = fullwidth.toString();
+	const isloadingattr = isloading.toString();
+
+	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr };
 	delete attributes.icon;
-	delete attributes.iconStyle;
-	delete attributes.iconPosition;
+	delete attributes.iconstyle;
+	delete attributes.iconposition;
 	return (
 		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
 			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}

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

@@ -9,6 +9,7 @@ type IProps = {
 	toolTip?: string;
 	defaultChecked?: boolean;
 	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	value: string;
 };
 
 export default class RadioBox extends React.Component<IProps> {
@@ -16,7 +17,13 @@ export default class RadioBox extends React.Component<IProps> {
 		return (
 			<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
 				<label className={classes["root"]}>
-					<input type="radio" name={this.props.name} defaultChecked={this.props.defaultChecked} onChange={this.props.onChange} />
+					<input
+						type="radio"
+						name={this.props.name}
+						defaultChecked={this.props.defaultChecked}
+						onChange={this.props.onChange}
+						value={this.props.value}
+					/>
 					{this.props.children}
 					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
 				</label>

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

@@ -118,10 +118,12 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>RadioBox component</Typography>
 						</div>
-						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">
+						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip" value="box_1">
 							Radio Box 1
 						</RadioBox>
-						<RadioBox name="RadioBox">Radio Box 2</RadioBox>
+						<RadioBox name="RadioBox" value="box_2">
+							Radio Box 2
+						</RadioBox>
 					</div>
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>

src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss

@@ -26,4 +26,11 @@
 			gap: 16px;
 		}
 	}
+
+	.collaborators-container {
+		margin-top: 32px;
+	}
+	.buttons-container {
+		margin-top: 32px;
+	}
 }

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

@@ -6,14 +6,38 @@ import RightImage from "@Front/Assets/images/create-folder/right-image.png";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import Form from "@Front/Components/DesignSystem/Form";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
-import Select from "@Front/Components/DesignSystem/Select";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Button from "@Front/Components/DesignSystem/Button";
+import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 
 type IProps = {};
-type IState = {};
+type IState = {
+	folder_access: string;
+};
 export default class CreateFolder extends BasePage<IProps, IState> {
+	private collaboratorsOptions: IOption[] = [
+		{ label: "John Doe", value: "john_doe" },
+		{ label: "Éric Dupont", value: "eric_dupont" },
+		{ label: "Julien Doe", value: "julien_doe" },
+		{ label: "Nathalie Costa", value: "nathalie_costa" },
+		{ label: "Max Durant", value: "max_durant" },
+		{ label: "Jane Doe", value: "jane_doe" },
+	];
+
+	private actsOptions: IOption[] = [
+		{ label: "Divorce", value: "divorce" },
+		{ label: "Succession", value: "succession" },
+		{ label: "Vente immobilière", value: "vente_immobiliere" },
+	];
 	public constructor(props: IProps) {
 		super(props);
+
+		this.state = {
+			folder_access: "",
+		};
+
+		this.radioOnChange = this.radioOnChange.bind(this);
 	}
 
 	// TODO: Message if the user has not created any folder yet
@@ -32,15 +56,7 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 						<div className={classes["form-container"]}>
 							<InputField name="folder_number" fakeplaceholder="Numéro de dossier" type="number" />
 							<InputField name="entitled" fakeplaceholder="Intitulé" />
-							<Select
-								options={[
-									{ label: "Divorce", value: "divorce" },
-									{ label: "Succession", value: "succession" },
-									{ label: "Vente immobilière", value: "vente_immobiliere" },
-								]}
-								onChange={() => {}}
-								placeholder={"Type d’acte"}
-							/>
+							<Select options={this.actsOptions} onChange={() => {}} placeholder={"Type d’acte"} />
 							<InputField name="personal_note" fakeplaceholder="Note personnelle" textarea />
 						</div>
 						<div className={classes["access-container"]}>
@@ -48,10 +64,25 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 								Accès au dossier
 							</Typography>
 							<div className={classes["radio-container"]}>
-								<RadioBox name="file_access" defaultChecked>
+								<RadioBox name="file_access" defaultChecked onChange={this.radioOnChange} value="whole_office">
 									Sélectionner tout l'office
 								</RadioBox>
-								<RadioBox name="file_access">Sélectionner certains collaborateurs</RadioBox>
+								<RadioBox name="file_access" onChange={this.radioOnChange} value="select_collaborators">
+									Sélectionner certains collaborateurs
+								</RadioBox>
+							</div>
+							{this.state.folder_access === "select_collaborators" && (
+								<div className={classes["collaborators-container"]}>
+									<MultiSelect
+										options={this.collaboratorsOptions}
+										placeholder="Sélectionner les collaborateurs pouvant accéder au dossier"
+									/>
+								</div>
+							)}
+							<div className={classes["buttons-container"]}>
+								<Button fullwidth disabled={true}>
+									Créer un dossier
+								</Button>
 							</div>
 						</div>
 					</Form>
@@ -59,5 +90,12 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 			</DefaultDoubleSidePage>
 		);
 	}
+
 	public override async componentDidMount() {}
+
+	private radioOnChange(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			folder_access: e.target.value,
+		});
+	}
 }