Merged in fix/book-149-incorrect-onfocus-behaviour-booking-widget (pull request #3320)

Fix/book 149 incorrect onfocus behaviour booking widget

* fix(BOOK-149): fixed labels shifting

* fix(BOOK-149): reintroduced sticky position

* fix(BOOK-149): added missing border to "where" text field

* added overflow to datepicker

* comment fixes

* removed separate typography declaration

* changed to onPress

* fix(BOOK-149): moved components to separate files

* fix(BOOK-149): removed desktop & mobile specific css classes

* fix(BOOK-149): new implementation of date and room modals

* dependencies update

* fix(BOOK-149): fixed child age dropdown issue, related error message, and Rooms & Guests container height

* updated info button to new variant

* fix(BOOK-149): prevent scrolling of background when modals are open in Tablet mode

* fixed overlay issue and added focus indicator on mobile

* fixed missing space in css

* rebase and fixed icon buttons after update

* simplified to use explicit boolean

* PR comments fixes

* more PR comment fixes

* PR comment fixes

* fixed setIsOpen((prev) => !prev)

* fixed issues with room error not showing properly on mobile

* fixing pr comments

* fixed flickering on GuestRoomModal


Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Desktop.tsx

@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../../hooks/useLang"
@@ -112,20 +111,11 @@ export default function DatePickerRangeDesktop({
                 color="Border/Divider/Subtle"
               />
               <footer className={props.className}>
-                <Button
-                  intent="tertiary"
-                  onPress={close}
-                  size="small"
-                  theme="base"
-                >
-                  <Caption color="white" type="bold" asChild>
-                    <span>
-                      {intl.formatMessage({
-                        id: "datePicker.selectDates",
-                        defaultMessage: "Select dates",
-                      })}
-                    </span>
-                  </Caption>
+                <Button variant="Tertiary" onPress={close} size="sm">
+                  {intl.formatMessage({
+                    id: "datePicker.selectDates",
+                    defaultMessage: "Select dates",
+                  })}
                 </Button>
               </footer>
             </>

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx

@@ -5,8 +5,8 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../../hooks/useLang"
@@ -131,19 +131,15 @@ export default function DatePickerRangeMobile({
       <footer className={styles.footer}>
         <Button
           className={styles.button}
-          intent="tertiary"
+          variant="Primary"
+          color="Primary"
+          size="md"
           onPress={close}
-          size="large"
-          theme="base"
         >
-          <Typography variant="Body/Paragraph/mdBold">
-            <span>
-              {intl.formatMessage({
-                id: "datePicker.selectDates",
-                defaultMessage: "Select dates",
-              })}
-            </span>
-          </Typography>
+          {intl.formatMessage({
+            id: "datePicker.selectDates",
+            defaultMessage: "Select dates",
+          })}
         </Button>
       </footer>
     </div>

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css

@@ -14,6 +14,7 @@ div.months {
 
 .captionLabel {
   text-transform: capitalize;
+  color: var(--Text-Default);
 }
 
 td.day,

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css

@@ -24,7 +24,7 @@
   align-self: flex-end;
   background-color: var(--Main-Grey-White);
   grid-area: header;
-  padding: var(--Space-x3) var(--Space-x2);
+  padding: 0 var(--Space-x2) 0;
   position: sticky;
   top: 0;
   z-index: 10;