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

✨ variant tag semi-bold for table tag

Browse Source
This commit is contained in:
Max S 2024-07-15 16:33:59 +02:00
parent 0b9b098d46
commit a28e0ae950
3 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/front/Components/DesignSystem/Tag/classes.module.scss
View File

@ -2,9 +2,11 @@
.root {
padding: 2px 8px;
border-radius: 360px;
display: flex;
align-items: center;
&.info {
background-color: var(--color-info-50);
}
@ -14,6 +16,10 @@
}
&.error {
background-color: var(--color-error-50);
}
&.warning {
background-color: var(--color-warning-50);
}
}

29
src/front/Components/DesignSystem/Tag/index.tsx
View File

@ -4,30 +4,43 @@ import React from "react";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
export enum ETagVariant {
export enum ETagColor {
INFO = "info",
SUCCESS = "success",
ERROR = "error",
WARNING = "warning",
}
export enum ETagVariant {
REGULAR = "regular",
SEMI_BOLD = "semi_bold",
}
type IProps = {
label: string;
color: ETagColor;
variant: ETagVariant;
className?: string;
};
const typoColor: Record<ETagVariant, ETypoColor> = {
[ETagVariant.INFO]: ETypoColor.COLOR_INFO_900,
[ETagVariant.SUCCESS]: ETypoColor.COLOR_SUCCESS_700,
[ETagVariant.ERROR]: ETypoColor.COLOR_SECONDARY_700,
const colorMap: Record<ETagColor, ETypoColor> = {
[ETagColor.INFO]: ETypoColor.COLOR_INFO_900,
[ETagColor.SUCCESS]: ETypoColor.COLOR_SUCCESS_700,
[ETagColor.ERROR]: ETypoColor.COLOR_SECONDARY_700,
[ETagColor.WARNING]: ETypoColor.COLOR_WARNING_700,
};
const typoMap: Record<ETagVariant, ETypo> = {
[ETagVariant.REGULAR]: ETypo.TEXT_MD_REGULAR,
[ETagVariant.SEMI_BOLD]: ETypo.TEXT_XS_SEMIBOLD,
};
export default function Tag(props: IProps) {
const { className, label, variant } = props;
const { className, label, color, variant } = props;
return (
<div className={classNames(classes["root"], className, classes[variant])}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={typoColor[variant]}>
<div className={classNames(classes["root"], className, classes[color])}>
<Typography typo={typoMap[variant]} color={colorMap[color]}>
{label}
</Typography>
</div>

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

@ -6,7 +6,7 @@ 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";
import Tag, { ETagVariant } from "@Front/Components/DesignSystem/Tag";
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
type IProps = {};
type IState = {
@ -99,9 +99,16 @@ export default class Folder extends BasePage<IProps, IState> {
</div>
<div className={classes["buttons"]}>
<Tag variant={ETagVariant.INFO} label="Info" />
<Tag variant={ETagVariant.SUCCESS} label="Success" />
<Tag variant={ETagVariant.ERROR} label="Error" />
<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
</div>
<div className={classes["buttons"]}>
<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
</div>
</div>
<Newletter isOpen />