feat: get breakfast package from API

components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css

@@ -70,3 +70,7 @@
 .listItem:nth-of-type(n + 2) {
   margin-top: var(--Spacing-x-quarter);
 }
+
+.highlight {
+  color: var(--Scandic-Brand-Scandic-Red);
+}

components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts

@@ -34,3 +34,12 @@ export type CheckboxProps =
 export type RadioProps =
   | Omit<ListCardProps, "type">
   | Omit<TextCardProps, "type">
+
+export interface ListProps extends Pick<ListCardProps, "declined"> {
+  list?: ListCardProps["list"]
+}
+
+export interface SubtitleProps
+  extends Pick<BaseCardProps, "highlightSubtitle" | "subtitle"> {}
+
+export interface TextProps extends Pick<TextCardProps, "text"> {}

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -2,16 +2,16 @@
 
 import { useFormContext } from "react-hook-form"
 
-import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
+import { CheckIcon, CloseIcon } 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"
+import type { CardProps, ListProps, SubtitleProps, TextProps } from "./card"
 
 export default function Card({
-  Icon = HeartIcon,
+  Icon,
   iconHeight = 32,
   iconWidth = 32,
   declined = false,
@@ -26,56 +26,79 @@ export default function Card({
   value,
 }: CardProps) {
   const { register } = useFormContext()
-
   return (
     <label className={styles.label} data-declined={declined} tabIndex={0}>
-      <Caption className={styles.title} type="label" uppercase>
+      <Caption className={styles.title} color="burgundy" type="label" uppercase>
         {title}
       </Caption>
-      {subtitle ? (
-        <Caption
-          className={styles.subtitle}
-          color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
-          type="regular"
-        >
-          {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>
+      <Subtitle highlightSubtitle={highlightSubtitle} subtitle={subtitle} />
+      {Icon ? (
+        <Icon
+          className={styles.icon}
+          color="uiTextHighContrast"
+          height={iconHeight}
+          width={iconWidth}
+        />
       ) : null}
+      <List declined={declined} list={list} />
+      <Text text={text} />
       <input
+        {...register(name)}
         aria-hidden
         id={id || name}
         hidden
         type={type}
         value={value}
-        {...register(name)}
       />
     </label>
   )
 }
+
+function List({ declined, list }: ListProps) {
+  if (!list) {
+    return null
+  }
+
+  return 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>
+  ))
+}
+
+function Subtitle({ highlightSubtitle, subtitle }: SubtitleProps) {
+  if (!subtitle) {
+    return null
+  }
+
+  return (
+    <Caption
+      className={styles.subtitle}
+      color={highlightSubtitle ? "baseTextAccent" : "uiTextMediumContrast"}
+      type="label"
+      uppercase
+    >
+      {subtitle}
+    </Caption>
+  )
+}
+
+function Text({ text }: TextProps) {
+  if (!text) {
+    return null
+  }
+  return (
+    <Footnote className={styles.text} color="uiTextMediumContrast">
+      {text}
+    </Footnote>
+  )
+}
+
+export function Highlight({ children }: React.PropsWithChildren) {
+  return <span className={styles.highlight}>{children}</span>
+}