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

chore: Apply lint:fix on booking-flow

* run lint:fix


Approved-by: Bianca Widstam

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>

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({

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}

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>
   )

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>
   )

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
         >

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>
   )

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" />