Merged in feat/use-new-input-component (pull request #3324)

feat(SW-3659): Use new input component

* Use new input component

* Update error formatter

* Merged master into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Merge branch 'master' into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Update Input stories

* Merge branch 'feat/use-new-input-component' of bitbucket.org:scandic-swap/web into feat/use-new-input-component

* Update Storybook logo

* Add some new demo icon input story

* Fix the clear content button position

* Fix broken password input icon

* Merged master into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Add aria-hidden to required asterisk

* Merge branch 'feat/use-new-input-component' of bitbucket.org:scandic-swap/web into feat/use-new-input-component

* Merge branch 'master' into feat/use-new-input-component


Approved-by: Bianca Widstam
Approved-by: Matilda Landström

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -1,102 +0,0 @@
-"use client"
-
-import { forwardRef, type HTMLAttributes, type WheelEvent } from "react"
-import { Text, TextField } from "react-aria-components"
-import { Controller, useFormContext } from "react-hook-form"
-import { useIntl } from "react-intl"
-
-import Caption from "@scandic-hotels/design-system/Caption"
-import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
-
-import { getErrorMessage } from "@/utils/getErrorMessage"
-
-import styles from "./input.module.css"
-
-import type { InputProps } from "./input"
-
-const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  {
-    "aria-label": ariaLabel,
-    autoComplete,
-    className = "",
-    disabled = false,
-    helpText = "",
-    label,
-    maxLength,
-    name,
-    placeholder,
-    readOnly = false,
-    registerOptions = {},
-    type = "text",
-    hideError,
-    inputMode,
-  },
-  ref
-) {
-  const intl = useIntl()
-  const { control } = useFormContext()
-  const numberAttributes: HTMLAttributes<HTMLInputElement> = {}
-  if (type === "number") {
-    numberAttributes.onWheel = function (evt: WheelEvent<HTMLInputElement>) {
-      evt.currentTarget.blur()
-    }
-  }
-
-  return (
-    <Controller
-      disabled={disabled}
-      control={control}
-      name={name}
-      rules={registerOptions}
-      render={({ field, fieldState, formState }) => (
-        <TextField
-          aria-label={ariaLabel}
-          className={className}
-          isDisabled={field.disabled}
-          isReadOnly={readOnly}
-          isInvalid={fieldState.invalid}
-          isRequired={!!registerOptions.required}
-          name={field.name}
-          onBlur={field.onBlur}
-          onChange={field.onChange}
-          validationBehavior="aria"
-          value={field.value}
-        >
-          <InputWithLabel
-            {...field}
-            ref={ref}
-            aria-labelledby={field.name}
-            autoComplete={autoComplete}
-            id={field.name}
-            label={label}
-            maxLength={maxLength}
-            placeholder={placeholder}
-            readOnly={readOnly}
-            disabled={disabled}
-            required={!!registerOptions.required}
-            type={type}
-            inputMode={inputMode}
-          />
-          {helpText && !fieldState.error ? (
-            <Caption asChild color="black">
-              <Text className={styles.helpText} slot="description">
-                <MaterialIcon icon="check" size={20} />
-                {helpText}
-              </Text>
-            </Caption>
-          ) : null}
-          {fieldState.error && !hideError ? (
-            <ErrorMessage
-              errors={formState.errors}
-              name={name}
-              messageLabel={getErrorMessage(intl, fieldState.error.message)}
-            />
-          ) : null}
-        </TextField>
-      )}
-    />
-  )
-})
-export default Input

apps/scandic-web/components/TempDesignSystem/Form/Input/input.module.css

@@ -1,17 +0,0 @@
-.helpText {
-  align-items: flex-start;
-  display: flex;
-  gap: var(--Space-x05);
-}
-
-.error {
-  align-items: center;
-  color: var(--Text-Interactive-Error);
-  display: flex;
-  gap: var(--Space-x05);
-  margin: var(--Space-x1) 0 0;
-}
-
-.error svg {
-  min-width: 20px;
-}

apps/scandic-web/components/TempDesignSystem/Form/Input/input.ts

@@ -1,10 +0,0 @@
-import type { RegisterOptions } from "react-hook-form"
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  helpText?: string
-  label: string
-  name: string
-  registerOptions?: RegisterOptions
-  hideError?: boolean
-}

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -20,8 +20,7 @@ import { NewPasswordValidation } from "./NewPasswordValidation"
 
 import styles from "./passwordInput.module.css"
 
-interface PasswordInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+interface PasswordInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
   registerOptions?: RegisterOptions
   visibilityToggleable?: boolean

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css

@@ -23,7 +23,7 @@
   position: relative;
 }
 
-.toggleButton {
+.inputWrapper .toggleButton {
   position: absolute;
   right: var(--Space-x2);
   top: 50%;