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

✨ New buttons

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-05 15:25:39 +02:00
parent ddc660ba2c
commit e94702c616
3 changed files with 309 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,9 +41,6 @@
} }
&[styleType="outlined"] { &[styleType="outlined"] {
color: var(--color-primary-500);
border-color: var(--color-primary-500);
&:hover { &:hover {
background-color: var(--color-primary-50); background-color: var(--color-primary-50);
} }
@ -57,9 +54,6 @@
} }
&[styleType="text"] { &[styleType="text"] {
color: var(--color-primary-500);
border-color: var(--color-primary-500);
&:hover { &:hover {
background-color: transparent; background-color: transparent;
} }
@ -77,36 +71,273 @@
color: var(--color-secondary-500); color: var(--color-secondary-500);
background: var(--color-secondary-500); background: var(--color-secondary-500);
border-color: 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"] { &[variant="neutral"] {
color: var(--color-neutral-500); color: var(--color-neutral-500);
background: var(--color-neutral-500); background: var(--color-neutral-500);
border-color: 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"] { &[variant="error"] {
color: var(--color-error-600); color: var(--color-error-600);
background: var(--color-error-600); background: var(--color-error-600);
border-color: 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"] { &[variant="warning"] {
color: var(--color-warning-600); color: var(--color-warning-600);
background: var(--color-warning-600); background: var(--color-warning-600);
border-color: 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"] { &[variant="success"] {
color: var(--color-success-600); color: var(--color-success-600);
background: var(--color-success-600); background: var(--color-success-600);
border-color: 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"] { &[variant="info"] {
color: var(--color-info-700); color: var(--color-info-700);
background: var(--color-info-700); background: var(--color-info-700);
border-color: 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);
}
}
} }
/** /**

8
src/front/Components/Layouts/Folder/classes.module.scss
View File

@ -12,6 +12,9 @@
.choose-a-folder { .choose-a-folder {
margin-top: 96px; margin-top: 96px;
text-align: center; text-align: center;
display: flex;
gap: 16px;
flex-direction: column;
} }
} }
@ -70,3 +73,8 @@
} }
} }
} }
.buttons {
display: flex;
gap: 16px;
}

64
src/front/Components/Layouts/Folder/index.tsx
View File

@ -5,6 +5,7 @@ import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import BasePage from "../Base"; import BasePage from "../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Newletter from "@Front/Components/DesignSystem/Newsletter"; import Newletter from "@Front/Components/DesignSystem/Newsletter";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
type IProps = {}; type IProps = {};
type IState = { 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}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier Sélectionnez un dossier
</Typography> </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> </div>
<Newletter isOpen /> <Newletter isOpen />
</div> </div>