feat(SW-217): Split up Card to two (Card and TeaserCard)

2024-09-26 11:07:03 +02:00
parent 6a85cfd19c
commit bb93bdf69c
11 changed files with 200 additions and 59 deletions
--- a/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/index.tsx
@@ -0,0 +1,99 @@
+import React from "react"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import Subtitle from "../Text/Subtitle"
+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,
+  image,
+  style = "default",
+  alwaysStack = false,
+  className,
+}: TeaserCardProps) {
+  const cardClasses = teaserCardVariants({ style, alwaysStack, className })
+
+  return (
+    <article className={cardClasses}>
+      {image && (
+        <div className={styles.imageContainer}>
+          <Image
+            src={image.url}
+            alt={image.meta?.alt || ""}
+            className={styles.backgroundImage}
+            width={399}
+            height={201}
+          />
+        </div>
+      )}
+      <div className={styles.content}>
+        <Subtitle textAlign="left" type="two" color="black">
+          {title}
+        </Subtitle>
+        <Body color="black">{description}</Body>
+        {!!sidePeekButton ? (
+          <Button
+            // onClick={() => {
+            //   // TODO: Implement sidePeek functionality once SW-341 is merged.
+            // }}
+            theme="base"
+            variant="icon"
+            intent="text"
+            size="small"
+            className={styles.sidePeekCTA}
+          >
+            {sidePeekButton.title}
+            <ChevronRightIcon />
+          </Button>
+        ) : (
+          <div className={styles.ctaContainer}>
+            {primaryButton && (
+              <Button
+                asChild
+                intent="primary"
+                size="small"
+                className={styles.ctaButton}
+              >
+                <Link
+                  href={primaryButton.href}
+                  target={primaryButton.openInNewTab ? "_blank" : undefined}
+                  color="none"
+                >
+                  {primaryButton.title}
+                </Link>
+              </Button>
+            )}
+            {secondaryButton && (
+              <Button
+                asChild
+                intent="secondary"
+                size="small"
+                className={styles.ctaButton}
+              >
+                <Link
+                  href={secondaryButton.href}
+                  target={secondaryButton.openInNewTab ? "_blank" : undefined}
+                >
+                  {secondaryButton.title}
+                </Link>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </article>
+  )
+}