Merged in feat/SW-1890-New-Breakfast-Component (pull request #1666)

Feat/SW-1890 New Breakfast Component Design

* refactor(SW-1890): Replace BreakfastChoiceCard with RadioCard component and update styles

- Removed BreakfastChoiceCard component and its associated styles.
- extemded RadioCard component to additional UI.
- Updated breakfast.module.css to adjust container width.
- Added new properties for subtitleSecondary and description in RadioCard.
- Updated translations for breakfast-related messages in en.json.

* feat(SW-1890): Add hover state to RadioCard

* chore(SW1890): Update translation for breakfast cost message to clarify age range

* chore(SW-1890): Updated breakfast cost display to use formatPrice utility

* fix(SW-1890): Set fixed size for CoffeeIcon component

* fix(SW-1890): Add missing translations for breakfast-related messages

* feat(SW-1890): Introduce new breakfast icons and update Breakfast component

- Replaced CoffeeIcon with BreakfastBuffetIcon and NoBreakfastBuffetIcon in the Breakfast component.
- Added new BreakfastBuffetIcon and NoBreakfastBuffetIcon components to the design system.
- Updated imports in the Breakfast component to reflect the new icons.


Approved-by: Christian Andolf

apps/scandic-web/components/TempDesignSystem/Form/RadioCard/index.tsx

@@ -6,6 +6,8 @@ import { useFormContext } from "react-hook-form"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import Divider from "@/components/TempDesignSystem/Divider"
+
 import styles from "./radioCard.module.css"
 
 import type { RadioCardProps } from "./types"
@@ -15,10 +17,13 @@ export default function RadioCard({
   iconHeight = 32,
   id,
   name,
-  subtitle,
   title,
+  subtitleSecondary,
+  subtitle,
   value,
   disabled = false,
+  description,
+  descriptionSecondary,
 }: RadioCardProps) {
   const { register, setValue } = useFormContext()
 
@@ -52,9 +57,44 @@ export default function RadioCard({
       <Typography variant="Body/Paragraph/mdBold" className={styles.title}>
         <p>{title}</p>
       </Typography>
+      {subtitleSecondary ? (
+        <Typography
+          variant="Body/Supporting text (caption)/smRegular"
+          className={styles.subtitleSecondary}
+        >
+          <p>{subtitleSecondary}</p>
+        </Typography>
+      ) : null}
       <Typography variant="Body/Paragraph/mdBold" className={styles.subtitle}>
         <p>{subtitle}</p>
       </Typography>
+
+      {description || descriptionSecondary ? (
+        <Divider
+          className={styles.divider}
+          variant="horizontal"
+          color="subtle"
+        />
+      ) : null}
+
+      {description ? (
+        <Typography
+          variant="Body/Supporting text (caption)/smRegular"
+          className={styles.description}
+        >
+          <p>{description}</p>
+        </Typography>
+      ) : null}
+
+      {descriptionSecondary ? (
+        <Typography
+          variant="Body/Supporting text (caption)/smRegular"
+          className={styles.descriptionSecondary}
+        >
+          <p>{descriptionSecondary}</p>
+        </Typography>
+      ) : null}
+
       <input
         {...register(name)}
         aria-hidden