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-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",
-  },
-})