chore(BOOK-754): Moved ContentCard to design system and added stories

Approved-by: Bianca Widstam Approved-by: Anton Gunnarsson
2026-01-20 12:37:22 +00:00
parent 510f25a812
commit d7eed5b318
12 changed files with 172 additions and 172 deletions
--- a/packages/design-system/lib/components/ContentCard/ContentCard.tsx
+++ b/packages/design-system/lib/components/ContentCard/ContentCard.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
+import { useIntl } from "react-intl"
+
+import styles from "./contentCard.module.css"
+
+import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
+import { ChipStatic } from "../ChipStatic"
+import Image from "../Image"
+import { Typography } from "../Typography"
+
+interface ContentCardProps {
+  link?: {
+    href: string
+    openInNewTab?: boolean
+    isExternal?: boolean
+  }
+  heading: string
+  image: ImageVaultAsset
+  bodyText: string
+  promoText?: string
+  className?: string
+}
+
+export function ContentCard({
+  heading,
+  image,
+  bodyText,
+  promoText,
+  className,
+  link,
+}: ContentCardProps) {
+  const intl = useIntl()
+
+  const card = (
+    <article className={cx(styles.card, className)}>
+      <div className={styles.imageContainer}>
+        <Image
+          src={image.url}
+          alt={image.meta.alt || image.meta.caption || ""}
+          className={styles.image}
+          fill
+          sizes="(min-width: 768px) 413px, 100vw"
+          focalPoint={image.focalPoint}
+          dimensions={image.dimensions}
+        />
+        {promoText ? (
+          <ChipStatic
+            color="Neutral"
+            size="sm"
+            lowerCase
+            className={styles.promoTag}
+          >
+            {promoText}
+          </ChipStatic>
+        ) : null}
+      </div>
+      <div className={styles.content}>
+        <Typography variant="Title/Subtitle/md">
+          <h4>{heading}</h4>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{bodyText}</p>
+        </Typography>
+      </div>
+    </article>
+  )
+
+  if (!link) return card
+
+  const linkProps = {
+    className: styles.link,
+    ...(link.openInNewTab && {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: intl.formatMessage({
+        id: "common.linkOpenInNewTab",
+        defaultMessage: "Opens in a new tab/window",
+      }),
+    }),
+  }
+
+  return (
+    <NextLink href={link.href} {...linkProps}>
+      {card}
+    </NextLink>
+  )
+}