feat: guest information form enter details

2024-10-03 11:12:36 +02:00
parent 6bcb7a6126
commit a5400c1498
50 changed files with 833 additions and 437 deletions
--- a/components/TempDesignSystem/Form/Input/index.tsx
+++ b/components/TempDesignSystem/Form/Input/index.tsx
@@ -1,15 +1,9 @@
 "use client"
-import {
-  Input as AriaInput,
-  Label as AriaLabel,
-  Text,
-  TextField,
-} from "react-aria-components"
+import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"

 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
-import Label from "@/components/TempDesignSystem/Form/Label"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

 import styles from "./input.module.css"
@@ -20,11 +14,13 @@ import type { InputProps } from "./input"

 export default function Input({
  "aria-label": ariaLabel,
+  className = "",
  disabled = false,
  helpText = "",
  label,
  name,
  placeholder = "",
+  readOnly = false,
  registerOptions = {},
  type = "text",
 }: InputProps) {
@@ -44,6 +40,7 @@ export default function Input({
      render={({ field, fieldState }) => (
        <TextField
          aria-label={ariaLabel}
+          className={className}
          isDisabled={field.disabled}
          isInvalid={fieldState.invalid}
          isRequired={!!registerOptions.required}
@@ -53,19 +50,16 @@ export default function Input({
          validationBehavior="aria"
          value={field.value}
        >
-          <AriaLabel className={styles.container} htmlFor={field.name}>
-            <Body asChild fontOnly>
-              <AriaInput
-                {...numberAttributes}
-                aria-labelledby={field.name}
-                className={styles.input}
-                id={field.name}
-                placeholder={placeholder}
-                type={type}
-              />
-            </Body>
-            <Label required={!!registerOptions.required}>{label}</Label>
-          </AriaLabel>
+          <AriaInputWithLabel
+            {...field}
+            aria-labelledby={field.name}
+            id={field.name}
+            label={label}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            required={!!registerOptions.required}
+            type={type}
+          />
          {helpText && !fieldState.error ? (
            <Caption asChild color="black">
              <Text className={styles.helpText} slot="description">