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/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css

@@ -17,6 +17,10 @@
   color: var(--Text-Default);
 }
 
+.secondaryText {
+  color: var(--Text-Secondary);
+}
+
 .cheque {
   justify-content: end;
 }

packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-import Caption from "../../Caption"
 
 import styles from "./hotelChequeCard.module.css"
 import { Typography } from "../../Typography"
@@ -28,17 +27,21 @@ export default function HotelChequeCard({
   return (
     <div className={styles.chequeCard}>
       <div className={styles.chequeRow}>
-        <Caption>
-          {intl.formatMessage({
-            id: "common.from",
-            defaultMessage: "From",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
+            {intl.formatMessage({
+              id: "common.from",
+              defaultMessage: "From",
+            })}
+          </p>
+        </Typography>
         <div className={styles.cheque}>
           <Typography variant="Title/Subtitle/md">
             <p>{productTypeCheque.localPrice.numberOfCheques}</p>
           </Typography>
-          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{CurrencyEnum.CC}</p>
+          </Typography>
           {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
             // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             <>
@@ -46,9 +49,9 @@ export default function HotelChequeCard({
               <Typography variant="Title/Subtitle/md">
                 <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
               </Typography>
-              <Caption color="uiTextHighContrast">
-                {productTypeCheque.localPrice.currency}
-              </Caption>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{productTypeCheque.localPrice.currency}</p>
+              </Typography>
             </>
           ) : null}
         </div>
@@ -56,21 +59,33 @@ export default function HotelChequeCard({
       {productTypeCheque.requestedPrice &&
       productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
         <div className={styles.chequeRow}>
-          <Caption color="uiTextMediumContrast">
-            {intl.formatMessage({
-              id: "booking.approx",
-              defaultMessage: "Approx.",
-            })}
-          </Caption>
-          <Caption color="uiTextMediumContrast">
-            {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
-            {productTypeCheque.requestedPrice.additionalPricePerStay
-              ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                " + "
-              : ""}
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
-          </Caption>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>
+              {intl.formatMessage({
+                id: "booking.approx",
+                defaultMessage: "Approx.",
+              })}
+            </p>
+          </Typography>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {productTypeCheque.requestedPrice.numberOfCheques}{" "}
+              {CurrencyEnum.CC}
+              {productTypeCheque.requestedPrice.additionalPricePerStay
+                ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                  " + "
+                : ""}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
+            </p>
+          </Typography>
         </div>
       ) : null}
     </div>

packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx

@@ -151,7 +151,20 @@ export function StandaloneHotelCardDialog({
                 </RoomPrice>
               ) : null}
               {voucherPrice ? (
-                <RoomPrice price={voucherPrice} currency={currency} />
+                <RoomPrice
+                  price={voucherPrice}
+                  currency={intl.formatMessage(
+                    {
+                      id: "price.numberOfVouchers",
+                      defaultMessage:
+                        "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                    },
+                    {
+                      numberOfVouchers: voucherPrice,
+                    }
+                  )}
+                  includePerNight={false}
+                />
               ) : null}
               {/* Show public price if:
                 1) user is not logged in, or

packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx

@@ -1,7 +1,5 @@
 import { useIntl } from "react-intl"
 
-import Caption from "../../Caption"
-
 import styles from "./hotelVoucherCard.module.css"
 import { Typography } from "../../Typography"
 
@@ -18,28 +16,32 @@ export default function HotelVoucherCard({
   return (
     <div className={styles.voucherCard}>
       <div className={styles.voucherRow}>
-        <Caption>
-          {intl.formatMessage({
-            id: "common.from",
-            defaultMessage: "From",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
+            {intl.formatMessage({
+              id: "common.from",
+              defaultMessage: "From",
+            })}
+          </p>
+        </Typography>
         <div className={styles.voucher}>
           <Typography variant="Title/Subtitle/md">
             <p>{productTypeVoucher.numberOfVouchers}</p>
           </Typography>
-          <Caption color="uiTextHighContrast" className={styles.currency}>
-            {intl.formatMessage(
-              {
-                id: "price.numberOfVouchers",
-                defaultMessage:
-                  "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
-              },
-              {
-                numberOfVouchers: productTypeVoucher.numberOfVouchers,
-              }
-            )}
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "price.numberOfVouchers",
+                  defaultMessage:
+                    "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                },
+                {
+                  numberOfVouchers: productTypeVoucher.numberOfVouchers,
+                }
+              )}
+            </p>
+          </Typography>
         </div>
       </div>
     </div>

packages/design-system/lib/components/HotelCard/index.tsx

@@ -12,7 +12,6 @@ import {
   selectRate,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "../Caption"
 import { Divider } from "../Divider"
 import { FacilityToIcon } from "../FacilityToIcon"
 import HotelLogoIcon from "../Icons/Logos"
@@ -341,12 +340,14 @@ export const HotelCardComponent = memo(
                 )}
                 {prices?.redemptions?.length ? (
                   <div className={styles.pointsCard}>
-                    <Caption>
-                      {intl.formatMessage({
-                        id: "hotelCard.availableRates",
-                        defaultMessage: "Available rates",
-                      })}
-                    </Caption>
+                    <Typography variant="Body/Supporting text (caption)/smRegular">
+                      <p>
+                        {intl.formatMessage({
+                          id: "hotelCard.availableRates",
+                          defaultMessage: "Available rates",
+                        })}
+                      </p>
+                    </Typography>
                     {prices.redemptions.map((redemption) => (
                       <HotelPointsRow
                         key={redemption.rateCode}