feat(BOOK-67): Added functionality to show/hide the chatbot

Approved-by: Linus Flood

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

@@ -29,7 +29,7 @@
 .label {
   color: var(--Text-Accent-Primary);
 }
-.when:has([data-isopen="true"]) .label,
+.when:has([data-datepicker-open="true"]) .label,
 .rooms:has([data-pressed="true"]) .label {
   color: var(--Text-Interactive-Focus);
 }
@@ -113,7 +113,7 @@
   .rooms:hover {
     background-color: var(--Surface-Primary-Hover);
   }
-  .when:has([data-isopen="true"]),
+  .when:has([data-datepicker-open="true"]),
   .rooms:has([data-focus-visible="true"], [data-pressed="true"]) {
     background-color: var(--Surface-Primary-Hover);
     border: 1px solid var(--Border-Interactive-Focus);

packages/booking-flow/lib/components/BookingWidget/Client.tsx

@@ -241,7 +241,11 @@ export default function BookingWidgetClient({
 
   return (
     <FormProvider {...methods}>
-      <section ref={bookingWidgetRef} className={classNames} data-open={isOpen}>
+      <section
+        ref={bookingWidgetRef}
+        className={classNames}
+        data-booking-widget-open={isOpen}
+      >
         <MobileToggleButton openMobileSearch={openMobileSearch} />
         <div className={formContainerClassNames}>
           <button

packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css

@@ -23,7 +23,7 @@
   display: none;
 }
 
-.container[data-isopen="true"] .hideWrapper {
+.container[data-datepicker-open="true"] .hideWrapper {
   display: block;
 }
 
@@ -44,7 +44,7 @@
     z-index: 10001;
   }
 
-  .container[data-isopen="true"] .hideWrapper {
+  .container[data-datepicker-open="true"] .hideWrapper {
     border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
     top: calc(max(var(--sitewide-alert-height), 20px));
   }

packages/booking-flow/lib/components/BookingWidget/DatePicker/index.tsx

@@ -140,7 +140,7 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
       onBlur={(e) => {
         closeOnBlur(e.nativeEvent)
       }}
-      data-isopen={isOpen}
+      data-datepicker-open={isOpen}
       ref={ref}
     >
       <button

packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css

@@ -5,7 +5,7 @@
 }
 
 /* Make sure Date Picker is placed on top of other sticky/fixed components */
-.wrapper:has([data-isopen="true"]) {
+.wrapper:has([data-datepicker-open="true"]) {
   z-index: 100;
 }
 
@@ -36,11 +36,11 @@
   }
 }
 
-.wrapper[data-open="true"] {
+.wrapper[data-booking-widget-open="true"] {
   z-index: var(--booking-widget-open-z-index);
 }
 
-.wrapper[data-open="true"] .formContainer {
+.wrapper[data-booking-widget-open="true"] .formContainer {
   left: 0;
   bottom: 0;
 }
@@ -53,7 +53,7 @@
   padding: 0;
 }
 
-.wrapper[data-open="true"] + .backdrop {
+.wrapper[data-booking-widget-open="true"] + .backdrop {
   background-color: rgba(0, 0, 0, 0.4);
   height: 100%;
   left: 0;