@npm_leadtech/legal-lib-components 7.90.0 → 7.90.1

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.tsx

@@ -0,0 +1,38 @@
+import React, { type FC } from 'react'
+
+import { Button } from '../../atoms/Button'
+import { SignerStatusItem } from '../../atoms/SignerStatusItem'
+import type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types'
+import { SignersStatusTooltipContentStyled } from './SignersStatusTooltipContent.styled'
+
+export const SignersStatusTooltipContent: FC<SignersStatusTooltipContentProps> = ({
+  title = 'Signers Status',
+  signers,
+  manageRequestsLabel,
+  onManageRequestsClick,
+  manageRequestsDataQa = 'manage_requests_button',
+  givenClass = ''
+}) => {
+  return (
+    <SignersStatusTooltipContentStyled className={`signers-status-tooltip-content ${givenClass}`.trim()}>
+      <h3>{title}</h3>
+      <ul className='signers-status-tooltip-content__signers'>
+        {signers.map((signer, index) => (
+          <SignerStatusItem key={`${signer.status}-${index}`} status={signer.status}>
+            {signer.children}
+          </SignerStatusItem>
+        ))}
+      </ul>
+      <div className='signers-status-tooltip-content__button'>
+        <Button
+          noLink
+          color='tertiary'
+          givenClass='underline-button'
+          label={manageRequestsLabel}
+          dataQa={manageRequestsDataQa}
+          onClick={onManageRequestsClick}
+        />
+      </div>
+    </SignersStatusTooltipContentStyled>
+  )
+}

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.d.ts

@@ -0,0 +1,9 @@
+import type { SignerStatusItemProps } from '../../atoms/SignerStatusItem/SignerStatusItemProps.types';
+export interface SignersStatusTooltipContentProps {
+    title?: string;
+    signers: SignerStatusItemProps[];
+    manageRequestsLabel: string;
+    onManageRequestsClick: () => void;
+    manageRequestsDataQa?: string;
+    givenClass?: string;
+}

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.ts

@@ -0,0 +1,10 @@
+import type { SignerStatusItemProps } from '../../atoms/SignerStatusItem/SignerStatusItemProps.types'
+
+export interface SignersStatusTooltipContentProps {
+  title?: string
+  signers: SignerStatusItemProps[]
+  manageRequestsLabel: string
+  onManageRequestsClick: () => void
+  manageRequestsDataQa?: string
+  givenClass?: string
+}

package/dist/src/components/molecules/SignersStatusTooltipContent/index.d.ts

@@ -0,0 +1,2 @@
+export { SignersStatusTooltipContent } from './SignersStatusTooltipContent';
+export type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types';

package/dist/src/components/molecules/SignersStatusTooltipContent/index.js

@@ -0,0 +1 @@
+export { SignersStatusTooltipContent } from './SignersStatusTooltipContent';

package/dist/src/components/molecules/SignersStatusTooltipContent/index.ts

@@ -0,0 +1,2 @@
+export { SignersStatusTooltipContent } from './SignersStatusTooltipContent'
+export type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types'

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

