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