@npm_leadtech/legal-lib-components 7.89.3 → 7.89.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/css/styles.css +16 -0
  2. package/dist/images/componentsSvg/CloseIcon.js +1 -1
  3. package/dist/images/componentsSvg/CloseIcon.tsx +1 -1
  4. package/dist/images/componentsSvg/Done24px.d.ts +6 -0
  5. package/dist/images/componentsSvg/Done24px.js +2 -0
  6. package/dist/images/componentsSvg/Done24px.tsx +2 -2
  7. package/dist/images/componentsSvg/NewRelease24p.d.ts +6 -0
  8. package/dist/images/componentsSvg/NewRelease24p.js +2 -0
  9. package/dist/images/componentsSvg/NewRelease24p.tsx +2 -3
  10. package/dist/images/componentsSvg/Time24px.d.ts +6 -0
  11. package/dist/images/componentsSvg/Time24px.js +2 -0
  12. package/dist/images/componentsSvg/Time24px.tsx +2 -3
  13. package/dist/src/components/atoms/Button/Button.js +1 -1
  14. package/dist/src/components/atoms/Button/Button.scss +19 -0
  15. package/dist/src/components/atoms/Button/Button.tsx +1 -1
  16. package/dist/src/components/atoms/Button/ButtonProps.types.d.ts +1 -1
  17. package/dist/src/components/atoms/Button/ButtonProps.types.ts +1 -0
  18. package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.js +1 -0
  19. package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.ts +1 -0
  20. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.d.ts +3 -0
  21. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.js +16 -0
  22. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.styled.d.ts +1 -0
  23. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.styled.js +60 -0
  24. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.styled.ts +61 -0
  25. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.tsx +28 -0
  26. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.d.ts +6 -0
  27. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.js +1 -0
  28. package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.ts +7 -0
  29. package/dist/src/components/atoms/SignerStatusItem/index.d.ts +2 -0
  30. package/dist/src/components/atoms/SignerStatusItem/index.js +1 -0
  31. package/dist/src/components/atoms/SignerStatusItem/index.ts +2 -0
  32. package/dist/src/components/atoms/Tooltip/Tooltip.js +0 -2
  33. package/dist/src/components/atoms/Tooltip/Tooltip.tsx +0 -2
  34. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.d.ts +3 -0
  35. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.js +7 -0
  36. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.styled.d.ts +1 -0
  37. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.styled.js +22 -0
  38. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.styled.ts +23 -0
  39. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.tsx +38 -0
  40. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.d.ts +9 -0
  41. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.js +1 -0
  42. package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.ts +10 -0
  43. package/dist/src/components/molecules/SignersStatusTooltipContent/index.d.ts +2 -0
  44. package/dist/src/components/molecules/SignersStatusTooltipContent/index.js +1 -0
  45. package/dist/src/components/molecules/SignersStatusTooltipContent/index.ts +2 -0
  46. package/dist/src/components/molecules/TextInput/tests/Input.test.tsx +29 -18
  47. package/dist/src/components/molecules/TextInput/tests/TextInput.test.tsx +16 -9
  48. package/dist/src/components/molecules/TextInput/tests/TextInputMessage.test.tsx +2 -2
  49. package/dist/src/components/molecules/TextInput/tests/TextInputTooltip.test.tsx +1 -1
  50. package/dist/src/components/molecules/index.d.ts +1 -0
  51. package/dist/src/components/molecules/index.js +1 -0
  52. package/dist/src/components/molecules/index.ts +1 -0
  53. package/dist/tsconfig.build.tsbuildinfo +1 -1
  54. package/package.json +3 -1
