Merged in chore/BOOK-739-replace-caption (pull request #3428)

chore(BOOK-739): replace caption with typography

* chore(BOOK-739): replace caption with typography

* chore(BOOK-739): refactor div

* chore(BOOK-739): refactor badge

* chore(BOOK-739): remove span

* chore(BOOK-739): skeleton update

* chore(BOOK-739): update

* chore(BOOK-739): update reward

* chore(BOOK-739): update voucher currency


Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { logger } from "@scandic-hotels/common/logger"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
@@ -49,12 +48,14 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
   return (
     <div className={styles.selectedRoomPanel}>
       <div className={styles.content}>
-        <Caption color="uiTextHighContrast">
-          {intl.formatMessage(
-            { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
-            { roomIndex: roomNr }
-          )}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {intl.formatMessage(
+              { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
+              { roomIndex: roomNr }
+            )}
+          </p>
+        </Typography>
         <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
           <p>{selectedRate.roomInfo.roomType}</p>
         </Typography>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx

@@ -1,8 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./notAvailable.module.css"
 
@@ -12,12 +12,14 @@ export default function RoomNotAvailable() {
     <div className={styles.noRoomsContainer}>
       <div className={styles.noRooms}>
         <MaterialIcon icon="dangerous" color="Icon/Feedback/Error" size={16} />
-        <Caption color="uiTextHighContrast" type="bold">
-          {intl.formatMessage({
-            id: "selectRate.thisRoomIsNotAvailable",
-            defaultMessage: "This room is not available",
-          })}
-        </Caption>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            {intl.formatMessage({
+              id: "selectRate.thisRoomIsNotAvailable",
+              defaultMessage: "This room is not available",
+            })}
+          </p>
+        </Typography>
       </div>
     </div>
   )

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css

@@ -5,4 +5,5 @@
   gap: var(--Space-x1);
   margin: 0;
   padding: var(--Space-x2);
+  align-items: center;
 }