63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import classes from "./classes.module.scss";
|
|
import classNames from "classnames";
|
|
|
|
type IProps = {
|
|
typo: ITypo;
|
|
children: React.ReactNode;
|
|
color?: ITypoColor;
|
|
className?: string;
|
|
title?: string;
|
|
};
|
|
type IState = {};
|
|
|
|
export enum ITypo {
|
|
H1 = "H1-60",
|
|
H1Bis = "H1-bis-40",
|
|
H2 = "H2-30",
|
|
H3 = "H3-24",
|
|
|
|
P_SB_18 = "Paragraphe-semibold-18",
|
|
P_18 = "Paragraphe-simple-18",
|
|
P_MAJ_18 = "Paragraphe-MAJ-18",
|
|
NAV_HEADER_18 = "Nav-header-off-18",
|
|
P_ERR_18 = "Paragraphe-18-error",
|
|
|
|
P_SB_16 = "Paragraphe-semibold-16",
|
|
P_16 = "Paragraphe-simple-16",
|
|
NAV_INPUT_16 = "Nav-input-off-16",
|
|
P_ERR_16 = "Paragraphe-16-error",
|
|
|
|
CAPTION_14 = "Caption_14",
|
|
CAPTION_14_SB = "Caption_14-semibold",
|
|
}
|
|
|
|
export enum ITypoColor {
|
|
RE_HOVER = "re-hover",
|
|
GREY = "grey",
|
|
BLACK = "black",
|
|
PURPLE_FLASH = "purple-flash",
|
|
PINK_FLASH = "pink-flash",
|
|
GREEN_FLASH = "green-flash",
|
|
ORANGE_FLASH = "orange-flash",
|
|
RED_FLASH = "red-flash",
|
|
WHITE = "white",
|
|
}
|
|
|
|
export default class Typography extends React.Component<IProps, IState> {
|
|
public override render(): JSX.Element {
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
classes["root"],
|
|
classes[this.props.typo],
|
|
classes[this.props.color ?? ""],
|
|
this.props.className ?? "",
|
|
)}
|
|
title={this.props.title}>
|
|
{this.props.children}
|
|
</div>
|
|
);
|
|
}
|
|
}
|