@npm_leadtech/legal-lib-components 5.16.10 → 5.17.0

package/dist/css/styles.css

@@ -2225,7 +2225,7 @@ h2.react-datepicker__current-month {
 .e-text {
   display: flex;
   flex-direction: column-reverse;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   position: relative;
 }
 .e-text input {

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

@@ -16,6 +16,6 @@ export const DisclaimerRatafia = ({ icon, text, ctaTextShowDisclaimer, ctaTextCl
             ctaTextCloseDisclaimer.onClick();
     };
     const existLegalAdviceText = Boolean(legalAdviceText);
-    return (_jsxs(DisclaimerRatafiaStyled, { className: 'disclaimer-ratafia', children: [_jsxs("div", { className: 'disclaimer-ratafia__text-desktop', children: [_jsxs("div", { className: 'disclaimer-ratafia__text', children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__text__text', children: text })] }), existLegalAdviceText && (_jsx("div", { className: 'disclaimer-ratafia__legal-advice', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: legalAdviceText }) })), _jsx("div", { className: 'disclaimer-ratafia__copyright', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: copyrightText }) })] }), _jsxs("div", { className: 'disclaimer-ratafia__text-mobile', children: [_jsx("div", { className: 'disclaimer-ratafia__text-mobile-text', children: _jsxs("button", { "data-qa": ctaTextShowDisclaimer.dataQa, className: 'sans-serif --small disclaimer-ratafia__text__text', onClick: handleShowDisclaimer, children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), ctaTextShowDisclaimer.text, _jsx("div", { className: 'disclaimer-ratafia__text__arrow', children: _jsx(ChevronRight, {}) })] }) }), disclaimer && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'disclaimer-ratafia__disclaimer-background' }), _jsxs("div", { className: 'disclaimer-ratafia__disclaimer-fixed', children: [_jsx("p", { className: 'disclaimer-ratafia__disclaimer-fixed__title', children: ctaTextShowDisclaimer.text }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__subTitle', children: text }), _jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: copyrightText }), _jsx(Button, { color: 'primary', label: ctaTextCloseDisclaimer.text, givenClass: 'disclaimer-ratafia__disclaimer-fixed__cta', onClick: handleCloseDisclaimer, noLink: true, dataQa: ctaTextCloseDisclaimer.dataQa })] })] }))] })] }));
+    return (_jsxs(DisclaimerRatafiaStyled, { className: 'disclaimer-ratafia', children: [_jsxs("div", { className: 'disclaimer-ratafia__text-desktop', children: [_jsxs("div", { className: 'disclaimer-ratafia__text', children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__text__text', children: text })] }), existLegalAdviceText && (_jsx("div", { className: 'disclaimer-ratafia__legal-advice', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: legalAdviceText }) })), _jsx("div", { className: 'disclaimer-ratafia__copyright', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: copyrightText }) })] }), _jsxs("div", { className: 'disclaimer-ratafia__text-mobile', children: [_jsx("div", { className: 'disclaimer-ratafia__text-mobile-text', children: _jsxs("button", { "data-qa": ctaTextShowDisclaimer.dataQa, className: 'sans-serif --small disclaimer-ratafia__text__text', onClick: handleShowDisclaimer, children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), ctaTextShowDisclaimer.text, _jsx("div", { className: 'disclaimer-ratafia__text__arrow', children: _jsx(ChevronRight, {}) })] }) }), disclaimer && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'disclaimer-ratafia__disclaimer-background' }), _jsxs("div", { className: 'disclaimer-ratafia__disclaimer-fixed', children: [_jsx("p", { className: 'disclaimer-ratafia__disclaimer-fixed__title', children: ctaTextShowDisclaimer.text }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__subTitle', children: text }), existLegalAdviceText && (_jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: legalAdviceText })), _jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: copyrightText }), _jsx(Button, { color: 'primary', label: ctaTextCloseDisclaimer.text, givenClass: 'disclaimer-ratafia__disclaimer-fixed__cta', onClick: handleCloseDisclaimer, noLink: true, dataQa: ctaTextCloseDisclaimer.dataQa })] })] }))] })] }));
 };
 export default DisclaimerRatafia;

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

