8c3f8c74db
Feature/SW-3365 reduce upscaling of images (fix blurry images) * fix: handle when images are wider than 3:2 but rendered in a 3:2 container * use dimensions everywhere applicable * fall back to using <img sizes='auto' /> if possible * imageLoader: never nest * remove empty test file Approved-by: Anton Gunnarsson Approved-by: Matilda Landström
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import Body from "@scandic-hotels/design-system/Body"
|
|
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
|
|
import Image from "@scandic-hotels/design-system/Image"
|
|
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
|
|
|
import TeaserCardSidepeek from "./Sidepeek"
|
|
import { teaserCardVariants } from "./variants"
|
|
|
|
import styles from "./teaserCard.module.css"
|
|
|
|
import type { TeaserCardProps } from "@/types/components/teaserCard"
|
|
|
|
export default function TeaserCard({
|
|
title,
|
|
description,
|
|
primaryButton,
|
|
secondaryButton,
|
|
sidePeekButton,
|
|
sidePeekContent,
|
|
image,
|
|
intent,
|
|
alwaysStack = false,
|
|
className,
|
|
}: TeaserCardProps) {
|
|
const classNames = teaserCardVariants({ intent, alwaysStack, className })
|
|
|
|
return (
|
|
<article className={classNames}>
|
|
{image && (
|
|
<div className={styles.imageContainer}>
|
|
<Image
|
|
src={image.url}
|
|
alt={image.meta?.alt || ""}
|
|
className={styles.image}
|
|
focalPoint={image.focalPoint}
|
|
dimensions={image.dimensions}
|
|
fill
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className={styles.content}>
|
|
<Subtitle textAlign="left" type="two" color="black">
|
|
{title}
|
|
</Subtitle>
|
|
<Body color="black">{description}</Body>
|
|
{sidePeekButton && sidePeekContent ? (
|
|
<TeaserCardSidepeek
|
|
button={sidePeekButton}
|
|
sidePeekContent={sidePeekContent}
|
|
/>
|
|
) : (
|
|
<div className={styles.ctaContainer}>
|
|
{primaryButton && (
|
|
<ButtonLink
|
|
variant="Tertiary"
|
|
color="Primary"
|
|
size="Small"
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
className={styles.ctaButton}
|
|
href={primaryButton.href}
|
|
target={primaryButton.openInNewTab ? "_blank" : undefined}
|
|
>
|
|
{primaryButton.title}
|
|
</ButtonLink>
|
|
)}
|
|
{secondaryButton && (
|
|
<ButtonLink
|
|
variant="Secondary"
|
|
color="Primary"
|
|
size="Small"
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
className={styles.ctaButton}
|
|
href={secondaryButton.href}
|
|
target={secondaryButton.openInNewTab ? "_blank" : undefined}
|
|
>
|
|
{secondaryButton.title}
|
|
</ButtonLink>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|