Merged in fix/sw-350-booking-widget-ui-fixes (pull request #683)

Fix/sw 350 booking widget ui fixes

Approved-by: Simon.Emanuelsson

components/TempDesignSystem/Form/Checkbox/checkbox.module.css

@@ -9,6 +9,11 @@
   background: var(--UI-Input-Controls-Fill-Selected);
 }
 
+.container[data-disabled] .checkbox {
+  border: 1px solid var(--UI-Input-Controls-Border-Disabled);
+  background: var(--UI-Input-Controls-Surface-Disabled);
+}
+
 .checkboxContainer {
   display: flex;
   align-items: flex-start;
@@ -20,13 +25,12 @@
   width: 24px;
   height: 24px;
   min-width: 24px;
-  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  border: 1px solid var(--UI-Input-Controls-Border-Normal);
   border-radius: 4px;
   transition: all 200ms;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 200ms;
   forced-color-adjust: none;
 }
 

components/TempDesignSystem/Form/Checkbox/checkbox.ts

@@ -1,7 +0,0 @@
-import { RegisterOptions } from "react-hook-form"
-
-export interface CheckboxProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  name: string
-  registerOptions?: RegisterOptions
-}

components/TempDesignSystem/Form/Checkbox/index.tsx

@@ -7,10 +7,10 @@ import { InfoCircleIcon } from "@/components/Icons"
 import CheckIcon from "@/components/Icons/Check"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import { CheckboxProps } from "./checkbox"
-
 import styles from "./checkbox.module.css"
 
+import { CheckboxProps } from "@/types/components/checkbox"
+
 export default function Checkbox({
   name,
   children,
@@ -29,6 +29,7 @@ export default function Checkbox({
       isSelected={field.value}
       onChange={field.onChange}
       data-testid={name}
+      isDisabled={registerOptions?.disabled}
     >
       {({ isSelected }) => (
         <>