@npm_leadtech/legal-lib-components 7.89.0 → 7.89.4

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

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+export const SignerStatusItemStyled = styled.li `
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-family: var(--font-sans);
+  list-style: none;
+  gap: 0.25rem;
+
+  .signer-status-item__icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+  }
+
+  &.signer-status-item--signed {
+    background-color: var(--primary-main-light-4);
+
+    svg > path {
+      fill: var(--primary-main-light-1);
+    }
+  }
+
+  &.signer-status-item--in_progress {
+    background-color: var(--neutral-neutral-6);
+
+    svg > path {
+      fill: var(--neutral-neutral-2);
+    }
+  }
+
+  &.signer-status-item--declined {
+    background-color: var(--error-error-3);
+
+    svg > path {
+      fill: var(--error-main);
+    }
+  }
+
+  &.signer-status-item--awaiting {
+    background-color: var(--secondary-main-light-4);
+
+    svg > path {
+      fill: var(--secondary-main-dark-2);
+    }
+  }
+
+  &.signer-status-item--no_response {
+    background-color: var(--neutral-neutral-4);
+
+    svg > path {
+      fill: var(--neutral-neutral-1);
+    }
+  }
+`;

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

@@ -0,0 +1,61 @@
+import styled from 'styled-components'
+
+export const SignerStatusItemStyled = styled.li`
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-family: var(--font-sans);
+  list-style: none;
+  gap: 0.25rem;
+
+  .signer-status-item__icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+  }
+
+  &.signer-status-item--signed {
+    background-color: var(--primary-main-light-4);
+
+    svg > path {
+      fill: var(--primary-main-light-1);
+    }
+  }
+
+  &.signer-status-item--in_progress {
+    background-color: var(--neutral-neutral-6);
+
+    svg > path {
+      fill: var(--neutral-neutral-2);
+    }
+  }
+
+  &.signer-status-item--declined {
+    background-color: var(--error-error-3);
+
+    svg > path {
+      fill: var(--error-main);
+    }
+  }
+
+  &.signer-status-item--awaiting {
+    background-color: var(--secondary-main-light-4);
+
+    svg > path {
+      fill: var(--secondary-main-dark-2);
+    }
+  }
+
+  &.signer-status-item--no_response {
+    background-color: var(--neutral-neutral-4);
+
+    svg > path {
+      fill: var(--neutral-neutral-1);
+    }
+  }
+`

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

@@ -0,0 +1,28 @@
+import React, { type FC } from 'react'
+
+import { type SignatureStatus, type SignerStatusItemProps } from './SignerStatusItemProps.types'
+import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon'
+import { Done24px } from '../../../../images/componentsSvg/Done24px'
+import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
+import { Time24px } from '../../../../images/componentsSvg/Time24px'
+
+import { SignerStatusItemStyled } from './SignerStatusItem.styled'
+
+const iconByStatus: Record<SignatureStatus, React.ReactNode> = {
+  signed: <Done24px />,
+  in_progress: <Time24px />,
+  declined: <CloseIcon />,
+  awaiting: <Time24px />,
+  no_response: <NewRelease24p />
+}
+
+export const SignerStatusItem: FC<SignerStatusItemProps> = ({ status, children, givenClass = '' }) => {
+  return (
+    <SignerStatusItemStyled className={`signer-status-item signer-status-item--${status} ${givenClass}`}>
+      <span className='signer-status-item__icon' aria-hidden>
+        {iconByStatus[status]}
+      </span>
+      {children}
+    </SignerStatusItemStyled>
+  )
+}

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.d.ts

@@ -0,0 +1,6 @@
+export type SignatureStatus = 'signed' | 'in_progress' | 'declined' | 'awaiting' | 'no_response';
+export interface SignerStatusItemProps {
+    status: SignatureStatus;
+    children: React.ReactNode;
+    givenClass?: string;
+}

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.js

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

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.ts

@@ -0,0 +1,7 @@
+export type SignatureStatus = 'signed' | 'in_progress' | 'declined' | 'awaiting' | 'no_response'
+
+export interface SignerStatusItemProps {
+  status: SignatureStatus
+  children: React.ReactNode
+  givenClass?: string
+}

package/dist/src/components/atoms/SignerStatusItem/index.d.ts

@@ -0,0 +1,2 @@
+export { SignerStatusItem } from './SignerStatusItem';
+export type { SignerStatusItemProps, SignatureStatus } from './SignerStatusItemProps.types';

package/dist/src/components/atoms/SignerStatusItem/index.js

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

package/dist/src/components/atoms/SignerStatusItem/index.ts

@@ -0,0 +1,2 @@
+export { SignerStatusItem } from './SignerStatusItem'
+export type { SignerStatusItemProps, SignatureStatus } from './SignerStatusItemProps.types'

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

@@ -1,8 +1,6 @@
 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,8 +3,6 @@ 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/SignersStatusTooltipContent/SignersStatusTooltipContent.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types';
+export declare const SignersStatusTooltipContent: FC<SignersStatusTooltipContentProps>;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms/Button';
+import { SignerStatusItem } from '../../atoms/SignerStatusItem';
+import { SignersStatusTooltipContentStyled } from './SignersStatusTooltipContent.styled';
+export const SignersStatusTooltipContent = ({ title = 'Signers Status', signers, manageRequestsLabel, onManageRequestsClick, manageRequestsDataQa = 'manage_requests_button', givenClass = '' }) => {
+    return (_jsxs(SignersStatusTooltipContentStyled, { className: `signers-status-tooltip-content ${givenClass}`.trim(), children: [_jsx("h3", { children: title }), _jsx("ul", { className: 'signers-status-tooltip-content__signers', children: signers.map((signer, index) => (_jsx(SignerStatusItem, { status: signer.status, children: signer.children }, `${signer.status}-${index}`))) }), _jsx("div", { className: 'signers-status-tooltip-content__button', children: _jsx(Button, { noLink: true, color: 'tertiary', givenClass: 'underline-button', label: manageRequestsLabel, dataQa: manageRequestsDataQa, onClick: onManageRequestsClick }) })] }));
+};

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

@@ -0,0 +1 @@
+export declare const SignersStatusTooltipContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const SignersStatusTooltipContentStyled = styled.div `
+  width: max-content;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-family: var(--font-sans);
+
+  .signers-status-tooltip-content__signers {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    margin: 0;
+    list-style: none;
+  }
+
+  .signers-status-tooltip-content__button {
+    margin-top: 0;
+  }
+`;

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const SignersStatusTooltipContentStyled = styled.div`
+  width: max-content;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-family: var(--font-sans);
+
+  .signers-status-tooltip-content__signers {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    margin: 0;
+    list-style: none;
+  }
+
+  .signers-status-tooltip-content__button {
+    margin-top: 0;
+  }
+`

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'