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/RateSummary/DesktopSummary.tsx

@@ -3,8 +3,6 @@ import { useIntl } from "react-intl"
 
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -148,7 +146,12 @@ export function DesktopSummary({
               )}
             </p>
           </Typography>
-          <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>{summaryPriceText}</p>
+          </Typography>
         </div>
         <div className={styles.summaryPrice}>
           <div className={styles.summaryPriceTextDesktop}>
@@ -169,17 +172,18 @@ export function DesktopSummary({
               </p>
             </Typography>
             {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
-              <Caption
-                textAlign="right"
-                color="uiTextMediumContrast"
-                striked={true}
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.regularPrice}
               >
-                {formatPrice(
-                  intl,
-                  selectedRates.totalPrice.local.regularPrice,
-                  selectedRates.totalPrice.local.currency
-                )}
-              </Caption>
+                <p>
+                  {formatPrice(
+                    intl,
+                    selectedRates.totalPrice.local.regularPrice,
+                    selectedRates.totalPrice.local.currency
+                  )}
+                </p>
+              </Typography>
             )}
             {!!selectedRates.totalPrice.requested && (
               <Typography
@@ -207,34 +211,6 @@ export function DesktopSummary({
               </Typography>
             )}
           </div>
-          <div className={styles.summaryPriceTextMobile}>
-            <Caption color="uiTextHighContrast">
-              {intl.formatMessage({
-                id: "common.totalPrice",
-                defaultMessage: "Total price",
-              })}
-            </Caption>
-            <Typography
-              variant="Title/Subtitle/md"
-              className={cx({ [styles.red]: showDiscounted })}
-            >
-              <p>
-                {formatPrice(
-                  intl,
-                  selectedRates.totalPrice.local.price,
-                  selectedRates.totalPrice.local.currency,
-                  selectedRates.totalPrice.local.additionalPrice,
-                  selectedRates.totalPrice.local.additionalPriceCurrency
-                )}
-              </p>
-            </Typography>
-            <Footnote
-              color="uiTextMediumContrast"
-              className={styles.summaryPriceTextMobile}
-            >
-              {summaryPriceText}
-            </Footnote>
-          </div>
           <Button
             className={styles.continueButton}
             disabled={!isAllRoomsSelected || isSubmitting}
@@ -308,15 +284,15 @@ function RateSummary({
               )}
             </p>
           </Typography>
-          <Typography
-            variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
-          >
+          <Typography variant="Body/Paragraph/mdRegular">
             <p>{room.roomInfo.roomType}</p>
           </Typography>
-          <Caption color="uiTextMediumContrast">
-            {getRateDetails(room.rate)}
-          </Caption>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.secondaryText}
+          >
+            <p>{getRateDetails(room.rate)}</p>
+          </Typography>
         </>
       ) : (
         <>
@@ -325,7 +301,7 @@ function RateSummary({
           </Typography>
           <Typography
             variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
+            className={styles.secondaryText}
           >
             <p>{getRateDetails(room.rate)}</p>
           </Typography>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css

@@ -41,6 +41,12 @@
   text-align: right;
 }
 
+.regularPrice {
+  color: var(--Text-Secondary);
+  text-decoration: line-through;
+  text-align: right;
+}
+
 .red {
   color: var(--Text-Accent-Primary);
 }
@@ -77,10 +83,6 @@
   min-width: 140px;
 }
 
-.summaryPriceTextMobile {
-  white-space: nowrap;
-}
-
 .mobileSummary {
   display: block;
 }
@@ -89,8 +91,8 @@
   color: var(--Text-Tertiary);
 }
 
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
+.secondaryText {
+  color: var(--Text-Secondary);
 }
 
 @media (min-width: 1367px) {
@@ -120,10 +122,6 @@
     gap: var(--Space-x2);
   }
 
-  .summaryPriceTextMobile {
-    display: none;
-  }
-
   .summaryPrice,
   .continueButton {
     width: auto;

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;
 }