@npm_leadtech/legal-lib-components 7.72.0 → 7.74.0
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/molecules/AccordionItem/AccordionItem.d.ts +1 -1
- package/dist/src/components/molecules/AccordionItem/AccordionItem.js +23 -3
- package/dist/src/components/molecules/AccordionItem/AccordionItem.tsx +23 -2
- package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.d.ts +1 -0
- package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.ts +1 -0
- package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.js +2 -2
- package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.tsx +7 -4
- package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.d.ts +3 -0
- package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.ts +3 -0
- package/dist/src/components/organisms/Accordion/Accordion.d.ts +1 -1
- package/dist/src/components/organisms/Accordion/Accordion.js +2 -2
- package/dist/src/components/organisms/Accordion/Accordion.tsx +7 -1
- package/dist/src/components/organisms/Accordion/AccordionProps.types.d.ts +1 -0
- package/dist/src/components/organisms/Accordion/AccordionProps.types.ts +1 -0
- package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSection.js +2 -2
- package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSection.tsx +7 -1
- package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSectionProps.types.d.ts +3 -0
- package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSectionProps.types.ts +3 -0
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type AccordionItemProps } from './AccordionItemProps.types';
|
|
3
|
-
export declare const AccordionItem: ({ accordionRightContent, children, defaultHeightItem, index, isOpen, onClick, title }: AccordionItemProps) => React.JSX.Element;
|
|
3
|
+
export declare const AccordionItem: ({ accordionRightContent, children, defaultHeightItem, index, isOpen, onClick, title, heightAutoChange }: AccordionItemProps) => React.JSX.Element;
|
|
@@ -1,21 +1,41 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
|
3
|
-
import { useEffect, useRef } from 'react';
|
|
3
|
+
import React, { useEffect, useRef } from 'react';
|
|
4
4
|
import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context';
|
|
5
5
|
import { AccordionItemStyled } from './AccordionItem.styled';
|
|
6
|
-
export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title }) => {
|
|
6
|
+
export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title, heightAutoChange = false }) => {
|
|
7
7
|
const contenReftHeight = useRef(null);
|
|
8
8
|
const { state } = useStateDataAccordionItem(index);
|
|
9
9
|
const { dispatch } = useDispatchDataAccordionItem();
|
|
10
|
+
const [heightAccordionItem, setHeightAccordionItem] = React.useState(defaultHeightItem);
|
|
10
11
|
useEffect(() => {
|
|
11
12
|
if (state.locked.actionType === 'unlocked') {
|
|
12
13
|
onClick();
|
|
13
14
|
dispatch({ type: 'unlocked', accordionItem: index, resetAction: 'default' });
|
|
14
15
|
}
|
|
15
16
|
}, [state.locked.actionType]);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
let intervalId;
|
|
19
|
+
if (heightAutoChange) {
|
|
20
|
+
intervalId = setInterval(() => {
|
|
21
|
+
const height = contenReftHeight.current?.children[0].getBoundingClientRect().height ?? defaultHeightItem;
|
|
22
|
+
if (heightAccordionItem !== height) {
|
|
23
|
+
setHeightAccordionItem(height);
|
|
24
|
+
}
|
|
25
|
+
}, 500);
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
setHeightAccordionItem(contenReftHeight?.current?.scrollHeight ?? defaultHeightItem);
|
|
29
|
+
}
|
|
30
|
+
return () => {
|
|
31
|
+
if (intervalId !== undefined) {
|
|
32
|
+
clearInterval(intervalId);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}, []);
|
|
16
36
|
return (_jsxs(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button
|
|
17
37
|
${state.handler === 'success' ? '--success' : ''}
|
|
18
38
|
${state.locked.isLocked ? '--locked' : ''}`, onClick: () => {
|
|
19
39
|
!state.locked.isLocked && onClick();
|
|
20
|
-
}, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height:
|
|
40
|
+
}, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height: heightAccordionItem } : { height: '0px' }, children: children })] }));
|
|
21
41
|
};
|
|
@@ -12,11 +12,13 @@ export const AccordionItem = ({
|
|
|
12
12
|
index,
|
|
13
13
|
isOpen,
|
|
14
14
|
onClick,
|
|
15
|
-
title
|
|
15
|
+
title,
|
|
16
|
+
heightAutoChange = false
|
|
16
17
|
}: AccordionItemProps): React.JSX.Element => {
|
|
17
18
|
const contenReftHeight = useRef<HTMLInputElement>(null)
|
|
18
19
|
const { state } = useStateDataAccordionItem(index)
|
|
19
20
|
const { dispatch } = useDispatchDataAccordionItem()
|
|
21
|
+
const [heightAccordionItem, setHeightAccordionItem] = React.useState<number>(defaultHeightItem)
|
|
20
22
|
|
|
21
23
|
useEffect(() => {
|
|
22
24
|
if (state.locked.actionType === 'unlocked') {
|
|
@@ -25,6 +27,25 @@ export const AccordionItem = ({
|
|
|
25
27
|
}
|
|
26
28
|
}, [state.locked.actionType])
|
|
27
29
|
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
let intervalId: ReturnType<typeof setInterval> | undefined
|
|
32
|
+
if (heightAutoChange) {
|
|
33
|
+
intervalId = setInterval(() => {
|
|
34
|
+
const height = contenReftHeight.current?.children[0].getBoundingClientRect().height ?? defaultHeightItem
|
|
35
|
+
if (heightAccordionItem !== height) {
|
|
36
|
+
setHeightAccordionItem(height)
|
|
37
|
+
}
|
|
38
|
+
}, 500)
|
|
39
|
+
} else {
|
|
40
|
+
setHeightAccordionItem(contenReftHeight?.current?.scrollHeight ?? defaultHeightItem)
|
|
41
|
+
}
|
|
42
|
+
return () => {
|
|
43
|
+
if (intervalId !== undefined) {
|
|
44
|
+
clearInterval(intervalId)
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}, [])
|
|
48
|
+
|
|
28
49
|
return (
|
|
29
50
|
<AccordionItemStyled className='accordion__container'>
|
|
30
51
|
<button
|
|
@@ -42,7 +63,7 @@ export const AccordionItem = ({
|
|
|
42
63
|
<div
|
|
43
64
|
ref={contenReftHeight}
|
|
44
65
|
className={`accordion__content ${!isOpen ? '--closed' : ''}`}
|
|
45
|
-
style={isOpen ? { height:
|
|
66
|
+
style={isOpen ? { height: heightAccordionItem } : { height: '0px' }}
|
|
46
67
|
>
|
|
47
68
|
{children}
|
|
48
69
|
</div>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled';
|
|
3
|
-
const MidBannerRatafiaSample = ({ image, isEsignatureImage = false, isAbout = false, midBanner1Img, midBanner2Img, midBanner3Img }) => {
|
|
4
|
-
return (_jsxs(MidBannerRatafiaSampleStyled, { className: 'mid-banner-ratafia-sample', children: [_jsx("div", { className: 'mid-banner-ratafia-sample__image', children: image }), !isEsignatureImage && !isAbout && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'mid-banner-ratafia-sample__sumarized-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__sumarized-tag__icon', src: midBanner1Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children:
|
|
3
|
+
const MidBannerRatafiaSample = ({ image, isEsignatureImage = false, isAbout = false, midBanner1Img, midBanner2Img, midBanner3Img, iconLabel1, iconLabel2, iconLabel3 }) => {
|
|
4
|
+
return (_jsxs(MidBannerRatafiaSampleStyled, { className: 'mid-banner-ratafia-sample', children: [_jsx("div", { className: 'mid-banner-ratafia-sample__image', children: image }), !isEsignatureImage && !isAbout && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'mid-banner-ratafia-sample__sumarized-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__sumarized-tag__icon', src: midBanner1Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: iconLabel1 })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner2Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: iconLabel2 })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner3Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: iconLabel3 })] })] })), isAbout && (_jsxs("div", { className: 'about-page', children: [_jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts about-page__signed-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner1Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text about-page__signed-tag', children: "Signed" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses about-page__ai-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner3Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: "AI Reviewed" })] })] }))] }));
|
|
5
5
|
};
|
|
6
6
|
export default MidBannerRatafiaSample;
|
|
@@ -9,7 +9,10 @@ const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
|
|
|
9
9
|
isAbout = false,
|
|
10
10
|
midBanner1Img,
|
|
11
11
|
midBanner2Img,
|
|
12
|
-
midBanner3Img
|
|
12
|
+
midBanner3Img,
|
|
13
|
+
iconLabel1,
|
|
14
|
+
iconLabel2,
|
|
15
|
+
iconLabel3
|
|
13
16
|
}) => {
|
|
14
17
|
return (
|
|
15
18
|
<MidBannerRatafiaSampleStyled className='mid-banner-ratafia-sample'>
|
|
@@ -19,16 +22,16 @@ const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
|
|
|
19
22
|
<div className='mid-banner-ratafia-sample__sumarized-tag'>
|
|
20
23
|
<img className='mid-banner-ratafia-sample__sumarized-tag__icon' src={midBanner1Img} alt='' role='img' />
|
|
21
24
|
<p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text'>
|
|
22
|
-
|
|
25
|
+
{iconLabel1}
|
|
23
26
|
</p>
|
|
24
27
|
</div>
|
|
25
28
|
<div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts'>
|
|
26
29
|
<img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner2Img} alt='' role='img' />
|
|
27
|
-
<p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>
|
|
30
|
+
<p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>{iconLabel2}</p>
|
|
28
31
|
</div>
|
|
29
32
|
<div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses'>
|
|
30
33
|
<img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner3Img} alt='' role='img' />
|
|
31
|
-
<p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>
|
|
34
|
+
<p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>{iconLabel3}</p>
|
|
32
35
|
</div>
|
|
33
36
|
</>
|
|
34
37
|
)}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type AccordionProps } from './AccordionProps.types';
|
|
3
|
-
export declare const Accordion: ({ data, defaultActiveIndex, defaultHeightItem }: AccordionProps) => React.JSX.Element;
|
|
3
|
+
export declare const Accordion: ({ data, defaultActiveIndex, defaultHeightItem, heightAutoChange }: AccordionProps) => React.JSX.Element;
|
|
@@ -3,12 +3,12 @@ import { useState } from 'react';
|
|
|
3
3
|
import { AccordionItem } from '../../molecules';
|
|
4
4
|
import { AccordionProvider } from './Accordion.context';
|
|
5
5
|
import { AccordionStyled } from './Accordion.styled';
|
|
6
|
-
export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }) => {
|
|
6
|
+
export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem, heightAutoChange = false }) => {
|
|
7
7
|
const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
|
|
8
8
|
const handleItemClick = (index) => {
|
|
9
9
|
setActiveIndex((prevIndex) => (prevIndex === index ? -1 : index));
|
|
10
10
|
};
|
|
11
|
-
return (_jsx(AccordionProvider, { elements: data.length, children: _jsx(AccordionStyled, { children: data.map((item, index) => (_jsx(AccordionItem, { accordionRightContent: item?.accordionRightContent, defaultHeightItem: defaultHeightItem, index: index, isOpen: activeIndex === index, onClick: () => {
|
|
11
|
+
return (_jsx(AccordionProvider, { elements: data.length, children: _jsx(AccordionStyled, { children: data.map((item, index) => (_jsx(AccordionItem, { accordionRightContent: item?.accordionRightContent, defaultHeightItem: defaultHeightItem, heightAutoChange: heightAutoChange, index: index, isOpen: activeIndex === index, onClick: () => {
|
|
12
12
|
handleItemClick(index);
|
|
13
13
|
}, title: item.title, children: item.children }, index))) }) }));
|
|
14
14
|
};
|
|
@@ -4,7 +4,12 @@ import { type AccordionProps } from './AccordionProps.types'
|
|
|
4
4
|
import { AccordionProvider } from './Accordion.context'
|
|
5
5
|
import { AccordionStyled } from './Accordion.styled'
|
|
6
6
|
|
|
7
|
-
export const Accordion = ({
|
|
7
|
+
export const Accordion = ({
|
|
8
|
+
data,
|
|
9
|
+
defaultActiveIndex = 0,
|
|
10
|
+
defaultHeightItem,
|
|
11
|
+
heightAutoChange = false
|
|
12
|
+
}: AccordionProps): React.JSX.Element => {
|
|
8
13
|
const [activeIndex, setActiveIndex] = useState(defaultActiveIndex)
|
|
9
14
|
|
|
10
15
|
const handleItemClick = (index: number): void => {
|
|
@@ -18,6 +23,7 @@ export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: A
|
|
|
18
23
|
<AccordionItem
|
|
19
24
|
accordionRightContent={item?.accordionRightContent}
|
|
20
25
|
defaultHeightItem={defaultHeightItem}
|
|
26
|
+
heightAutoChange={heightAutoChange}
|
|
21
27
|
index={index}
|
|
22
28
|
isOpen={activeIndex === index}
|
|
23
29
|
key={index}
|
|
@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { MidBannerRatafiaContent, MidBannerRatafiaSample } from '../../molecules';
|
|
3
3
|
import { MidBannerRatafiaSectionStyled } from './MidBannerRatafiaSection.styled';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
|
-
const MidBannerRatafiaSection = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa, image, midBanner1Img, midBanner2Img, midBanner3Img }) => {
|
|
5
|
+
const MidBannerRatafiaSection = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa, image, midBanner1Img, midBanner2Img, midBanner3Img, iconLabel1, iconLabel2, iconLabel3 }) => {
|
|
6
6
|
const isEsignature = ctaDataQa.includes('esignature');
|
|
7
7
|
const isAbout = ctaDataQa.includes('about');
|
|
8
8
|
const classnames = classNames({
|
|
9
9
|
'--is-esignature': isEsignature,
|
|
10
10
|
'--is-about': isAbout
|
|
11
11
|
});
|
|
12
|
-
return (_jsx(MidBannerRatafiaSectionStyled, { className: 'mid-banner-ratafia-section', children: _jsxs("div", { className: `mid-banner-ratafia-section__wrapper ${classnames}`, children: [_jsx(MidBannerRatafiaContent, { title: title, paragraph: paragraph, ctaLabel: ctaLabel, ctaLink: ctaLink, ctaDataQa: ctaDataQa }), _jsx("div", { className: `mid-banner-ratafia-section__wrapper__sample ${classnames}`, children: _jsx(MidBannerRatafiaSample, { image: image, isAbout: isAbout, isEsignatureImage: isEsignature, midBanner1Img: midBanner1Img, midBanner2Img: midBanner2Img, midBanner3Img: midBanner3Img }) })] }) }));
|
|
12
|
+
return (_jsx(MidBannerRatafiaSectionStyled, { className: 'mid-banner-ratafia-section', children: _jsxs("div", { className: `mid-banner-ratafia-section__wrapper ${classnames}`, children: [_jsx(MidBannerRatafiaContent, { title: title, paragraph: paragraph, ctaLabel: ctaLabel, ctaLink: ctaLink, ctaDataQa: ctaDataQa }), _jsx("div", { className: `mid-banner-ratafia-section__wrapper__sample ${classnames}`, children: _jsx(MidBannerRatafiaSample, { image: image, isAbout: isAbout, isEsignatureImage: isEsignature, midBanner1Img: midBanner1Img, midBanner2Img: midBanner2Img, midBanner3Img: midBanner3Img, iconLabel1: iconLabel1, iconLabel2: iconLabel2, iconLabel3: iconLabel3 }) })] }) }));
|
|
13
13
|
};
|
|
14
14
|
export default MidBannerRatafiaSection;
|
|
@@ -14,7 +14,10 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
|
|
|
14
14
|
image,
|
|
15
15
|
midBanner1Img,
|
|
16
16
|
midBanner2Img,
|
|
17
|
-
midBanner3Img
|
|
17
|
+
midBanner3Img,
|
|
18
|
+
iconLabel1,
|
|
19
|
+
iconLabel2,
|
|
20
|
+
iconLabel3
|
|
18
21
|
}) => {
|
|
19
22
|
const isEsignature = ctaDataQa.includes('esignature')
|
|
20
23
|
const isAbout = ctaDataQa.includes('about')
|
|
@@ -40,6 +43,9 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
|
|
|
40
43
|
midBanner1Img={midBanner1Img}
|
|
41
44
|
midBanner2Img={midBanner2Img}
|
|
42
45
|
midBanner3Img={midBanner3Img}
|
|
46
|
+
iconLabel1={iconLabel1}
|
|
47
|
+
iconLabel2={iconLabel2}
|
|
48
|
+
iconLabel3={iconLabel3}
|
|
43
49
|
/>
|
|
44
50
|
</div>
|
|
45
51
|
</div>
|