Merged in feat/SW-3655-input-component (pull request #3296)

feat: (SW-3655) new Input and FormInput components

* First version new Input and FormInput components

* Handle aria-describedby with react-aria instead of manually add it

* Update breaking unit and stories tests

* Merge branch 'master' into feat/SW-3655-input-component

* Update example form

* Merge branch 'master' into feat/SW-3655-input-component

* New lock file


Approved-by: Linus Flood

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
-import { expect } from 'storybook/test'
+import { expect, fn } from 'storybook/test'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { config as typographyConfig } from '../Typography/variants'
@@ -84,7 +84,7 @@ type Story = StoryObj<typeof Button>
 
 export const Default: Story = {
   args: {
-    onPress: () => alert('Primary button pressed!'),
+    onPress: fn(),
     children: 'Button',
     typography: 'Body/Paragraph/mdBold',
   },
@@ -133,6 +133,7 @@ export const PrimaryDisabled: Story = {
   args: {
     ...PrimaryLarge.args,
     isDisabled: true,
+    onPress: fn(), // Fresh spy instance for disabled test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -144,6 +145,7 @@ export const PrimaryLoading: Story = {
   args: {
     ...PrimaryLarge.args,
     isPending: true,
+    onPress: fn(), // Fresh spy instance for loading test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -155,10 +157,11 @@ export const PrimaryOnDarkBackground: Story = {
   globals: globalStoryPropsInverted,
   args: {
     ...PrimaryLarge.args,
+    onPress: fn(), // Fresh spy instance
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(0)
+    expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
 
@@ -205,6 +208,7 @@ export const PrimaryInvertedDisabled: Story = {
   args: {
     ...PrimaryInvertedLarge.args,
     isDisabled: true,
+    onPress: fn(), // Fresh spy instance for disabled test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -217,6 +221,7 @@ export const PrimaryInvertedLoading: Story = {
   args: {
     ...PrimaryInvertedLarge.args,
     isPending: true,
+    onPress: fn(), // Fresh spy instance for loading test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -263,6 +268,7 @@ export const SecondaryDisabled: Story = {
   args: {
     ...SecondaryLarge.args,
     isDisabled: true,
+    onPress: fn(), // Fresh spy instance for disabled test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -274,6 +280,7 @@ export const SecondaryLoading: Story = {
   args: {
     ...SecondaryLarge.args,
     isPending: true,
+    onPress: fn(), // Fresh spy instance for loading test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -325,6 +332,7 @@ export const SecondaryInvertedDisabled: Story = {
   args: {
     ...SecondaryInvertedLarge.args,
     isDisabled: true,
+    onPress: fn(), // Fresh spy instance for disabled test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -337,6 +345,7 @@ export const SecondaryInvertedLoading: Story = {
   args: {
     ...SecondaryInvertedLarge.args,
     isPending: true,
+    onPress: fn(), // Fresh spy instance for loading test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -383,6 +392,7 @@ export const TertiaryDisabled: Story = {
   args: {
     ...TertiaryLarge.args,
     isDisabled: true,
+    onPress: fn(), // Fresh spy instance for disabled test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -394,6 +404,7 @@ export const TertiaryLoading: Story = {
   args: {
     ...TertiaryLarge.args,
     isPending: true,
+    onPress: fn(), // Fresh spy instance for loading test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -442,6 +453,7 @@ export const TextDisabled: Story = {
   args: {
     ...TextLarge.args,
     isDisabled: true,
+    onPress: fn(), // Fresh spy instance for disabled test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -504,6 +516,7 @@ export const TextInvertedDisabled: Story = {
   args: {
     ...TextInvertedLarge.args,
     isDisabled: true,
+    onPress: fn(), // Fresh spy instance for disabled test
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))