@npm_leadtech/legal-lib-components 5.38.0 → 5.39.0

package/dist/css/styles.css

@@ -1780,8 +1780,6 @@ h2.react-datepicker__current-month {
     flex-flow: row wrap;
     width: 100%;
     margin-left: 1.5rem;
-    margin-top: 2rem;
-    margin-bottom: 1rem;
   }
   .e-radio.--regular .e-radio__inner label {
     margin-bottom: 0.25rem;
@@ -1873,8 +1871,6 @@ h2.react-datepicker__current-month {
     flex-flow: row wrap;
     width: 100%;
     margin-left: 1.5rem;
-    margin-top: 2rem;
-    margin-bottom: 1rem;
   }
   .e-radio.--regular:not(.--icons) .e-radio__inner label {
     margin-bottom: 0.25rem;
@@ -2286,7 +2282,7 @@ h2.react-datepicker__current-month {
   display: none;
 }
 .e-text__inner {
-  margin-bottom: 0.6rem;
+  margin-bottom: 0.5rem;
 }
 .e-text__children {
   margin-top: 0.5rem;

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

@@ -17,7 +17,6 @@ export const AddButtonStyled = styled.div `
   .e-addButton {
     &__inner {
       display: inline-block;
-      margin-top: 1rem;
       color: var(--primary-main);
       border-radius: var(--global-border-radius);
       transition: all 0.3s ease;

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

@@ -18,7 +18,6 @@ export const AddButtonStyled = styled.div`
   .e-addButton {
     &__inner {
       display: inline-block;
-      margin-top: 1rem;
       color: var(--primary-main);
       border-radius: var(--global-border-radius);
       transition: all 0.3s ease;

package/dist/src/components/atoms/Radio/Radio.scss

@@ -7,8 +7,6 @@
     flex-flow: row wrap;
     width: 100%;
     margin-left: 1.5rem;
-    margin-top: 2rem;
-    margin-bottom: 1rem;
 
     label {
       margin-bottom: 0.25rem;

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

@@ -5,7 +5,6 @@ export const RemoveButtonStyled = styled.section `
   .e-removeButton {
     &__inner {
       display: inline-block;
-      margin-top: 1rem;
       color: var(--error-main);
 
       border-radius: var(--global-border-radius);

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

@@ -6,7 +6,6 @@ export const RemoveButtonStyled = styled.section`
   .e-removeButton {
     &__inner {
       display: inline-block;
-      margin-top: 1rem;
       color: var(--error-main);
 
       border-radius: var(--global-border-radius);

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

@@ -4,6 +4,6 @@ import error from '../../../../images/svg/info-error_24px_outlined.svg';
 const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa }) => {
     const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`;
-    return (_jsxs(TextAreaStyled, { className: classNames, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), errorMessage !== undefined && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), label !== undefined && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
+    return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
 };
 export default TextArea;

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

@@ -92,8 +92,8 @@ export const TextAreaStyled = styled.div `
       bottom: 0;
     }
 
-    &__inner {
-      margin-bottom: 0;
+    .e-textarea__inner {
+      margin-bottom: 0.5rem;
     }
 
     .inputLabel {

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

@@ -93,8 +93,8 @@ export const TextAreaStyled = styled.div`
       bottom: 0;
     }
 
-    &__inner {
-      margin-bottom: 0;
+    .e-textarea__inner {
+      margin-bottom: 0.5rem;
     }
 
     .inputLabel {

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

@@ -22,8 +22,8 @@ const TextArea: FC<TextAreaProps> = ({
 
   return (
     <TextAreaStyled className={classNames}>
-      {tooltip !== undefined && <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
-      {errorMessage !== undefined && !validate && (
+      {Boolean(tooltip) && <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
+      {Boolean(errorMessage) && !validate && (
         <span className='e-text--error sans-serif --small'>
           <img src={error} alt={errorMessage} />
           {errorMessage}
@@ -38,7 +38,7 @@ const TextArea: FC<TextAreaProps> = ({
         disabled={disabled}
         data-qa={dataQa}
       />
-      {label !== undefined && (
+      {Boolean(label) && (
         <div className={'e-textarea__inner'}>
           <div className='inputLabel'>{label}</div>
         </div>

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

@@ -29,7 +29,7 @@ export const AccordionItemStyled = styled.div `
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 20px;
     letter-spacing: -0.3px;
 
     &.--success {
@@ -48,10 +48,9 @@ export const AccordionItemStyled = styled.div `
   .accordion__title {
     color: var(--primary-main-dark-1);
     font-family: Inter;
-    font-size: 18px;
+    font-size: 16px;
     font-style: normal;
     font-weight: 700;
-    line-height: 24px;
     letter-spacing: -0.3px;
 
     &.--locked {

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

@@ -30,7 +30,7 @@ export const AccordionItemStyled = styled.div`
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 20px;
     letter-spacing: -0.3px;
 
     &.--success {
@@ -49,10 +49,9 @@ export const AccordionItemStyled = styled.div`
   .accordion__title {
     color: var(--primary-main-dark-1);
     font-family: Inter;
-    font-size: 18px;
+    font-size: 16px;
     font-style: normal;
     font-weight: 700;
-    line-height: 24px;
     letter-spacing: -0.3px;
 
     &.--locked {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { ArticleStyled } from './Article.styled';
 import { Button } from '../../atoms';
-const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
-    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("img", { src: imageUrl, className: isCategoryProductPage ? 'image image-category' : 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: isCategoryProductPage ? 'information information-category' : 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
+const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
+    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("img", { src: imageUrl, className: isCategoryProductPage ? 'image image-category' : 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: isCategoryProductPage ? 'information information-category' : 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
 };
 export default Article;

package/dist/src/components/molecules/Article/Article.tsx

@@ -5,7 +5,7 @@ import { type ArticleProps } from './ArticleProps.types'
 import { ArticleStyled } from './Article.styled'
 import { Button } from '../../atoms'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
   return (
     <ArticleStyled className='article'>
       <img
@@ -24,7 +24,7 @@ const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCat
             <Button
               givenClass='thinner-letter'
               color='tertiary'
-              label={'Read more'}
+              label={readMoreText}
               dataQa='article-read-more'
               link={articleUrl}
               isExternal
@@ -32,7 +32,7 @@ const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCat
             <img className='article__arrow-right' src={ArrowRight} alt=''></img>
           </div>
         ) : (
-          <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
+          <Button color='tertiary' label={readMoreText} dataQa='article-read-more' link={articleUrl} isExternal />
         )}
       </div>
     </ArticleStyled>

package/dist/src/components/molecules/Article/ArticleProps.types.d.ts

@@ -5,4 +5,5 @@ export interface ArticleProps {
     summary: string;
     id: string;
     isCategoryProductPage: boolean;
+    readMoreText: string;
 }

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -5,4 +5,5 @@ export interface ArticleProps {
   summary: string
   id: string
   isCategoryProductPage: boolean
+  readMoreText: string
 }

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

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms/Button';
 import { ContinueEditingBannerStyled } from './ContinueEditingBanner.styled';
 // import './ContinueEditingBanner.scss'
-export const ContinueEditingBanner = ({ latestApplicationInProgress, editFormClicked, tagLine, title, token }) => {
+export const ContinueEditingBanner = ({ latestApplicationInProgress, editFormClicked, tagLine, title, token, buttonLabel }) => {
     if (latestApplicationInProgress == null || token.length === 0) {
         return null;
     }
-    return (_jsx(ContinueEditingBannerStyled, { className: 'continue-banner', children: _jsxs("div", { className: 'continue-banner__wrapper wrapper', children: [_jsx("span", { className: 'continue-banner__title', children: title }), _jsx("span", { className: 'continue-banner__tagline', children: tagLine }), _jsx(Button, { label: 'Complete It Today', dataQa: 'continue-editing-banner-button', noLink: true, onClick: () => {
+    return (_jsx(ContinueEditingBannerStyled, { className: 'continue-banner', children: _jsxs("div", { className: 'continue-banner__wrapper wrapper', children: [_jsx("span", { className: 'continue-banner__title', children: title }), _jsx("span", { className: 'continue-banner__tagline', children: tagLine }), _jsx(Button, { label: buttonLabel, dataQa: 'continue-editing-banner-button', noLink: true, onClick: () => {
                         if (editFormClicked != null) {
                             editFormClicked(latestApplicationInProgress);
                         }

package/dist/src/components/molecules/ContinueEditingBanner/ContinueEditingBanner.tsx

@@ -10,7 +10,8 @@ export const ContinueEditingBanner: React.FC<ContinueEditingBannerProps> = ({
   editFormClicked,
   tagLine,
   title,
-  token
+  token,
+  buttonLabel
 }) => {
   if (latestApplicationInProgress == null || token.length === 0) {
     return null
@@ -22,7 +23,7 @@ export const ContinueEditingBanner: React.FC<ContinueEditingBannerProps> = ({
         <span className='continue-banner__title'>{title}</span>
         <span className='continue-banner__tagline'>{tagLine}</span>
         <Button
-          label='Complete It Today'
+          label={buttonLabel}
           dataQa='continue-editing-banner-button'
           noLink
           onClick={() => {

package/dist/src/components/molecules/ContinueEditingBanner/ContinueEditingBannerProps.types.d.ts

@@ -16,5 +16,6 @@ export interface ContinueEditingBannerProps {
     token: string;
     tagLine: string;
     title: string;
+    buttonLabel: string;
 }
 export {};

package/dist/src/components/molecules/ContinueEditingBanner/ContinueEditingBannerProps.types.ts

@@ -18,4 +18,5 @@ export interface ContinueEditingBannerProps {
   token: string
   tagLine: string
   title: string
+  buttonLabel: string
 }

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

@@ -18,18 +18,18 @@ const CountDownMessage = ({ noImg = false, text, time, centered = false }) => {
     };
     useEffect(() => {
         window.removeEventListener('scroll', handleScroll);
-        if (isMobile || isTablet) {
+        if (isTablet) {
             window.addEventListener('scroll', handleScroll);
         }
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
-    }, [isMobile, isTablet]);
+    }, [isTablet]);
     const messageInformationHtml = _jsx(MessageInformation, { noImg: noImg, text: text, time: time, centered: centered });
     const classCountDownMessageFixed = classNames({
         'count-down-message-fixed': true,
-        'count-down-message-fixed--show': scrollSuperateCountDown
+        'count-down-message-fixed--show': scrollSuperateCountDown || isMobile
     });
-    return (_jsxs(_Fragment, { children: [_jsx(CountDownMessageStyled, { className: `count-down-message ${noImg && 'extra-margin'}`, ref: countDownRef, children: messageInformationHtml }), _jsx(CountDownMessageStyled, { className: classCountDownMessageFixed, children: messageInformationHtml })] }));
+    return (_jsxs(_Fragment, { children: [!isMobile && (_jsx(CountDownMessageStyled, { className: `count-down-message ${noImg && 'extra-margin'}`, ref: countDownRef, children: messageInformationHtml })), _jsx(CountDownMessageStyled, { className: classCountDownMessageFixed, children: messageInformationHtml })] }));
 };
 export default CountDownMessage;

package/dist/src/components/molecules/CountDownMessage/CountDownMessage.tsx

@@ -24,27 +24,29 @@ const CountDownMessage: FC<CountDownMessageProps> = ({ noImg = false, text, time
   useEffect(() => {
     window.removeEventListener('scroll', handleScroll)
 
-    if (isMobile || isTablet) {
+    if (isTablet) {
       window.addEventListener('scroll', handleScroll)
     }
 
     return () => {
       window.removeEventListener('scroll', handleScroll)
     }
-  }, [isMobile, isTablet])
+  }, [isTablet])
 
   const messageInformationHtml = <MessageInformation noImg={noImg} text={text} time={time} centered={centered} />
 
   const classCountDownMessageFixed = classNames({
     'count-down-message-fixed': true,
-    'count-down-message-fixed--show': scrollSuperateCountDown
+    'count-down-message-fixed--show': scrollSuperateCountDown || isMobile
   })
 
   return (
     <>
-      <CountDownMessageStyled className={`count-down-message ${noImg && 'extra-margin'}`} ref={countDownRef}>
-        {messageInformationHtml}
-      </CountDownMessageStyled>
+      {!isMobile && (
+        <CountDownMessageStyled className={`count-down-message ${noImg && 'extra-margin'}`} ref={countDownRef}>
+          {messageInformationHtml}
+        </CountDownMessageStyled>
+      )}
 
       <CountDownMessageStyled className={classCountDownMessageFixed}>{messageInformationHtml}</CountDownMessageStyled>
     </>

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

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms';
 import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled';
 import { stringSlugify } from '../../../utils/stringSlugify';
-const RatafiaSubscriptionCard = ({ cardStyle, iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, linkText }) => {
+const RatafiaSubscriptionCard = ({ cardStyle = 'primary', iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, handleClick }) => {
     if (!title)
         return null;
     const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary';
     const renderFeatures = (features, className) => features.map((feature) => (_jsxs("div", { className: `ratafia-card__feature ${className ?? ''}`, children: [feature.image?.url && _jsx(IconSvgURLWithThemeColor, { url: feature.image.url, height: '16', width: '16' }), _jsx(RichTextStrapi, { html: feature.title })] }, feature.title)));
-    return (_jsxs(RatafiaSubscriptionCardStyled, { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ratafia-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: 'ratafia-card-button', givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, link: linkText ?? '#' }) }))] }));
+    return (_jsxs(RatafiaSubscriptionCardStyled, { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ratafia-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: 'ratafia-card-button', givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, noLink: true, onClick: handleClick }) }))] }));
 };
 export default RatafiaSubscriptionCard;

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.tsx

@@ -6,14 +6,14 @@ import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled'
 import { stringSlugify } from '../../../utils/stringSlugify'
 
 const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
-  cardStyle,
+  cardStyle = 'primary',
   iconTitle,
   title,
   priceText,
   mainFeatures,
   AIFeatures,
   buttonText,
-  linkText
+  handleClick
 }) => {
   if (!title) return null
   const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary'
@@ -48,7 +48,8 @@ const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
             givenClass='ratafia-card__button'
             color={buttonStyle}
             label={buttonText}
-            link={linkText ?? '#'}
+            noLink
+            onClick={handleClick}
           />
         </div>
       )}

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types.d.ts

@@ -6,7 +6,7 @@ export interface RatafiaSubscriptionCardProps {
     mainFeatures?: BenefitProps[];
     AIFeatures?: BenefitProps[];
     buttonText?: string;
-    linkText?: string;
+    handleClick?: () => void;
 }
 interface IconTitleProps {
     name?: string;

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types.ts

@@ -6,7 +6,7 @@ export interface RatafiaSubscriptionCardProps {
   mainFeatures?: BenefitProps[]
   AIFeatures?: BenefitProps[]
   buttonText?: string
-  linkText?: string
+  handleClick?: () => void
 }
 
 interface IconTitleProps {

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

@@ -32,7 +32,7 @@ const TextInput = React.forwardRef(({ label, value, validate = true, isValidGrou
         }
         return (_jsx(Input, { name: name ?? '', type: type, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }));
     };
-    return (_jsxs("div", { className: classnames, children: [children !== null && _jsx("div", { className: 'e-text__children', children: children }), _jsx(TextInputTooltip, { tooltip: tooltip }), _jsx(TextInputMessage, { errorMessage: errorMessage, validate: validate }), renderInput(), _jsx(TextInputLabel, { label: label, htmlFor: name, notes: notes, dialogMenuTip: dialogMenuTip })] }));
+    return (_jsxs("div", { className: classnames, children: [Boolean(children) && _jsx("div", { className: 'e-text__children', children: children }), _jsx(TextInputTooltip, { tooltip: tooltip }), _jsx(TextInputMessage, { errorMessage: errorMessage, validate: validate }), renderInput(), _jsx(TextInputLabel, { label: label, htmlFor: name, notes: notes, dialogMenuTip: dialogMenuTip })] }));
 });
 export default TextInput;
 TextInput.displayName = 'TextInput';

package/dist/src/components/molecules/TextInput/TextInput.scss

@@ -77,7 +77,7 @@
   }
 
   &__inner {
-    margin-bottom: 0.6rem;
+    margin-bottom: 0.5rem;
   }
 
   &__children {

package/dist/src/components/molecules/TextInput/TextInput.tsx

@@ -97,7 +97,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 
     return (
       <div className={classnames}>
-        {children !== null && <div className='e-text__children'>{children}</div>}
+        {Boolean(children) && <div className='e-text__children'>{children}</div>}
         <TextInputTooltip tooltip={tooltip} />
         <TextInputMessage errorMessage={errorMessage} validate={validate} />
         {renderInput()}

package/dist/src/components/molecules/TextInput/TextInputLabel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DialogMenuIcon } from '../../atoms';
 export const TextInputLabel = ({ label, htmlFor, notes, dialogMenuTip = '' }) => {
-    if (label === undefined && notes === undefined)
+    if (!label && !notes)
         return null;
     return (_jsxs("div", { className: 'e-text__inner', children: [_jsxs("label", { htmlFor: htmlFor, className: dialogMenuTip.length > 0 ? 'form-group__label-icon' : 'form-group__label', children: [label, dialogMenuTip.length > 0 ? _jsx(DialogMenuIcon, { content: dialogMenuTip }) : null] }), _jsx("p", { className: 'e-text__inner__notes', children: notes })] }));
 };

package/dist/src/components/molecules/TextInput/TextInputLabel.tsx

@@ -12,7 +12,7 @@ interface TextInputLabelProps {
 }
 
 export const TextInputLabel: FC<TextInputLabelProps> = ({ label, htmlFor, notes, dialogMenuTip = '' }) => {
-  if (label === undefined && notes === undefined) return null
+  if (!label && !notes) return null
 
   return (
     <div className='e-text__inner'>

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Tag } from '../../atoms';
 import { CardFunctionalityStyled } from './CardFunctionality.styled';
-export const CardFunctionality = ({ icon, title, text, tags, cta }) => {
+export const CardFunctionality = ({ icon, title, text, tags, cta, isHidden = false }) => {
+    if (isHidden)
+        return null;
     return (_jsxs(CardFunctionalityStyled, { children: [_jsxs("div", { className: 'content-tags', children: [_jsxs("div", { className: 'content', children: [_jsxs("div", { className: 'header', children: [_jsx("div", { className: 'icon', children: icon }), _jsx("p", { className: 'title', children: title })] }), _jsx("div", { title: text, className: 'text', children: text })] }), _jsx("div", { className: 'tags', children: tags.map((tag) => (_jsx(Tag, { ...tag }, tag.id))) })] }), _jsx(Button, { ...cta, givenClass: 'cta-card' })] }));
 };

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.styled.js

@@ -1,3 +1,4 @@
+import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const CardFunctionalityStyled = styled.article `
   border-radius: var(--global-border-radius);
@@ -6,6 +7,10 @@ export const CardFunctionalityStyled = styled.article `
   flex-direction: column;
   gap: var(--global-gap);
   padding: 1em;
+  width: 100%;
+  @media ${device.laptop} {
+    width: 50%;
+  }
 
   .content-tags {
     display: flex;

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.styled.ts

@@ -1,3 +1,4 @@
+import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const CardFunctionalityStyled = styled.article`
@@ -7,6 +8,10 @@ export const CardFunctionalityStyled = styled.article`
   flex-direction: column;
   gap: var(--global-gap);
   padding: 1em;
+  width: 100%;
+  @media ${device.laptop} {
+    width: 50%;
+  }
 
   .content-tags {
     display: flex;

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.tsx

@@ -4,7 +4,15 @@ import { Button, Tag } from '../../atoms'
 import { type CardFunctionalityProps } from './CardFunctionalityProps'
 import { CardFunctionalityStyled } from './CardFunctionality.styled'
 
-export const CardFunctionality: React.FC<CardFunctionalityProps> = ({ icon, title, text, tags, cta }) => {
+export const CardFunctionality: React.FC<CardFunctionalityProps> = ({
+  icon,
+  title,
+  text,
+  tags,
+  cta,
+  isHidden = false
+}) => {
+  if (isHidden) return null
   return (
     <CardFunctionalityStyled>
       <div className='content-tags'>

package/dist/src/components/organisms/CardFunctionality/CardFunctionalityProps.d.ts

@@ -6,4 +6,5 @@ export interface CardFunctionalityProps {
     tags: TagProps[];
     cta: ButtonProps;
     id: string;
+    isHidden: boolean;
 }

package/dist/src/components/organisms/CardFunctionality/CardFunctionalityProps.ts

@@ -7,4 +7,5 @@ export interface CardFunctionalityProps {
   tags: TagProps[]
   cta: ButtonProps
   id: string
+  isHidden: boolean
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules';
 import { Button } from '../../atoms';
 import { ContactJumbotronStyled } from './ContactJumbotron.styled';
-export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, children, isJonSnow = false }) => {
-    return (_jsxs(ContactJumbotronStyled, { children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: 'Visit FAQ Page', link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
+export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, visitFaqPageLabel, children, isJonSnow = false }) => {
+    return (_jsxs(ContactJumbotronStyled, { children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
 };

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.tsx

@@ -9,6 +9,7 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
   phoneBoxDesktopProps,
   emailContactBoxProps,
   faqsTitle,
+  visitFaqPageLabel,
   children,
   isJonSnow = false
 }) => {
@@ -21,7 +22,7 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
         <Button
           givenClass='faq-button'
           color='secondary'
-          label={'Visit FAQ Page'}
+          label={visitFaqPageLabel}
           link={'/faqs/'}
           dataQa={'visitFaq'}
         />

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.d.ts

@@ -4,6 +4,7 @@ export interface ContactJumbotronProps {
     phoneBoxDesktopProps: PhoneContactBoxDesktopProps;
     emailContactBoxProps: EmailContactBoxProps;
     faqsTitle: string;
+    visitFaqPageLabel: string;
     children: React.ReactNode;
     isJonSnow?: boolean;
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.ts

@@ -6,6 +6,7 @@ export interface ContactJumbotronProps {
   phoneBoxDesktopProps: PhoneContactBoxDesktopProps
   emailContactBoxProps: EmailContactBoxProps
   faqsTitle: string
+  visitFaqPageLabel: string
   children: React.ReactNode
   isJonSnow?: boolean
 }

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, RichTextStrapi } from '../../atoms';
 import { CookiePolicyBarStyled } from './CookiePolicyBar.styled';
-export const CookiePolicyBar = ({ clickFunc, text }) => {
-    return (_jsxs(CookiePolicyBarStyled, { children: [_jsx(RichTextStrapi, { html: text, className: 'cookie-policy-bar__text sans-serif --extra-small' }), _jsx(Button, { dataQa: '', givenClass: 'accept-cookies-button', noLink: true, color: 'primary3', label: 'Accept Cookies', onClick: clickFunc })] }));
+export const CookiePolicyBar = ({ clickFunc, text, buttonText }) => {
+    return (_jsxs(CookiePolicyBarStyled, { children: [_jsx(RichTextStrapi, { html: text, className: 'cookie-policy-bar__text sans-serif --extra-small' }), _jsx(Button, { dataQa: '', givenClass: 'accept-cookies-button', noLink: true, color: 'primary3', label: buttonText, onClick: clickFunc })] }));
 };

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBar.tsx

@@ -4,7 +4,7 @@ import { Button, RichTextStrapi } from '../../atoms'
 import { type CookiePolicyBarProps } from './CookiePolicyBarProps'
 import { CookiePolicyBarStyled } from './CookiePolicyBar.styled'
 
-export const CookiePolicyBar: FC<CookiePolicyBarProps> = ({ clickFunc, text }) => {
+export const CookiePolicyBar: FC<CookiePolicyBarProps> = ({ clickFunc, text, buttonText }) => {
   return (
     <CookiePolicyBarStyled>
       <RichTextStrapi html={text} className='cookie-policy-bar__text sans-serif --extra-small' />
@@ -13,7 +13,7 @@ export const CookiePolicyBar: FC<CookiePolicyBarProps> = ({ clickFunc, text }) =
         givenClass='accept-cookies-button'
         noLink
         color='primary3'
-        label={'Accept Cookies'}
+        label={buttonText}
         onClick={clickFunc}
       />
     </CookiePolicyBarStyled>

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBarProps.d.ts

@@ -1,4 +1,5 @@
 export interface CookiePolicyBarProps {
     clickFunc: () => void;
     text: string;
+    buttonText: string;
 }

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBarProps.ts

@@ -1,4 +1,5 @@
 export interface CookiePolicyBarProps {
   clickFunc: () => void
   text: string
+  buttonText: string
 }

package/dist/src/components/pages/ErrorRatafiaPage/ErrorRatafiaPage.styled.js

@@ -14,6 +14,7 @@ export const ErrorRatafiaPageStyled = styled.div `
     &__button {
       display: block;
       width: 100%;
+      height: auto;
       &:first-child {
         margin-bottom: 1rem;
       }

package/dist/src/components/pages/ErrorRatafiaPage/ErrorRatafiaPage.styled.ts

@@ -15,6 +15,7 @@ export const ErrorRatafiaPageStyled = styled.div`
     &__button {
       display: block;
       width: 100%;
+      height: auto;
       &:first-child {
         margin-bottom: 1rem;
       }

package/dist/src/components/sections/FunctionalityCardsSection/FunctionalityCardsSection.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CardFunctionality } from '../../organisms';
 import { FunctionalityCardsSectionStyled } from './FunctionalityCardsSection.styled';
-// import './FunctionalityCardsSection.scss'
 export const FunctionalityCardsSection = ({ cards = [] }) => {
     if (cards.length === 0)
         return null;

package/dist/src/components/sections/FunctionalityCardsSection/FunctionalityCardsSection.styled.js

@@ -3,12 +3,10 @@ import styled from 'styled-components';
 export const FunctionalityCardsSectionStyled = styled.section `
   display: flex;
   flex-direction: column;
-  gap: $global-gap;
-  margin-bottom: 2rem;
+  gap: var(--global-gap);
   width: 100%;
 
   @media ${device.laptop} {
     flex-direction: row;
-    width: 50%;
   }
 `;

package/dist/src/components/sections/FunctionalityCardsSection/FunctionalityCardsSection.styled.ts

@@ -4,12 +4,10 @@ import styled from 'styled-components'
 export const FunctionalityCardsSectionStyled = styled.section`
   display: flex;
   flex-direction: column;
-  gap: $global-gap;
-  margin-bottom: 2rem;
+  gap: var(--global-gap);
   width: 100%;
 
   @media ${device.laptop} {
     flex-direction: row;
-    width: 50%;
   }
 `

package/dist/src/components/sections/FunctionalityCardsSection/FunctionalityCardsSection.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { CardFunctionality } from '../../organisms'
 import { type FunctionalityCardsSectionProps } from './FunctionalityCardsSectionProps'
 import { FunctionalityCardsSectionStyled } from './FunctionalityCardsSection.styled'
-// import './FunctionalityCardsSection.scss'
 
 export const FunctionalityCardsSection: React.FC<FunctionalityCardsSectionProps> = ({ cards = [] }) => {
   if (cards.length === 0) return null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.38.0",
+  "version": "5.39.0",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",