From e94702c61632110a9e3fcd9fa56624adfb067dee Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 5 Jul 2024 15:25:39 +0200
Subject: [PATCH] :sparkles: New buttons

---
 .../DesignSystem/Button/classes.module.scss   | 243 +++++++++++++++++-
 .../Layouts/Folder/classes.module.scss        |   8 +
 src/front/Components/Layouts/Folder/index.tsx |  64 +++++
 3 files changed, 309 insertions(+), 6 deletions(-)

diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss
index fe87dc62..a355c4e5 100644
--- a/src/front/Components/DesignSystem/Button/classes.module.scss
+++ b/src/front/Components/DesignSystem/Button/classes.module.scss
@@ -41,9 +41,6 @@
 		}
 
 		&[styleType="outlined"] {
-			color: var(--color-primary-500);
-			border-color: var(--color-primary-500);
-
 			&:hover {
 				background-color: var(--color-primary-50);
 			}
@@ -57,9 +54,6 @@
 		}
 
 		&[styleType="text"] {
-			color: var(--color-primary-500);
-			border-color: var(--color-primary-500);
-
 			&:hover {
 				background-color: transparent;
 			}
@@ -77,36 +71,273 @@
 		color: var(--color-secondary-500);
 		background: var(--color-secondary-500);
 		border-color: var(--color-secondary-500);
+
+		&:hover {
+			background: var(--color-secondary-700);
+			border-color: var(--color-secondary-700);
+		}
+
+		&:focus,
+		&:active {
+			background: var(--color-secondary-800);
+			border-color: var(--color-secondary-800);
+		}
+
+		&[styleType="outlined"] {
+			&:hover {
+				background-color: var(--color-secondary-50);
+			}
+
+			&:focus,
+			&:active {
+				background-color: var(--color-secondary-100);
+				color: var(--color-secondary-700);
+				border-color: var(--color-secondary-700);
+			}
+		}
+
+		&[styleType="text"] {
+			&:hover {
+				background-color: transparent;
+			}
+
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: var(--color-secondary-800);
+				border-color: var(--color-secondary-800);
+			}
+		}
 	}
 
 	&[variant="neutral"] {
 		color: var(--color-neutral-500);
 		background: var(--color-neutral-500);
 		border-color: var(--color-neutral-500);
+
+		&:hover {
+			background: var(--color-neutral-700);
+			border-color: var(--color-neutral-700);
+		}
+
+		&:focus,
+		&:active {
+			background: var(--color-neutral-800);
+			border-color: var(--color-neutral-800);
+		}
+
+		&[styleType="outlined"] {
+			&:hover {
+				background-color: var(--color-neutral-50);
+			}
+
+			&:focus,
+			&:active {
+				background-color: var(--color-neutral-100);
+				color: var(--color-neutral-700);
+				border-color: var(--color-neutral-700);
+			}
+		}
+
+		&[styleType="text"] {
+			&:hover {
+				background-color: transparent;
+			}
+
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: var(--color-neutral-800);
+				border-color: var(--color-neutral-800);
+			}
+		}
 	}
 
 	&[variant="error"] {
 		color: var(--color-error-600);
 		background: var(--color-error-600);
 		border-color: var(--color-error-600);
+
+		&:hover {
+			background: var(--color-error-800);
+			border-color: var(--color-error-800);
+		}
+
+		&:focus,
+		&:active {
+			background: var(--color-error-900);
+			border-color: var(--color-error-900);
+		}
+
+		&[styleType="outlined"] {
+			&:hover {
+				background-color: var(--color-error-50);
+				border-color: var(--color-secondary-700);
+			}
+
+			&:focus,
+			&:active {
+				background-color: var(--color-error-100);
+				color: var(--color-secondary-700);
+				border-color: var(--color-secondary-700);
+			}
+		}
+
+		&[styleType="text"] {
+			&:hover {
+				background-color: transparent;
+				color: var(--color-error-800);
+				border-color: var(--color-error-800);
+			}
+
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: var(--color-error-900);
+				border-color: var(--color-error-900);
+			}
+		}
 	}
 
 	&[variant="warning"] {
 		color: var(--color-warning-600);
 		background: var(--color-warning-600);
 		border-color: var(--color-warning-600);
+
+		&:hover {
+			background: var(--color-warning-800);
+			border-color: var(--color-warning-800);
+		}
+
+		&:focus,
+		&:active {
+			background: var(--color-warning-900);
+			border-color: var(--color-warning-900);
+		}
+
+		&[styleType="outlined"] {
+			&:hover {
+				background-color: var(--color-warning-50);
+				border-color: var(--color-warning-700);
+				color: var(--color-warning-700);
+			}
+
+			&:focus,
+			&:active {
+				background-color: var(--color-warning-100);
+				color: var(--color-warning-700);
+				border-color: var(--color-warning-700);
+			}
+		}
+
+		&[styleType="text"] {
+			&:hover {
+				background-color: transparent;
+				color: var(--color-warning-800);
+				border-color: var(--color-warning-800);
+			}
+
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: var(--color-warning-900);
+				border-color: var(--color-warning-900);
+			}
+		}
 	}
 
 	&[variant="success"] {
 		color: var(--color-success-600);
 		background: var(--color-success-600);
 		border-color: var(--color-success-600);
+
+		&:hover {
+			background: var(--color-success-800);
+			border-color: var(--color-success-800);
+		}
+
+		&:focus,
+		&:active {
+			background: var(--color-success-900);
+			border-color: var(--color-success-900);
+		}
+
+		&[styleType="outlined"] {
+			&:hover {
+				background-color: var(--color-success-50);
+				border-color: var(--color-success-700);
+				color: var(--color-success-700);
+			}
+
+			&:focus,
+			&:active {
+				background-color: var(--color-success-100);
+				color: var(--color-success-700);
+				border-color: var(--color-success-700);
+			}
+		}
+
+		&[styleType="text"] {
+			&:hover {
+				background-color: transparent;
+				color: var(--color-success-800);
+				border-color: var(--color-success-800);
+			}
+
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: var(--color-success-900);
+				border-color: var(--color-success-900);
+			}
+		}
 	}
 
 	&[variant="info"] {
 		color: var(--color-info-700);
 		background: var(--color-info-700);
 		border-color: var(--color-info-700);
+
+		&:hover {
+			background: var(--color-info-900);
+			border-color: var(--color-info-900);
+		}
+
+		&:focus,
+		&:active {
+			background: var(--color-info-950);
+			border-color: var(--color-info-950);
+		}
+
+		&[styleType="outlined"] {
+			&:hover {
+				background-color: var(--color-info-50);
+				border-color: var(--color-info-700);
+				color: var(--color-info-700);
+			}
+
+			&:focus,
+			&:active {
+				background-color: var(--color-info-100);
+				color: var(--color-info-700);
+				border-color: var(--color-info-700);
+			}
+		}
+
+		&[styleType="text"] {
+			&:hover {
+				background-color: transparent;
+				color: var(--color-info-900);
+				border-color: var(--color-info-900);
+			}
+
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: var(--color-info-950);
+				border-color: var(--color-info-950);
+			}
+		}
 	}
 
 	/**
diff --git a/src/front/Components/Layouts/Folder/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss
index a425a01a..b09e316f 100644
--- a/src/front/Components/Layouts/Folder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/classes.module.scss
@@ -12,6 +12,9 @@
 		.choose-a-folder {
 			margin-top: 96px;
 			text-align: center;
+			display: flex;
+			gap: 16px;
+			flex-direction: column;
 		}
 	}
 
@@ -70,3 +73,8 @@
 		}
 	}
 }
+
+.buttons {
+	display: flex;
+	gap: 16px;
+}
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index f24df0fc..0d8cdfe4 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -5,6 +5,7 @@ import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import BasePage from "../Base";
 import classes from "./classes.module.scss";
 import Newletter from "@Front/Components/DesignSystem/Newsletter";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 
 type IProps = {};
 type IState = {
@@ -32,6 +33,69 @@ export default class Folder extends BasePage<IProps, IState> {
 							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un dossier
 							</Typography>
+							<div className={classes["buttons"]}>
+								<Button variant={EButtonVariant.PRIMARY}>PRIMARY</Button>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									PRIMARY
+								</Button>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+									PRIMARY
+								</Button>
+							</div>
+							<div className={classes["buttons"]}>
+								<Button variant={EButtonVariant.SECONDARY}>SECONDARY</Button>
+								<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
+									SECONDARY
+								</Button>
+								<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
+									SECONDARY
+								</Button>
+							</div>
+							<div className={classes["buttons"]}>
+								<Button variant={EButtonVariant.NEUTRAL}>NEUTRAL</Button>
+								<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
+									NEUTRAL
+								</Button>
+								<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
+									NEUTRAL
+								</Button>
+							</div>
+							<div className={classes["buttons"]}>
+								<Button variant={EButtonVariant.ERROR}>ERROR</Button>
+								<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
+									ERROR
+								</Button>
+								<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
+									ERROR
+								</Button>
+							</div>
+							<div className={classes["buttons"]}>
+								<Button variant={EButtonVariant.WARNING}>WARNING</Button>
+								<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
+									WARNING
+								</Button>
+								<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
+									WARNING
+								</Button>
+							</div>
+							<div className={classes["buttons"]}>
+								<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
+								<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
+									SUCCESS
+								</Button>
+								<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
+									SUCCESS
+								</Button>
+							</div>
+							<div className={classes["buttons"]}>
+								<Button variant={EButtonVariant.INFO}>INFO</Button>
+								<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
+									INFO
+								</Button>
+								<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
+									INFO
+								</Button>
+							</div>
 						</div>
 						<Newletter isOpen />
 					</div>