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/Compositions/ExampleForm.stories.tsx

@@ -137,40 +137,37 @@ function ExampleFormComponent({
 
 const meta: Meta<typeof ExampleFormComponent> = {
   title: 'Compositions/Form/ExampleForm',
-  component: ExampleFormComponent,
   parameters: {
     layout: 'padded',
   },
+  argTypes: {
+    labelPosition: {
+      control: 'select',
+      options: ['floating', 'top'],
+      description: 'Position of labels for all input fields in the form',
+      table: {
+        type: { summary: "'floating' | 'top'" },
+        defaultValue: { summary: "'floating'" },
+      },
+    },
+  },
 }
 
 export default meta
 
 type Story = StoryObj<typeof ExampleFormComponent>
 
-export const LabelFloating: Story = {
+export const Default: Story = {
   render: (args) => (
     <ExampleFormComponent
-      key="label-on-top"
+      key={`label-${args.labelPosition || 'floating'}`}
       {...args}
-      labelPosition="floating"
-    />
-  ),
-  args: {
-    onSubmit: fn(),
-  },
-}
-
-export const LabelOnTop: Story = {
-  render: (args) => (
-    <ExampleFormComponent
-      key="label-on-top"
-      {...args}
-      labelPosition="top"
-      fieldPrefix="top"
+      fieldPrefix="example"
     />
   ),
   args: {
     onSubmit: fn(),
+    labelPosition: 'floating',
   },
 }
 
@@ -348,18 +345,6 @@ export const WithErrors: SignupStory = {
   },
 }
 
-export const WithErrorsLabelOnTop: SignupStory = {
-  render: (args) => <SignupFormComponent {...args} />,
-  args: {
-    onSubmit: fn(),
-    labelPosition: 'top',
-    showErrors: true,
-  },
-  parameters: {
-    ...signupMeta.parameters,
-  },
-}
-
 // ============================================================================
 // Input Variations Showcase
 // ============================================================================

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 */

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

@@ -16,7 +16,7 @@ import {
 
 import { ErrorMessage } from '../ErrorMessage'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Input } from '../../InputNew'
+import { Input } from '../../Input'
 import { InputLabel } from '../../InputLabel'
 
 import styles from './phone.module.css'