4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Max S 2024-08-13 11:21:40 +02:00
commit 1af3f8eda2
2 changed files with 222 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

402
src/front/Components/DesignSystem/Button/classes.module.scss
View File

@ -26,8 +26,8 @@
*/
&[variant="primary"] {
color: var(--button-contained-primary-hovered-contrast);
border: 1px solid var(--button-contained-primary-default-border);
color: var(--button-contained-primary-default-contrast);
border-color: var(--button-contained-primary-default-border);
background: var(--button-contained-primary-default-background);
svg {
@ -35,7 +35,7 @@
}
&:hover {
border: 1px solid var(--button-contained-primary-hovered-border);
border-color: var(--button-contained-primary-hovered-border);
background: var(--button-contained-primary-hovered-background);
svg {
@ -46,7 +46,7 @@
&:focus,
&:active {
color: var(--button-contained-primary-default-contrast);
border: 1px solid var(--button-contained-primary-pressed-border);
border-color: var(--button-contained-primary-pressed-border);
background: var(--button-contained-primary-pressed-background);
svg {
@ -56,7 +56,7 @@
&[styletype="outlined"] {
color: var(--button-outlined-primary-default-contrast);
border: 1px solid var(--button-outlined-primary-default-border);
border-color: var(--button-outlined-primary-default-border);
background: var(--button-outlined-primary-default-background);
svg {
@ -64,7 +64,7 @@
}
&:hover {
border: 1px solid var(--button-outlined-primary-hovered-border);
border-color: var(--button-outlined-primary-hovered-border);
background: var(--button-outlined-primary-hovered-background);
svg {
@ -75,7 +75,7 @@
&:focus,
&:active {
color: var(--button-outlined-primary-pressed-contrast);
border: 1px solid var(--button-outlined-primary-pressed-border);
border-color: var(--button-outlined-primary-pressed-border);
background: var(--button-outlined-primary-pressed-background);
svg {
@ -86,16 +86,16 @@
&[styletype="text"] {
color: var(--button-text-primary-default-contrast);
border-bottom: 1px solid var(--button-text-primary-default-border);
border-color: var(--button-text-primary-default-border);
background: var(--button-text-primary-default-background);
svg {
stroke: var(--button-text-primary-default-contrast);
}
&:hover {
border-bottom: 1px solid var(--button-outlined-primary-hovered-border);
background: var(--button-outlined-primary-default-background);
color: var(--button-text-primary-hovered-contrast);
border-color: var(--button-text-primary-hovered-border);
background: var(--button-text-primary-hovered-background);
svg {
stroke: var(--button-text-primary-hovered-contrast);
@ -104,9 +104,9 @@
&:focus,
&:active {
color: var(--color-primary-800);
background: var(--button-outlined-primary-default-background);
border-bottom: 1px solid var(--color-primary-800);
color: var(--button-text-primary-pressed-contrast);
border-color: var(--button-text-primary-pressed-border);
background: var(--button-text-primary-pressed-background);
svg {
stroke: var(--button-text-primary-pressed-contrast);
@ -117,17 +117,16 @@
&[variant="secondary"] {
color: var(--button-contained-secondary-default-contrast);
background: var(--button-contained-secondary-default-background);
border-color: var(--button-contained-secondary-default-border);
background: var(--button-contained-secondary-default-background);
svg {
stroke: var(--button-contained-secondary-default-contrast);
}
&:hover {
color: var(--button-contained-secondary-hovered-contrast);
background: var(--button-contained-secondary-hovered-background);
border-color: var(--button-contained-secondary-hovered-border);
background: var(--button-contained-secondary-hovered-background);
svg {
stroke: var(--button-contained-secondary-hovered-contrast);
@ -136,9 +135,9 @@
&:focus,
&:active {
color: var(--button-contained-secondary-pressed-contrast);
background: var(--button-contained-secondary-pressed-background);
color: var(--button-contained-secondary-default-contrast);
border-color: var(--button-contained-secondary-pressed-border);
background: var(--button-contained-secondary-pressed-background);
svg {
stroke: var(--button-contained-secondary-pressed-contrast);
@ -147,14 +146,15 @@
&[styletype="outlined"] {
color: var(--button-outlined-secondary-default-contrast);
border: 1px solid var(--button-outlined-secondary-default-border);
border-color: var(--button-outlined-secondary-default-border);
background: var(--button-outlined-secondary-default-background);
svg {
stroke: var(--button-outlined-secondary-default-contrast);
}
&:hover {
border: 1px solid var(--button-outlined-secondary-hovered-border);
border-color: var(--button-outlined-secondary-hovered-border);
background: var(--button-outlined-secondary-hovered-background);
svg {
@ -165,7 +165,7 @@
&:focus,
&:active {
color: var(--button-outlined-secondary-pressed-contrast);
border: 1px solid var(--button-outlined-secondary-pressed-border);
border-color: var(--button-outlined-secondary-pressed-border);
background: var(--button-outlined-secondary-pressed-background);
svg {
@ -176,15 +176,16 @@
&[styletype="text"] {
color: var(--button-text-secondary-default-contrast);
border-bottom: 1px solid var(--button-text-secondary-default-border);
border-color: var(--button-text-secondary-default-border);
background: var(--button-text-secondary-default-background);
svg {
stroke: var(--button-text-secondary-default-contrast);
}
&:hover {
border-bottom: 1px solid var(--button-outlined-secondary-hovered-border);
background: var(--button-outlined-secondary-default-background);
color: var(--button-text-secondary-hovered-contrast);
border-color: var(--button-text-secondary-hovered-border);
background: var(--button-text-secondary-hovered-background);
svg {
stroke: var(--button-text-secondary-hovered-contrast);
@ -193,9 +194,9 @@
&:focus,
&:active {
color: var(--button-outlined-secondary-pressed-contrast);
border-bottom: 1px solid var(--button-outlined-secondary-pressed-border);
background: var(--button-outlined-secondary-pressed-background);
color: var(--button-text-secondary-pressed-contrast);
border-color: var(--button-text-secondary-pressed-border);
background: var(--button-text-secondary-pressed-background);
svg {
stroke: var(--button-text-secondary-pressed-contrast);
@ -205,8 +206,8 @@
}
&[variant="neutral"] {
color: var(--button-contained-neutral-hovered-contrast);
border: 1px solid var(--button-contained-neutral-default-border);
color: var(--button-contained-neutral-default-contrast);
border-color: var(--button-contained-neutral-default-border);
background: var(--button-contained-neutral-default-background);
svg {
@ -214,7 +215,7 @@
}
&:hover {
border: 1px solid var(--button-contained-neutral-hovered-border);
border-color: var(--button-contained-neutral-hovered-border);
background: var(--button-contained-neutral-hovered-background);
svg {
@ -225,7 +226,7 @@
&:focus,
&:active {
color: var(--button-contained-neutral-default-contrast);
border: 1px solid var(--button-contained-neutral-pressed-border);
border-color: var(--button-contained-neutral-pressed-border);
background: var(--button-contained-neutral-pressed-background);
svg {
@ -235,15 +236,17 @@
&[styletype="outlined"] {
color: var(--button-outlined-neutral-default-contrast);
border: 1px solid var(--button-outlined-neutral-default-border);
border-color: var(--button-outlined-neutral-default-border);
background: var(--button-outlined-neutral-default-background);
svg {
stroke: var(--button-outlined-neutral-default-contrast);
}
&:hover {
border: 1px solid var(--button-outlined-neutral-hovered-border);
border-color: var(--button-outlined-neutral-hovered-border);
background: var(--button-outlined-neutral-hovered-background);
svg {
stroke: var(--button-outlined-neutral-hovered-contrast);
}
@ -252,7 +255,7 @@
&:focus,
&:active {
color: var(--button-outlined-neutral-pressed-contrast);
border: 1px solid var(--button-outlined-neutral-pressed-border);
border-color: var(--button-outlined-neutral-pressed-border);
background: var(--button-outlined-neutral-pressed-background);
svg {
@ -263,15 +266,16 @@
&[styletype="text"] {
color: var(--button-text-neutral-default-contrast);
border-bottom: 1px solid var(--button-text-neutral-default-border);
border-color: var(--button-text-neutral-default-border);
background: var(--button-text-neutral-default-background);
svg {
stroke: var(--button-text-neutral-default-contrast);
}
&:hover {
border-bottom: 1px solid var(--button-outlined-neutral-hovered-border);
background: var(--button-outlined-neutral-default-background);
color: var(--button-text-neutral-hovered-contrast);
border-color: var(--button-text-neutral-hovered-border);
background: var(--button-text-neutral-hovered-background);
svg {
stroke: var(--button-text-neutral-hovered-contrast);
@ -280,9 +284,9 @@
&:focus,
&:active {
color: var(--color-primary-800);
background: var(--button-outlined-neutral-default-background);
border-bottom: 1px solid var(--color-primary-800);
color: var(--button-text-neutral-pressed-contrast);
border-color: var(--button-text-neutral-pressed-border);
background: var(--button-text-neutral-pressed-background);
svg {
stroke: var(--button-text-neutral-pressed-contrast);
@ -292,17 +296,17 @@
}
&[variant="error"] {
color: var(--color-error-600);
background: var(--color-error-600);
border-color: var(--color-error-600);
color: var(--button-contained-error-default-contrast);
border-color: var(--button-contained-error-default-border);
background: var(--button-contained-error-default-background);
svg {
stroke: var(--button-contained-error-default-contrast);
}
&:hover {
background: var(--color-error-800);
border-color: var(--color-error-800);
border-color: var(--button-contained-error-hovered-border);
background: var(--button-contained-error-hovered-background);
svg {
stroke: var(--button-contained-error-hovered-contrast);
@ -311,8 +315,9 @@
&:focus,
&:active {
background: var(--color-error-900);
border-color: var(--color-error-900);
color: var(--button-contained-error-default-contrast);
border-color: var(--button-contained-error-pressed-border);
background: var(--button-contained-error-pressed-background);
svg {
stroke: var(--button-contained-error-pressed-contrast);
@ -320,13 +325,17 @@
}
&[styletype="outlined"] {
color: var(--button-outlined-error-default-contrast);
border-color: var(--button-outlined-error-default-border);
background: var(--button-outlined-error-default-background);
svg {
stroke: var(--button-outlined-error-default-contrast);
}
&:hover {
background-color: var(--color-error-50);
border-color: var(--color-secondary-700);
border-color: var(--button-outlined-error-hovered-border);
background: var(--button-outlined-error-hovered-background);
svg {
stroke: var(--button-outlined-error-hovered-contrast);
@ -335,9 +344,9 @@
&:focus,
&:active {
background-color: var(--color-error-100);
color: var(--color-secondary-700);
border-color: var(--color-secondary-700);
color: var(--button-outlined-error-pressed-contrast);
border-color: var(--button-outlined-error-pressed-border);
background: var(--button-outlined-error-pressed-background);
svg {
stroke: var(--button-outlined-error-pressed-contrast);
@ -346,14 +355,17 @@
}
&[styletype="text"] {
color: var(--button-text-error-default-contrast);
border-color: var(--button-text-error-default-border);
background: var(--button-text-error-default-background);
svg {
stroke: var(--button-text-error-default-contrast);
}
&:hover {
background-color: transparent;
color: var(--color-error-800);
border-color: var(--color-error-800);
color: var(--button-text-error-hovered-contrast);
border-color: var(--button-text-error-hovered-border);
background: var(--button-text-error-hovered-background);
svg {
stroke: var(--button-text-error-hovered-contrast);
@ -362,9 +374,9 @@
&:focus,
&:active {
background-color: transparent;
color: var(--color-error-900);
border-color: var(--color-error-900);
color: var(--button-text-error-pressed-contrast);
border-color: var(--button-text-error-pressed-border);
background: var(--button-text-error-pressed-background);
svg {
stroke: var(--button-text-error-pressed-contrast);
@ -373,101 +385,18 @@
}
}
&[variant="warning"] {
color: var(--color-warning-600);
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,
&:active {
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,
&:active {
background-color: transparent;
color: var(--color-warning-900);
border-color: var(--color-warning-900);
svg {
stroke: var(--button-text-warning-pressed-contrast);
}
}
}
}
&[variant="success"] {
color: var(--color-success-600);
background: var(--color-success-600);
border-color: var(--color-success-600);
color: var(--button-contained-success-default-contrast);
border-color: var(--button-contained-success-default-border);
background: var(--button-contained-success-default-background);
svg {
stroke: var(--button-contained-success-default-contrast);
}
&:hover {
background: var(--color-success-800);
border-color: var(--color-success-800);
border-color: var(--button-contained-success-hovered-border);
background: var(--button-contained-success-hovered-background);
svg {
stroke: var(--button-contained-success-hovered-contrast);
@ -476,8 +405,9 @@
&:focus,
&:active {
background: var(--color-success-900);
border-color: var(--color-success-900);
color: var(--button-contained-success-default-contrast);
border-color: var(--button-contained-success-pressed-border);
background: var(--button-contained-success-pressed-background);
svg {
stroke: var(--button-contained-success-pressed-contrast);
@ -485,14 +415,17 @@
}
&[styletype="outlined"] {
color: var(--button-outlined-success-default-contrast);
border-color: var(--button-outlined-success-default-border);
background: var(--button-outlined-success-default-background);
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);
border-color: var(--button-outlined-success-hovered-border);
background: var(--button-outlined-success-hovered-background);
svg {
stroke: var(--button-outlined-success-hovered-contrast);
@ -501,9 +434,9 @@
&:focus,
&:active {
background-color: var(--color-success-100);
color: var(--color-success-700);
border-color: var(--color-success-700);
color: var(--button-outlined-success-pressed-contrast);
border-color: var(--button-outlined-success-pressed-border);
background: var(--button-outlined-success-pressed-background);
svg {
stroke: var(--button-outlined-success-pressed-contrast);
@ -512,14 +445,17 @@
}
&[styletype="text"] {
color: var(--button-text-success-default-contrast);
border-color: var(--button-text-success-default-border);
background: var(--button-text-success-default-background);
svg {
stroke: var(--button-text-success-default-contrast);
}
&:hover {
background-color: transparent;
color: var(--color-success-800);
border-color: var(--color-success-800);
color: var(--button-text-success-hovered-contrast);
border-color: var(--button-text-success-hovered-border);
background: var(--button-text-success-hovered-background);
svg {
stroke: var(--button-text-success-hovered-contrast);
@ -528,9 +464,9 @@
&:focus,
&:active {
background-color: transparent;
color: var(--color-success-900);
border-color: var(--color-success-900);
color: var(--button-text-success-pressed-contrast);
border-color: var(--button-text-success-pressed-border);
background: var(--button-text-success-pressed-background);
svg {
stroke: var(--button-text-success-pressed-contrast);
@ -539,18 +475,108 @@
}
}
&[variant="warning"] {
color: var(--button-contained-warning-default-contrast);
border-color: var(--button-contained-warning-default-border);
background: var(--button-contained-warning-default-background);
svg {
stroke: var(--button-contained-warning-default-contrast);
}
&:hover {
border-color: var(--button-contained-warning-hovered-border);
background: var(--button-contained-warning-hovered-background);
svg {
stroke: var(--button-contained-warning-hovered-contrast);
}
}
&:focus,
&:active {
color: var(--button-contained-warning-default-contrast);
border-color: var(--button-contained-warning-pressed-border);
background: var(--button-contained-warning-pressed-background);
svg {
stroke: var(--button-contained-warning-pressed-contrast);
}
}
&[styletype="outlined"] {
color: var(--button-outlined-warning-default-contrast);
border-color: var(--button-outlined-warning-default-border);
background: var(--button-outlined-warning-default-background);
svg {
stroke: var(--button-outlined-warning-default-contrast);
}
&:hover {
border-color: var(--button-outlined-warning-hovered-border);
background: var(--button-outlined-warning-hovered-background);
svg {
stroke: var(--button-outlined-warning-hovered-contrast);
}
}
&:focus,
&:active {
color: var(--button-outlined-warning-pressed-contrast);
border-color: var(--button-outlined-warning-pressed-border);
background: var(--button-outlined-warning-pressed-background);
svg {
stroke: var(--button-outlined-warning-pressed-contrast);
}
}
}
&[styletype="text"] {
color: var(--button-text-warning-default-contrast);
border-color: var(--button-text-warning-default-border);
background: var(--button-text-warning-default-background);
svg {
stroke: var(--button-text-warning-default-contrast);
}
&:hover {
color: var(--button-text-warning-hovered-contrast);
border-color: var(--button-text-warning-hovered-border);
background: var(--button-text-warning-hovered-background);
svg {
stroke: var(--button-text-warning-hovered-contrast);
}
}
&:focus,
&:active {
color: var(--button-text-warning-pressed-contrast);
border-color: var(--button-text-warning-pressed-border);
background: var(--button-text-warning-pressed-background);
svg {
stroke: var(--button-text-warning-pressed-contrast);
}
}
}
}
&[variant="info"] {
color: var(--color-info-700);
background: var(--color-info-700);
border-color: var(--color-info-700);
color: var(--button-contained-info-default-contrast);
border-color: var(--button-contained-info-default-border);
background: var(--button-contained-info-default-background);
svg {
stroke: var(--button-contained-info-default-contrast);
}
&:hover {
background: var(--color-info-900);
border-color: var(--color-info-900);
border-color: var(--button-contained-info-hovered-border);
background: var(--button-contained-info-hovered-background);
svg {
stroke: var(--button-contained-info-hovered-contrast);
@ -559,8 +585,9 @@
&:focus,
&:active {
background: var(--color-info-950);
border-color: var(--color-info-950);
color: var(--button-contained-info-default-contrast);
border-color: var(--button-contained-info-pressed-border);
background: var(--button-contained-info-pressed-background);
svg {
stroke: var(--button-contained-info-pressed-contrast);
@ -568,13 +595,17 @@
}
&[styletype="outlined"] {
color: var(--button-outlined-info-default-contrast);
border-color: var(--button-outlined-info-default-border);
background: var(--button-outlined-info-default-background);
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);
border-color: var(--button-outlined-info-hovered-border);
background: var(--button-outlined-info-hovered-background);
svg {
stroke: var(--button-outlined-info-hovered-contrast);
@ -583,9 +614,9 @@
&:focus,
&:active {
background-color: var(--color-info-100);
color: var(--color-info-700);
border-color: var(--color-info-700);
color: var(--button-outlined-info-pressed-contrast);
border-color: var(--button-outlined-info-pressed-border);
background: var(--button-outlined-info-pressed-background);
svg {
stroke: var(--button-outlined-info-pressed-contrast);
@ -594,14 +625,17 @@
}
&[styletype="text"] {
color: var(--button-text-info-default-contrast);
border-color: var(--button-text-info-default-border);
background: var(--button-text-info-default-background);
svg {
stroke: var(--button-text-info-default-contrast);
}
&:hover {
background-color: transparent;
color: var(--color-info-900);
border-color: var(--color-info-900);
color: var(--button-text-info-hovered-contrast);
border-color: var(--button-text-info-hovered-border);
background: var(--button-text-info-hovered-background);
svg {
stroke: var(--button-text-info-hovered-contrast);
@ -610,9 +644,9 @@
&:focus,
&:active {
background-color: transparent;
color: var(--color-info-950);
border-color: var(--color-info-950);
color: var(--button-text-info-pressed-contrast);
border-color: var(--button-text-info-pressed-border);
background: var(--button-text-info-pressed-background);
svg {
stroke: var(--button-text-info-pressed-contrast);

7
src/front/Components/DesignSystem/Separator/index.tsx
View File

@ -1,7 +1,7 @@
import classNames from "classnames";
import React from "react";
import classes from "./classes.module.scss";
import classNames from "classnames";
export enum ESeperatorColor {
LIGHT = "light",
@ -19,15 +19,16 @@ type IProps = {
color?: ESeperatorColor;
direction?: ESeperatorDirection;
size?: number;
thickness?: number;
};
export default function Separator(props: IProps) {
const { color = ESeperatorColor.DEFAULT, direction = ESeperatorDirection.HORIZONTAL, size } = props;
const { color = ESeperatorColor.DEFAULT, direction = ESeperatorDirection.HORIZONTAL, size, thickness = 1 } = props;
return (
<div
className={classNames(classes["root"], classes[color], classes[direction])}
style={direction === ESeperatorDirection.HORIZONTAL ? { width: size } : { height: size }}
style={direction === ESeperatorDirection.HORIZONTAL ? { width: size, height: thickness } : { height: size, width: thickness }}
/>
);
}