@npm_leadtech/legal-lib-components 7.89.9 → 7.89.21

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.tsx

@@ -1,16 +1,44 @@
 import React, { type FC } from 'react'
 
 import { type DocumentStatusProps } from './DocumentStatusProps.types'
-import { Sign24px } from '../../../../images/componentsSvg/Sign24px'
-
 import { DocumentStatusStyled } from './DocumentStatus.styled'
+import { Done24px } from '../../../../images/componentsSvg/Done24px'
+import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
+import { Sign24px } from '../../../../images/componentsSvg/Sign24px'
+import { Time24px } from '../../../../images/componentsSvg/Time24px'
 
-const DocumentStatus: FC<DocumentStatusProps> = ({ label, type = 'default', givenClass = '' }) => {
-  if (!label) return null
+const DocumentStatus: FC<DocumentStatusProps> = ({
+  type,
+  statusCompletedText,
+  statusNewText,
+  statusInProgressText,
+  statusSignedText
+}) => {
+  if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
+    return (
+      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-completed'}>
+        <Done24px className='icon' /> <span className={'sans-serif --small'}>{statusCompletedText}</span>
+      </DocumentStatusStyled>
+    )
+  }
+  if (type === 'new') {
+    return (
+      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-new'}>
+        <NewRelease24p className='icon' /> <span className={'sans-serif --small'}>{statusNewText}</span>
+      </DocumentStatusStyled>
+    )
+  }
+  if (type === 'signed') {
+    return (
+      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-signed'}>
+        <Sign24px className='icon' /> <span className={'sans-serif --small'}>{statusSignedText}</span>
+      </DocumentStatusStyled>
+    )
+  }
   return (
-    <DocumentStatusStyled data-testid='document-status' className={`document-status ${type} ${givenClass}`}>
-      <Sign24px className='document-status__icon' />
-      <span className={'sans-serif --small'}>{label}</span>
+    <DocumentStatusStyled data-testid='document-status' className={'document-status --in-progress'}>
+      <Time24px className='icon' />
+      <span className={'sans-serif --small'}>{statusInProgressText}</span>
     </DocumentStatusStyled>
   )
 }

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.d.ts

@@ -1,6 +1,8 @@
 export interface DocumentStatusProps {
-    label: string;
-    type?: DocumentStatusType;
-    givenClass?: string;
+    type: string;
+    statusCompletedText: string;
+    statusNewText: string;
+    statusInProgressText: string;
+    statusAIReviewedText: string;
+    statusSignedText: string;
 }
-export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | 'signed';

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.ts

@@ -1,7 +1,8 @@
 export interface DocumentStatusProps {
-  label: string
-  type?: DocumentStatusType
-  givenClass?: string
+  type: string
+  statusCompletedText: string
+  statusNewText: string
+  statusInProgressText: string
+  statusAIReviewedText: string
+  statusSignedText: string
 }
-
-export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | 'signed'

package/dist/src/components/atoms/PreFooter/PreFooter.js

@@ -1,8 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../Button';
 import { PreFooterStyled } from './PreFooter.styled';
