Merge branch 'feature/ora-mt-262-create-folder' into dev

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

@@ -15,11 +15,11 @@ type IProps = {
 	variant?: EButtonVariant;
 	fullwidth?: "true" | "false";
 	icon?: string;
-	iconStyle?: CSSProperties;
+	iconstyle?: CSSProperties;
 	disabled?: boolean;
 	type?: "button" | "submit";
 	isloading?: string;
-	iconPosition?: "left" | "right";
+	iconposition?: "left" | "right";
 };
 
 export default function Button(props: IProps) {
@@ -29,11 +29,11 @@ export default function Button(props: IProps) {
 		type = "button",
 		isloading = "false",
 		fullwidth = "false",
-		iconPosition = "right",
+		iconposition = "right",
 		onClick,
 		children,
 		icon,
-		iconStyle,
+		iconstyle,
 	} = props;
 
 	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
@@ -42,9 +42,9 @@ export default function Button(props: IProps) {
 	delete attributes.iconPosition;
 	return (
 		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
-			{icon && iconPosition === "left" && <Image src={icon} style={iconStyle} alt={"button icon"} />}
+			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
 			{children}
-			{icon && iconPosition === "right" && <Image src={icon} style={iconStyle} alt={"button icon"} />}
+			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
 		</button>
 	);
 }

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

@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: $grey-soft;
+	background-color: var(--grey-soft);
 	padding: 24px;
 	width: 100%;
 	display: flex;

src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss

@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 24px;
-	background-color: $grey-soft;
+	background-color: var(--grey-soft);
 	width: 100%;
 
 	.content {

src/front/Components/Elements/BackArrow/index.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import React from "react";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import ChevronIcon from "@Assets/icons/chevron.svg";
+type IProps = {
+	url: string;
+};
+
+type IState = {};
+export default class BackArrow extends React.Component<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<Link href={this.props.url}>
+				<Button
+					icon={ChevronIcon}
+					iconposition={"left"}
+					iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+					variant={EButtonVariant.LINE}>
+					Retour
+				</Button>
+			</Link>
+		);
+	}
+}

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss

