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/LoyaltyLevels/index.tsx

@@ -1,4 +1,3 @@
-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"
 
@@ -81,23 +80,20 @@ async function LevelCard({ level }: LevelCardProps) {
       <Typography variant="Title/xs" className={styles.pointMsg}>
         <h5>{pointsMsg}</h5>
       </Typography>
-      <div className={styles.textContainer}>
-        {level.rewards.map((reward) => (
-          <Caption
-            className={styles.levelText}
-            key={reward.reward_id}
-            textAlign="center"
-            color="textMediumContrast"
-          >
-            <MaterialIcon
-              icon="check"
-              className={styles.checkIcon}
-              color="Icon/Interactive/Accent"
-            />
-            {reward.label}
-          </Caption>
-        ))}
-      </div>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <div className={styles.textContainer}>
+          {level.rewards.map((reward) => (
+            <p className={styles.levelText} key={reward.reward_id}>
+              <MaterialIcon
+                icon="check"
+                className={styles.checkIcon}
+                color="Icon/Interactive/Accent"
+              />
+              {reward.label}
+            </p>
+          ))}
+        </div>
+      </Typography>
     </article>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -37,6 +37,7 @@
 }
 
 .levelText {
+  color: var(--Text-Secondary);
   margin: 0;
 }