@npm_leadtech/legal-lib-components 7.91.0 → 7.91.1
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.
- package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.js +1 -1
- package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.ts +1 -1
- package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.d.ts +1 -1
- package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.ts +1 -1
- package/dist/src/components/atoms/PreFooter/PreFooter.js +3 -3
- package/dist/src/components/atoms/PreFooter/PreFooter.tsx +2 -2
- package/dist/src/components/atoms/PreFooter/PreFooterProps.d.ts +1 -1
- package/dist/src/components/atoms/PreFooter/PreFooterProps.ts +1 -1
- package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.js +1 -1
- package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.styled.js +1 -1
- package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.styled.ts +1 -1
- package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.tsx +1 -1
- package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.d.ts +1 -1
- package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.ts +1 -1
- package/dist/src/globalStyles/variables.scss +31 -12
- package/dist/src/globalStyles/variablesCss.scss +10 -0
- package/dist/src/hooks/useIntersectionObserver.d.ts +2 -2
- package/dist/src/hooks/useIntersectionObserver.js +1 -1
- package/dist/src/hooks/useIntersectionObserver.tsx +4 -4
- package/package.json +1 -1
|
@@ -3,4 +3,4 @@ export interface DocumentStatusProps {
|
|
|
3
3
|
type?: DocumentStatusType;
|
|
4
4
|
givenClass?: string;
|
|
5
5
|
}
|
|
6
|
-
export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | '
|
|
6
|
+
export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | 'completed';
|
|
@@ -4,4 +4,4 @@ export interface DocumentStatusProps {
|
|
|
4
4
|
givenClass?: string
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | '
|
|
7
|
+
export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | 'completed'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button } from '../Button';
|
|
3
3
|
import { PreFooterStyled } from './PreFooter.styled';
|
|
4
|
-
export const PreFooter = ({
|
|
5
|
-
return (_jsx(PreFooterStyled, { children: _jsx("div", { className: 'wrapper', children: _jsxs("div", { className: 'prefooter', children: [
|
|
4
|
+
export const PreFooter = ({ siteTitle, content, ctaLabel, ctaOnClick, ctaDataQa, ctaLink }) => {
|
|
5
|
+
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) => {
|
|
6
6
|
return (_jsx("p", { className: 'prefooter__columns__text', children: text }, index));
|
|
7
7
|
}) }), _jsx(Button, { label: ctaLabel, onClick: ctaOnClick, link: ctaLink, dataQa: ctaDataQa, isExternal: true, hasNoFollow: true })] }) }) }));
|
|
8
8
|
};
|
|
@@ -5,7 +5,7 @@ import { PreFooterProps } from './PreFooterProps'
|
|
|
5
5
|
import { PreFooterStyled } from './PreFooter.styled'
|
|
6
6
|
|
|
7
7
|
export const PreFooter: React.FC<PreFooterProps> = ({
|
|
8
|
-
|
|
8
|
+
siteTitle,
|
|
9
9
|
content,
|
|
10
10
|
ctaLabel,
|
|
11
11
|
ctaOnClick,
|
|
@@ -16,7 +16,7 @@ export const PreFooter: React.FC<PreFooterProps> = ({
|
|
|
16
16
|
<PreFooterStyled>
|
|
17
17
|
<div className='wrapper'>
|
|
18
18
|
<div className='prefooter'>
|
|
19
|
-
<div className='serif --hero prefooter__title'>
|
|
19
|
+
<div className='serif --hero prefooter__title'>{siteTitle}</div>
|
|
20
20
|
<div className='prefooter__columns'>
|
|
21
21
|
{content.map((text, index) => {
|
|
22
22
|
return (
|
|
@@ -5,7 +5,7 @@ import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
|
|
|
5
5
|
import { Time24px } from '../../../../images/componentsSvg/Time24px';
|
|
6
6
|
import { SignerStatusItemStyled } from './SignerStatusItem.styled';
|
|
7
7
|
const iconByStatus = {
|
|
8
|
-
|
|
8
|
+
completed: _jsx(Done24px, {}),
|
|
9
9
|
'in-progress': _jsx(Time24px, {}),
|
|
10
10
|
declined: _jsx(CloseIcon, {}),
|
|
11
11
|
awaiting: _jsx(Time24px, {}),
|
|
@@ -9,7 +9,7 @@ import { Time24px } from '../../../../images/componentsSvg/Time24px'
|
|
|
9
9
|
import { SignerStatusItemStyled } from './SignerStatusItem.styled'
|
|
10
10
|
|
|
11
11
|
const iconByStatus: Record<SignatureStatus, React.ReactNode> = {
|
|
12
|
-
|
|
12
|
+
completed: <Done24px />,
|
|
13
13
|
'in-progress': <Time24px />,
|
|
14
14
|
declined: <CloseIcon />,
|
|
15
15
|
awaiting: <Time24px />,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type SignatureStatus = '
|
|
1
|
+
export type SignatureStatus = 'completed' | 'in-progress' | 'declined' | 'awaiting' | 'no-response';
|
|
2
2
|
export interface SignerStatusItemProps {
|
|
3
3
|
status: SignatureStatus;
|
|
4
4
|
children: React.ReactNode;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
2
|
|
|
3
|
-
//
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// Figma tokens reference: figma-tokens/
|
|
5
|
+
// =============================================================================
|
|
6
|
+
|
|
7
|
+
// Breakpoints (relate to figma-tokens/grids/Mode 1.tokens.json: grid-xl, grid-l, grid-m, grid-s)
|
|
4
8
|
$xl: 1600px;
|
|
5
9
|
$lg: 1200px;
|
|
6
10
|
$md: 960px;
|
|
@@ -8,48 +12,63 @@ $sm: 720px;
|
|
|
8
12
|
$xs: 575px;
|
|
9
13
|
$xxs: 328px;
|
|
10
14
|
|
|
11
|
-
// Colors
|
|
15
|
+
// Colors — figma-tokens/color (Legalfinity.tokens.json | Lawdistrict.tokens.json)
|
|
16
|
+
// primary.* ↔ primary/50 … primary/900 | secondary.* ↔ secondary/50 … secondary/700
|
|
17
|
+
// neutral.* ↔ neutral/25, 50, 200, 400, 600, 800, 900, white | error.* ↔ error/20, 200, 500
|
|
18
|
+
// others.* ↔ others/black, others/disabled
|
|
12
19
|
$colors: (
|
|
13
20
|
primary: (
|
|
14
21
|
main-light-6: var(--primary-main-light-6),
|
|
22
|
+
// ~ primary/50–100
|
|
15
23
|
main-light-5: var(--primary-main-light-5),
|
|
16
24
|
main-light-4: var(--primary-main-light-4),
|
|
17
25
|
main-light-3: var(--primary-main-light-3),
|
|
18
26
|
main-light-2: var(--primary-main-light-2),
|
|
19
27
|
main-light-1: var(--primary-main-light-1),
|
|
20
28
|
main: var(--primary-main),
|
|
29
|
+
// ~ primary/500
|
|
21
30
|
main-dark-1: var(--primary-main-dark-1),
|
|
22
31
|
main-dark-1-rgb: var(--primary-main-dark-1-rgb),
|
|
23
|
-
main-dark-2: var(--primary-main-dark-2)
|
|
32
|
+
main-dark-2: var(--primary-main-dark-2) // ~ primary/800–900
|
|
24
33
|
),
|
|
25
34
|
secondary: (
|
|
26
35
|
main-light-5: var(--secondary-main-light-5),
|
|
36
|
+
// ~ secondary/50–100
|
|
27
37
|
main-light-4: var(--secondary-main-light-4),
|
|
28
38
|
main-light-3: var(--secondary-main-light-3),
|
|
29
39
|
main-light-2: var(--secondary-main-light-2),
|
|
30
40
|
main-light-1: var(--secondary-main-light-1),
|
|
31
41
|
main: var(--secondary-main),
|
|
42
|
+
// ~ secondary/400–500
|
|
32
43
|
main-dark-1: var(--secondary-main-dark-1),
|
|
33
|
-
main-dark-2: var(--secondary-main-dark-2)
|
|
44
|
+
main-dark-2: var(--secondary-main-dark-2) // ~ secondary/600–700
|
|
34
45
|
),
|
|
35
46
|
neutral: (
|
|
36
47
|
main: var(--neutral-main),
|
|
48
|
+
// ~ neutral/600–800
|
|
37
49
|
neutral-1: var(--neutral-neutral-1),
|
|
50
|
+
// ~ neutral/25
|
|
38
51
|
neutral-2: var(--neutral-neutral-2),
|
|
52
|
+
// ~ neutral/50–200
|
|
39
53
|
neutral-3: var(--neutral-neutral-3),
|
|
40
54
|
neutral-4: var(--neutral-neutral-4),
|
|
55
|
+
// ~ neutral/400
|
|
41
56
|
neutral-5: var(--neutral-neutral-5),
|
|
42
|
-
neutral-6: var(--neutral-neutral-6)
|
|
57
|
+
neutral-6: var(--neutral-neutral-6) // ~ neutral/800–900
|
|
43
58
|
),
|
|
44
59
|
error: (
|
|
45
60
|
main: var(--error-main),
|
|
61
|
+
// ~ error/500
|
|
46
62
|
error-2: var(--error-error-2),
|
|
63
|
+
// ~ error/200
|
|
47
64
|
error-3: var(--error-error-3)
|
|
48
65
|
),
|
|
49
66
|
others: (
|
|
50
67
|
white: var(--others-white),
|
|
68
|
+
// ~ neutral/white
|
|
51
69
|
disabled: var(--others-disabled),
|
|
52
|
-
|
|
70
|
+
// others/disabled
|
|
71
|
+
black: var(--others-black) // others/black
|
|
53
72
|
)
|
|
54
73
|
);
|
|
55
74
|
|
|
@@ -58,19 +77,19 @@ $colors: (
|
|
|
58
77
|
@return $color;
|
|
59
78
|
}
|
|
60
79
|
|
|
61
|
-
// Box shadow
|
|
80
|
+
// Box shadow — figma-tokens/box-shadow/value.tokens.json (small | medium)
|
|
62
81
|
$box-shadow-small: var(--box-shadow-small);
|
|
63
82
|
$box-shadow-medium: var(--box-shadow-medium);
|
|
64
83
|
$box-shadow-menu: var(--box-shadow-menu);
|
|
65
84
|
$box-shadow-tippy-box: var(--box-shadow-tippy-box);
|
|
66
85
|
$box-shadow-container: var(--box-shadow-container);
|
|
67
86
|
|
|
68
|
-
// Fonts
|
|
69
|
-
$font-sans: 'Inter', sans-serif;
|
|
70
|
-
$font-serif: 'Lora', serif;
|
|
87
|
+
// Fonts — figma-tokens/font (font-family/primary, font-family/secondary; Lawdistrict: Inter + Lora)
|
|
88
|
+
$font-sans: 'Inter', sans-serif; // font-family/primary (Lawdistrict)
|
|
89
|
+
$font-serif: 'Lora', serif; // font-family/secondary (Lawdistrict)
|
|
71
90
|
|
|
72
|
-
// Layout
|
|
91
|
+
// Layout (max-width aligns with breakpoints; spacing scale in figma-tokens/border-and-spacing/Mode 1.tokens.json)
|
|
73
92
|
$max-width: $lg;
|
|
74
93
|
|
|
75
|
-
//menu
|
|
94
|
+
// menu
|
|
76
95
|
$menu-height-mobile: 3.25rem;
|
|
@@ -1,20 +1,30 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Figma tokens reference: figma-tokens/
|
|
3
|
+
// =============================================================================
|
|
4
|
+
|
|
1
5
|
html {
|
|
6
|
+
// figma-tokens/font: font-family/primary, font-family/secondary (Lawdistrict: Inter, Lora)
|
|
2
7
|
--font-sans: 'Inter', sans-serif;
|
|
3
8
|
--font-serif: 'Lora', serif;
|
|
4
9
|
|
|
10
|
+
// figma-tokens/border-and-spacing/Mode 1.tokens.json: border-radius/sm (4px), border-radius/md (8px), border-radius/l (16px)
|
|
5
11
|
--s-border-radius: 0.25rem;
|
|
6
12
|
--m-border-radius: 0.5rem;
|
|
7
13
|
--l-border-radius: 1rem;
|
|
8
14
|
|
|
15
|
+
// figma-tokens/box-shadow/value.tokens.json:
|
|
16
|
+
// small, medium (color uses primary dark; menu/tippy/container are variants)
|
|
9
17
|
--box-shadow-small: 0 0.125rem 0.375rem 0 rgba(var(--primary-main-dark-1-rgb), 0.25);
|
|
10
18
|
--box-shadow-medium: 0 0.25rem 0.5rem 0 rgba(var(--primary-main-dark-1-rgb), 0.2);
|
|
11
19
|
--box-shadow-menu: 0 0.25rem 0.5rem -0.5rem rgba(var(--primary-main-dark-1-rgb), 0.2);
|
|
12
20
|
--box-shadow-tippy-box: 0 0.25rem 0.5rem 0.25rem rgba(var(--primary-main-dark-1-rgb), 0.2);
|
|
13
21
|
--box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
|
|
14
22
|
|
|
23
|
+
// figma-tokens/border-and-spacing/Mode 1.tokens.json: spacing scale (e.g. spacing/sm 16px → 1rem)
|
|
15
24
|
--global-gap: 1rem;
|
|
16
25
|
}
|
|
17
26
|
|
|
27
|
+
// Theme: Legalfinity — figma-tokens/font/Legalfinity.tokens.json (font-family/primary, secondary → Poppins)
|
|
18
28
|
html[data-theme='primaryblue'] {
|
|
19
29
|
--font-sans: 'Poppins', sans-serif;
|
|
20
30
|
--font-serif: 'Poppins', serif;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
2
|
interface UseIntersectionObserverParams {
|
|
3
3
|
options?: IntersectionObserverInit;
|
|
4
4
|
defaultIntersecting?: boolean;
|
|
5
5
|
}
|
|
6
|
-
export declare function useIntersectionObserver<T extends HTMLElement>({ options, defaultIntersecting }?: UseIntersectionObserverParams): [RefObject<T
|
|
6
|
+
export declare function useIntersectionObserver<T extends HTMLElement>({ options, defaultIntersecting }?: UseIntersectionObserverParams): [RefObject<T>, boolean];
|
|
7
7
|
export {};
|
|
@@ -4,7 +4,7 @@ export function useIntersectionObserver({ options = {}, defaultIntersecting = fa
|
|
|
4
4
|
const elementRef = useRef(null);
|
|
5
5
|
useEffect(() => {
|
|
6
6
|
const currentElement = elementRef.current;
|
|
7
|
-
if (
|
|
7
|
+
if (currentElement == null)
|
|
8
8
|
return;
|
|
9
9
|
const observer = new IntersectionObserver((entries) => {
|
|
10
10
|
entries.forEach((entry) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RefObject, useEffect, useRef, useState } from 'react'
|
|
1
|
+
import { type RefObject, useEffect, useRef, useState } from 'react'
|
|
2
2
|
|
|
3
3
|
interface UseIntersectionObserverParams {
|
|
4
4
|
options?: IntersectionObserverInit
|
|
@@ -8,13 +8,13 @@ interface UseIntersectionObserverParams {
|
|
|
8
8
|
export function useIntersectionObserver<T extends HTMLElement>({
|
|
9
9
|
options = {},
|
|
10
10
|
defaultIntersecting = false
|
|
11
|
-
}: UseIntersectionObserverParams = {}): [RefObject<T
|
|
11
|
+
}: UseIntersectionObserverParams = {}): [RefObject<T>, boolean] {
|
|
12
12
|
const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting)
|
|
13
|
-
const elementRef = useRef<T>(null)
|
|
13
|
+
const elementRef = useRef<T>(null) as RefObject<T>
|
|
14
14
|
|
|
15
15
|
useEffect(() => {
|
|
16
16
|
const currentElement = elementRef.current
|
|
17
|
-
if (
|
|
17
|
+
if (currentElement == null) return
|
|
18
18
|
|
|
19
19
|
const observer = new IntersectionObserver((entries) => {
|
|
20
20
|
entries.forEach((entry) => {
|