Merged in fix/SW-2427-floating-booking-widget-fullwidth (pull request #1826)

fix: when floating booking widget is sticky let it have white background all the way out. SW-2427

* fix: when floating booking widget is sticky let it have white background all the way out.
Resolves SW-2427

* pr: move styling variants to it's own file


Approved-by: Christian Andolf

apps/scandic-redirect/package.json

@@ -6,4 +6,4 @@
   "dependencies": {
     "@netlify/functions": "^3.0.0"
   }
-}
+}

apps/scandic-web/components/BookingWidget/Client.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { cva } from "class-variance-authority"
 import { use, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
@@ -25,6 +24,10 @@ import { convertSearchParamsToObj } from "@/utils/url"
 import MobileToggleButton, {
   MobileToggleButtonSkeleton,
 } from "./MobileToggleButton"
+import {
+  bookingWidgetContainerVariants,
+  formContainerVariants,
+} from "./variant"
 
 import styles from "./bookingWidget.module.css"
 
@@ -198,11 +201,15 @@ export default function BookingWidgetClient({
     type,
   })
 
+  const formContainerClassNames = formContainerVariants({
+    type,
+  })
+
   return (
     <FormProvider {...methods}>
       <section ref={bookingWidgetRef} className={classNames} data-open={isOpen}>
         <MobileToggleButton openMobileSearch={openMobileSearch} />
-        <div className={styles.formContainer}>
+        <div className={formContainerClassNames}>
           <button
             className={styles.close}
             onClick={closeMobileSearch}
@@ -238,16 +245,3 @@ export function BookingWidgetSkeleton({
     </>
   )
 }
-
-export const bookingWidgetContainerVariants = cva(styles.wrapper, {
-  variants: {
-    type: {
-      default: "",
-      full: "",
-      compact: styles.compact,
-    },
-  },
-  defaultVariants: {
-    type: "full",
-  },
-})

apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css

@@ -11,18 +11,18 @@
     align-items: center;
     background: rgba(255, 255, 255, 0);
     width: 100%;
-    transition: background 0.2s ease;
   }
 
   &[data-intersecting="true"] {
     .floatingBackground {
-      background: transparent;
+      background: var(--Surface-UI-Fill-Default);
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       margin-top: var(--sitewide-alert-sticky-height);
+      box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
     }
   }
 }

apps/scandic-web/components/BookingWidget/bookingWidget.module.css

@@ -69,6 +69,10 @@
     height: auto;
     position: static;
     padding: 0;
+
+    &.compactFormContainer {
+      box-shadow: none;
+    }
   }
 
   .close {

apps/scandic-web/components/BookingWidget/variant.ts

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./bookingWidget.module.css"
+
+export const bookingWidgetContainerVariants = cva(styles.wrapper, {
+  variants: {
+    type: {
+      default: "",
+      full: "",
+      compact: styles.compact,
+    },
+  },
+  defaultVariants: {
+    type: "full",
+  },
+})
+
+export const formContainerVariants = cva(styles.formContainer, {
+  variants: {
+    type: {
+      default: "",
+      full: "",
+      compact: styles.compactFormContainer,
+    },
+  },
+  defaultVariants: {
+    type: "full",
+  },
+})

apps/scandic-web/components/Forms/BookingWidget/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { useRouter } from "next/navigation"
 import { useTransition } from "react"
 import { Form as FormRAC } from "react-aria-components"