Merged in chore/apply-lint-fix (pull request #3312)

chore: Apply lint:fix on booking-flow * run lint:fix Approved-by: Bianca Widstam
2025-12-08 13:50:41 +00:00
parent ca6cc5ab6c
commit 914da2b094
24 changed files with 68 additions and 68 deletions
--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
@@ -57,7 +57,7 @@ export function Header({
  return (
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
-        <Typography variant={"Title/md"}>
+        <Typography variant="Title/md">
          <h2 className={styles.confirmTitle}>
            {intl.formatMessage({
              id: "bookingConfirmation.title",
@@ -65,7 +65,7 @@ export function Header({
            })}
          </h2>
        </Typography>
-        <Typography variant={"Title/md"}>
+        <Typography variant="Title/md">
          <h2 className={styles.hotelTitle}>{hotel.name}</h2>
        </Typography>
      </hgroup>
--- a/packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/index.tsx
@@ -18,7 +18,7 @@ export function HotelDetails({
  return (
    <div className={styles.container}>
      <div className={styles.details}>
-        <Typography variant={"Title/Subtitle/md"}>
+        <Typography variant="Title/Subtitle/md">
          <h3>
            {intl.formatMessage({
              id: "bookingConfirmation.hotelDetails",
@@ -26,7 +26,7 @@ export function HotelDetails({
            })}
          </h3>
        </Typography>
-        <Typography variant={"Body/Paragraph/mdRegular"}>
+        <Typography variant="Body/Paragraph/mdRegular">
          <div className={styles.hotel}>
            <p>{hotel.name}</p>
            <p>
@@ -58,7 +58,7 @@ export function HotelDetails({
          className={styles.link}
          color="Text/Interactive/Secondary"
          href={`mailto:${hotel.contactInformation.email}`}
-          textDecoration={"underline"}
+          textDecoration="underline"
        >
          {hotel.contactInformation.email}
        </Link>
@@ -66,7 +66,7 @@ export function HotelDetails({
          className={styles.link}
          color="Text/Interactive/Secondary"
          href={hotel.contactInformation.websiteUrl}
-          textDecoration={"underline"}
+          textDecoration="underline"
        >
          {hotel.contactInformation.websiteUrl}
        </Link>
--- a/packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/index.tsx
@@ -22,7 +22,7 @@ export function PaymentDetails() {
  const hasAllRoomsLoaded = rooms.every((room) => room)
  return (
    <div className={styles.details}>
-      <Typography variant={"Title/Subtitle/md"}>
+      <Typography variant="Title/Subtitle/md">
        <h2>
          {intl.formatMessage({
            id: "bookingConfirmation.paymentDetails",
@@ -32,7 +32,7 @@ export function PaymentDetails() {
      </Typography>
      <div className={styles.payment}>
        {hasAllRoomsLoaded ? (
-          <Typography variant={"Body/Paragraph/mdRegular"}>
+          <Typography variant="Body/Paragraph/mdRegular">
            <p>
              {intl.formatMessage(
                {
@@ -46,7 +46,7 @@ export function PaymentDetails() {
            </p>
          </Typography>
        ) : (
-          <SkeletonShimmer width={"100%"} />
+          <SkeletonShimmer width="100%" />
        )}
      </div>
    </div>
--- a/packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/index.tsx
@@ -20,13 +20,13 @@ export function Promo({ buttonText, href, text, title }: PromoProps) {
  return (
    <Link className={styles.link} color="none" href={href}>
      <article className={styles.promo}>
-        <Typography variant={"Title/smLowCase"}>
+        <Typography variant="Title/smLowCase">
          <h4>{title}</h4>
        </Typography>
-        <Typography variant={"Body/Paragraph/mdRegular"}>
+        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.text}>{text}</p>
        </Typography>
-        <Button size="Small" variant={"Secondary"} color={"Inverted"} wrapping>
+        <Button size="Small" variant="Secondary" color="Inverted" wrapping>
          <div>{buttonText}</div>
        </Button>
      </article>
--- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/RoomSkeletonLoader.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/RoomSkeletonLoader.tsx
@@ -6,9 +6,9 @@ export default function RoomSkeletonLoader() {
  return (
    <div className={styles.room}>
      <SkeletonShimmer />
-      <SkeletonShimmer width={"15%"} />
-      <SkeletonShimmer width={"30%"} />
-      <SkeletonShimmer width={"40%"} />
+      <SkeletonShimmer width="15%" />
+      <SkeletonShimmer width="30%" />
+      <SkeletonShimmer width="40%" />
      <SkeletonShimmer />
      <SkeletonShimmer />
      <SkeletonShimmer />
--- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/index.tsx
@@ -62,7 +62,7 @@ export default function TotalPrice() {
                </span>
              </Typography>
            ) : (
-              <SkeletonShimmer width={"25%"} />
+              <SkeletonShimmer width="25%" />
            )}
          </div>
        </div>
@@ -71,7 +71,7 @@ export default function TotalPrice() {
        {hasAllRoomsLoaded ? (
          <PriceDetails />
        ) : (
-          <SkeletonShimmer width={"100%"} />
+          <SkeletonShimmer width="100%" />
        )}
      </div>
    </>
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/LinkedReservationCardSkeleton.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/LinkedReservationCardSkeleton.tsx
@@ -7,24 +7,24 @@ export function LinkedReservationCardSkeleton() {
    <div className={styles.card}>
      <div className={styles.content}>
        <div className={styles.img}>
-          <SkeletonShimmer height={"204px"} width={"100%"} />
+          <SkeletonShimmer height="204px" width="100%" />
        </div>
        <div className={styles.roomDetails}>
          <div className={styles.roomName}>
-            <SkeletonShimmer height={"24px"} width={"130px"} />
-            <SkeletonShimmer height={"20px"} width={"140px"} />
+            <SkeletonShimmer height="24px" width="130px" />
+            <SkeletonShimmer height="20px" width="140px" />
          </div>
          <div className={styles.details}>
-            <SkeletonShimmer height={"20px"} width={"300px"} />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
+            <SkeletonShimmer height="20px" width="300px" />
+            <SkeletonShimmer height="20px" width="300px" />
+            <SkeletonShimmer height="20px" width="300px" />
+            <SkeletonShimmer height="20px" width="300px" />
          </div>
          <div className={styles.guest}>
-            <SkeletonShimmer height={"20px"} width={"100px"} />
-            <SkeletonShimmer height={"20px"} width={"200px"} />
-            <SkeletonShimmer height={"20px"} width={"150px"} />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
+            <SkeletonShimmer height="20px" width="100px" />
+            <SkeletonShimmer height="20px" width="200px" />
+            <SkeletonShimmer height="20px" width="150px" />
+            <SkeletonShimmer height="20px" width="300px" />
          </div>
        </div>
      </div>
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx
@@ -15,7 +15,7 @@ export default function Retry({ handleRefetch }: RetryProps) {
  const intl = useIntl()
  return (
    <div className={styles.retry}>
-      <Typography variant={"Body/Paragraph/mdRegular"}>
+      <Typography variant="Body/Paragraph/mdRegular">
        <p>
          {intl.formatMessage({
            id: "errorMessage.somethingWentWrong",
@@ -24,7 +24,7 @@ export default function Retry({ handleRefetch }: RetryProps) {
        </p>
      </Typography>

-      <Button size={"Small"} onPress={handleRefetch}>
+      <Button size="Small" onPress={handleRefetch}>
        {intl.formatMessage({
          id: "bookingConfirmation.linkedReservation.tryAgain",
          defaultMessage: "Try again",
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
@@ -194,7 +194,7 @@ export default function BookingCode() {
            >
              <Switch name="bookingCode.remember" className="mobile-switch">
                <Typography
-                  variant={"Body/Supporting text (caption)/smRegular"}
+                  variant="Body/Supporting text (caption)/smRegular"
                >
                  <span>
                    {intl.formatMessage({
@@ -232,7 +232,7 @@ function CodeRulesModal() {
  return (
    <Modal
      trigger={
-        <IconButton theme={"Black"} wrapping>
+        <IconButton theme="Black" wrapping>
          <MaterialIcon
            icon="info"
            color="Icon/Interactive/Placeholder"
@@ -242,7 +242,7 @@ function CodeRulesModal() {
      }
      title={codeVoucher}
    >
-      <Typography variant={"Body/Paragraph/mdRegular"}>
+      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.bookingCodeTooltip}>{bookingCodeTooltipText}</p>
      </Typography>
    </Modal>
@@ -255,7 +255,7 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
  return (
    <>
      <Checkbox name="bookingCode.remember">
-        <Typography variant={"Body/Supporting text (caption)/smRegular"}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
          <span>
            {intl.formatMessage({
              id: "bookingWidget.bookingCode.remember",
@@ -362,7 +362,7 @@ function TabletBookingCode({
  return (
    <div className={styles.container}>
      <DialogTrigger isOpen={isOpen} onOpenChange={toggleModal}>
-        <Button type="button" variant={"Text"}>
+        <Button type="button" variant="Text">
          {/* For some reason Checkbox click triggers twice modal state change, which returns the modal back to old state. So we are using overlay as trigger for modal */}
          <div className={styles.overlayTrigger}></div>
          <Checkbox
@@ -375,7 +375,7 @@ function TabletBookingCode({
              },
            })}
          >
-            <Typography variant={"Body/Supporting text (caption)/smBold"}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.colorSecondary}>{codeVoucher}</span>
            </Typography>
          </Checkbox>
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RemoveExtraRooms/RemoveExtraRooms.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RemoveExtraRooms/RemoveExtraRooms.tsx
@@ -25,7 +25,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
      type="button"
      onClick={removeExtraRooms}
      size="Small"
-      variant={"Secondary"}
+      variant="Secondary"
      {...props}
    >
      {intl.formatMessage({
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx
@@ -94,14 +94,14 @@ export default function RewardNight() {
      >
        <div className={styles.rewardNightLabel}>
          <Typography
-            variant={"Body/Supporting text (caption)/smRegular"}
+            variant="Body/Supporting text (caption)/smRegular"
            className={styles.label}
          >
            <span>{reward}</span>
          </Typography>
          <Modal
            trigger={
-              <IconButton theme={"Black"} wrapping>
+              <IconButton theme="Black" wrapping>
                <MaterialIcon
                  icon="info"
                  size={20}
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx
@@ -49,11 +49,11 @@ export function ListItemSkeleton() {
  return (
    <li className={classNames}>
      <div style={{ marginBottom: "0.25rem" }}>
-        <SkeletonShimmer width={"200px"} height="18px" display="block" />
+        <SkeletonShimmer width="200px" height="18px" display="block" />
      </div>

      <div>
-        <SkeletonShimmer width={"70px"} height="18px" display="block" />
+        <SkeletonShimmer width="70px" height="18px" display="block" />
      </div>
    </li>
  )
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx
@@ -259,7 +259,7 @@ export function SearchSkeleton() {
        </Typography>
      </div>
      <div>
-        <SkeletonShimmer width={"100%"} display="block" height="16px" />
+        <SkeletonShimmer width="100%" display="block" height="16px" />
      </div>
    </div>
  )
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
@@ -141,8 +141,8 @@ export default function FormContent({
        <Button
          className={styles.button}
          form={formId}
-          variant={"Primary"}
-          size={"Medium"}
+          variant="Primary"
+          size="Medium"
          type="submit"
          isDisabled={isSearching}
        >
@@ -226,8 +226,8 @@ export function BookingWidgetFormContentSkeleton() {
      <div className={cx(styles.buttonContainer, styles.hideOnTablet)}>
        <Button
          className={styles.button}
-          variant={"Primary"}
-          size={"Medium"}
+          variant="Primary"
+          size="Medium"
          type="submit"
          isDisabled
        >
--- a/packages/booking-flow/lib/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidgetClient.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidgetClient.tsx
@@ -56,7 +56,7 @@ export function FloatingBookingWidgetClient(props: Props) {
      ref={containerRef}
    >
      <div className={styles.floatingBackground}>
-        <BookingWidgetClient {...props} type={"compact"} />
+        <BookingWidgetClient {...props} type="compact" />
      </div>
    </div>
  )
--- a/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/index.tsx
@@ -106,7 +106,7 @@ export default function MobileToggleButton({
      {!locationAndDateIsSet && (
        <>
          <span className={styles.block}>
-            <Typography variant={"Body/Supporting text (caption)/smBold"}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.blockLabel}>
                {intl.formatMessage({
                  id: "bookingWidget.label.whereTo",
@@ -114,7 +114,7 @@ export default function MobileToggleButton({
                })}
              </span>
            </Typography>
-            <Typography variant={"Body/Paragraph/mdRegular"}>
+            <Typography variant="Body/Paragraph/mdRegular">
              <span className={styles.placeholder}>
                {searchTerm
                  ? searchTerm
@@ -128,10 +128,10 @@ export default function MobileToggleButton({
          {/* Button can't contain HR elements */}
          <Divider color="Border/Divider/Subtle" variant="vertical" />
          <span className={styles.block}>
-            <Typography variant={"Body/Supporting text (caption)/smBold"}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.blockLabel}>{totalNightsMsg}</span>
            </Typography>
-            <Typography variant={"Body/Paragraph/mdRegular"}>
+            <Typography variant="Body/Paragraph/mdRegular">
              <span className={styles.placeholder}>
                {intl.formatMessage(
                  {
@@ -155,10 +155,10 @@ export default function MobileToggleButton({
      {locationAndDateIsSet && (
        <>
          <span className={styles.block}>
-            <Typography variant={"Body/Supporting text (caption)/smBold"}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.blockLabel}>{selectedSearchTerm}</span>
            </Typography>
-            <Typography variant={"Body/Supporting text (caption)/smRegular"}>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
              <span className={styles.locationAndDate}>
                {intl.formatMessage(
                  {
@@ -191,7 +191,7 @@ export function MobileToggleButtonSkeleton() {
  return (
    <div className={cx(styles.mobileToggleButton, styles.partial)}>
      <span className={styles.block}>
-        <Typography variant={"Body/Supporting text (caption)/smBold"}>
+        <Typography variant="Body/Supporting text (caption)/smBold">
          <span className={styles.blockLabel}>
            {intl.formatMessage({
              id: "bookingWidget.label.whereTo",
@@ -199,7 +199,7 @@ export function MobileToggleButtonSkeleton() {
            })}
          </span>
        </Typography>
-        <SkeletonShimmer display={"block"} height="20px" width="11ch" />
+        <SkeletonShimmer display="block" height="20px" width="11ch" />
      </span>
      <Divider color="Border/Divider/Subtle" variant="vertical" />
      <span className={styles.block}>
@@ -215,7 +215,7 @@ export function MobileToggleButtonSkeleton() {
            )}
          </span>
        </Typography>
-        <SkeletonShimmer display={"block"} height="20px" width="13ch" />
+        <SkeletonShimmer display="block" height="20px" width="13ch" />
      </span>
      <span className={styles.icon}>
        <MaterialIcon icon="search" color="Icon/Inverted" />
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -56,7 +56,7 @@ export default function MemberPriceModal() {
      <div className={styles.modalContent}>
        <div className={styles.innerModalContent}>
          <MagicWandIcon width="265px" />
-          <Typography variant={"Title/smLowCase"}>
+          <Typography variant="Title/smLowCase">
            <h3 className={styles.title}>
              {intl.formatMessage({
                id: "enterDetails.memberPriceModal.title",
--- a/packages/booking-flow/lib/components/EnterDetails/Header/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Header/index.tsx
@@ -66,7 +66,7 @@ export default function HotelHeader({
              id: "destination.seeHotelDetails",
              defaultMessage: "See hotel details",
            })}
-            buttonVariant={"secondary"}
+            buttonVariant="secondary"
          />
        </div>
      </div>
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
@@ -248,7 +248,7 @@ export default function SummaryUI({
      {showSignupPromo && roomOneMemberPrice && !isUserLoggedIn ? (
        <SignupPromoDesktop
          memberPrice={roomOneMemberPrice}
-          badgeContent={"✌️"}
+          badgeContent="✌️"
          isEnterDetailsPage
        />
      ) : null}
--- a/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.tsx
+++ b/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.tsx
@@ -7,13 +7,13 @@ export function RoomCardSkeleton() {
    <article className={styles.card}>
      {/* image container */}
      <div className={styles.imageContainer}>
-        <SkeletonShimmer width={"100%"} height="100%" />
+        <SkeletonShimmer width="100%" height="100%" />
      </div>

      <div className={styles.priceVariants}>
        {/* price variants */}
        {Array.from({ length: 3 }).map((_, index) => (
-          <SkeletonShimmer key={index} height={"100px"} />
+          <SkeletonShimmer key={index} height="100px" />
        ))}
      </div>
    </article>
--- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.tsx
+++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.tsx
@@ -21,7 +21,7 @@ export function SelectHotelMapSkeleton({ count = 2 }: Props) {
        </div>
      </div>
      <div className={styles.mapContainer}>
-        <SkeletonShimmer width={"100%"} height="100%" />
+        <SkeletonShimmer width="100%" height="100%" />
      </div>
    </div>
  )
--- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelSkeleton.tsx
+++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelSkeleton.tsx
@@ -14,10 +14,10 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
        <div className={styles.headerContent}>
          <div className={styles.title}>
            <div className={styles.cityInformation}>
-              <SkeletonShimmer height={"25px"} width={"200px"} />
+              <SkeletonShimmer height="25px" width="200px" />
            </div>
            <div className={styles.sorter}>
-              <SkeletonShimmer height={"60px"} width={"100%"} />
+              <SkeletonShimmer height="60px" width="100%" />
            </div>
          </div>
        </div>
@@ -25,10 +25,10 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
      <main className={styles.main}>
        <div className={styles.sideBar}>
          <div className={styles.sideBarItem}>
-            <SkeletonShimmer height={"280px"} width={"340px"} />
+            <SkeletonShimmer height="280px" width="340px" />
          </div>
          <div className={styles.sideBarItem}>
-            <SkeletonShimmer height={"400px"} width={"340px"} />
+            <SkeletonShimmer height="400px" width="340px" />
          </div>
        </div>
        <div className={styles.hotelList}>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
@@ -348,7 +348,7 @@ export default function SummaryContent({
            amount: memberPrice.localPrice.pricePerStay,
            currency: memberPrice.localPrice.currency,
          }}
-          badgeContent={"✌️"}
+          badgeContent="✌️"
        />
      ) : null}
    </section>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/index.tsx
@@ -71,7 +71,7 @@ export function BreakfastMessage({
    <div className={styles.message}>
      <Divider className={styles.divider} color="Border/Divider/Subtle" />
      <Typography
-        variant={"Body/Supporting text (caption)/smRegular"}
+        variant="Body/Supporting text (caption)/smRegular"
        className={styles.breakfastMessage}
      >
        <p>{breakfastMessage}</p>