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/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx

@@ -2,7 +2,6 @@ import React from "react"
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
@@ -115,27 +114,25 @@ function PaymentCard({
 
   return (
     <div className={styles.card}>
-      <Caption
-        type="bold"
-        textTransform="uppercase"
-        className={styles.cardTitle}
-      >
-        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-        {title}{" "}
-        <span>
+      <Typography variant="Tag/sm">
+        <p>
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {"/ "}
-          {intl.formatMessage(
-            {
-              id: "booking.roomIndex",
-              defaultMessage: "Room {roomIndex}",
-            },
-            {
-              roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
-            }
-          )}
-        </span>
-      </Caption>
+          {title}{" "}
+          <span className={styles.roomInfo}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {"/ "}
+            {intl.formatMessage(
+              {
+                id: "booking.roomIndex",
+                defaultMessage: "Room {roomIndex}",
+              },
+              {
+                roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
+              }
+            )}
+          </span>
+        </p>
+      </Typography>
       <Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
         <p>
           {formatPrice(intl, price, currency)}

packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css

@@ -13,12 +13,8 @@
   border-radius: var(--Corner-radius-md);
 }
 
-.cardTitle {
-  text-transform: uppercase;
-}
-
-.cardTitle > span {
-  color: var(--UI-Text-Placeholder);
+.roomInfo {
+  color: var(--Text-Tertiary);
 }
 
 .card.inactive {