refacto icons buttons

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

@@ -29,20 +29,39 @@
 		border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0));
 		background: var(--button-contained-primary-default-background, #005bcb);
 
+		svg {
+			stroke: var(--button-contained-primary-default-contrast);
+		}
+
 		&:hover {
 			border: 1px solid var(--button-contained-primary-hovered-border, rgba(0, 0, 0, 0));
 			background: var(--button-contained-primary-hovered-background, #0040a4);
+
+			svg {
+				stroke: var(--button-contained-primary-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			border: 1px solid var(--button-contained-primary-pressed-border, rgba(0, 0, 0, 0));
 			background: var(--button-contained-primary-pressed-background, #013391);
+
+			svg {
+				stroke: var(--button-contained-primary-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-primary-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-primary-50);
+				svg {
+					stroke: var(--button-outlined-primary-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -50,12 +69,24 @@
 				background-color: var(--color-primary-100);
 				color: var(--color-primary-700);
 				border-color: var(--color-primary-700);
+
+				svg {
+					stroke: var(--button-outlined-primary-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-primary-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
+
+				svg {
+					stroke: var(--button-text-primary-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -63,6 +94,10 @@
 				background-color: transparent;
 				color: var(--color-primary-800);
 				border-color: var(--color-primary-800);
+
+				svg {
+					stroke: var(--button-text-primary-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -72,20 +107,40 @@
 		background: var(--color-secondary-500);
 		border-color: var(--color-secondary-500);
 
+		svg {
+			stroke: var(--button-contained-secondary-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-secondary-700);
 			border-color: var(--color-secondary-700);
+
+			svg {
+				stroke: var(--button-contained-secondary-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-secondary-800);
 			border-color: var(--color-secondary-800);
+
+			svg {
+				stroke: var(--button-contained-secondary-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-secondary-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-secondary-50);
+
+				svg {
+					stroke: var(--button-outlined-secondary-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -93,12 +148,24 @@
 				background-color: var(--color-secondary-100);
 				color: var(--color-secondary-700);
 				border-color: var(--color-secondary-700);
+
+				svg {
+					stroke: var(--button-outlined-secondary-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-secondary-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
+
+				svg {
+					stroke: var(--button-text-secondary-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -106,6 +173,10 @@
 				background-color: transparent;
 				color: var(--color-secondary-800);
 				border-color: var(--color-secondary-800);
+
+				svg {
+					stroke: var(--button-text-secondary-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -115,20 +186,40 @@
 		background: var(--color-neutral-500);
 		border-color: var(--color-neutral-500);
 
+		svg {
+			stroke: var(--button-contained-neutral-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-neutral-700);
 			border-color: var(--color-neutral-700);
+
+			svg {
+				stroke: var(--button-contained-neutral-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-neutral-800);
 			border-color: var(--color-neutral-800);
+
+			svg {
+				stroke: var(--button-contained-neutral-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-neutral-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-neutral-50);
+
+				svg {
+					stroke: var(--button-outlined-neutral-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -136,12 +227,24 @@
 				background-color: var(--color-neutral-100);
 				color: var(--color-neutral-700);
 				border-color: var(--color-neutral-700);
+
+				svg {
+					stroke: var(--button-outlined-neutral-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-neutral-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
+
+				svg {
+					stroke: var(--button-text-neutral-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -149,6 +252,10 @@
 				background-color: transparent;
 				color: var(--color-neutral-800);
 				border-color: var(--color-neutral-800);
+
+				svg {
+					stroke: var(--button-text-neutral-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -158,21 +265,41 @@
 		background: var(--color-error-600);
 		border-color: var(--color-error-600);
 
+		svg {
+			stroke: var(--button-contained-error-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-error-800);
 			border-color: var(--color-error-800);
+
+			svg {
+				stroke: var(--button-contained-error-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-error-900);
 			border-color: var(--color-error-900);
+
+			svg {
+				stroke: var(--button-contained-error-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-error-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-error-50);
 				border-color: var(--color-secondary-700);
+
+				svg {
+					stroke: var(--button-outlined-error-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -180,14 +307,26 @@
 				background-color: var(--color-error-100);
 				color: var(--color-secondary-700);
 				border-color: var(--color-secondary-700);
+
+				svg {
+					stroke: var(--button-outlined-error-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-error-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
 				color: var(--color-error-800);
 				border-color: var(--color-error-800);
+
+				svg {
+					stroke: var(--button-text-error-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -195,6 +334,10 @@
 				background-color: transparent;
 				color: var(--color-error-900);
 				border-color: var(--color-error-900);
+
+				svg {
+					stroke: var(--button-text-error-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -204,22 +347,42 @@
 		background: var(--color-warning-600);
 		border-color: var(--color-warning-600);
 
+		svg {
+			stroke: var(--button-contained-warning-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-warning-800);
 			border-color: var(--color-warning-800);
+
+			svg {
+				stroke: var(--button-contained-warning-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-warning-900);
 			border-color: var(--color-warning-900);
+
+			svg {
+				stroke: var(--button-contained-warning-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-warning-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-warning-50);
 				border-color: var(--color-warning-700);
 				color: var(--color-warning-700);
+
+				svg {
+					stroke: var(--button-outlined-warning-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -227,14 +390,26 @@
 				background-color: var(--color-warning-100);
 				color: var(--color-warning-700);
 				border-color: var(--color-warning-700);
+
+				svg {
+					stroke: var(--button-outlined-warning-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-warning-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
 				color: var(--color-warning-800);
 				border-color: var(--color-warning-800);
+
+				svg {
+					stroke: var(--button-text-warning-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -242,6 +417,10 @@
 				background-color: transparent;
 				color: var(--color-warning-900);
 				border-color: var(--color-warning-900);
+
+				svg {
+					stroke: var(--button-text-warning-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -251,22 +430,42 @@
 		background: var(--color-success-600);
 		border-color: var(--color-success-600);
 
+		svg {
+			stroke: var(--button-contained-success-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-success-800);
 			border-color: var(--color-success-800);
+
+			svg {
+				stroke: var(--button-contained-success-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-success-900);
 			border-color: var(--color-success-900);
+
+			svg {
+				stroke: var(--button-contained-success-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-success-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-success-50);
 				border-color: var(--color-success-700);
 				color: var(--color-success-700);
+
+				svg {
+					stroke: var(--button-outlined-success-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -274,14 +473,26 @@
 				background-color: var(--color-success-100);
 				color: var(--color-success-700);
 				border-color: var(--color-success-700);
+
+				svg {
+					stroke: var(--button-outlined-success-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-success-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
 				color: var(--color-success-800);
 				border-color: var(--color-success-800);
+
+				svg {
+					stroke: var(--button-text-success-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -289,6 +500,10 @@
 				background-color: transparent;
 				color: var(--color-success-900);
 				border-color: var(--color-success-900);
+
+				svg {
+					stroke: var(--button-text-success-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -298,22 +513,41 @@
 		background: var(--color-info-700);
 		border-color: var(--color-info-700);
 
+		svg {
+			stroke: var(--button-contained-info-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-info-900);
 			border-color: var(--color-info-900);
+
+			svg {
+				stroke: var(--button-contained-info-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-info-950);
 			border-color: var(--color-info-950);
+
+			svg {
+				stroke: var(--button-contained-info-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-info-default-contrast);
+			}
 			&:hover {
 				background-color: var(--color-info-50);
 				border-color: var(--color-info-700);
 				color: var(--color-info-700);
+
+				svg {
+					stroke: var(--button-outlined-info-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -321,14 +555,26 @@
 				background-color: var(--color-info-100);
 				color: var(--color-info-700);
 				border-color: var(--color-info-700);
+
+				svg {
+					stroke: var(--button-outlined-info-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-info-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
 				color: var(--color-info-900);
 				border-color: var(--color-info-900);
+
+				svg {
+					stroke: var(--button-text-info-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -336,6 +582,10 @@
 				background-color: transparent;
 				color: var(--color-info-950);
 				border-color: var(--color-info-950);
+
+				svg {
+					stroke: var(--button-text-info-pressed-contrast);
+				}
 			}
 		}
 	}

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

@@ -1,8 +1,7 @@
-import Image from "next/image";
+import classNames from "classnames";
 import React, { CSSProperties } from "react";
 
 import classes from "./classes.module.scss";
-import classNames from "classnames";
 
 export enum EButtonVariant {
 	PRIMARY = "primary",
@@ -33,12 +32,12 @@ type IProps = {
 	size?: EButtonSize;
 	styleType?: EButtonStyleType;
 	fullwidth?: boolean;
-	icon?: string;
+	leftIcon?: React.ReactNode;
+	rightIcon?: React.ReactNode;
 	iconstyle?: CSSProperties;
 	disabled?: boolean;
 	isLoading?: boolean;
 	type?: "button" | "submit";
-	iconposition?: "left" | "right";
 	className?: string;
 };
 
@@ -51,12 +50,11 @@ export default function Button(props: IProps) {
 		type = "button",
 		isLoading = false,
 		fullwidth = false,
-		iconposition = "right",
 		onClick,
 		children,
-		icon,
-		iconstyle,
 		className = "",
+		leftIcon,
+		rightIcon,
 	} = props;
 
 	const fullwidthattr = fullwidth.toString();
@@ -64,15 +62,15 @@ export default function Button(props: IProps) {
 
 	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType };
 	delete attributes.fullwidth;
-	delete attributes.icon;
+	delete attributes.leftIcon;
+	delete attributes.rightIcon;
 	delete attributes.iconstyle;
-	delete attributes.iconposition;
 
 	return (
 		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
-			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
+			{leftIcon}
 			{children}
-			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
+			{rightIcon}
 		</button>
 	);
 }

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

@@ -4,11 +4,12 @@ import Newsletter from "@Front/Components/DesignSystem/Newsletter";
 import Table from "@Front/Components/DesignSystem/Table";
 import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import Tabs from "@Front/Components/Elements/Tabs";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import { ArrowLongLeftIcon, ArrowLongRightIcon } from "@heroicons/react/24/outline";
+import { useCallback, useMemo, useState } from "react";
 
 import classes from "./classes.module.scss";
-import Tabs from "@Front/Components/Elements/Tabs";
-import { useCallback, useMemo, useState } from "react";
 
 export default function DesignSystem() {
 	const userDb = useMemo(
@@ -134,66 +135,136 @@ export default function DesignSystem() {
 
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.PRIMARY}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 							Primary
 						</Button>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.OUTLINED}>
+							Primary
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.TEXT}>
 							Primary
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SECONDARY}>
-						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
 							Secondary
 						</Button>
-						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styleType={EButtonStyleType.OUTLINED}>
+							Secondary
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styleType={EButtonStyleType.TEXT}>
 							Secondary
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.NEUTRAL}>Neutral</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.NEUTRAL}>
-						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
 							Neutral
 						</Button>
-						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styleType={EButtonStyleType.OUTLINED}>
+							Neutral
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styleType={EButtonStyleType.TEXT}>
 							Neutral
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.ERROR}>Error</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.ERROR}>
-						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
 							Error
 						</Button>
-						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styleType={EButtonStyleType.OUTLINED}>
+							Error
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styleType={EButtonStyleType.TEXT}>
 							Error
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.WARNING}>Warning</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.WARNING}>
-						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
 							Warning
 						</Button>
-						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styleType={EButtonStyleType.OUTLINED}>
+							Warning
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styleType={EButtonStyleType.TEXT}>
 							Warning
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SUCCESS}>
-						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
+							Success
-							SUCCESS
 						</Button>
-						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
+						<Button
-							SUCCESS
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styleType={EButtonStyleType.OUTLINED}>
+							Success
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styleType={EButtonStyleType.TEXT}>
+							Success
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.INFO}>INFO</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.INFO}>
-						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
+							Info
-							INFO
 						</Button>
-						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
+						<Button
-							INFO
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styleType={EButtonStyleType.OUTLINED}>
+							Info
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styleType={EButtonStyleType.TEXT}>
+							Info
 						</Button>
 					</div>
 				</div>