4ec1e85d84
* feat(BOOK-293): Adjusted padding of the buttons to match Figma design * feat(BOOK-293): Updated variants for IconButton * feat(BOOK-113): Updated focus indicators on buttons and added default focus ring color * feat(BOOK-293): Replaced buttons inside booking widget Approved-by: Christel Westerberg
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { IconButton } from '../../IconButton'
|
|
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
|
import { Typography } from '../../Typography'
|
|
import styles from '../rate-card.module.css'
|
|
import { variants } from '../variants'
|
|
|
|
interface NoRateAvailableCardProps {
|
|
variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
|
|
rateTitle: string
|
|
paymentTerm: string
|
|
bannerText?: string
|
|
noPricesAvailableText: string
|
|
}
|
|
|
|
export default function NoRateAvailableCard({
|
|
variant,
|
|
rateTitle,
|
|
paymentTerm,
|
|
bannerText,
|
|
noPricesAvailableText,
|
|
}: 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}`}>
|
|
<IconButton variant="Muted" emphasis size="sm">
|
|
<MaterialIcon icon="info" size={20} color="Icon/Default" />
|
|
</IconButton>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
{`${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>
|
|
)
|
|
}
|