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/Input/utils.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useInputHasValue, clearInput } from './utils'
+
+describe('useInputHasValue', () => {
+  const createMockRef = (value = '') => ({
+    current: { value } as HTMLInputElement,
+  })
+
+  describe('controlled input (value prop)', () => {
+    it('returns true when value has content', () => {
+      const ref = createMockRef()
+      const { result } = renderHook(() => useInputHasValue('hello', ref))
+      expect(result.current).toBe(true)
+    })
+
+    it('returns false when value is empty string', () => {
+      const ref = createMockRef()
+      const { result } = renderHook(() => useInputHasValue('', ref))
+      expect(result.current).toBe(false)
+    })
+
+    it('returns false when value is only whitespace', () => {
+      const ref = createMockRef()
+      const { result } = renderHook(() => useInputHasValue('   ', ref))
+      expect(result.current).toBe(false)
+    })
+
+    it('updates when value prop changes', () => {
+      const ref = createMockRef()
+      const { result, rerender } = renderHook(
+        ({ value }) => useInputHasValue(value, ref),
+        { initialProps: { value: '' } }
+      )
+
+      expect(result.current).toBe(false)
+
+      rerender({ value: 'new value' })
+      expect(result.current).toBe(true)
+    })
+  })
+})
+
+describe('clearInput', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('calls onChange with empty value for controlled input', () => {
+    const onChange = vi.fn()
+    const inputRef = {
+      current: {
+        value: 'test',
+        focus: vi.fn(),
+      } as unknown as HTMLInputElement,
+    }
+
+    clearInput({
+      inputRef,
+      onChange,
+      value: 'test',
+    })
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: { value: '' },
+      })
+    )
+    expect(inputRef.current.focus).toHaveBeenCalled()
+  })
+
+  it('sets input value directly for uncontrolled input', () => {
+    const input = document.createElement('input')
+    input.value = 'test'
+    const focusSpy = vi.spyOn(input, 'focus')
+    const dispatchSpy = vi.spyOn(input, 'dispatchEvent')
+
+    const inputRef = { current: input }
+
+    clearInput({
+      inputRef,
+      onChange: undefined,
+      value: undefined,
+    })
+
+    expect(input.value).toBe('')
+    expect(dispatchSpy).toHaveBeenCalled()
+    expect(focusSpy).toHaveBeenCalled()
+  })
+
+  it('does nothing when ref is null', () => {
+    const onChange = vi.fn()
+    const inputRef = { current: null }
+
+    clearInput({
+      inputRef,
+      onChange,
+      value: 'test',
+    })
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})