@@ -1,5 +1,4 @@
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
-import React from 'react'
+import React, { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
 
 import { Input } from '../Input'
 
@@ -8,38 +7,50 @@ afterEach(cleanup)
 const testName = 'name'
 const testValue = 'value'
 
+const defaultInputProps = {
+  name: '',
+  placeholder: '',
+  prefix: '',
+  value: '',
+  type: 'text' as const,
+  disabled: false,
+  className: '',
+  onChange: jest.fn(),
+  onClick: jest.fn(),
+  onBlur: jest.fn(),
+  onKeyDown: jest.fn(),
+  onKeyUp: jest.fn(),
+  country: ''
+}
+
 describe('will return the component', () => {
   test('without props', () => {
-    const { getByRole } = render(<Input />)
+    const { getByRole } = render(<Input {...defaultInputProps} />)
     expect(getByRole('textbox')).toBeInTheDocument()
     expect(getByRole('textbox')).toHaveAttribute('type', 'text')
   })
   test('of type password: with the eyeIcon rendered', async () => {
-    const { container, getByRole } = render(<Input type='password' value={testValue} />)
+    const { container } = render(<Input {...defaultInputProps} type='password' value={testValue} />)
     expect(container.firstChild).toHaveAttribute('type', 'password')
 
-    const img = getByRole('img')
-    expect(img).toHaveClass('input-icon-password')
-    fireEvent.click(img)
+    const toggleButton = container.querySelector('.input-icon-password-button')
+    expect(toggleButton).toBeTruthy()
+    if (toggleButton) fireEvent.click(toggleButton)
 
     await waitFor(() => {
       expect(container.firstChild).toHaveAttribute('type', 'text')
     })
   })
-  test('of type password: with the eyeIcon rendered but is not enabled without value', async () => {
-    const { container, getByRole } = render(<Input type='password' />)
-    expect(container.firstChild).toHaveAttribute('type', 'password')
-
-    const img = getByRole('img')
-    expect(img).toHaveClass('input-icon-password')
-    fireEvent.click(img)
+  test('of type password: with the eyeIcon rendered but without value shows password type initially', () => {
+    const { container } = render(<Input {...defaultInputProps} type='password' />)
+    const input = container.querySelector('input')
+    expect(input).toHaveAttribute('type', 'password')
 
-    await waitFor(() => {
-      expect(container.firstChild).toHaveAttribute('type', 'password')
-    })
+    const toggleButton = container.querySelector('.input-icon-password-button')
+    expect(toggleButton).toBeTruthy()
   })
   test('of type password: with the eyeIcon rendered', () => {
-    const { container } = render(<Input name={testName} />)
+    const { container } = render(<Input {...defaultInputProps} name={testName} />)
     expect(container.firstChild).toHaveAttribute('data-qa', testName)
   })
 })

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

@@ -11,43 +11,50 @@ const testErrorMessage = 'Error message'
 const testLabel = 'Label'
 const testNotes = 'Notes'
 
+const defaultTextInputProps = {
+  onChange: (): void => {},
+  country: ''
+}
+
 describe('will return the component', () => {
   test('without props', () => {
-    const { getByRole, container } = render(<TextInput />)
+    const { getByRole, container } = render(<TextInput {...defaultTextInputProps} />)
     expect(container.firstChild).toHaveClass('e-text')
     expect(getByRole('textbox')).toHaveAttribute('type', 'text')
   })
 
   test('NumberFormat input if the format prop is passed', () => {
-    const { getByRole } = render(<TextInput format={testFormat} />)
+    const { getByRole } = render(<TextInput {...defaultTextInputProps} format={testFormat} />)
     expect(getByRole('textbox')).toHaveClass('e-text-input')
     expect(getByRole('textbox')).toHaveAttribute('type', 'text')
     expect(getByRole('textbox')).toHaveAttribute('inputmode', 'numeric')
   })
 
   test('with a tooltip', () => {
-    const { getByText } = render(<TextInput tooltip={testTooltip} />)
+    const { getByText } = render(<TextInput {...defaultTextInputProps} tooltip={testTooltip} />)
     expect(getByText(testTooltip)).toHaveClass('tooltip-form')
   })
 
   test('with a error message', () => {
-    const { getByText } = render(<TextInput errorMessage={testErrorMessage} validate={false} />)
+    const { getByText } = render(
+      <TextInput {...defaultTextInputProps} errorMessage={testErrorMessage} validate={false} />
+    )
     expect(getByText(testErrorMessage)).toHaveClass('e-text__error-label')
   })
 
   test('with a label', () => {
-    const { getByText } = render(<TextInput label={testLabel} />)
+    const { getByText } = render(<TextInput {...defaultTextInputProps} label={testLabel} />)
     expect(getByText(testLabel)).toHaveClass('form-group__label')
   })
 
   test('with notes', () => {
-    const { getByText } = render(<TextInput notes={testNotes} />)
+    const { getByText } = render(<TextInput {...defaultTextInputProps} notes={testNotes} />)
     expect(getByText(testNotes)).toHaveClass('e-text__inner__notes')
   })
 
   test('should have children', () => {
     const { getByText } = render(
-      <TextInput>
+      <TextInput {...defaultTextInputProps}>
         <span>test children</span>
       </TextInput>
     )
@@ -55,10 +62,10 @@ describe('will return the component', () => {
   })
 
   test('should have id in input and for in label', () => {
-    const { getByText, getByLabelText } = render(<TextInput name='cvv' label='CVV' />)
+    const { getByText, getByLabelText } = render(<TextInput {...defaultTextInputProps} name='cvv' label='CVV' />)
 
     const label = getByText('CVV')
-    const input = getByLabelText('CVV')
+    const input = getByLabelText('CVV') as HTMLInputElement
 
     expect(label).toBeDefined()
     expect(label).toHaveAttribute('for', 'cvv')

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

@@ -9,11 +9,11 @@ const testErrorMessage = 'Error message'
 
 describe('will return null', () => {
   test('if no prop is passed', () => {
-    const { container } = render(<TextInputMessage />)
+    const { container } = render(<TextInputMessage errorMessage='' validate={false} />)
     expect(container.firstChild).toBe(null)
   })
   test('if errorMessage is passed and validate is true', () => {
-    const { container } = render(<TextInputMessage errorMessage={testErrorMessage} />)
+    const { container } = render(<TextInputMessage errorMessage={testErrorMessage} validate={true} />)
     expect(container.firstChild).toBe(null)
   })
 })

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

@@ -9,7 +9,7 @@ const testTooltip = 'Tooltip'
 
 describe('will return null', () => {
   test('if no prop is passed', () => {
-    const { container } = render(<TextInputTooltip />)
+    const { container } = render(<TextInputTooltip tooltip='' />)
     expect(container.firstChild).toBe(null)
   })
 })

package/dist/src/components/molecules/index.d.ts

@@ -43,6 +43,7 @@ export * from './RatafiaResultCardList';
 export * from './RatafiaResultTabList';
 export * from './SocialLinks';
 export * from './SubscriptionCard';
+export * from './SignersStatusTooltipContent';
 export * from './Snackbar';
 export * from './SearchBar';
 export * from './StepGetForm';

package/dist/src/components/molecules/index.js

@@ -43,6 +43,7 @@ export * from './RatafiaResultCardList';
 export * from './RatafiaResultTabList';
 export * from './SocialLinks';
 export * from './SubscriptionCard';
+export * from './SignersStatusTooltipContent';
 export * from './Snackbar';
 export * from './SearchBar';
 export * from './StepGetForm';

package/dist/src/components/molecules/index.ts

@@ -43,6 +43,7 @@ export * from './RatafiaResultCardList'
 export * from './RatafiaResultTabList'
 export * from './SocialLinks'
 export * from './SubscriptionCard'
+export * from './SignersStatusTooltipContent'
 export * from './Snackbar'
 export * from './SearchBar'
 export * from './StepGetForm'

package/dist/src/globalStyles/variables.scss

@@ -1,10 +1,6 @@
 @use 'sass:math';
 
-// =============================================================================
-// Figma tokens reference: figma-tokens/
-// =============================================================================
-
-// Breakpoints (relate to figma-tokens/grids/Mode 1.tokens.json: grid-xl, grid-l, grid-m, grid-s)
+// Breakpoints
 $xl: 1600px;
 $lg: 1200px;
 $md: 960px;
@@ -12,63 +8,48 @@ $sm: 720px;
 $xs: 575px;
 $xxs: 328px;
 
-// Colors — figma-tokens/color (Legalfinity.tokens.json | Lawdistrict.tokens.json)
-// primary.* ↔ primary/50 … primary/900 | secondary.* ↔ secondary/50 … secondary/700
-// neutral.* ↔ neutral/25, 50, 200, 400, 600, 800, 900, white | error.* ↔ error/20, 200, 500
-// others.* ↔ others/black, others/disabled
+// Colors
 $colors: (
   primary: (
     main-light-6: var(--primary-main-light-6),
-    // ~ primary/50–100
     main-light-5: var(--primary-main-light-5),
     main-light-4: var(--primary-main-light-4),
     main-light-3: var(--primary-main-light-3),
     main-light-2: var(--primary-main-light-2),
     main-light-1: var(--primary-main-light-1),
     main: var(--primary-main),
-    // ~ primary/500
     main-dark-1: var(--primary-main-dark-1),
     main-dark-1-rgb: var(--primary-main-dark-1-rgb),
-    main-dark-2: var(--primary-main-dark-2) // ~ primary/800–900
+    main-dark-2: var(--primary-main-dark-2)
   ),
   secondary: (
     main-light-5: var(--secondary-main-light-5),
-    // ~ secondary/50–100
     main-light-4: var(--secondary-main-light-4),
     main-light-3: var(--secondary-main-light-3),
     main-light-2: var(--secondary-main-light-2),
     main-light-1: var(--secondary-main-light-1),
     main: var(--secondary-main),
-    // ~ secondary/400–500
     main-dark-1: var(--secondary-main-dark-1),
-    main-dark-2: var(--secondary-main-dark-2) // ~ secondary/600–700
+    main-dark-2: var(--secondary-main-dark-2)
   ),
   neutral: (
     main: var(--neutral-main),
-    // ~ neutral/600–800
     neutral-1: var(--neutral-neutral-1),
-    // ~ neutral/25
     neutral-2: var(--neutral-neutral-2),
-    // ~ neutral/50–200
     neutral-3: var(--neutral-neutral-3),
     neutral-4: var(--neutral-neutral-4),
-    // ~ neutral/400
     neutral-5: var(--neutral-neutral-5),
-    neutral-6: var(--neutral-neutral-6) // ~ neutral/800–900
+    neutral-6: var(--neutral-neutral-6)
   ),
   error: (
     main: var(--error-main),
-    // ~ error/500
     error-2: var(--error-error-2),
-    // ~ error/200
     error-3: var(--error-error-3)
   ),
   others: (
     white: var(--others-white),
-    // ~ neutral/white
     disabled: var(--others-disabled),
-    // others/disabled
-    black: var(--others-black) // others/black
+    black: var(--others-black)
   )
 );
 
@@ -77,19 +58,19 @@ $colors: (
   @return $color;
 }
 
-// Box shadow — figma-tokens/box-shadow/value.tokens.json (small | medium)
+// Box shadow
 $box-shadow-small: var(--box-shadow-small);
 $box-shadow-medium: var(--box-shadow-medium);
 $box-shadow-menu: var(--box-shadow-menu);
 $box-shadow-tippy-box: var(--box-shadow-tippy-box);
 $box-shadow-container: var(--box-shadow-container);
 
-// Fonts — figma-tokens/font (font-family/primary, font-family/secondary; Lawdistrict: Inter + Lora)
-$font-sans: 'Inter', sans-serif; // font-family/primary (Lawdistrict)
-$font-serif: 'Lora', serif; // font-family/secondary (Lawdistrict)
+// Fonts
+$font-sans: 'Inter', sans-serif;
+$font-serif: 'Lora', serif;
 
-// Layout (max-width aligns with breakpoints; spacing scale in figma-tokens/border-and-spacing/Mode 1.tokens.json)
+// Layout
 $max-width: $lg;
 
-// menu
+//menu
 $menu-height-mobile: 3.25rem;

package/dist/src/globalStyles/variablesCss.scss

@@ -1,30 +1,20 @@
-// =============================================================================
-// Figma tokens reference: figma-tokens/
-// =============================================================================
-
 html {
-  // figma-tokens/font: font-family/primary, font-family/secondary (Lawdistrict: Inter, Lora)
   --font-sans: 'Inter', sans-serif;
   --font-serif: 'Lora', serif;
 
-  // figma-tokens/border-and-spacing/Mode 1.tokens.json: border-radius/sm (4px), border-radius/md (8px), border-radius/l (16px)
   --s-border-radius: 0.25rem;
   --m-border-radius: 0.5rem;
   --l-border-radius: 1rem;
 
-  // figma-tokens/box-shadow/value.tokens.json:
-  // small, medium (color uses primary dark; menu/tippy/container are variants)
   --box-shadow-small: 0 0.125rem 0.375rem 0 rgba(var(--primary-main-dark-1-rgb), 0.25);
   --box-shadow-medium: 0 0.25rem 0.5rem 0 rgba(var(--primary-main-dark-1-rgb), 0.2);
   --box-shadow-menu: 0 0.25rem 0.5rem -0.5rem rgba(var(--primary-main-dark-1-rgb), 0.2);
   --box-shadow-tippy-box: 0 0.25rem 0.5rem 0.25rem rgba(var(--primary-main-dark-1-rgb), 0.2);
   --box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
 
-  // figma-tokens/border-and-spacing/Mode 1.tokens.json: spacing scale (e.g. spacing/sm 16px → 1rem)
   --global-gap: 1rem;
 }
 
-// Theme: Legalfinity — figma-tokens/font/Legalfinity.tokens.json (font-family/primary, secondary → Poppins)
 html[data-theme='primaryblue'] {
   --font-sans: 'Poppins', sans-serif;
   --font-serif: 'Poppins', serif;