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 { .root {
padding: 2px 8px; padding: 2px 8px;
border-radius: 360px; border-radius: 360px;
display: flex;
align-items: center;
&.info { &.info {
background-color: var(--color-info-50); background-color: var(--color-info-50);
} }
@ -14,6 +16,10 @@
} }
&.error { &.error {
background-color: var(--color-error-50);
}
&.warning {
background-color: var(--color-warning-50); 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 Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
export enum ETagVariant { export enum ETagColor {
INFO = "info", INFO = "info",
SUCCESS = "success", SUCCESS = "success",
ERROR = "error", ERROR = "error",
WARNING = "warning",
}
export enum ETagVariant {
REGULAR = "regular",
SEMI_BOLD = "semi_bold",
} }
type IProps = { type IProps = {
label: string; label: string;
color: ETagColor;
variant: ETagVariant; variant: ETagVariant;
className?: string; className?: string;
}; };
const typoColor: Record<ETagVariant, ETypoColor> = { const colorMap: Record<ETagColor, ETypoColor> = {
[ETagVariant.INFO]: ETypoColor.COLOR_INFO_900, [ETagColor.INFO]: ETypoColor.COLOR_INFO_900,
[ETagVariant.SUCCESS]: ETypoColor.COLOR_SUCCESS_700, [ETagColor.SUCCESS]: ETypoColor.COLOR_SUCCESS_700,
[ETagVariant.ERROR]: ETypoColor.COLOR_SECONDARY_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) { export default function Tag(props: IProps) {
const { className, label, variant } = props; const { className, label, color, variant } = props;
return ( return (
<div className={classNames(classes["root"], className, classes[variant])}> <div className={classNames(classes["root"], className, classes[color])}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={typoColor[variant]}> <Typography typo={typoMap[variant]} color={colorMap[color]}>
{label} {label}
</Typography> </Typography>
</div> </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 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"; 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 IProps = {};
type IState = { type IState = {
@ -99,9 +99,16 @@ export default class Folder extends BasePage<IProps, IState> {
</div> </div>
<div className={classes["buttons"]}> <div className={classes["buttons"]}>
<Tag variant={ETagVariant.INFO} label="Info" /> <Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
<Tag variant={ETagVariant.SUCCESS} label="Success" /> <Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
<Tag variant={ETagVariant.ERROR} label="Error" /> <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>
</div> </div>
<Newletter isOpen /> <Newletter isOpen />