feat:(SW-219): content card component WIP

2024-09-11 11:31:42 +02:00
parent 6cfc79f8b5
commit 3e08b3357b
7 changed files with 215 additions and 1 deletions
--- a/components/TempDesignSystem/ContentCard/contentCard.module.css
+++ b/components/TempDesignSystem/ContentCard/contentCard.module.css
@@ -0,0 +1,51 @@
+.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);
+}
+
+.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-x2);
+  align-items: flex-start;
+  padding: var(--Spacing-x4);
+}
+
+.description {
+  color: var(--Base-Text-Medium-contrast);
+}
+
+.ctaContainer {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-top: var(--Spacing-x2);
+}
+
+.sidePeekCTA {
+  /* TODO: Create ticket to remove padding on "link" buttons, 
+  align w. design on this. */
+  padding: 0 !important;
+}
--- a/components/TempDesignSystem/ContentCard/index.tsx
+++ b/components/TempDesignSystem/ContentCard/index.tsx
@@ -0,0 +1,85 @@
+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 { contentCardVariants } from "./variants"
+
+import styles from "./contentCard.module.css"
+
+import type { ContentCardProps } from "@/types/components/contentCard"
+
+export default function ContentCard({
+  title,
+  description,
+  primaryCTA,
+  secondaryCTA,
+  sidePeekCTA,
+  backgroundImage,
+  style = "default",
+  className,
+}: ContentCardProps) {
+  const cardClasses = contentCardVariants({ style, className })
+
+  return (
+    <div className={cardClasses}>
+      {backgroundImage && (
+        <div className={styles.imageContainer}>
+          <Image
+            src={backgroundImage}
+            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>
+        {sidePeekCTA ? (
+          <Button
+            // onClick={sidePeekCTA.onClick}
+            theme="base"
+            variant="icon"
+            intent="text"
+            size="small"
+            className={styles.sidePeekCTA}
+          >
+            {sidePeekCTA.label}
+            <ChevronRightIcon />
+          </Button>
+        ) : (
+          <div className={styles.ctaContainer}>
+            {primaryCTA && (
+              <Button asChild intent="primary" size="small">
+                <Link
+                  href={primaryCTA.href}
+                  target={primaryCTA.openInNewTab ? "_blank" : undefined}
+                >
+                  {primaryCTA.label}
+                </Link>
+              </Button>
+            )}
+            {secondaryCTA && (
+              <Button asChild intent="secondary" size="small">
+                <Link
+                  href={secondaryCTA.href}
+                  target={secondaryCTA.openInNewTab ? "_blank" : undefined}
+                >
+                  {secondaryCTA.label}
+                </Link>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/components/TempDesignSystem/ContentCard/variants.ts
+++ b/components/TempDesignSystem/ContentCard/variants.ts
@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./contentCard.module.css"
+
+export const contentCardVariants = cva(styles.card, {
+  variants: {
+    style: {
+      default: styles.default,
+      featured: styles.featured,
+    },
+  },
+  defaultVariants: {
+    style: "default",
+  },
+})