5de2a993a7
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons. Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import styles from '../rate-card.module.css'
|
|
import { Typography } from '../../Typography'
|
|
import { Button } from '../../Button'
|
|
import { variants } from '../variants'
|
|
import { MaterialIcon } from '../../Icons'
|
|
|
|
interface NoRateAvailableCardProps {
|
|
variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
|
|
rateTitle: string
|
|
paymentTerm: string
|
|
bannerText?: string
|
|
noPricesAvailableText: string
|
|
handleTermsClick?: () => void
|
|
}
|
|
|
|
export default function NoRateAvailableCard({
|
|
variant,
|
|
rateTitle,
|
|
paymentTerm,
|
|
bannerText,
|
|
noPricesAvailableText,
|
|
handleTermsClick,
|
|
}: NoRateAvailableCardProps) {
|
|
const classNames = variants({
|
|
variant,
|
|
})
|
|
|
|
return (
|
|
<div className={classNames}>
|
|
{bannerText && (
|
|
<Typography variant="Tag/sm">
|
|
<p className={styles.banner}>{bannerText}</p>
|
|
</Typography>
|
|
)}
|
|
<div className={styles.container}>
|
|
<header>
|
|
<Typography variant="Tag/sm">
|
|
<h3 className={`${styles.title} ${styles.textDisabled}`}>
|
|
<Button
|
|
variant="Icon"
|
|
color="IconDefault"
|
|
size="Small"
|
|
onPress={handleTermsClick}
|
|
>
|
|
<MaterialIcon icon="info" size={20} color="CurrentColor" />
|
|
</Button>
|
|
{`${rateTitle} / ${paymentTerm}`}
|
|
</h3>
|
|
</Typography>
|
|
</header>
|
|
<div>
|
|
<div className={styles.noPricesAvailableContainer}>
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<p className={styles.noPricesAvailableText}>
|
|
{noPricesAvailableText}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|