From 213bd2c561f00ee97b10d33ef102e7b968c754be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20J=C3=A4derberg?=
 <joakim.jaderberg@scandichotels.com>
Date: Thu, 17 Apr 2025 08:56:24 +0000
Subject: [PATCH] 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            |  2 +-
 .../components/BookingWidget/Client.tsx       | 24 ++++++---------
 .../FloatingBookingWidget.module.css          |  4 +--
 .../BookingWidget/bookingWidget.module.css    |  4 +++
 .../components/BookingWidget/variant.ts       | 29 +++++++++++++++++++
 .../components/Forms/BookingWidget/index.tsx  |  1 +
 6 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 apps/scandic-web/components/BookingWidget/variant.ts

diff --git a/apps/scandic-redirect/package.json b/apps/scandic-redirect/package.json
index 3b2e68c7c..5d0cc9ee5 100644
--- a/apps/scandic-redirect/package.json
+++ b/apps/scandic-redirect/package.json
@@ -6,4 +6,4 @@
   "dependencies": {
     "@netlify/functions": "^3.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/scandic-web/components/BookingWidget/Client.tsx b/apps/scandic-web/components/BookingWidget/Client.tsx
index 68405a9fb..8d74c561c 100644
--- a/apps/scandic-web/components/BookingWidget/Client.tsx
+++ b/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",
-  },
-})
diff --git a/apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css b/apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css
index 89fb44543..5c86614fd 100644
--- a/apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css
+++ b/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);
     }
   }
 }
diff --git a/apps/scandic-web/components/BookingWidget/bookingWidget.module.css b/apps/scandic-web/components/BookingWidget/bookingWidget.module.css
index bd3b526b7..1b05bea40 100644
--- a/apps/scandic-web/components/BookingWidget/bookingWidget.module.css
+++ b/apps/scandic-web/components/BookingWidget/bookingWidget.module.css
@@ -69,6 +69,10 @@
     height: auto;
     position: static;
     padding: 0;
+
+    &.compactFormContainer {
+      box-shadow: none;
+    }
   }
 
   .close {
diff --git a/apps/scandic-web/components/BookingWidget/variant.ts b/apps/scandic-web/components/BookingWidget/variant.ts
new file mode 100644
index 000000000..d5832c026
--- /dev/null
+++ b/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",
+  },
+})
diff --git a/apps/scandic-web/components/Forms/BookingWidget/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/index.tsx
index f81f4e2c9..0821ea0fc 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/index.tsx
+++ b/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"