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/SignupPromo/Desktop.tsx

@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
 
@@ -63,9 +63,12 @@ function Message({
       },
       {
         span: (str) => (
-          <Caption color="red" type="bold" asChild>
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={styles.red}
+          >
             <span>{str}</span>
-          </Caption>
+          </Typography>
         ),
         price,
       }
@@ -81,9 +84,12 @@ function Message({
       },
       {
         span: (str) => (
-          <Caption color="red" type="bold" asChild>
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={styles.red}
+          >
             <span>{str}</span>
-          </Caption>
+          </Typography>
         ),
         price,
       }
@@ -98,9 +104,12 @@ function Message({
     },
     {
       span: (str) => (
-        <Caption color="red" type="bold" asChild>
+        <Typography
+          variant="Body/Supporting text (caption)/smBold"
+          className={styles.red}
+        >
           <span>{str}</span>
-        </Caption>
+        </Typography>
       ),
       price,
     }

packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css

@@ -18,6 +18,10 @@
   position: relative;
 }
 
+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .badge {
   display: flex;
   align-items: center;