feat(BOOK-757): Moved TeaserCard to design system and added stories

Approved-by: Bianca Widstam
2026-01-21 07:50:43 +00:00
parent 8a143a2916
commit b91504e7c6
18 changed files with 465 additions and 107 deletions
--- a/packages/design-system/lib/components/TeaserCard/TeaserCard.tsx
+++ b/packages/design-system/lib/components/TeaserCard/TeaserCard.tsx
@@ -0,0 +1,103 @@
+import { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
+import { VariantProps } from "class-variance-authority"
+import { TeaserCardSidepeekContent } from "../../types/sidepeekContent"
+import { type ButtonProps } from "../Button"
+import ButtonLink from "../ButtonLink"
+import Image from "../Image"
+import { Typography } from "../Typography"
+import TeaserCardSidepeek from "./Sidepeek"
+import styles from "./teaserCard.module.css"
+import { teaserCardVariants } from "./variants"
+
+interface SidePeekButton {
+  call_to_action_text: string
+}
+
+interface TeaserCardButton extends Pick<ButtonProps, "onPress"> {
+  title: string
+  href: string
+  openInNewTab?: boolean
+}
+interface TeaserCardProps extends VariantProps<typeof teaserCardVariants> {
+  heading: string
+  bodyText: string
+  primaryButton?: TeaserCardButton
+  secondaryButton?: TeaserCardButton
+  sidePeekButton?: SidePeekButton
+  sidePeekContent?: TeaserCardSidepeekContent
+  image?: ImageVaultAsset
+  className?: string
+}
+
+export function TeaserCard({
+  heading,
+  bodyText,
+  primaryButton,
+  secondaryButton,
+  sidePeekButton,
+  sidePeekContent,
+  image,
+  style,
+  alwaysStack = false,
+  className,
+}: TeaserCardProps) {
+  const classNames = teaserCardVariants({ style, alwaysStack, className })
+
+  return (
+    <article className={classNames}>
+      {image && (
+        <div className={styles.imageContainer}>
+          <Image
+            src={image.url}
+            alt={image.meta?.alt || ""}
+            focalPoint={image.focalPoint}
+            dimensions={image.dimensions}
+            fill
+          />
+        </div>
+      )}
+      <div className={styles.content}>
+        <Typography variant="Title/Subtitle/md">
+          <p>{heading}</p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{bodyText}</p>
+        </Typography>
+
+        {sidePeekButton && sidePeekContent ? (
+          <TeaserCardSidepeek
+            button={sidePeekButton}
+            sidePeekContent={sidePeekContent}
+          />
+        ) : (
+          <div className={styles.ctaContainer}>
+            {primaryButton && (
+              <ButtonLink
+                variant="Tertiary"
+                color="Primary"
+                size="sm"
+                className={styles.ctaButton}
+                href={primaryButton.href}
+                target={primaryButton.openInNewTab ? "_blank" : undefined}
+              >
+                {primaryButton.title}
+              </ButtonLink>
+            )}
+            {secondaryButton && (
+              <ButtonLink
+                variant="Secondary"
+                color="Primary"
+                size="sm"
+                className={styles.ctaButton}
+                href={secondaryButton.href}
+                target={secondaryButton.openInNewTab ? "_blank" : undefined}
+              >
+                {secondaryButton.title}
+              </ButtonLink>
+            )}
+          </div>
+        )}
+      </div>
+    </article>
+  )
+}