@npm_leadtech/legal-lib-components 7.106.0 → 7.106.1

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.js

@@ -4,7 +4,7 @@ export const PhoneNumberDisplayStyled = styled.nav `
   align-items: center;
   gap: 0.5rem;
   color: var(--neutral-neutral-2);
-  height: 2.5rem;
+  height: 1.375rem;
   padding-right: 0;
 
   p {

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.ts

@@ -5,7 +5,7 @@ export const PhoneNumberDisplayStyled = styled.nav`
   align-items: center;
   gap: 0.5rem;
   color: var(--neutral-neutral-2);
-  height: 2.5rem;
+  height: 1.375rem;
   padding-right: 0;
 
   p {

package/dist/src/components/molecules/TextInput/tests/InputComponent.test.tsx

@@ -0,0 +1,108 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { Input } from '../Input'
+
+jest.mock('../../../../../images/svg/eye-close.svg', () => 'eye-close.svg')
+jest.mock('../../../../../images/svg/eye-24-px.svg', () => 'eye-open.svg')
+jest.mock('../../../../../images/svg/percent.svg', () => 'percent.svg')
+
+const defaultProps = {
+  name: 'test-input',
+  placeholder: 'Enter text',
+  prefix: '',
+  value: '',
+  type: 'text' as const,
+  disabled: false,
+  className: 'e-text-input',
+  onChange: jest.fn(),
+  onClick: jest.fn(),
+  onBlur: jest.fn(),
+  onKeyDown: jest.fn(),
+  onKeyUp: jest.fn(),
+  country: 'US'
+}
+
+describe('Input', () => {
+  afterEach(() => {
+    cleanup()
+    jest.clearAllMocks()
+  })
+
+  test('renders a text input with correct attributes', () => {
+    render(<Input {...defaultProps} />)
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('name', 'test-input')
+    expect(input).toHaveAttribute('type', 'text')
+  })
+
+  test('renders disabled input when disabled prop is true', () => {
+    render(<Input {...defaultProps} disabled={true} />)
+    expect(screen.getByPlaceholderText('Enter text')).toBeDisabled()
+  })
+
+  test('applies short input class when maxLength is 5 or less', () => {
+    render(<Input {...defaultProps} maxLength={3} />)
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input.className).toContain('e-text-input__short')
+  })
+
+  test('does not apply short input class when maxLength is greater than 5', () => {
+    render(<Input {...defaultProps} maxLength={10} />)
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input.className).not.toContain('e-text-input__short')
+  })
+
+  test('renders password toggle button for password type', () => {
+    render(<Input {...defaultProps} type='password' value='secret' />)
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveClass('input-icon-password-button')
+  })
+
+  test('toggles password visibility on button click', () => {
+    render(<Input {...defaultProps} type='password' value='secret' />)
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input).toHaveAttribute('type', 'password')
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(input).toHaveAttribute('type', 'text')
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(input).toHaveAttribute('type', 'password')
+  })
+
+  test('renders currency prefix for non-DE country', () => {
+    render(<Input {...defaultProps} prefix='currency' country='US' currencySymbol='$' />)
+    expect(screen.getByText('$')).toBeInTheDocument()
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input.className).toContain('has-currency-prefix')
+  })
+
+  test('renders currency suffix for DE country', () => {
+    render(<Input {...defaultProps} prefix='currency' country='DE' currencySymbol='€' />)
+    expect(screen.getByText('€')).toBeInTheDocument()
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input.className).toContain('has-currency-suffix')
+  })
+
+  test('renders percent suffix when prefix is percent', () => {
+    render(<Input {...defaultProps} prefix='percent' />)
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input.className).toContain('has-percent-suffix')
+    expect(screen.getByAltText('percent')).toBeInTheDocument()
+  })
+
+  test('calls onChange when input value changes', () => {
+    render(<Input {...defaultProps} />)
+    fireEvent.change(screen.getByPlaceholderText('Enter text'), { target: { value: 'hello' } })
+    expect(defaultProps.onChange).toHaveBeenCalledTimes(1)
+  })
+
+  test('calls onBlur when input loses focus', () => {
+    render(<Input {...defaultProps} />)
+    fireEvent.blur(screen.getByPlaceholderText('Enter text'))
+    expect(defaultProps.onBlur).toHaveBeenCalledTimes(1)
+  })
+})

package/dist/src/components/molecules/TextInput/tests/TextInputLabelComponent.test.tsx

