Merged in feat/SW-1169-map-bedtype-icons (pull request #1113)

Feat/SW-1169 map bedtype icons

* feat(SW-1169): Added bed icons

* fix(SW-1169): update fill rule property

* fix(SW-1169): update clip rule prop

* feat(SW-1169): Added way of rendering bed type icons with extra beds

* feat(SW-1169): update room schema to map mainBed to enum

* feat(SW-1169): update bedtype icon color

* feat(SW-1169): transform unknown bed types to BedTypeEnum.Other

* test: update mock data with new schema


Approved-by: Christel Westerberg

components/HotelReservation/EnterDetails/BedType/bedOptions.module.css

@@ -10,3 +10,8 @@
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   width: min(600px, 100%);
 }
+
+.iconContainer {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+}

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -4,9 +4,13 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
+import {
+  BED_TYPE_ICONS,
+  type BedTypeEnum,
+  type ExtraBedTypeEnum,
+} from "@/constants/booking"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { KingBedIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
 import BedTypeInfo from "./BedTypeInfo"
@@ -18,6 +22,7 @@ import type {
   BedTypeFormSchema,
   BedTypeProps,
 } from "@/types/components/hotelReservation/enterDetails/bedType"
+import type { IconProps } from "@/types/components/icon"
 
 export default function BedType({ bedTypes }: BedTypeProps) {
   const initialBedType = useEnterDetailsStore(
@@ -74,8 +79,13 @@ export default function BedType({ bedTypes }: BedTypeProps) {
             return (
               <RadioCard
                 key={roomType.value}
-                Icon={KingBedIcon}
-                iconWidth={46}
+                Icon={(props) => (
+                  <BedIconRenderer
+                    mainBedType={roomType.type}
+                    extraBedType={roomType.extraBed?.type}
+                    props={props}
+                  />
+                )}
                 id={roomType.value}
                 name="bedType"
                 subtitle={width}
@@ -89,3 +99,25 @@ export default function BedType({ bedTypes }: BedTypeProps) {
     </FormProvider>
   )
 }
+
+function BedIconRenderer({
+  mainBedType,
+  extraBedType,
+  props,
+}: {
+  mainBedType: BedTypeEnum
+  extraBedType: ExtraBedTypeEnum | undefined
+  props: IconProps
+}) {
+  const MainBedIcon = BED_TYPE_ICONS[mainBedType]
+  const ExtraBedIcon = extraBedType ? BED_TYPE_ICONS[extraBedType] : null
+
+  return (
+    <div className={`${props.className} ${styles.iconContainer}`}>
+      <MainBedIcon height={32} color="uiTextMediumContrast" />
+      {ExtraBedIcon && (
+        <ExtraBedIcon height={32} color="uiTextMediumContrast" />
+      )}
+    </div>
+  )
+}