feat: guest information form enter details

2024-10-03 11:12:36 +02:00
parent 4103e3fb37
commit 451d461c7f
50 changed files with 834 additions and 442 deletions
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/components/TempDesignSystem/Form/Phone/index.tsx
@@ -2,11 +2,7 @@
 import "react-international-phone/style.css"

 import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
-import {
-  Input as AriaInput,
-  Label as AriaLabel,
-  TextField,
-} from "react-aria-components"
+import { TextField } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import {
  CountrySelector,
@@ -18,6 +14,7 @@ import { useIntl } from "react-intl"

 import { ChevronDownIcon } from "@/components/Icons"
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"

@@ -29,10 +26,12 @@ import type { PhoneProps } from "./phone"

 export default function Phone({
  ariaLabel = "Phone number input",
+  className = "",
  disabled = false,
  label,
  name = "phoneNumber",
  placeholder = "",
+  readOnly = false,
  registerOptions = {
    required: true,
  },
@@ -72,8 +71,9 @@ export default function Phone({
  }

  return (
-    <div className={styles.phone}>
+    <div className={`${styles.phone} ${className}`}>
      <CountrySelector
+        disabled={readOnly}
        dropdownArrowClassName={styles.arrow}
        flagClassName={styles.flag}
        onSelect={handleSelectCountry}
@@ -114,25 +114,21 @@ export default function Phone({
        isDisabled={disabled ?? field.disabled}
        isInvalid={fieldState.invalid}
        isRequired={!!registerOptions?.required}
+        isReadOnly={readOnly}
        name={field.name}
        type="tel"
      >
-        <AriaLabel className={styles.inputContainer} htmlFor={field.name}>
-          <Body asChild fontOnly>
-            <AriaInput
-              className={styles.input}
-              id={field.name}
-              name={field.name}
-              onBlur={field.onBlur}
-              onChange={handleChange}
-              placeholder={placeholder}
-              ref={field.ref}
-              required={!!registerOptions.required}
-              value={inputValue}
-            />
-          </Body>
-          <Label required={!!registerOptions.required}>{label}</Label>
-        </AriaLabel>
+        <AriaInputWithLabel
+          {...field}
+          id={field.name}
+          label={label}
+          onChange={handleChange}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={!!registerOptions.required}
+          type="tel"
+          value={inputValue}
+        />
        <ErrorMessage errors={formState.errors} name={field.name} />
      </TextField>
    </div>
--- a/components/TempDesignSystem/Form/Phone/phone.module.css
+++ b/components/TempDesignSystem/Form/Phone/phone.module.css
@@ -19,6 +19,9 @@
  --react-international-phone-dropdown-top: calc(
    var(--react-international-phone-height) + var(--Spacing-x1)
  );
+  --react-international-phone-dial-code-preview-font-size: var(
+    --typography-Body-Regular-fontSize
+  );
 }

 .phone:has(.input:active, .input:focus) {
@@ -46,7 +49,6 @@
  align-self: center;
 }

-.inputContainer,
 .select {
  align-content: center;
  background-color: var(--Main-Grey-White);
@@ -93,42 +95,8 @@

 .select .dialCode {
  border: none;
-  color: var(--Main-Grey-100);
+  color: var(--UI-Text-High-contrast);
  line-height: 1;
  justify-self: flex-start;
  padding: 0;
 }
-
-.inputContainer:has(.input:not(:focus):placeholder-shown) {
-  gap: 0;
-  grid-template-rows: 1fr;
-}
-
-.inputContainer:has(.input:active, .input:focus) {
-  border-color: var(--Scandic-Blue-90);
-}
-
-.inputContainer:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
-  border-color: var(--Scandic-Red-60);
-}
-
-.input {
-  background: none;
-  border: none;
-  color: var(--Main-Grey-100);
-  height: 18px;
-  margin: 0;
-  order: 2;
-  overflow: visible;
-  padding: 0;
-}
-
-.input:not(:active, :focus):placeholder-shown {
-  height: 0px;
-}
-
-.input:focus,
-.input:focus:placeholder-shown {
-  height: 18px;
-  outline: none;
-}
--- a/components/TempDesignSystem/Form/Phone/phone.ts
+++ b/components/TempDesignSystem/Form/Phone/phone.ts
@@ -2,9 +2,11 @@ import type { RegisterOptions } from "react-hook-form"

 export type PhoneProps = {
  ariaLabel?: string
+  className?: string
  disabled?: boolean
  label: string
  name?: string
  placeholder?: string
+  readOnly?: boolean
  registerOptions?: RegisterOptions
 }