feat: rename form/card to form/choicecard

2024-10-08 11:06:09 +02:00
parent 9b9c1b0e14
commit 155b6683c4
8 changed files with 21 additions and 23 deletions
--- a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./card.module.css"
+
+import type { CardProps } from "./card"
+
+export default function Card({
+  Icon = HeartIcon,
+  iconHeight = 32,
+  iconWidth = 32,
+  declined = false,
+  highlightSubtitle = false,
+  id,
+  list,
+  name,
+  subtitle,
+  text,
+  title,
+  type,
+  value,
+}: CardProps) {
+  return (
+    <label className={styles.label} data-declined={declined}>
+      <Caption className={styles.title} textTransform="bold" uppercase>
+        {title}
+      </Caption>
+      {subtitle ? (
+        <Caption
+          className={styles.subtitle}
+          color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
+          textTransform="bold"
+        >
+          {subtitle}
+        </Caption>
+      ) : null}
+      <Icon
+        className={styles.icon}
+        color="uiTextHighContrast"
+        height={iconHeight}
+        width={iconWidth}
+      />
+      {list
+        ? list.map((listItem) => (
+            <span key={listItem.title} className={styles.listItem}>
+              {declined ? (
+                <CloseIcon
+                  color="uiTextMediumContrast"
+                  height={20}
+                  width={20}
+                />
+              ) : (
+                <CheckIcon color="baseIconLowContrast" height={20} width={20} />
+              )}
+              <Footnote color="uiTextMediumContrast">{listItem.title}</Footnote>
+            </span>
+          ))
+        : null}
+      {text ? (
+        <Footnote className={styles.text} color="uiTextMediumContrast">
+          {text}
+        </Footnote>
+      ) : null}
+      <input
+        aria-hidden
+        id={id || name}
+        hidden
+        name={name}
+        type={type}
+        value={value}
+      />
+    </label>
+  )
+}