@@ -65,6 +65,9 @@ export const DisclaimerRatafia: React.FC<DisclaimerRatafiaProps> = ({
             <div className='disclaimer-ratafia__disclaimer-fixed'>
               <p className='disclaimer-ratafia__disclaimer-fixed__title'>{ctaTextShowDisclaimer.text}</p>
               <p className='sans-serif --small disclaimer-ratafia__disclaimer-fixed__subTitle'>{text}</p>
+              {existLegalAdviceText && (
+                <div className='sans-serif --small disclaimer-ratafia__disclaimer-fixed__text'>{legalAdviceText}</div>
+              )}
               <div className='sans-serif --small disclaimer-ratafia__disclaimer-fixed__text'>{copyrightText}</div>
               <Button
                 color='primary'

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GoogleButtonStyled } from './GoogleButton.styled';
 import logoGoogle from '../../../../images/svg/logo-google.svg';
-const GoogleButton = ({ onClick, label = 'Log In with Google', dataQa = 'google_sign_in' }) => {
-    return (_jsxs(GoogleButtonStyled, { type: 'button', className: 'google-button', onClick: onClick, "data-qa": dataQa, children: [_jsx("img", { className: 'google-logo', src: logoGoogle, alt: '' }), _jsx("span", { children: label })] }));
+const GoogleButton = ({ onClick, label = 'Log In with Google' }) => {
+    return (_jsxs(GoogleButtonStyled, { type: 'button', className: 'google-button', onClick: onClick, children: [_jsx("img", { className: 'google-logo', src: logoGoogle, alt: '' }), _jsx("span", { children: label })] }));
 };
 export default GoogleButton;

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

@@ -4,9 +4,9 @@ import { type GoogleButtonProps } from './GoogleButtonProps.types'
 import { GoogleButtonStyled } from './GoogleButton.styled'
 import logoGoogle from '../../../../images/svg/logo-google.svg'
 
-const GoogleButton: FC<GoogleButtonProps> = ({ onClick, label = 'Log In with Google', dataQa = 'google_sign_in' }) => {
+const GoogleButton: FC<GoogleButtonProps> = ({ onClick, label = 'Log In with Google' }) => {
   return (
-    <GoogleButtonStyled type='button' className='google-button' onClick={onClick} data-qa={dataQa}>
+    <GoogleButtonStyled type='button' className='google-button' onClick={onClick}>
       <img className='google-logo' src={logoGoogle} alt=''></img>
       <span>{label}</span>
     </GoogleButtonStyled>

package/dist/src/components/atoms/GoogleButton/GoogleButtonProps.types.d.ts

@@ -1,5 +1,4 @@
 export interface GoogleButtonProps {
     label?: string;
     onClick?: () => void;
-    dataQa?: string;
 }

package/dist/src/components/atoms/GoogleButton/GoogleButtonProps.types.ts

@@ -1,5 +1,4 @@
 export interface GoogleButtonProps {
   label?: string
   onClick?: () => void
-  dataQa?: string
 }

package/dist/src/components/atoms/MenuItems/MenuItemProps.types.d.ts

@@ -1,4 +1,5 @@
 export interface MenuItemProps {
+    className?: string;
     spacing?: boolean;
     hasBullets?: boolean;
     initialActiveContent?: string;

package/dist/src/components/atoms/MenuItems/MenuItemProps.types.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export interface MenuItemProps {
+  className?: string
   spacing?: boolean
   hasBullets?: boolean
   initialActiveContent?: string

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

@@ -6,7 +6,7 @@ export const SearchSelectStyled = styled.div `
   .e-searchselect {
     display: flex;
     flex-direction: column-reverse;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     position: relative;
 
     @media ${device.laptop} {

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

@@ -7,7 +7,7 @@ export const SearchSelectStyled = styled.div`
   .e-searchselect {
     display: flex;
     flex-direction: column-reverse;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     position: relative;
 
     @media ${device.laptop} {

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

@@ -9,6 +9,7 @@ const BottomOverlay = ({ givenClass, header, body, open = false, onClose, footer
     const overlayBackground = useRef(null);
     const overlayMessage = useRef(null);
     useEffect(() => {
+        handleBodyScroll(open);
         if (open) {
             const backgroundElement = overlayBackground.current;
             backgroundElement.addEventListener('mousedown', handleCloseModal);
@@ -17,6 +18,17 @@ const BottomOverlay = ({ givenClass, header, body, open = false, onClose, footer
             };
         }
     }, [open]);
+    const handleBodyScroll = (disableScroll) => {
+        if (disableScroll) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.position = 'fixed';
+        }
+        else {
+            document.body.style.overflow = 'unset';
+            document.body.style.position = 'relative';
+            document.body.style.width = '100%';
+        }
+    };
     const handleCloseModal = (event) => {
         if (onClose != null)
             onClose();

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

@@ -12,6 +12,7 @@ const BottomOverlay: FC<BottomOverlayProps> = ({ givenClass, header, body, open
   const overlayMessage = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
+    handleBodyScroll(open)
     if (open) {
       const backgroundElement = overlayBackground.current as HTMLElement
       backgroundElement.addEventListener('mousedown', handleCloseModal)
@@ -21,6 +22,17 @@ const BottomOverlay: FC<BottomOverlayProps> = ({ givenClass, header, body, open
     }
   }, [open])
 
+  const handleBodyScroll = (disableScroll: boolean): void => {
+    if (disableScroll) {
+      document.body.style.overflow = 'hidden'
+      document.body.style.position = 'fixed'
+    } else {
+      document.body.style.overflow = 'unset'
+      document.body.style.position = 'relative'
+      document.body.style.width = '100%'
+    }
+  }
+
   const handleCloseModal = (event: MouseEvent): void => {
     if (onClose != null) onClose()
   }

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

@@ -1,10 +1,11 @@
+import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const RatafiaSubscriptionCardStyled = styled.div `
   display: flex;
   flex-flow: column nowrap;
   flex: 1;
   gap: 0.5rem;
-  min-width: 320px;
+  min-width: 270px;
   padding: 1rem;
   border-radius: var(--global-border-radius);
 
@@ -90,5 +91,11 @@ export const RatafiaSubscriptionCardStyled = styled.div `
       display: flex;
       margin-top: 1.5rem;
     }
+
+    @media ${device.mobile} {
+      &__button {
+        flex: 1;
+      }
+    }
   }
 `;

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

@@ -1,3 +1,4 @@
+import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const RatafiaSubscriptionCardStyled = styled.div`
@@ -5,7 +6,7 @@ export const RatafiaSubscriptionCardStyled = styled.div`
   flex-flow: column nowrap;
   flex: 1;
   gap: 0.5rem;
-  min-width: 320px;
+  min-width: 270px;
   padding: 1rem;
   border-radius: var(--global-border-radius);
 
@@ -91,5 +92,11 @@ export const RatafiaSubscriptionCardStyled = styled.div`
       display: flex;
       margin-top: 1.5rem;
     }
+
+    @media ${device.mobile} {
+      &__button {
+        flex: 1;
+      }
+    }
   }
 `

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

@@ -7,7 +7,7 @@
 .e-text {
   display: flex;
   flex-direction: column-reverse;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   position: relative;
 
   input {

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox } from '../../atoms';
-import { TextInput } from '../../molecules';
 import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled';
-const LoginRatafiaContent = ({ title, email, policy }) => {
-    return (_jsxs(LoginRatafiaContentStyled, { children: [_jsx("h2", { className: 'login-ratafia-content__title', children: title }), _jsx("div", { className: 'login-ratafia-content__email', children: _jsx(TextInput, { ...email }) }), _jsx("div", { className: 'login-ratafia-content__policy', children: _jsx(Checkbox, { ...policy }) })] }));
+import { TextInput } from '../../molecules';
+const LoginRatafiaContent = ({ title, email }) => {
+    return (_jsxs(LoginRatafiaContentStyled, { children: [_jsx("h2", { className: 'login-ratafia-content__title', children: title }), _jsx("div", { className: 'login-ratafia-content__email', children: _jsx(TextInput, { ...email }) })] }));
 };
 export default LoginRatafiaContent;

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

@@ -1,4 +1,3 @@
-import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const LoginRatafiaContentStyled = styled.div `
   width: 100%;
@@ -12,10 +11,4 @@ export const LoginRatafiaContentStyled = styled.div `
       margin-bottom: 0.5rem;
     }
   }
-  .login-ratafia-content__policy {
-    margin-top: 1rem;
-    @media ${device['portrait-tablets']} {
-      display: none;
-    }
-  }
 `;

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

@@ -1,4 +1,3 @@
-import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const LoginRatafiaContentStyled = styled.div`
@@ -13,10 +12,4 @@ export const LoginRatafiaContentStyled = styled.div`
       margin-bottom: 0.5rem;
     }
   }
-  .login-ratafia-content__policy {
-    margin-top: 1rem;
-    @media ${device['portrait-tablets']} {
-      display: none;
-    }
-  }
 `

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

@@ -1,22 +1,16 @@
 import React, { type FC } from 'react'
 
 import { type LoginRatafiaContentProps } from './LoginRatafiaContentProps.types'
-
-import { Checkbox } from '../../atoms'
-import { TextInput } from '../../molecules'
-
 import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled'
+import { TextInput } from '../../molecules'
 
-const LoginRatafiaContent: FC<LoginRatafiaContentProps> = ({ title, email, policy }) => {
+const LoginRatafiaContent: FC<LoginRatafiaContentProps> = ({ title, email }) => {
   return (
     <LoginRatafiaContentStyled>
       <h2 className='login-ratafia-content__title'>{title}</h2>
       <div className='login-ratafia-content__email'>
         <TextInput {...email} />
       </div>
-      <div className='login-ratafia-content__policy'>
-        <Checkbox {...policy} />
-      </div>
     </LoginRatafiaContentStyled>
   )
 }

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

@@ -1,24 +1,15 @@
-import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const LoginRatafiaPageStyled = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  gap: 1.5rem;
   background-color: var(--neutral-neutral-6);
 
-  .login-ratafia-page__ctas {
+  &__ctas {
     text-align: center;
     &__button {
       display: block;
       width: 100%;
-      @media ${device['portrait-tablets']} {
-        width: 12.5rem;
-      }
       margin-bottom: 1rem;
     }
+
     &__signIn {
       &__button {
         background: none;

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

@@ -1,25 +1,16 @@
-import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const LoginRatafiaPageStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  gap: 1.5rem;
   background-color: var(--neutral-neutral-6);
 
-  .login-ratafia-page__ctas {
+  &__ctas {
     text-align: center;
     &__button {
       display: block;
       width: 100%;
-      @media ${device['portrait-tablets']} {
-        width: 12.5rem;
-      }
       margin-bottom: 1rem;
     }
+
     &__signIn {
       &__button {
         background: none;

package/package.json

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