171 lines
5.5 KiB
TypeScript
171 lines
5.5 KiB
TypeScript
import React from "react";
|
|
import classes from "./classes.module.scss";
|
|
import classNames from "classnames";
|
|
|
|
type IProps = {
|
|
typo: ETypo;
|
|
children: React.ReactNode;
|
|
color?: ETypoColor;
|
|
className?: string;
|
|
title?: string;
|
|
type?: "div" | "span";
|
|
onClick?: () => void;
|
|
};
|
|
|
|
export enum ETypo {
|
|
DISPLAY_LARGE = "display-large",
|
|
DISPLAY_MEDIUM = "display-medium",
|
|
DISPLAY_SMALL = "display-small",
|
|
|
|
TITLE_H1 = "title-h1",
|
|
TITLE_H2 = "title-h2",
|
|
TITLE_H3 = "title-h3",
|
|
TITLE_H4 = "title-h4",
|
|
TITLE_H5 = "title-h5",
|
|
TITLE_H6 = "title-h6",
|
|
|
|
TEXT_LG_BOLD = "text-lg-bold",
|
|
TEXT_LG_SEMIBOLD = "text-lg-semibold",
|
|
TEXT_LG_REGULAR = "text-lg-regular",
|
|
TEXT_LG_UPPERCASE = "text-lg-uppercase",
|
|
TEXT_LG_light = "text-lg-light",
|
|
|
|
TEXT_MD_BOLD = "text-md-bold",
|
|
TEXT_MD_SEMIBOLD = "text-md-semibold",
|
|
TEXT_MD_REGULAR = "text-md-regular",
|
|
TEXT_MD_UPPERCASE = "text-md-uppercase",
|
|
TEXT_MD_light = "text-md-light",
|
|
|
|
TEXT_SM_BOLD = "text-sm-bold",
|
|
TEXT_SM_SEMIBOLD = "text-sm-semibold",
|
|
TEXT_SM_REGULAR = "text-sm-regular",
|
|
TEXT_SM_UPPERCASE = "text-sm-uppercase",
|
|
TEXT_SM_light = "text-sm-light",
|
|
|
|
TEXT_XS_BOLD = "text-xs-bold",
|
|
TEXT_XS_SEMIBOLD = "text-xs-semibold",
|
|
TEXT_XS_REGULAR = "text-xs-regular",
|
|
TEXT_XS_UPPERCASE = "text-xs-uppercase",
|
|
TEXT_XS_light = "text-xs-light",
|
|
|
|
CAPTION_BOLD = "caption-bold",
|
|
CAPTION_SEMIBOLD = "caption-semibold",
|
|
CAPTION_REGULAR = "caption-regular",
|
|
CAPTION_UPPERCASE = "caption-uppercase",
|
|
CAPTION_LIGHT = "caption-light",
|
|
}
|
|
|
|
export enum ETypoColor {
|
|
COLOR_GENERIC_BLACK = "--color-generic-black",
|
|
COLOR_GENERIC_WHITE = "--color-generic-white",
|
|
COLOR_GENERIC_NONE = "--color-generic-none",
|
|
|
|
COLOR_NEUTRAL_50 = "--color-neutral-50",
|
|
COLOR_NEUTRAL_100 = "--color-neutral-100",
|
|
COLOR_NEUTRAL_200 = "--color-neutral-200",
|
|
COLOR_NEUTRAL_300 = "--color-neutral-300",
|
|
COLOR_NEUTRAL_400 = "--color-neutral-400",
|
|
COLOR_NEUTRAL_500 = "--color-neutral-500",
|
|
COLOR_NEUTRAL_600 = "--color-neutral-600",
|
|
COLOR_NEUTRAL_700 = "--color-neutral-700",
|
|
COLOR_NEUTRAL_800 = "--color-neutral-800",
|
|
COLOR_NEUTRAL_900 = "--color-neutral-900",
|
|
COLOR_NEUTRAL_950 = "--color-neutral-950",
|
|
|
|
COLOR_PRIMARY_50 = "--color-primary-50",
|
|
COLOR_PRIMARY_100 = "--color-primary-100",
|
|
COLOR_PRIMARY_200 = "--color-primary-200",
|
|
COLOR_PRIMARY_300 = "--color-primary-300",
|
|
COLOR_PRIMARY_400 = "--color-primary-400",
|
|
COLOR_PRIMARY_500 = "--color-primary-500",
|
|
COLOR_PRIMARY_600 = "--color-primary-600",
|
|
COLOR_PRIMARY_700 = "--color-primary-700",
|
|
COLOR_PRIMARY_800 = "--color-primary-800",
|
|
COLOR_PRIMARY_900 = "--color-primary-900",
|
|
COLOR_PRIMARY_950 = "--color-primary-950",
|
|
|
|
COLOR_SECONDARY_50 = "--color-secondary-50",
|
|
COLOR_SECONDARY_100 = "--color-secondary-100",
|
|
COLOR_SECONDARY_200 = "--color-secondary-200",
|
|
COLOR_SECONDARY_300 = "--color-secondary-300",
|
|
COLOR_SECONDARY_400 = "--color-secondary-400",
|
|
COLOR_SECONDARY_500 = "--color-secondary-500",
|
|
COLOR_SECONDARY_600 = "--color-secondary-600",
|
|
COLOR_SECONDARY_700 = "--color-secondary-700",
|
|
COLOR_SECONDARY_800 = "--color-secondary-800",
|
|
COLOR_SECONDARY_900 = "--color-secondary-900",
|
|
COLOR_SECONDARY_950 = "--color-secondary-950",
|
|
|
|
COLOR_ERROR_50 = "--color-error-50",
|
|
COLOR_ERROR_100 = "--color-error-100",
|
|
COLOR_ERROR_200 = "--color-error-200",
|
|
COLOR_ERROR_300 = "--color-error-300",
|
|
COLOR_ERROR_400 = "--color-error-400",
|
|
COLOR_ERROR_500 = "--color-error-500",
|
|
COLOR_ERROR_600 = "--color-error-600",
|
|
COLOR_ERROR_700 = "--color-error-700",
|
|
COLOR_ERROR_800 = "--color-error-800",
|
|
COLOR_ERROR_900 = "--color-error-900",
|
|
COLOR_ERROR_950 = "--color-error-950",
|
|
|
|
COLOR_WARNING_50 = "--color-warning-50",
|
|
COLOR_WARNING_100 = "--color-warning-100",
|
|
COLOR_WARNING_200 = "--color-warning-200",
|
|
COLOR_WARNING_300 = "--color-warning-300",
|
|
COLOR_WARNING_400 = "--color-warning-400",
|
|
COLOR_WARNING_500 = "--color-warning-500",
|
|
COLOR_WARNING_700 = "--color-warning-700",
|
|
COLOR_WARNING_800 = "--color-warning-800",
|
|
COLOR_WARNING_900 = "--color-warning-900",
|
|
COLOR_WARNING_950 = "--color-warning-950",
|
|
|
|
COLOR_SUCCESS_50 = "--color-success-50",
|
|
COLOR_SUCCESS_100 = "--color-success-100",
|
|
COLOR_SUCCESS_200 = "--color-success-200",
|
|
COLOR_SUCCESS_300 = "--color-success-300",
|
|
COLOR_SUCCESS_400 = "--color-success-400",
|
|
COLOR_SUCCESS_500 = "--color-success-500",
|
|
COLOR_SUCCESS_600 = "--color-success-600",
|
|
COLOR_SUCCESS_700 = "--color-success-700",
|
|
COLOR_SUCCESS_800 = "--color-success-800",
|
|
COLOR_SUCCESS_900 = "--color-success-900",
|
|
COLOR_SUCCESS_950 = "--color-success-950",
|
|
|
|
COLOR_INFO_50 = "--color-info-50",
|
|
COLOR_INFO_100 = "--color-info-100",
|
|
COLOR_INFO_200 = "--color-info-200",
|
|
COLOR_INFO_300 = "--color-info-300",
|
|
COLOR_INFO_400 = "--color-info-400",
|
|
COLOR_INFO_500 = "--color-info-500",
|
|
COLOR_INFO_700 = "--color-info-700",
|
|
COLOR_INFO_800 = "--color-info-800",
|
|
COLOR_INFO_900 = "--color-info-900",
|
|
COLOR_INFO_950 = "--color-info-950",
|
|
|
|
TABS_CONTRAST_DEFAULT = "--tabs-contrast-default",
|
|
TABS_CONTRAST_ACTIVATED = "--tabs-contrast-actived",
|
|
|
|
INPUT_LABEL = "--input-label",
|
|
INPUT_ERROR = "--input-error",
|
|
}
|
|
|
|
export default function Typography(props: IProps) {
|
|
const { typo, color, className, title, children, type = "div", onClick } = props;
|
|
|
|
const style = color ? ({ "--data-color": `var(${color})` } as React.CSSProperties) : undefined;
|
|
|
|
if (type === "span") {
|
|
return (
|
|
<span className={classNames(classes["root"], classes[typo], className)} style={style} title={title}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={classNames(classes["root"], classes[typo], className)} style={style} title={title} onClick={onClick}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|