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

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx

@@ -3,8 +3,8 @@
 import { motion } from "motion/react"
 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 "./redeem.module.css"
 
@@ -25,12 +25,14 @@ export default function ActiveRedeemedBadge() {
       >
         <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
       </motion.div>
-      <Caption>
-        {intl.formatMessage({
-          id: "rewards.active",
-          defaultMessage: "Active",
-        })}
-      </Caption>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          {intl.formatMessage({
+            id: "rewards.active",
+            defaultMessage: "Active",
+          })}
+        </p>
+      </Typography>
     </div>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -2,7 +2,6 @@
 
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { toast } from "@scandic-hotels/design-system/Toast"
@@ -31,15 +30,17 @@ export default function Campaign({ reward }: { reward: Campaign }) {
           <p>{reward.description}</p>
         </Typography>
         <div className={styles.rewardBadge}>
-          <Caption textAlign="center" color="uiTextHighContrast" type="bold">
-            {intl.formatMessage({
-              id: "redeemFlow.promoCode",
-              defaultMessage: "Promo code",
-            })}
-          </Caption>
-          <Caption textAlign="center" color="uiTextHighContrast">
-            {reward.operaRewardId}
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <p>
+              {intl.formatMessage({
+                id: "redeemFlow.promoCode",
+                defaultMessage: "Promo code",
+              })}
+            </p>
+          </Typography>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{reward.operaRewardId}</p>
+          </Typography>
         </div>
       </div>
       <footer className={styles.modalFooter}>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./redeem.module.css"
 
@@ -12,8 +12,8 @@ export default function MembershipNumberBadge({
   const intl = useIntl()
 
   return (
-    <div className={styles.rewardBadge}>
-      <Caption textAlign="center" color="uiTextHighContrast">
+    <Typography variant="Body/Supporting text (caption)/smRegular">
+      <span className={styles.rewardBadge}>
         {intl.formatMessage(
           {
             id: "rewards.membershipId",
@@ -21,7 +21,7 @@ export default function MembershipNumberBadge({
           },
           { id: membershipNumber }
         )}
-      </Caption>
-    </div>
+      </span>
+    </Typography>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx

@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-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 Countdown from "@/components/Countdown"
 
@@ -21,12 +21,14 @@ export default function TimedRedeemedBadge() {
     <>
       <div className={styles.redeemed}>
         <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
-        <Caption>
-          {intl.formatMessage({
-            id: "rewards.redeemed.validThrough",
-            defaultMessage: "Redeemed & valid through:",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {intl.formatMessage({
+              id: "rewards.redeemed.validThrough",
+              defaultMessage: "Redeemed & valid through:",
+            })}
+          </p>
+        </Typography>
       </div>
       <Countdown
         minutes={duration.minutes()}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -129,6 +129,7 @@
   background: var(--Base-Surface-Secondary-light-Normal);
   display: grid;
   gap: var(--Space-x05);
+  text-align: center;
 }
 
 .redeemButton {