Merged in feat/SW-1383-content-card-start-page (pull request #1252)

feat(SW-1383): Implement ContentCard for the Start Page * feat(SW-1383): Implement ContentCard - Add ContentCard component - Use within CarouselCards component * fix(SW-1383): adjust carousel and content card styling * refactor(SW-1383): optimize ContentCard component styling and props * feat(SW-1383): move ContentCard image check out of component * feat(SW-1383): Add optional link prop to ContentCard component * refactor(SW-1383): Make ContentCard component linkable Approved-by: Christian Andolf Approved-by: Erik Tiekstra
2025-02-05 11:29:53 +00:00
parent a389fba8ce
commit f3e6318d49
10 changed files with 238 additions and 126 deletions
--- a/components/ContentCard/index.tsx
+++ b/components/ContentCard/index.tsx
@@ -0,0 +1,70 @@
+import Image from "@/components/Image"
+import Chip from "@/components/TempDesignSystem/Chip"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./contentCard.module.css"
+
+import type { ContentCardLinkProps,ContentCardProps } from "./contentCard"
+
+export default function ContentCard({
+  heading,
+  image,
+  bodyText,
+  promoText,
+  className = "",
+  link,
+}: ContentCardProps) {
+  const card = (
+    <article className={`${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}
+        />
+        {promoText ? (
+          <Chip className={styles.promoTag}>{promoText}</Chip>
+        ) : null}
+      </div>
+      <div className={styles.content}>
+        <Subtitle type="two">{heading}</Subtitle>
+        <Body>{bodyText}</Body>
+      </div>
+    </article>
+  )
+
+  if (!link) return card
+
+  return (
+    <ContentCardLink
+      href={link.href}
+      openInNewTab={link.openInNewTab}
+      isExternal={link.isExternal}
+    >
+      {card}
+    </ContentCardLink>
+  )
+}
+
+function ContentCardLink({
+  children,
+  href,
+  openInNewTab,
+  isExternal,
+}: ContentCardLinkProps) {
+  const Component = isExternal ? "a" : Link
+  const linkProps = {
+    href,
+    ...(openInNewTab && {
+      target: "_blank",
+      rel: "noopener noreferrer",
+    }),
+  }
+
+  return <Component {...linkProps}>{children}</Component>
+}