@@ -1018,6 +1018,22 @@ html[data-theme=primarygreen] .e-button.--primary-3 {
1018
1018
  .e-button.--transparent {
1019
1019
  background-color: transparent;
1020
1020
  }
1021
+ .e-button.e-button--link {
1022
+ padding: 0;
1023
+ border: none;
1024
+ background: none;
1025
+ border-radius: 0;
1026
+ color: var(--primary-main);
1027
+ text-decoration: underline;
1028
+ font-weight: inherit;
1029
+ }
1030
+ .e-button.e-button--link:hover {
1031
+ color: var(--primary-main-dark-1);
1032
+ text-decoration: underline;
1033
+ }
1034
+ .e-button.e-button--link label {
1035
+ cursor: pointer;
1036
+ }
1021
1037
  .e-button.--disabled {
1022
1038
  background-color: var(--neutral-neutral-4);
1023
1039
  color: var(--neutral-neutral-1);
@@ -1,2 +1,2 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- export const CloseIcon = ({ className }) => (_jsx("svg", { className: className, width: 20, height: 20, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z', fill: '#B5BABD' }) }));
2
+ export const CloseIcon = ({ className = '' }) => (_jsx("svg", { className: className, width: 20, height: 20, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z', fill: '#B5BABD' }) }));
@@ -4,7 +4,7 @@ interface Close24Props {
4
4
  className?: string
5
5
  }
6
6
 
7
- export const CloseIcon: FC<Close24Props> = ({ className }: Close24Props): React.ReactElement => (
7
+ export const CloseIcon: FC<Close24Props> = ({ className = '' }: Close24Props): React.ReactElement => (
8
8
  <svg className={className} width={20} height={20} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
9
9
  <path
10
10
  d='M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z'
@@ -0,0 +1,6 @@
1
+ import { type FC } from 'react';
2
+ interface Done24pxProps {
3
+ className?: string;
4
+ }
5
+ export declare const Done24px: FC<Done24pxProps>;
6
+ export {};
@@ -0,0 +1,2 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export const Done24px = ({ className = '' }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '17', height: '16', viewBox: '0 0 17 16', fill: 'none', children: _jsx("path", { d: 'M6.36663 10.6L4.0333 8.26667C3.77557 8.00893 3.3577 8.00893 3.09997 8.26667C2.84223 8.5244 2.84223 8.94227 3.09997 9.2L6.18886 12.2889C6.28704 12.3871 6.44623 12.3871 6.54441 12.2889L13.9 4.93333C14.1577 4.6756 14.1577 4.25773 13.9 4C13.6422 3.74227 13.2244 3.74227 12.9666 4L6.36663 10.6Z', fill: '#078080' }) }));
@@ -1,9 +1,9 @@
1
1
  import React, { type FC } from 'react'
2
2
  interface Done24pxProps {
3
- className: string
3
+ className?: string
4
4
  }
5
5
 
6
- export const Done24px: FC<Done24pxProps> = ({ className }: Done24pxProps) => (
6
+ export const Done24px: FC<Done24pxProps> = ({ className = '' }: Done24pxProps) => (
7
7
  <svg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'>
8
8
  <path
9
9
  d='M6.36663 10.6L4.0333 8.26667C3.77557 8.00893 3.3577 8.00893 3.09997 8.26667C2.84223 8.5244 2.84223 8.94227 3.09997 9.2L6.18886 12.2889C6.28704 12.3871 6.44623 12.3871 6.54441 12.2889L13.9 4.93333C14.1577 4.6756 14.1577 4.25773 13.9 4C13.6422 3.74227 13.2244 3.74227 12.9666 4L6.36663 10.6Z'
@@ -0,0 +1,6 @@
1
+ import { type FC } from 'react';
2
+ interface NewRelease24pProps {
3
+ className?: string;
4
+ }
5
+ export declare const NewRelease24p: FC<NewRelease24pProps>;
6
+ export {};
@@ -0,0 +1,2 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export const NewRelease24p = ({ className = '' }) => (_jsxs("svg", { className: className, xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', children: [_jsx("defs", { children: _jsx("path", { id: 'new-release__a', d: 'M15.333 7.997l-1.626-1.854.226-2.453-2.406-.547-1.26-2.12L8 1.997l-2.267-.974-1.26 2.12-2.406.54.226 2.454-1.626 1.86L2.293 9.85l-.226 2.46 2.406.547 1.26 2.12L8 13.997l2.267.973 1.26-2.12 2.406-.547-.226-2.453 1.626-1.853zm-3.006 1.406l.173 1.86-1.827.414-.953 1.606-1.72-.74-1.72.74-.953-1.606-1.827-.414.173-1.866-1.233-1.4 1.233-1.414L3.5 4.73l1.827-.407.953-1.606L8 3.45l1.72-.74.953 1.607 1.827.413-.173 1.86 1.233 1.407-1.233 1.406zm-4.994.594h1.334v1.333H7.333V9.997zm0-5.334h1.334v4H7.333v-4z' }) }), _jsxs("g", { fill: 'none', fillRule: 'evenodd', children: [_jsx("path", { d: 'M0 0H16V16H0z' }), _jsx("mask", { id: 'new-release__b', fill: '#fff', children: _jsx("use", { xlinkHref: '#new-release__a' }) }), _jsx("g", { fill: '#FCF4E5', mask: 'url(#new-release__b)', children: _jsx("path", { d: 'M0 0H16V16H0z' }) })] })] }));
@@ -1,11 +1,10 @@
1
- /* eslint-disable max-len */
2
1
  import React, { type FC } from 'react'
3
2
 
4
3
  interface NewRelease24pProps {
5
- className: string
4
+ className?: string
6
5
  }
7
6
 
8
- export const NewRelease24p: FC<NewRelease24pProps> = ({ className }: NewRelease24pProps) => (
7
+ export const NewRelease24p: FC<NewRelease24pProps> = ({ className = '' }: NewRelease24pProps) => (
9
8
  <svg className={className} xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
10
9
  <defs>
11
10
  <path
@@ -0,0 +1,6 @@
1
+ import { type FC } from 'react';
2
+ interface Time24pxProps {
3
+ className?: string;
4
+ }
5
+ export declare const Time24px: FC<Time24pxProps>;
6
+ export {};
@@ -0,0 +1,2 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export const Time24px = ({ className = '' }) => (_jsxs("svg", { className: className, xmlns: 'http://www.w3.org/2000/svg', xmlnsXlink: 'http://www.w3.org/1999/xlink', width: '16', height: '16', viewBox: '0 0 16 16', children: [_jsx("defs", { children: _jsx("path", { id: 'time', d: 'M7.993 1.333c-3.68 0-6.66 2.987-6.66 6.667 0 3.68 2.98 6.667 6.66 6.667 3.687 0 6.674-2.987 6.674-6.667 0-3.68-2.987-6.667-6.674-6.667zm.007 12c-2.947 0-5.333-2.386-5.333-5.333S5.053 2.667 8 2.667 13.333 5.053 13.333 8 10.947 13.333 8 13.333zm.333-8.666h-1v4l3.5 2.1.5-.82-3-1.78v-3.5z' }) }), _jsxs("g", { fill: 'none', fillRule: 'evenodd', children: [_jsx("path", { d: 'M0 0H16V16H0z' }), _jsx("mask", { id: 'time2', fill: '#fff', children: _jsx("use", { xlinkHref: '#time' }) }), _jsx("g", { fill: '#936C2F', mask: 'url(#time2)', children: _jsx("path", { d: 'M0 0H16V16H0z' }) })] })] }));
@@ -1,11 +1,10 @@
1
- /* eslint-disable max-len */
2
1
  import React, { type FC } from 'react'
3
2
 
4
3
  interface Time24pxProps {
5
- className: string
4
+ className?: string
6
5
  }
7
6
 
8
- export const Time24px: FC<Time24pxProps> = ({ className }: Time24pxProps) => (
7
+ export const Time24px: FC<Time24pxProps> = ({ className = '' }: Time24pxProps) => (
9
8
  <svg
10
9
  className={className}
11
10
  xmlns='http://www.w3.org/2000/svg'
@@ -1,6 +1,5 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import classNames from 'classnames';
3
- // import './Button.scss'
4
3
  const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
5
4
  const sizes = {
6
5
  S: 'button--small',
@@ -21,6 +20,7 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
21
20
  '--secondary-icon --dark': color === 'secondaryIconDark',
22
21
  'button--tertiary-1': color === 'tertiary',
23
22
  'button--tertiary-2': color === 'tertiary2',
23
+ 'e-button--link': color === 'link',
24
24
  '--styleless': color === 'styleless',
25
25
  '--transparent': color === 'transparent',
26
26
  '--disabled': disabled,
@@ -197,6 +197,25 @@ html[data-theme='primarygreen'] {
197
197
  background-color: transparent;
198
198
  }
199
199
 
200
+ &.e-button--link {
201
+ padding: 0;
202
+ border: none;
203
+ background: none;
204
+ border-radius: 0;
205
+ color: var(--primary-main);
206
+ text-decoration: underline;
207
+ font-weight: inherit;
208
+
209
+ &:hover {
210
+ color: var(--primary-main-dark-1);
211
+ text-decoration: underline;
212
+ }
213
+
214
+ label {
215
+ cursor: pointer;
216
+ }
217
+ }
218
+
200
219
  &.--disabled {
201
220
  background-color: var(--neutral-neutral-4);
202
221
  color: var(--neutral-neutral-1);
@@ -3,7 +3,6 @@ import React, { type FC } from 'react'
3
3
  import classNames from 'classnames'
4
4
 
5
5
  import { type ButtonProps } from './ButtonProps.types'
6
- // import './Button.scss'
7
6
 
8
7
  const Button: FC<ButtonProps> = ({
9
8
  label,
@@ -49,6 +48,7 @@ const Button: FC<ButtonProps> = ({
49
48
  '--secondary-icon --dark': color === 'secondaryIconDark',
50
49
  'button--tertiary-1': color === 'tertiary',
51
50
  'button--tertiary-2': color === 'tertiary2',
51
+ 'e-button--link': color === 'link',
52
52
  '--styleless': color === 'styleless',
53
53
  '--transparent': color === 'transparent',
54
54
  '--disabled': disabled,
@@ -1,4 +1,4 @@
1
- export type Colors = 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
1
+ export type Colors = 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent' | 'link';
2
2
  export interface ButtonProps {
3
3
  label: string;
4
4
  dataQa: string;
@@ -16,6 +16,7 @@ export type Colors =
16
16
  | 'tertiary2'
17
17
  | 'styleless'
18
18
  | 'transparent'
19
+ | 'link'
19
20
  export interface ButtonProps {
20
21
  label: string
21
22
  dataQa: string
@@ -10,6 +10,7 @@ export const DocumentStatusStyled = styled.div `
10
10
  align-self: center;
11
11
  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
12
12
  width: fit-content;
13
+ cursor: pointer;
13
14
 
14
15
  background-color: var(--neutral-neutral-4);
15
16
  border-color: var(--neutral-neutral-2);
@@ -11,6 +11,7 @@ export const DocumentStatusStyled = styled.div`
11
11
  align-self: center;
12
12
  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
13
13
  width: fit-content;
14
+ cursor: pointer;
14
15
 
15
16
  background-color: var(--neutral-neutral-4);
16
17
  border-color: var(--neutral-neutral-2);
@@ -0,0 +1,3 @@
1
+ import { type FC } from 'react';
2
+ import { type SignerStatusItemProps } from './SignerStatusItemProps.types';
3
+ export declare const SignerStatusItem: FC<SignerStatusItemProps>;
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon';
3
+ import { Done24px } from '../../../../images/componentsSvg/Done24px';
4
+ import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
5
+ import { Time24px } from '../../../../images/componentsSvg/Time24px';
6
+ import { SignerStatusItemStyled } from './SignerStatusItem.styled';
7
+ const iconByStatus = {
8
+ signed: _jsx(Done24px, {}),
9
+ in_progress: _jsx(Time24px, {}),
10
+ declined: _jsx(CloseIcon, {}),
11
+ awaiting: _jsx(Time24px, {}),
12
+ no_response: _jsx(NewRelease24p, {})
13
+ };
14
+ export const SignerStatusItem = ({ status, children, givenClass = '' }) => {
15
+ return (_jsxs(SignerStatusItemStyled, { className: `signer-status-item signer-status-item--${status} ${givenClass}`, children: [_jsx("span", { className: 'signer-status-item__icon', "aria-hidden": true, children: iconByStatus[status] }), children] }));
16
+ };
@@ -0,0 +1 @@
1
+ export declare const SignerStatusItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
@@ -0,0 +1,60 @@
1
+ import styled from 'styled-components';
2
+ export const SignerStatusItemStyled = styled.li `
3
+ display: flex;
4
+ align-items: center;
5
+ padding: 0.25rem 0.5rem;
6
+ border-radius: 0.25rem;
7
+ font-family: var(--font-sans);
8
+ list-style: none;
9
+ gap: 0.25rem;
10
+
11
+ .signer-status-item__icon {
12
+ flex-shrink: 0;
13
+ width: 16px;
14
+ height: 16px;
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ color: currentColor;
19
+ }
20
+
21
+ &.signer-status-item--signed {
22
+ background-color: var(--primary-main-light-4);
23
+
24
+ svg > path {
25
+ fill: var(--primary-main-light-1);
26
+ }
27
+ }
28
+
29
+ &.signer-status-item--in_progress {
30
+ background-color: var(--neutral-neutral-6);
31
+
32
+ svg > path {
33
+ fill: var(--neutral-neutral-2);
34
+ }
35
+ }
36
+
37
+ &.signer-status-item--declined {
38
+ background-color: var(--error-error-3);
39
+
40
+ svg > path {
41
+ fill: var(--error-main);
42
+ }
43
+ }
44
+
45
+ &.signer-status-item--awaiting {
46
+ background-color: var(--secondary-main-light-4);
47
+
48
+ svg > path {
49
+ fill: var(--secondary-main-dark-2);
50
+ }
51
+ }
52
+
53
+ &.signer-status-item--no_response {
54
+ background-color: var(--neutral-neutral-4);
55
+
56
+ svg > path {
57
+ fill: var(--neutral-neutral-1);
58
+ }
59
+ }
60
+ `;
@@ -0,0 +1,61 @@
1
+ import styled from 'styled-components'
2
+
3
+ export const SignerStatusItemStyled = styled.li`
4
+ display: flex;
5
+ align-items: center;
6
+ padding: 0.25rem 0.5rem;
7
+ border-radius: 0.25rem;
8
+ font-family: var(--font-sans);
9
+ list-style: none;
10
+ gap: 0.25rem;
11
+
12
+ .signer-status-item__icon {
13
+ flex-shrink: 0;
14
+ width: 16px;
15
+ height: 16px;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ color: currentColor;
20
+ }
21
+
22
+ &.signer-status-item--signed {
23
+ background-color: var(--primary-main-light-4);
24
+
25
+ svg > path {
26
+ fill: var(--primary-main-light-1);
27
+ }
28
+ }
29
+
30
+ &.signer-status-item--in_progress {
31
+ background-color: var(--neutral-neutral-6);
32
+
33
+ svg > path {
34
+ fill: var(--neutral-neutral-2);
35
+ }
36
+ }
37
+
38
+ &.signer-status-item--declined {
39
+ background-color: var(--error-error-3);
40
+
41
+ svg > path {
42
+ fill: var(--error-main);
43
+ }
44
+ }
45
+
46
+ &.signer-status-item--awaiting {
47
+ background-color: var(--secondary-main-light-4);
48
+
49
+ svg > path {
50
+ fill: var(--secondary-main-dark-2);
51
+ }
52
+ }
53
+
54
+ &.signer-status-item--no_response {
55
+ background-color: var(--neutral-neutral-4);
56
+
57
+ svg > path {
58
+ fill: var(--neutral-neutral-1);
59
+ }
60
+ }
61
+ `
@@ -0,0 +1,28 @@
1
+ import React, { type FC } from 'react'
2
+
3
+ import { type SignatureStatus, type SignerStatusItemProps } from './SignerStatusItemProps.types'
4
+ import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon'
5
+ import { Done24px } from '../../../../images/componentsSvg/Done24px'
6
+ import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
7
+ import { Time24px } from '../../../../images/componentsSvg/Time24px'
8
+
9
+ import { SignerStatusItemStyled } from './SignerStatusItem.styled'
10
+
11
+ const iconByStatus: Record<SignatureStatus, React.ReactNode> = {
12
+ signed: <Done24px />,
13
+ in_progress: <Time24px />,
14
+ declined: <CloseIcon />,
15
+ awaiting: <Time24px />,
16
+ no_response: <NewRelease24p />
17
+ }
18
+
19
+ export const SignerStatusItem: FC<SignerStatusItemProps> = ({ status, children, givenClass = '' }) => {
20
+ return (
21
+ <SignerStatusItemStyled className={`signer-status-item signer-status-item--${status} ${givenClass}`}>
22
+ <span className='signer-status-item__icon' aria-hidden>
23
+ {iconByStatus[status]}
24
+ </span>
25
+ {children}
26
+ </SignerStatusItemStyled>
27
+ )
28
+ }
@@ -0,0 +1,6 @@
1
+ export type SignatureStatus = 'signed' | 'in_progress' | 'declined' | 'awaiting' | 'no_response';
2
+ export interface SignerStatusItemProps {
3
+ status: SignatureStatus;
4
+ children: React.ReactNode;
5
+ givenClass?: string;
6
+ }
@@ -0,0 +1,7 @@
1
+ export type SignatureStatus = 'signed' | 'in_progress' | 'declined' | 'awaiting' | 'no_response'
2
+
3
+ export interface SignerStatusItemProps {
4
+ status: SignatureStatus
5
+ children: React.ReactNode
6
+ givenClass?: string
7
+ }
@@ -0,0 +1,2 @@
1
+ export { SignerStatusItem } from './SignerStatusItem';
2
+ export type { SignerStatusItemProps, SignatureStatus } from './SignerStatusItemProps.types';
@@ -0,0 +1 @@
1
+ export { SignerStatusItem } from './SignerStatusItem';
@@ -0,0 +1,2 @@
1
+ export { SignerStatusItem } from './SignerStatusItem'
2
+ export type { SignerStatusItemProps, SignatureStatus } from './SignerStatusItemProps.types'
@@ -1,8 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import Tippy from '@tippyjs/react';
3
3
  import classNames from 'classnames';
4
- // import 'tippy.js/dist/tippy.css'
5
- // import './Tooltip.scss'
6
4
  const Tooltip = ({ children, position = 'top', inverted, trigger = 'hover', ...rest }) => {
7
5
  if (children === undefined)
8
6
  return null;
@@ -3,8 +3,6 @@ import Tippy from '@tippyjs/react'
3
3
  import classNames from 'classnames'
4
4
 
5
5
  import { type TooltipProps } from './TooltipProps.types'
6
- // import 'tippy.js/dist/tippy.css'
7
- // import './Tooltip.scss'
8
6
 
9
7
  const Tooltip: FC<TooltipProps> = ({ children, position = 'top', inverted, trigger = 'hover', ...rest }) => {
10
8
  if (children === undefined) return null
@@ -0,0 +1,3 @@
1
+ import { type FC } from 'react';
2
+ import type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types';
3
+ export declare const SignersStatusTooltipContent: FC<SignersStatusTooltipContentProps>;
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Button } from '../../atoms/Button';
3
+ import { SignerStatusItem } from '../../atoms/SignerStatusItem';
4
+ import { SignersStatusTooltipContentStyled } from './SignersStatusTooltipContent.styled';
5
+ export const SignersStatusTooltipContent = ({ title = 'Signers Status', signers, manageRequestsLabel, onManageRequestsClick, manageRequestsDataQa = 'manage_requests_button', givenClass = '' }) => {
6
+ 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 }) })] }));
7
+ };
@@ -0,0 +1 @@
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;
@@ -0,0 +1,22 @@
1
+ import styled from 'styled-components';
2
+ export const SignersStatusTooltipContentStyled = styled.div `
3
+ width: max-content;
4
+ padding: 0.5rem;
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: 0.5rem;
8
+ font-family: var(--font-sans);
9
+
10
+ .signers-status-tooltip-content__signers {
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: 0.5rem;
14
+ padding-bottom: 0.5rem;
15
+ margin: 0;
16
+ list-style: none;
17
+ }
18
+
19
+ .signers-status-tooltip-content__button {
20
+ margin-top: 0;
21
+ }
22
+ `;
@@ -0,0 +1,23 @@
1
+ import styled from 'styled-components'
2
+
3
+ export const SignersStatusTooltipContentStyled = styled.div`
4
+ width: max-content;
5
+ padding: 0.5rem;
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 0.5rem;
9
+ font-family: var(--font-sans);
10
+
11
+ .signers-status-tooltip-content__signers {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: 0.5rem;
15
+ padding-bottom: 0.5rem;
16
+ margin: 0;
17
+ list-style: none;
18
+ }
19
+
20
+ .signers-status-tooltip-content__button {
21
+ margin-top: 0;
22
+ }
23
+ `
@@ -0,0 +1,38 @@
1
+ import React, { type FC } from 'react'
2
+
3
+ import { Button } from '../../atoms/Button'
4
+ import { SignerStatusItem } from '../../atoms/SignerStatusItem'
5
+ import type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types'
6
+ import { SignersStatusTooltipContentStyled } from './SignersStatusTooltipContent.styled'
7
+
8
+ export const SignersStatusTooltipContent: FC<SignersStatusTooltipContentProps> = ({
9
+ title = 'Signers Status',
10
+ signers,
11
+ manageRequestsLabel,
12
+ onManageRequestsClick,
13
+ manageRequestsDataQa = 'manage_requests_button',
14
+ givenClass = ''
15
+ }) => {
16
+ return (
17
+ <SignersStatusTooltipContentStyled className={`signers-status-tooltip-content ${givenClass}`.trim()}>
18
+ <h3>{title}</h3>
19
+ <ul className='signers-status-tooltip-content__signers'>
20
+ {signers.map((signer, index) => (
21
+ <SignerStatusItem key={`${signer.status}-${index}`} status={signer.status}>
22
+ {signer.children}
23
+ </SignerStatusItem>
24
+ ))}
25
+ </ul>
26
+ <div className='signers-status-tooltip-content__button'>
27
+ <Button
28
+ noLink
29
+ color='tertiary'
30
+ givenClass='underline-button'
31
+ label={manageRequestsLabel}
32
+ dataQa={manageRequestsDataQa}
33
+ onClick={onManageRequestsClick}
34
+ />
35
+ </div>
36
+ </SignersStatusTooltipContentStyled>
37
+ )
38
+ }
@@ -0,0 +1,9 @@
1
+ import type { SignerStatusItemProps } from '../../atoms/SignerStatusItem/SignerStatusItemProps.types';
2
+ export interface SignersStatusTooltipContentProps {
3
+ title?: string;
4
+ signers: SignerStatusItemProps[];
5
+ manageRequestsLabel: string;
6
+ onManageRequestsClick: () => void;
7
+ manageRequestsDataQa?: string;
8
+ givenClass?: string;
9
+ }
@@ -0,0 +1,10 @@
1
+ import type { SignerStatusItemProps } from '../../atoms/SignerStatusItem/SignerStatusItemProps.types'
2
+
3
+ export interface SignersStatusTooltipContentProps {
4
+ title?: string
5
+ signers: SignerStatusItemProps[]
6
+ manageRequestsLabel: string
7
+ onManageRequestsClick: () => void
8
+ manageRequestsDataQa?: string
9
+ givenClass?: string
10
+ }
@@ -0,0 +1,2 @@
1
+ export { SignersStatusTooltipContent } from './SignersStatusTooltipContent';
2
+ export type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types';
@@ -0,0 +1 @@
1
+ export { SignersStatusTooltipContent } from './SignersStatusTooltipContent';
@@ -0,0 +1,2 @@
1
+ export { SignersStatusTooltipContent } from './SignersStatusTooltipContent'
2
+ export type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types'