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

apps/scandic-web/components/TempDesignSystem/Form/RadioCard/radioCard.module.css

@@ -3,12 +3,22 @@
   cursor: pointer;
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-template-areas: "icon icon" "title subtitle";
+  grid-auto-rows: min-content;
+  grid-template-areas:
+    "icon subtitleSecondary"
+    "title subtitle";
   border-radius: var(--Corner-radius-md);
   border: 1px solid var(--Border-Intense);
   background: var(--Surface-Primary-Default);
   padding: var(--Space-x2) var(--Space-x3);
   gap: var(--Space-x1);
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.label:hover:not(.disabled) {
+  background: var(--Surface-Primary-Hover);
 }
 
 .label.disabled {
@@ -44,12 +54,34 @@
   grid-area: icon;
 }
 
-.subtitle {
-  grid-area: subtitle;
-  color: var(--Text-Default);
-}
-
 .title {
   grid-area: title;
   color: var(--Text-Default);
 }
+
+.subtitle {
+  grid-area: subtitle;
+  color: var(--Text-Default);
+  justify-self: end;
+}
+
+.subtitleSecondary {
+  grid-area: subtitleSecondary;
+  place-self: end;
+  color: var(--Text-Default);
+}
+
+.divider {
+  grid-column: 1 / -1;
+  margin: var(--Space-x1) 0;
+}
+
+.description {
+  grid-column: 1 / -1;
+  color: var(--Text-Default);
+}
+
+.descriptionSecondary {
+  grid-column: 1 / -1;
+  color: var(--Text-Secondary);
+}

apps/scandic-web/components/TempDesignSystem/Form/RadioCard/types.ts

@@ -5,8 +5,11 @@ export interface RadioCardProps
   Icon?: (props: IconProps) => JSX.Element
   iconHeight?: number
   name: string
-  subtitle?: React.ReactNode
+  subtitle: React.ReactNode
+  subtitleSecondary?: React.ReactNode
   title: React.ReactNode
   value?: string
   disabled?: boolean
+  description?: React.ReactNode
+  descriptionSecondary?: React.ReactNode
 }