db30588f63
Feature/SW-3595 Add info boxes to SAS start page & Eurobonus alert to select-hotel page on SAS
* wip
* feat(SW-3595): Add info boxes to SAS start page
* Add InfoBox to design-system
* Add background gradient to SAS start page
* update variable naming and conditionalize the eurobonus message on select-hotel
* SAS startpage update default message
* make select-hotel a bit more generic with slot={} instead of alert={}
Approved-by: Anton Gunnarsson
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>
|
|
)
|
|
}
|