@npm_leadtech/legal-lib-components 7.89.10 → 7.90.0

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

@@ -9,13 +9,8 @@ export const DocumentStatusStyled = styled.div `
   align-items: center;
   align-self: center;
   padding: 0.125rem 0.5rem 0.125rem 0.25rem;
-  width: fit-content;
-  cursor: pointer;
-
-  background-color: var(--neutral-neutral-4);
-  border-color: var(--neutral-neutral-2);
-  color: var(--neutral-neutral-1);
-
+  margin-right: 0.5rem;
+  width: 7.36rem;
   @include laptop {
     align-self: flex-start;
   }
@@ -25,56 +20,60 @@ export const DocumentStatusStyled = styled.div `
   }
 
   &.document-status {
-    & > .document-status__icon > path {
-      fill: var(--neutral-neutral-1);
-    }
-
     span {
       font-weight: bold;
     }
 
-    &.in-progress {
-      background-color: var(--neutral-neutral-6);
-      border-color: var(--neutral-neutral-4);
-      color: var(--neutral-neutral-2);
-      & > .document-status__icon > path {
-        fill: var(--neutral-neutral-2);
-      }
+    .icon {
+      margin-right: 0.25rem;
     }
 
-    &.awaiting {
-      background-color: var(--secondary-main-light-4);
-      border-color: var(--secondary-main-light-3);
-      color: var(--secondary-main-dark-2);
-      & > .document-status__icon > path {
-        fill: var(--secondary-main-dark-2);
+    &.--is-completed {
+      background-color: var(--primary-main-light-5);
+      border-color: var(--primary-main-light-3);
+      color: var(--primary-main);
+
+      svg {
+        path {
+          fill: var(--primary-main);
+        }
       }
     }
 
-    &.no-response {
-      background-color: var(--neutral-neutral-4);
-      border-color: var(--neutral-neutral-2);
+    &.--in-progress {
+      background-color: var(--neutral-neutral-5);
+      border-color: var(--neutral-neutral-3);
       color: var(--neutral-neutral-1);
-      & > .document-status__icon > path {
-        fill: var(--neutral-neutral-1);
+
+      svg {
+        g > g {
+          fill: var(--neutral-neutral-1);
+        }
       }
     }
 
-    &.declined {
-      background-color: var(--error-error-3);
-      border-color: var(--error-error-2);
-      color: var(--error-main);
-      & > .document-status__icon > path {
-        fill: var(--error-main);
+    &.--is-new {
+      background-color: var(--primary-main-light-1);
+      border-color: var(--primary-main);
+      color: var(--secondary-main-light-4);
+
+      .icon {
+        margin-right: 1.4rem;
       }
     }
 
-    &.signed {
-      background-color: var(--primary-main-light-4);
-      border-color: var(--primary-main-light-2);
-      color: var(--primary-main-light-1);
-      & > .document-status__icon > path {
-        fill: var(--primary-main-light-1);
+    &.--is-signed {
+      width: fit-content;
+      background-color: var(--primary-main-dark-2);
+      border-color: var(--primary-main-dark-2);
+      color: var(--others-white);
+
+      svg {
+        margin-right: 0.25rem;
+
+        path {
+          fill: var(--others-white);
+        }
       }
     }
   }

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

@@ -10,13 +10,8 @@ export const DocumentStatusStyled = styled.div`
   align-items: center;
   align-self: center;
   padding: 0.125rem 0.5rem 0.125rem 0.25rem;
-  width: fit-content;
-  cursor: pointer;
-
-  background-color: var(--neutral-neutral-4);
-  border-color: var(--neutral-neutral-2);
-  color: var(--neutral-neutral-1);
-
+  margin-right: 0.5rem;
+  width: 7.36rem;
   @include laptop {
     align-self: flex-start;
   }
@@ -26,56 +21,60 @@ export const DocumentStatusStyled = styled.div`
   }
 
   &.document-status {
-    & > .document-status__icon > path {
-      fill: var(--neutral-neutral-1);
-    }
-
     span {
       font-weight: bold;
     }
 
-    &.in-progress {
-      background-color: var(--neutral-neutral-6);
-      border-color: var(--neutral-neutral-4);
-      color: var(--neutral-neutral-2);
-      & > .document-status__icon > path {
-        fill: var(--neutral-neutral-2);
-      }
+    .icon {
+      margin-right: 0.25rem;
     }
 
-    &.awaiting {
-      background-color: var(--secondary-main-light-4);
-      border-color: var(--secondary-main-light-3);
-      color: var(--secondary-main-dark-2);
-      & > .document-status__icon > path {
-        fill: var(--secondary-main-dark-2);
+    &.--is-completed {
+      background-color: var(--primary-main-light-5);
+      border-color: var(--primary-main-light-3);
+      color: var(--primary-main);
+
+      svg {
+        path {
+          fill: var(--primary-main);
+        }
       }
     }
 
-    &.no-response {
-      background-color: var(--neutral-neutral-4);
-      border-color: var(--neutral-neutral-2);
+    &.--in-progress {
+      background-color: var(--neutral-neutral-5);
+      border-color: var(--neutral-neutral-3);
       color: var(--neutral-neutral-1);
-      & > .document-status__icon > path {
-        fill: var(--neutral-neutral-1);
+
+      svg {
+        g > g {
+          fill: var(--neutral-neutral-1);
+        }
       }
     }
 
-    &.declined {
-      background-color: var(--error-error-3);
-      border-color: var(--error-error-2);
-      color: var(--error-main);
-      & > .document-status__icon > path {
-        fill: var(--error-main);
+    &.--is-new {
+      background-color: var(--primary-main-light-1);
+      border-color: var(--primary-main);
+      color: var(--secondary-main-light-4);
+
+      .icon {
+        margin-right: 1.4rem;
       }
     }
 
-    &.signed {
-      background-color: var(--primary-main-light-4);
-      border-color: var(--primary-main-light-2);
-      color: var(--primary-main-light-1);
-      & > .document-status__icon > path {
-        fill: var(--primary-main-light-1);
+    &.--is-signed {
+      width: fit-content;
+      background-color: var(--primary-main-dark-2);
+      border-color: var(--primary-main-dark-2);
+      color: var(--others-white);
+
+      svg {
+        margin-right: 0.25rem;
+
+        path {
+          fill: var(--others-white);
+        }
       }
     }
   }

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'