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/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css

@@ -1,5 +1,6 @@
 .button {
   align-items: center;
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
   border: none;
   border-radius: var(--Corner-radius-md);
   cursor: pointer;

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx

@@ -1,18 +1,17 @@
 "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 { buttonVariants } from "./variants"
 
 import type { SearchListProps } from ".."
 
-interface ClearSearchButtonProps
-  extends Pick<
-    SearchListProps,
-    "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
-  > {
+interface ClearSearchButtonProps extends Pick<
+  SearchListProps,
+  "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
+> {
   index: number
 }
 
@@ -41,14 +40,14 @@ export default function ClearSearchButton({
       type="button"
     >
       <MaterialIcon icon="delete" color="Icon/Interactive/Default" size={20} />
-      <Caption color="burgundy" type="bold" asChild>
+      <Typography variant="Body/Supporting text (caption)/smBold">
         <span>
           {intl.formatMessage({
             id: "bookingWidget.search.clearSearches",
             defaultMessage: "Clear searches",
           })}
         </span>
-      </Caption>
+      </Typography>
     </button>
   )
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx

@@ -5,7 +5,6 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -306,10 +305,15 @@ function SearchListError({
       getMenuProps={getMenuProps}
       variant="error"
     >
-      <Caption className={styles.heading} color="red">
-        <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
-        {caption}
-      </Caption>
+      <Typography
+        variant="Body/Supporting text (caption)/smBold"
+        className={styles.heading}
+      >
+        <p>
+          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
+          {caption}
+        </p>
+      </Typography>
       <Typography
         className={styles.errorBody}
         variant="Body/Paragraph/mdRegular"

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css

@@ -28,6 +28,7 @@
   align-items: center;
   display: flex;
   gap: var(--Space-x1);
+  color: var(--Text-Interactive-Error);
 }
 
 .text {

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx

@@ -2,8 +2,8 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import BookingCode from "../BookingCode"
@@ -43,30 +43,25 @@ export function VoucherSkeleton() {
     <div className={styles.optionsContainer}>
       {config.bookingCodeEnabled && (
         <div className={styles.voucherSkeletonContainer}>
-          <label>
-            <Caption type="bold" color="red" asChild>
-              <span>{vouchers}</span>
-            </Caption>
-          </label>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <label>{vouchers}</label>
+          </Typography>
           <SkeletonShimmer width="100%" display="block" />
         </div>
       )}
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <div className={styles.options}>
+          <div className={cx(styles.option, styles.showOnTablet)}>
+            <SkeletonShimmer width="24px" height="24px" />
+            {vouchers}
+          </div>
 
-      <div className={styles.options}>
-        <div className={cx(styles.option, styles.showOnTablet)}>
-          <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
-            <span>{vouchers}</span>
-          </Caption>
+          <div className={styles.option}>
+            <SkeletonShimmer width="24px" height="24px" />
+            {reward}
+          </div>
         </div>
-
-        <div className={styles.option}>
-          <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
-            <span>{reward}</span>
-          </Caption>
-        </div>
-      </div>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css

@@ -10,6 +10,7 @@
   gap: var(--Space-x2);
   margin-top: var(--Space-x2);
   align-items: center;
+  color: var(--Text-Secondary);
 }
 
 .optionsContainer {
@@ -18,6 +19,7 @@
 }
 .voucherSkeletonContainer {
   padding: var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Secondary);
 }
 
 .checkbox {

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css

@@ -3,3 +3,7 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.label {
+  color: var(--Text-Default);
+}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -3,8 +3,8 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import Stepper from "@scandic-hotels/design-system/Stepper"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./adult-selector.module.css"
 
@@ -38,9 +38,12 @@ export default function AdultSelector({
 
   return (
     <section className={styles.container}>
-      <Caption color="uiTextHighContrast" type="bold">
-        {adultsLabel}
-      </Caption>
+      <Typography
+        variant="Body/Supporting text (caption)/smBold"
+        className={styles.label}
+      >
+        <p>{adultsLabel}</p>
+      </Typography>
       <Stepper
         count={currentAdults}
         handleOnDecrease={decreaseAdultsCount}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css

@@ -4,8 +4,8 @@
   align-items: center;
 }
 
-.captionBold {
-  font-weight: 600;
+.label {
+  color: var(--Text-Default);
 }
 
 .childInfoContainer {

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -55,7 +55,10 @@ export default function ChildSelector({
   return (
     <>
       <section className={styles.container}>
-        <Typography variant="Body/Supporting text (caption)/smBold">
+        <Typography
+          variant="Body/Supporting text (caption)/smBold"
+          className={styles.label}
+        >
           <p>{childrenLabel}</p>
         </Typography>
         <Stepper

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -34,6 +34,7 @@
 }
 
 .roomHeading {
+  color: var(--Text-Default);
   margin-bottom: var(--Space-x1);
 }