@@ -0,0 +1,61 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { TextInputLabel } from '../TextInputLabel'
+
+jest.mock('../../../atoms', () => ({
+  DialogMenuIcon: ({ content }: { content: string }) => <span data-testid='dialog-menu-icon'>{content}</span>
+}))
+
+describe('TextInputLabel', () => {
+  afterEach(cleanup)
+
+  test('returns null when neither label nor notes are provided', () => {
+    const { container } = render(<TextInputLabel />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  test('renders the label text', () => {
+    render(<TextInputLabel label='Full Name' htmlFor='full-name' />)
+    expect(screen.getByText('Full Name')).toBeInTheDocument()
+  })
+
+  test('renders label element with correct htmlFor attribute', () => {
+    render(<TextInputLabel label='Email' htmlFor='email-input' />)
+    const label = screen.getByText('Email')
+    expect(label.closest('label')).toHaveAttribute('for', 'email-input')
+  })
+
+  test('renders notes text', () => {
+    render(<TextInputLabel label='Name' notes='Optional field' />)
+    expect(screen.getByText('Optional field')).toBeInTheDocument()
+  })
+
+  test('renders with form-group__label class when no tooltip', () => {
+    render(<TextInputLabel label='Name' />)
+    const label = screen.getByText('Name').closest('label')
+    expect(label).toHaveClass('form-group__label')
+  })
+
+  test('renders with form-group__label-icon class when tooltip is provided', () => {
+    render(<TextInputLabel label='SSN' dialogMenuTip='Required for verification' />)
+    const label = screen.getByText('SSN').closest('label')
+    expect(label).toHaveClass('form-group__label-icon')
+  })
+
+  test('renders DialogMenuIcon when dialogMenuTip is provided', () => {
+    render(<TextInputLabel label='SSN' dialogMenuTip='Tooltip content' />)
+    expect(screen.getByTestId('dialog-menu-icon')).toBeInTheDocument()
+    expect(screen.getByText('Tooltip content')).toBeInTheDocument()
+  })
+
+  test('does not render DialogMenuIcon when dialogMenuTip is empty', () => {
+    render(<TextInputLabel label='Name' dialogMenuTip='' />)
+    expect(screen.queryByTestId('dialog-menu-icon')).not.toBeInTheDocument()
+  })
+
+  test('renders when only notes are provided', () => {
+    render(<TextInputLabel notes='Some note' />)
+    expect(screen.getByText('Some note')).toBeInTheDocument()
+  })
+})

package/dist/src/components/molecules/TextInput/tests/TextInputMessageComponent.test.tsx

@@ -0,0 +1,37 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { TextInputMessage } from '../TextInputMessage'
+
+jest.mock('../../../../../images/svg/info-error_24px_outlined.svg', () => 'error-icon.svg')
+
+describe('TextInputMessage', () => {
+  afterEach(cleanup)
+
+  test('renders error message when errorMessage is set and validate is false', () => {
+    render(<TextInputMessage errorMessage='This field is required' validate={false} />)
+    expect(screen.getByText('This field is required')).toBeInTheDocument()
+  })
+
+  test('renders error icon with alt text matching the error message', () => {
+    render(<TextInputMessage errorMessage='Invalid email' validate={false} />)
+    expect(screen.getByAltText('Invalid email')).toBeInTheDocument()
+  })
+
+  test('returns null when errorMessage is empty', () => {
+    const { container } = render(<TextInputMessage errorMessage='' validate={false} />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  test('returns null when validate is true even with error message', () => {
+    const { container } = render(<TextInputMessage errorMessage='Some error' validate={true} />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  test('renders with correct CSS classes', () => {
+    const { container } = render(<TextInputMessage errorMessage='Error' validate={false} />)
+    expect(container.querySelector('.e-text__error')).toBeInTheDocument()
+    expect(container.querySelector('.e-text__error-icon')).toBeInTheDocument()
+    expect(container.querySelector('.e-text__error-label')).toBeInTheDocument()
+  })
+})

package/dist/src/components/sections/Header/Header.styled.js

@@ -90,8 +90,10 @@ export const HeaderStyled = styled.header `
   .header__logo {
     z-index: 200;
     min-width: max-content;
+    height: 1.375rem;
 
     img {
+      height: 1.375rem;
       @media (max-width: 1024px) {
         width: 141px;
         height: auto;

package/dist/src/components/sections/Header/Header.styled.ts

@@ -91,8 +91,10 @@ export const HeaderStyled = styled.header`
   .header__logo {
     z-index: 200;
     min-width: max-content;
+    height: 1.375rem;
 
     img {
+      height: 1.375rem;
       @media (max-width: 1024px) {
         width: 141px;
         height: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.106.0",
+  "version": "7.106.1",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",