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

packages/design-system/lib/components/Form/FormInput/index.tsx

@@ -8,8 +8,8 @@ import { cx } from 'class-variance-authority'
 
 import { Error } from '../ErrorMessage/Error'
 import { mergeRefs } from '../utils/mergeRefs'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Input } from '../../InputNew'
+import { MaterialIcon, MaterialIconProps } from '../../Icons/MaterialIcon'
+import { Input } from '../../Input'
 
 import styles from './input.module.css'
 
@@ -26,6 +26,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
       autoComplete,
       className = '',
       description = '',
+      descriptionIcon = 'info' as MaterialIconProps['icon'],
       disabled = false,
       errorFormatter,
       hideError,
@@ -102,7 +103,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
               />
               {showDescription ? (
                 <Text className={styles.description} slot="description">
-                  <MaterialIcon icon="info" size={20} />
+                  <MaterialIcon icon={descriptionIcon} size={20} />
                   {description}
                 </Text>
               ) : null}

packages/design-system/lib/components/Form/FormInput/input.ts

@@ -1,11 +1,14 @@
 import type { RegisterOptions } from 'react-hook-form'
 import type { IntlShape } from 'react-intl'
 
-import type { InputProps } from '../../InputNew/types'
+import type { MaterialIconProps } from '../../Icons/MaterialIcon'
+import type { InputProps } from '../../Input/types'
 
 export interface FormInputProps extends InputProps {
   /** Helper text displayed below the input (hidden when there's an error) */
   description?: string
+  /** Icon to display with the description text. Defaults to 'info' */
+  descriptionIcon?: MaterialIconProps['icon']
   /** Field name for react-hook-form registration */
   name: string
   /** react-hook-form validation rules */