@@ -7,28 +7,31 @@
 
 	.content {
 		display: flex;
-		align-items: center;
 		height: calc(100vh - 83px);
-		width: 100%;
 
 		.sides {
-			width: 100%;
+			width: 50%;
+
+			&.image-container {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				@media (max-width: $screen-m) {
+					display: none;
+				}
+				background: var(--grey-soft);
+				.image {
 					height: 100%;
+					object-fit: contain;
+				}
+			}
+
+			&.background-image-container {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 
-			&.image-container {
+				.background-image {
-				@media (max-width: $screen-m) {
-					display: none;
-				}
-			}
-
-			.side-content {
-				max-width: 530px;
-			}
-
-			.image {
 					height: 100%;
 					width: 100%;
 					object-fit: cover;
@@ -36,3 +39,4 @@
 			}
 		}
 	}
+}

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx

@@ -13,12 +13,15 @@ type IProps = {
 	 */
 	scrollTop: number | null;
 	image: StaticImageData;
+	type: "background" | "image";
 };
+
 type IState = {};
 
 export default class DefaultDoubleSidePage extends React.Component<IProps, IState> {
 	public static defaultProps = {
 		scrollTop: 0,
+		type: "background",
 	};
 
 	public override render(): JSX.Element {
@@ -26,12 +29,17 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 			<div className={classes["root"]}>
 				<Header isUserConnected={false} />
 				<div className={classes["content"]}>
-					<div className={classes["sides"]}>
+					<div className={classes["sides"]}>{this.props.children}</div>
-						<div className={classes["side-content"]}>{this.props.children}</div>
+					{this.props.type === "image" && (
-					</div>
 						<div className={classNames(classes["sides"], classes["image-container"])}>
 							<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
 						</div>
+					)}
+					{this.props.type === "background" && (
+						<div className={classNames(classes["sides"], classes["background-image-container"])}>
+							<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} />
+						</div>
+					)}
 				</div>
 				<Version />
 			</div>

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

@@ -9,9 +9,8 @@ import { ActionMeta, MultiValue } from "react-select";
 import { IOption } from "@Front/Components/DesignSystem/Select";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import Form from "@Front/Components/DesignSystem/Form";
-import ChevonIcon from "@Assets/icons/chevron.svg";
-import Link from "next/link";
 import { useRouter } from "next/router";
+import BackArrow from "@Front/Components/Elements/BackArrow";
 
 type IProps = {
 	selectedFolderUid: string;
@@ -45,15 +44,7 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
-					<Link href={"/dossier/".concat(this.props.selectedFolderUid)}>
+					<BackArrow url={"/dossier/".concat(this.props.selectedFolderUid)} />
-						<Button
-							icon={ChevonIcon}
-							iconPosition={"left"}
-							iconStyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-							variant={EButtonVariant.LINE}>
-							Retour
-						</Button>
-					</Link>
 					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
 					<Form>
 						<div className={classes["radiobox-container"]}>

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

@@ -0,0 +1,3 @@
+.root {
+	margin: 64px 0 0 64px;
+}

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

@@ -0,0 +1,26 @@
+import BasePage from "../../Base";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import RightImage from "@Front/Assets/images/create-folder/right-image.png";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+
+type IProps = {};
+type IState = {};
+export default class CreateFolder extends BasePage<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+	}
+
+	// TODO: Message if the user has not created any folder yet
+	public override render(): JSX.Element {
+		return (
+			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
+				<div className={classes["root"]}>
+					<BackArrow url="/" />
+				</div>
+			</DefaultDoubleSidePage>
+		);
+	}
+	public override async componentDidMount() {}
+}

src/front/Themes/variables.scss

@@ -9,26 +9,26 @@
 
 	--colormerdum: blue;
 
-	--green-flash: $green-flash;
+	--green-flash: #{$green-flash};
-	--blue-flash: $blue-flash;
+	--blue-flash: #{$blue-flash};
-	--turquoise-flash: $turquoise-flash;
+	--turquoise-flash: #{$turquoise-flash};
-	--purple-flash: $purple-flash;
+	--purple-flash: #{$purple-flash};
-	--purple-hover: $purple-hover;
+	--purple-hover: #{$purple-hover};
-	--orange-flash: $orange-flash;
+	--orange-flash: #{$orange-flash};
-	--red-flash: $red-flash;
+	--red-flash: #{$red-flash};
-	--re-hover: $re-hover;
+	--re-hover: #{$re-hover};
-	--pink-flash: $pink-flash;
+	--pink-flash: #{$pink-flash};
-	--pink-hover: $pink-hover;
+	--pink-hover: #{$pink-hover};
 
-	--green-soft: $green-soft;
+	--green-soft: #{$green-soft};
-	--blue-soft: $blue-soft;
+	--blue-soft: #{$blue-soft};
-	--turquoise-soft: $turquoise-soft;
+	--turquoise-soft: #{$turquoise-soft};
-	--purple-soft: $purple-soft;
+	--purple-soft: #{$purple-soft};
-	--orange-soft: $orange-soft;
+	--orange-soft: #{$orange-soft};
-	--red-soft: $red-soft;
+	--red-soft: #{$red-soft};
-	--pink-soft: $pink-soft;
+	--pink-soft: #{$pink-soft};
 
-	--grey: $grey;
+	--grey: #{$grey};
-	--grey-medium: $grey-medium;
+	--grey-medium: #{$grey-medium};
-	--grey-soft: $grey-soft;
+	--grey-soft: #{$grey-soft};
 }

src/pages/dossier/creer-dossier.tsx

@@ -0,0 +1,5 @@
+import CreateFolder from "@Front/Components/Layouts/Folder/CreateFolder";
+
+export default function Route() {
+	return <CreateFolder />;
+}