de4b3c1c3c
Chore/eslint curly braces * Add eslint rule for curly braces * run eslint --fix for all files 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>
|
|
)
|
|
}
|