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/Forms/Edit/Profile/FormContent/index.tsx

@@ -6,17 +6,20 @@ import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
+import { FormInput } from "@scandic-hotels/design-system/Form/FormInput"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
 import { FormSelect } from "@scandic-hotels/design-system/Form/Select"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getLocalizedLanguageOptions } from "@/constants/languages"
 
-import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
 import useLang from "@/hooks/useLang"
 import { getFormattedCountryList } from "@/utils/countries"
-import { getErrorMessage } from "@/utils/getErrorMessage"
+import {
+  formatFormErrorMessage,
+  getErrorMessage,
+} from "@/utils/getErrorMessage"
 
 import styles from "./formContent.module.css"
 
@@ -63,7 +66,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
           name="dateOfBirth"
           registerOptions={{ required: true }}
         />
-        <Input
+        <FormInput
           data-hj-suppress
           label={`${intl.formatMessage({
             id: "common.address",
@@ -71,7 +74,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
           })} 1`}
           name="address.streetAddress"
         />
-        <Input
+        <FormInput
           data-hj-suppress
           label={intl.formatMessage({
             id: "common.city",
@@ -80,12 +83,13 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
           name="address.city"
         />
         <div className={styles.container}>
-          <Input
+          <FormInput
             data-hj-suppress
             label={intl.formatMessage({
               id: "common.zipCode",
               defaultMessage: "Zip code",
             })}
+            errorFormatter={formatFormErrorMessage}
             name="address.zipCode"
             registerOptions={{ required: true }}
           />
@@ -105,7 +109,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
             registerOptions={{ required: true }}
           />
         </div>
-        <Input
+        <FormInput
           label={intl.formatMessage({
             id: "common.emailAddress",
             defaultMessage: "Email address",

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -15,6 +15,7 @@ import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
+import { FormInput } from "@scandic-hotels/design-system/Form/FormInput"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
 import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { TextLinkButton } from "@scandic-hotels/design-system/TextLinkButton"
@@ -29,11 +30,13 @@ import {
 } from "@scandic-hotels/trpc/routers/user/schemas"
 
 import ProfilingConsentModalReadOnly from "@/components/MyPages/ProfilingConsent/Modal/ReadOnly"
-import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
 import useLang from "@/hooks/useLang"
 import { getFormattedCountryList } from "@/utils/countries"
-import { getErrorMessage } from "@/utils/getErrorMessage"
+import {
+  formatFormErrorMessage,
+  getErrorMessage,
+} from "@/utils/getErrorMessage"
 import { requestOpen } from "@/utils/profilingConsent"
 import { trackLinkClick } from "@/utils/tracking/profilingConsent"
 
@@ -162,7 +165,8 @@ export default function SignupForm({
                 </Typography>
               </header>
               <div className={styles.nameInputs}>
-                <Input
+                <FormInput
+                  errorFormatter={formatFormErrorMessage}
                   label={intl.formatMessage({
                     id: "common.firstName",
                     defaultMessage: "First name",
@@ -170,7 +174,8 @@ export default function SignupForm({
                   name="firstName"
                   registerOptions={{ required: true }}
                 />
-                <Input
+                <FormInput
+                  errorFormatter={formatFormErrorMessage}
                   label={intl.formatMessage({
                     id: "common.lastName",
                     defaultMessage: "Last name",
@@ -214,7 +219,8 @@ export default function SignupForm({
               />
             </div>
             <div className={cx(styles.container, styles.additional)}>
-              <Input
+              <FormInput
+                errorFormatter={formatFormErrorMessage}
                 label={intl.formatMessage({
                   id: "common.zipCode",
                   defaultMessage: "Zip code",
@@ -236,7 +242,8 @@ export default function SignupForm({
                 name="address.countryCode"
                 registerOptions={{ required: true }}
               />
-              <Input
+              <FormInput
+                errorFormatter={formatFormErrorMessage}
                 label={intl.formatMessage({
                   id: "common.emailAddress",
                   defaultMessage: "Email address",