d0546926a9
fix(SW-3691): Setup one prettier config for whole repo * Setup prettierrc in root and remove other configs Approved-by: Joakim Jäderberg Approved-by: Linus Flood
56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import { cva } from "class-variance-authority"
|
|
import styles from "./messageBanner.module.css"
|
|
import { Typography } from "../Typography"
|
|
import { MaterialIcon } from "../Icons/MaterialIcon"
|
|
|
|
type MessageBannerType = "default" | "error" | "info"
|
|
type TextColor = "default" | "error"
|
|
|
|
const textVariants = cva("", {
|
|
variants: {
|
|
textColor: {
|
|
default: styles.textDefault,
|
|
error: styles.textError,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
textColor: "default",
|
|
},
|
|
})
|
|
|
|
type MessageBannerProps = {
|
|
type?: MessageBannerType
|
|
textColor?: TextColor
|
|
text: string
|
|
}
|
|
|
|
export function MessageBanner({
|
|
type = "default",
|
|
textColor = "default",
|
|
text,
|
|
}: MessageBannerProps) {
|
|
const textClass = textVariants({ textColor })
|
|
|
|
const iconName = type === "error" ? "error" : "info"
|
|
const iconColor =
|
|
type === "error"
|
|
? "Icon/Feedback/Error"
|
|
: type === "info"
|
|
? "Icon/Feedback/Information"
|
|
: "Icon/Default"
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Typography
|
|
className={textClass}
|
|
variant="Body/Supporting text (caption)/smRegular"
|
|
>
|
|
<span className={styles.content}>
|
|
<MaterialIcon size={20} icon={iconName} color={iconColor} isFilled />
|
|
{text}
|
|
</span>
|
|
</Typography>
|
|
</div>
|
|
)
|
|
}
|