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>
+  )
+}
--- a/components/TempDesignSystem/TeaserCard/teaserCard.module.css
+++ b/components/TempDesignSystem/TeaserCard/teaserCard.module.css
@@ -0,0 +1,71 @@
+.card {
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  flex-direction: column;
+  max-width: 399px;
+  overflow: hidden;
+}
+
+.default {
+  background-color: var(--Base-Surface-Subtle-Normal);
+}
+
+.featured {
+  background-color: var(--Main-Grey-White);
+}
+
+.default,
+.featured {
+  border: 1px solid var(--Base-Border-Subtle);
+}
+
+.imageContainer {
+  width: 100%;
+  height: 12.58625rem; /* 201.38px / 16 = 12.58625rem */
+  overflow: hidden;
+}
+
+.backgroundImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+  align-items: flex-start;
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+}
+
+.description {
+  color: var(--Base-Text-Medium-contrast);
+}
+
+.ctaContainer {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--Spacing-x1);
+  width: 100%;
+}
+
+.ctaButton {
+  width: 100%;
+}
+
+@media (min-width: 1367px) {
+  .card:not(.alwaysStack) .ctaContainer {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+
+  .card:not(.alwaysStack) .ctaContainer:has(:only-child) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sidePeekCTA {
+  /* TODO: Create ticket to remove padding on "link" buttons, 
+  align w. design on this. */
+  padding: 0 !important;
+}
--- a/components/TempDesignSystem/TeaserCard/variants.ts
+++ b/components/TempDesignSystem/TeaserCard/variants.ts
@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./teaserCard.module.css"
+
+export const teaserCardVariants = cva(styles.card, {
+  variants: {
+    style: {
+      default: styles.default,
+      featured: styles.featured,
+    },
+    alwaysStack: {
+      true: styles.alwaysStack,
+      false: "",
+    },
+  },
+  defaultVariants: {
+    style: "default",
+    alwaysStack: false,
+  },
+})