-export const PreFooter = ({ siteName, content, ctaLabel, ctaOnClick, ctaDataQa, ctaLink }) => {
-    return (_jsx(PreFooterStyled, { children: _jsx("div", { className: 'wrapper', children: _jsxs("div", { className: 'prefooter', children: [_jsxs("div", { className: 'serif --hero prefooter__title', children: ["Try ", siteName, " Now"] }), _jsx("div", { className: 'prefooter__columns', children: content.map((text, index) => {
+export const PreFooter = ({ siteTitle, content, ctaLabel, ctaOnClick, ctaDataQa, ctaLink }) => {
+    return (_jsx(PreFooterStyled, { children: _jsx("div", { className: 'wrapper', children: _jsxs("div", { className: 'prefooter', children: [_jsx("div", { className: 'serif --hero prefooter__title', children: siteTitle }), _jsx("div", { className: 'prefooter__columns', children: content.map((text, index) => {
                             return (_jsx("p", { className: 'prefooter__columns__text', children: text }, index));
                         }) }), _jsx(Button, { label: ctaLabel, onClick: ctaOnClick, link: ctaLink, dataQa: ctaDataQa, isExternal: true, hasNoFollow: true })] }) }) }));
 };

package/dist/src/components/atoms/PreFooter/PreFooter.tsx

@@ -5,7 +5,7 @@ import { PreFooterProps } from './PreFooterProps'
 import { PreFooterStyled } from './PreFooter.styled'
 
 export const PreFooter: React.FC<PreFooterProps> = ({
-  siteName,
+  siteTitle,
   content,
   ctaLabel,
   ctaOnClick,
@@ -16,7 +16,7 @@ export const PreFooter: React.FC<PreFooterProps> = ({
     <PreFooterStyled>
       <div className='wrapper'>
         <div className='prefooter'>
-          <div className='serif --hero prefooter__title'>Try {siteName} Now</div>
+          <div className='serif --hero prefooter__title'>{siteTitle}</div>
           <div className='prefooter__columns'>
             {content.map((text, index) => {
               return (

package/dist/src/components/atoms/PreFooter/PreFooterProps.d.ts

@@ -1,5 +1,5 @@
 export interface PreFooterProps {
-    siteName: string;
+    siteTitle: string;
     content: string[];
     ctaLabel: string;
     ctaOnClick: () => void;

package/dist/src/components/atoms/PreFooter/PreFooterProps.ts

@@ -1,5 +1,5 @@
 export interface PreFooterProps {
-  siteName: string
+  siteTitle: string
   content: string[]
   ctaLabel: string
   ctaOnClick: () => void

package/dist/src/components/atoms/Tooltip/Tooltip.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Tippy from '@tippyjs/react';
 import classNames from 'classnames';
+// import 'tippy.js/dist/tippy.css'
+// import './Tooltip.scss'
 const Tooltip = ({ children, position = 'top', inverted, trigger = 'hover', ...rest }) => {
     if (children === undefined)
         return null;

package/dist/src/components/atoms/Tooltip/Tooltip.tsx

@@ -3,6 +3,8 @@ import Tippy from '@tippyjs/react'
 import classNames from 'classnames'
 
 import { type TooltipProps } from './TooltipProps.types'
+// import 'tippy.js/dist/tippy.css'
+// import './Tooltip.scss'
 
 const Tooltip: FC<TooltipProps> = ({ children, position = 'top', inverted, trigger = 'hover', ...rest }) => {
   if (children === undefined) return null

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

@@ -1,4 +1,5 @@
-import React, { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import React from 'react'
 
 import { Input } from '../Input'
 
@@ -7,50 +8,38 @@ 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 {...defaultInputProps} />)
+    const { getByRole } = render(<Input />)
     expect(getByRole('textbox')).toBeInTheDocument()
     expect(getByRole('textbox')).toHaveAttribute('type', 'text')
   })
   test('of type password: with the eyeIcon rendered', async () => {
-    const { container } = render(<Input {...defaultInputProps} type='password' value={testValue} />)
+    const { container, getByRole } = render(<Input type='password' value={testValue} />)
     expect(container.firstChild).toHaveAttribute('type', 'password')
 
-    const toggleButton = container.querySelector('.input-icon-password-button')
-    expect(toggleButton).toBeTruthy()
-    if (toggleButton) fireEvent.click(toggleButton)
+    const img = getByRole('img')
+    expect(img).toHaveClass('input-icon-password')
+    fireEvent.click(img)
 
     await waitFor(() => {
       expect(container.firstChild).toHaveAttribute('type', 'text')
     })
   })
-  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')
+  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)
 
-    const toggleButton = container.querySelector('.input-icon-password-button')
-    expect(toggleButton).toBeTruthy()
+    await waitFor(() => {
+      expect(container.firstChild).toHaveAttribute('type', 'password')
+    })
   })
   test('of type password: with the eyeIcon rendered', () => {
-    const { container } = render(<Input {...defaultInputProps} name={testName} />)
+    const { container } = render(<Input name={testName} />)
     expect(container.firstChild).toHaveAttribute('data-qa', testName)
   })
 })

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

@@ -11,50 +11,43 @@ 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 {...defaultTextInputProps} />)
+    const { getByRole, container } = render(<TextInput />)
     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 {...defaultTextInputProps} format={testFormat} />)
+    const { getByRole } = render(<TextInput 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 {...defaultTextInputProps} tooltip={testTooltip} />)
+    const { getByText } = render(<TextInput tooltip={testTooltip} />)
     expect(getByText(testTooltip)).toHaveClass('tooltip-form')
   })
 
   test('with a error message', () => {
-    const { getByText } = render(
-      <TextInput {...defaultTextInputProps} errorMessage={testErrorMessage} validate={false} />
-    )
+    const { getByText } = render(<TextInput errorMessage={testErrorMessage} validate={false} />)
     expect(getByText(testErrorMessage)).toHaveClass('e-text__error-label')
   })
 
   test('with a label', () => {
-    const { getByText } = render(<TextInput {...defaultTextInputProps} label={testLabel} />)
+    const { getByText } = render(<TextInput label={testLabel} />)
     expect(getByText(testLabel)).toHaveClass('form-group__label')
   })
 
   test('with notes', () => {
-    const { getByText } = render(<TextInput {...defaultTextInputProps} notes={testNotes} />)
+    const { getByText } = render(<TextInput notes={testNotes} />)
     expect(getByText(testNotes)).toHaveClass('e-text__inner__notes')
   })
 
   test('should have children', () => {
     const { getByText } = render(
-      <TextInput {...defaultTextInputProps}>
+      <TextInput>
         <span>test children</span>
       </TextInput>
     )
@@ -62,10 +55,10 @@ describe('will return the component', () => {
   })
 
   test('should have id in input and for in label', () => {
-    const { getByText, getByLabelText } = render(<TextInput {...defaultTextInputProps} name='cvv' label='CVV' />)
+    const { getByText, getByLabelText } = render(<TextInput name='cvv' label='CVV' />)
 
     const label = getByText('CVV')
-    const input = getByLabelText('CVV') as HTMLInputElement
+    const input = getByLabelText('CVV')
 
     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 errorMessage='' validate={false} />)
+    const { container } = render(<TextInputMessage />)
     expect(container.firstChild).toBe(null)
   })
   test('if errorMessage is passed and validate is true', () => {
-    const { container } = render(<TextInputMessage errorMessage={testErrorMessage} validate={true} />)
+    const { container } = render(<TextInputMessage errorMessage={testErrorMessage} />)
     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 tooltip='' />)
+    const { container } = render(<TextInputTooltip />)
     expect(container.firstChild).toBe(null)
   })
 })

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

@@ -43,7 +43,6 @@ 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,7 +43,6 @@ 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,7 +43,6 @@ 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,6 +1,10 @@
 @use 'sass:math';
 
-// Breakpoints
+// =============================================================================
+// Figma tokens reference: figma-tokens/
+// =============================================================================
+
+// Breakpoints (relate to figma-tokens/grids/Mode 1.tokens.json: grid-xl, grid-l, grid-m, grid-s)
 $xl: 1600px;
 $lg: 1200px;
 $md: 960px;
@@ -8,48 +12,63 @@ $sm: 720px;
 $xs: 575px;
 $xxs: 328px;
 
-// Colors
+// 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: (
   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)
+    main-dark-2: var(--primary-main-dark-2) // ~ primary/800–900
   ),
   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)
+    main-dark-2: var(--secondary-main-dark-2) // ~ secondary/600–700
   ),
   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-6: var(--neutral-neutral-6) // ~ neutral/800–900
   ),
   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),
-    black: var(--others-black)
+    // others/disabled
+    black: var(--others-black) // others/black
   )
 );
 
@@ -58,19 +77,19 @@ $colors: (
   @return $color;
 }
 
-// Box shadow
+// Box shadow — figma-tokens/box-shadow/value.tokens.json (small | medium)
 $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
-$font-sans: 'Inter', sans-serif;
-$font-serif: 'Lora', serif;
+// 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)
 
-// Layout
+// Layout (max-width aligns with breakpoints; spacing scale in figma-tokens/border-and-spacing/Mode 1.tokens.json)
 $max-width: $lg;
 
-//menu
+// menu
 $menu-height-mobile: 3.25rem;

package/dist/src/globalStyles/variablesCss.scss

@@ -1,20 +1,30 @@
+// =============================================================================
+// 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;