Merged in fix/BOOK-323-enter-details-scroll-error (pull request #2986)

Fix/BOOK-323 enter details scroll error

* fix(BOOK-323): scroll to invalid element on submit on enter details

* fix(BOOK-323): update error message design

* fix(BOOK-323): clean up

* fix(BOOK-323): scroll to fields in room in right order

* fix(BOOK-323): add id to translations

* fix(BOOK-323): remove undefined

* fix(BOOK-323): fix submitting state

* fix(BOOK-323): use ref in multiroom for scrolling to right element, add membershipNo

* fix(BOOK-323): fix invalid border country

* fix(BOOK-323): use error message component

* fix(BOOK-323): fix invalid focused styling on mobile

* fix(BOOK-323): remove redundant dependency in callback


Approved-by: Erik Tiekstra

packages/design-system/lib/components/Form/Checkbox/checkbox.module.css

@@ -38,11 +38,3 @@
 .topAlign {
   align-items: flex-start;
 }
-
-.error {
-  align-items: center;
-  color: var(--Scandic-Red-60);
-  display: flex;
-  gap: var(--Spacing-x-half);
-  margin: var(--Spacing-x1) 0 0;
-}

packages/design-system/lib/components/Form/Checkbox/index.tsx

@@ -10,7 +10,7 @@ import {
 
 import styles from './checkbox.module.css'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
-import Caption from '../../Caption'
+import { ErrorMessage } from '../ErrorMessage'
 
 interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   name: string
@@ -36,7 +36,7 @@ const Checkbox = forwardRef<
   ref
 ) {
   const { control } = useFormContext()
-  const { field, fieldState } = useController({
+  const { field, fieldState, formState } = useController({
     control,
     name,
     rules: registerOptions,
@@ -48,6 +48,7 @@ const Checkbox = forwardRef<
       isSelected={field.value}
       onChange={field.onChange}
       data-testid={name}
+      name={name}
       isDisabled={registerOptions?.disabled}
       excludeFromTabOrder
     >
@@ -68,12 +69,15 @@ const Checkbox = forwardRef<
             {children}
           </span>
           {fieldState.error && !hideError ? (
-            <Caption className={styles.error} fontOnly>
-              <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-              {(fieldState.error.message &&
-                errorCodeMessages?.[fieldState.error.message]) ||
-                fieldState.error.message}
-            </Caption>
+            <ErrorMessage
+              errors={formState.errors}
+              name={name}
+              messageLabel={
+                (fieldState.error.message &&
+                  errorCodeMessages?.[fieldState.error.message]) ||
+                fieldState.error.message
+              }
+            />
           ) : null}
         </>
       )}