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/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx

@@ -6,8 +6,9 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { FormInput } from "@scandic-hotels/design-system/Form/FormInput"
 
-import Input from "@/components/TempDesignSystem/Form/Input"
+import { formatFormErrorMessage } from "@/utils/getErrorMessage"
 
 import {
   type AdditionalInfoFormSchema,
@@ -53,15 +54,16 @@ export default function AdditionalInfoForm({
       <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
         <Title isAdditional />
         <div className={styles.inputs}>
-          <Input
+          <FormInput
             label={intl.formatMessage({
               id: "common.firstName",
               defaultMessage: "First name",
             })}
             name="firstName"
             registerOptions={{ required: true }}
+            errorFormatter={formatFormErrorMessage}
           />
-          <Input
+          <FormInput
             label={intl.formatMessage({
               id: "common.email",
               defaultMessage: "Email",
@@ -69,6 +71,7 @@ export default function AdditionalInfoForm({
             name="email"
             type="email"
             registerOptions={{ required: true }}
+            errorFormatter={formatFormErrorMessage}
           />
         </div>
         <div className={styles.buttons}>

apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx

@@ -11,13 +11,14 @@ import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { logger } from "@scandic-hotels/common/logger"
 import { Alert } from "@scandic-hotels/design-system/Alert"
 import { Button } from "@scandic-hotels/design-system/Button"
+import { FormInput } from "@scandic-hotels/design-system/Form/FormInput"
 import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import Input from "@/components/TempDesignSystem/Form/Input"
 import useLang from "@/hooks/useLang"
+import { formatFormErrorMessage } from "@/utils/getErrorMessage"
 
 import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema"
 import { Title } from "./Title"
@@ -95,31 +96,34 @@ export default function FindMyBooking({
           />
         ) : null}
         <div className={[styles.inputs, styles.grid].join(" ")}>
-          <Input
+          <FormInput
             label={intl.formatMessage({
               id: "common.bookingNumber",
               defaultMessage: "Booking number",
             })}
             name="confirmationNumber"
             registerOptions={{ required: true }}
+            errorFormatter={formatFormErrorMessage}
           />
-          <Input
+          <FormInput
             label={intl.formatMessage({
               id: "common.firstName",
               defaultMessage: "First name",
             })}
             name="firstName"
             registerOptions={{ required: true }}
+            errorFormatter={formatFormErrorMessage}
           />
-          <Input
+          <FormInput
             label={intl.formatMessage({
               id: "common.lastName",
               defaultMessage: "Last name",
             })}
             name="lastName"
             registerOptions={{ required: true }}
+            errorFormatter={formatFormErrorMessage}
           />
-          <Input
+          <FormInput
             label={intl.formatMessage({
               id: "common.email",
               defaultMessage: "Email",
@@ -127,6 +131,7 @@ export default function FindMyBooking({
             name="email"
             type="email"
             registerOptions={{ required: true }}
+            errorFormatter={formatFormErrorMessage}
           />
         </div>
         <div className={styles.buttons}>