333636c81a
Feat/BOOK-61 refactor hotel page css variables * feat(BOOK-61): Breadcrumbs * feat(BOOK-61): intro section * feat(BOOK-61): show more button * feat(BOOK-61): rooms section * feat(BOOK-61): sidepeeks * feat(BOOK-61): deprecated old Link component * feat(BOOK-61): added new TextLink component to the design-system * feat(BOOK-61): replaced deprecated links with new TextLink component * feat(BOOK-61): miscellaneous changes Approved-by: Bianca Widstam Approved-by: Christel Westerberg
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import Body from "@scandic-hotels/design-system/Body"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Image from "@scandic-hotels/design-system/Image"
|
|
import Link from "@scandic-hotels/design-system/OldDSLink"
|
|
import Title from "@scandic-hotels/design-system/Title"
|
|
|
|
import { loyaltyCardVariants } from "./variants"
|
|
|
|
import styles from "./loyaltyCard.module.css"
|
|
|
|
import type { LoyaltyCardProps } from "./loyaltyCard"
|
|
|
|
export default function LoyaltyCard({
|
|
link,
|
|
image,
|
|
heading,
|
|
bodyText,
|
|
theme = "white",
|
|
className,
|
|
}: LoyaltyCardProps) {
|
|
return (
|
|
<article
|
|
className={loyaltyCardVariants({
|
|
className,
|
|
theme,
|
|
})}
|
|
>
|
|
{image ? (
|
|
<Image
|
|
src={image.url}
|
|
width={180}
|
|
height={160}
|
|
className={styles.image}
|
|
alt={image.meta.alt || image.title}
|
|
focalPoint={image.focalPoint}
|
|
dimensions={image.dimensions}
|
|
/>
|
|
) : null}
|
|
<Title as="h4" level="h3" textAlign="center">
|
|
{heading}
|
|
</Title>
|
|
{bodyText ? <Body textAlign="center">{bodyText}</Body> : null}
|
|
<div className={styles.buttonContainer}>
|
|
{link ? (
|
|
<Link
|
|
className={styles.link}
|
|
href={link.href}
|
|
target={link.openInNewTab ? "_blank" : undefined}
|
|
textDecoration="underline"
|
|
>
|
|
<MaterialIcon
|
|
icon="arrow_right"
|
|
color="CurrentColor"
|
|
className={styles.icon}
|
|
size={20}
|
|
/>
|
|
{link.title}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|