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
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import { cva } from "class-variance-authority"
|
|
import { IconByIconName } from "../Icons/IconByIconName"
|
|
import { IconName } from "../Icons/iconName"
|
|
import { Typography } from "../Typography"
|
|
import styles from "./InfoBox.module.css"
|
|
import type { VariantProps } from "class-variance-authority"
|
|
|
|
const infoBoxVariants = cva(styles.infoBox, {
|
|
variants: {
|
|
theme: {
|
|
"SAS-Blue": styles.sasBlue,
|
|
Default: styles.default,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
theme: "Default",
|
|
},
|
|
})
|
|
|
|
const iconVariants = cva(styles.iconContainer, {
|
|
variants: {
|
|
theme: {
|
|
"SAS-Blue": styles.sasBlue,
|
|
Default: styles.default,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
theme: "Default",
|
|
},
|
|
})
|
|
|
|
export type Props = {
|
|
heading: string
|
|
text: string
|
|
theme?: VariantProps<typeof infoBoxVariants>["theme"]
|
|
icon?: IconName
|
|
}
|
|
|
|
export function InfoBox({ heading, text, theme, icon }: Props) {
|
|
return (
|
|
<article className={infoBoxVariants({ theme })}>
|
|
{icon && (
|
|
<div className={iconVariants({ theme })}>
|
|
<IconByIconName iconName={icon} color="CurrentColor" />
|
|
</div>
|
|
)}
|
|
<div className={styles.content}>
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<h2>{heading}</h2>
|
|
</Typography>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<p>{text}</p>
|
|
</Typography>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|