@npm_leadtech/legal-lib-components 5.9.4 → 5.9.5

package/dist/src/components/organisms/ListStepsGetForm/{ListStepsGetForm.styled.ts → ListStepsGetForm.scss}

@@ -1,12 +1,12 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const ListStepsGetFormStyled = styled.div`
+.homeSteps__container {
   transform: translateY(0%);
-  @media ${device['portrait-tablets']} {
+  @include portrait-tablets {
     transform: translateY(0%);
   }
-  @media ${device['landscape-tablets']} {
+  @include landscape-tablets {
     transform: translateY(0%);
   }
 
@@ -26,10 +26,10 @@ export const ListStepsGetFormStyled = styled.div`
       flex-flow: row wrap;
       padding: 0 1rem;
 
-      @media ${device.laptop} {
+      @include laptop {
         flex-flow: row nowrap;
         padding: 0;
       }
     }
   }
-`
+}

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

@@ -1,14 +1,14 @@
 import React, { type FC } from 'react'
 
 import { type ListStepsGetFormProps } from './ListStepsGetFormProps.types'
-import { ListStepsGetFormStyled } from './ListStepsGetForm.styled'
 import { StepGetForm } from '../../molecules'
+// import './ListStepsGetForm.scss'
 
 const ListStepsGetForm: FC<ListStepsGetFormProps> = ({ steps = [] }) => {
   if (steps.length === 0) return null
 
   return (
-    <ListStepsGetFormStyled>
+    <div className='homeSteps__container'>
       <div className='homeSteps wrapper'>
         <div className='homeStepsItemsContainer'>
           {steps.map((step) => (
@@ -16,7 +16,7 @@ const ListStepsGetForm: FC<ListStepsGetFormProps> = ({ steps = [] }) => {
           ))}
         </div>
       </div>
-    </ListStepsGetFormStyled>
+    </div>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled';
 import { TextInput } from '../../molecules';
+// import './LoginRatafiaContent.scss'
 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 }) })] }));
+    return (_jsxs("div", { className: 'login-ratafia-content', 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.scss

@@ -0,0 +1,16 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries';
+
+.login-ratafia-content {
+  width: 100%;
+  &__title {
+    font-size: 1rem;
+    color: var(--neutral-neutral-2);
+    padding-bottom: 1rem;
+  }
+  &__email {
+    .e-text {
+      margin-bottom: 0.5rem;
+    }
+  }
+}

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

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

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

@@ -1,14 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
 import { Button, SidemenuTab } from '../../atoms';
-import { MobileBottomBarStyled } from './MobileBottomBar.styled';
-const MobileBottomBar = ({ children, list }) => {
+// import './MobileBottomBar.scss'
+const MobileBottomBar = ({ children, list, active }) => {
     if (children === undefined && list?.length === 0)
         return null;
+    const classnames = classNames('mobile-bottom-bar', {
+        'mobile-bottom-bar--active': active
+    });
     if (children !== undefined)
-        return _jsx(MobileBottomBarStyled, { children: children });
+        return _jsx("div", { className: classnames, children: children });
     if (list === undefined)
         return null;
-    return (_jsx(MobileBottomBarStyled, { children: list.map((tab, index) => {
+    return (_jsx("div", { className: classnames, children: list.map((tab, index) => {
             if (tab.type === 'button') {
                 return (_jsx(Button, { noLink: true, color: 'primary', ...tab, children: tab.image }, index));
             }

package/dist/src/components/organisms/MobileBottomBar/{MobileBottomBar.styled.ts → MobileBottomBar.scss}

@@ -1,7 +1,7 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const MobileBottomBarStyled = styled.div`
+.mobile-bottom-bar {
   background: var(--others-white);
   position: fixed;
   display: flex;
@@ -13,11 +13,11 @@ export const MobileBottomBarStyled = styled.div`
   box-shadow: var(--box-shadow-container);
   z-index: 1;
 
-  @media ${device['portrait-tablets']} {
+  @include portrait-tablets {
     display: none;
   }
 
-  .mobile-bottom-bar--active {
+  &--active {
     display: flex;
   }
 
@@ -43,4 +43,4 @@ export const MobileBottomBarStyled = styled.div`
       margin: 0;
     }
   }
-`
+}

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

@@ -1,18 +1,23 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import React, { type FC } from 'react'
+import classNames from 'classnames'
 
 import { Button, SidemenuTab } from '../../atoms'
 import { type MobileBottomBarProps } from './MobileBottomBarProps.types'
-import { MobileBottomBarStyled } from './MobileBottomBar.styled'
+// import './MobileBottomBar.scss'
 
-const MobileBottomBar: FC<MobileBottomBarProps> = ({ children, list }) => {
+const MobileBottomBar: FC<MobileBottomBarProps> = ({ children, list, active }) => {
   if (children === undefined && list?.length === 0) return null
 
-  if (children !== undefined) return <MobileBottomBarStyled>{children}</MobileBottomBarStyled>
+  const classnames = classNames('mobile-bottom-bar', {
+    'mobile-bottom-bar--active': active
+  })
+
+  if (children !== undefined) return <div className={classnames}>{children}</div>
   if (list === undefined) return null
 
   return (
-    <MobileBottomBarStyled>
+    <div className={classnames}>
       {list.map((tab, index) => {
         if (tab.type === 'button') {
           return (
@@ -23,7 +28,7 @@ const MobileBottomBar: FC<MobileBottomBarProps> = ({ children, list }) => {
         }
         return <SidemenuTab key={index} mobile={true} {...tab} />
       })}
-    </MobileBottomBarStyled>
+    </div>
   )
 }
 

package/dist/src/components/organisms/MobileBottomBar/MobileBottomBarProps.types.d.ts

@@ -1,4 +1,5 @@
 export interface MobileBottomBarProps {
+    active?: boolean;
     list?: any[];
     children?: React.ReactNode;
 }

package/dist/src/components/organisms/MobileBottomBar/MobileBottomBarProps.types.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export interface MobileBottomBarProps {
+  active?: boolean
   list?: any[]
   children?: React.ReactNode
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StepRatafiaCardList } from '../../molecules';
-import { StepsRatafiaContentStyled } from './StepsRatafiaContent.styled';
+// import './StepsRatafiaContent.scss'
 const StepsRatafiaContent = ({ title, steps }) => {
-    return (_jsxs(StepsRatafiaContentStyled, { children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight steps-ratafia-content__title', children: title }), _jsx(StepRatafiaCardList, { steps: steps })] }));
+    return (_jsxs("div", { className: 'steps-ratafia-content', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight steps-ratafia-content__title', children: title }), _jsx(StepRatafiaCardList, { steps: steps })] }));
 };
 export default StepsRatafiaContent;

package/dist/src/components/organisms/StepsRatafiaContent/StepsRatafiaContent.scss

@@ -0,0 +1,12 @@
+@import '../../../globalStyles/variables.scss';
+
+.steps-ratafia-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  &__title {
+    color: var(--neutral-neutral-1);
+  }
+}

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

@@ -2,14 +2,14 @@ import React, { type FC } from 'react'
 
 import { StepRatafiaCardList } from '../../molecules'
 import { type StepsRatafiaContentProps } from './StepsRatafiaContentProps.types'
-import { StepsRatafiaContentStyled } from './StepsRatafiaContent.styled'
+// import './StepsRatafiaContent.scss'
 
 const StepsRatafiaContent: FC<StepsRatafiaContentProps> = ({ title, steps }) => {
   return (
-    <StepsRatafiaContentStyled>
+    <div className='steps-ratafia-content'>
       <h2 className='sans-serif --super-large --bold-weight steps-ratafia-content__title'>{title}</h2>
       <StepRatafiaCardList steps={steps} />
-    </StepsRatafiaContentStyled>
+    </div>
   )
 }
 

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

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { RichTextInner } from '../../atoms';
-import { TryOurFreeLegalBlogsContentStyled } from './TryOurFreeLegalBlogsContent.styled';
+// import './TryOurFreeLegalBlogsContent.scss'
 const TryOurFreeLegalBlogsContent = ({ title, image, children }) => {
-    return (_jsxs(TryOurFreeLegalBlogsContentStyled, { children: [_jsxs("div", { className: 'try-our-free-legal-blogs-section__texts', children: [_jsx("h2", { className: 'try-our-free-legal-blogs-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'try-our-free-legal-blogs-section__texts__body', children: children })] }), _jsx("div", { className: 'try-our-free-legal-blogs-section__image', children: image })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'try-our-free-legal-blogs-section__texts', children: [_jsx("h2", { className: 'try-our-free-legal-blogs-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'try-our-free-legal-blogs-section__texts__body', children: children })] }), _jsx("div", { className: 'try-our-free-legal-blogs-section__image', children: image })] }));
 };
 export default TryOurFreeLegalBlogsContent;

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

@@ -2,17 +2,17 @@ import React, { type FC } from 'react'
 
 import { RichTextInner } from '../../atoms'
 import { type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types'
-import { TryOurFreeLegalBlogsContentStyled } from './TryOurFreeLegalBlogsContent.styled'
+// import './TryOurFreeLegalBlogsContent.scss'
 
 const TryOurFreeLegalBlogsContent: FC<TryOurFreeLegalBlogsContentProps> = ({ title, image, children }) => {
   return (
-    <TryOurFreeLegalBlogsContentStyled>
+    <>
       <div className='try-our-free-legal-blogs-section__texts'>
         <h2 className='try-our-free-legal-blogs-section__texts__title'>{title}</h2>
         <RichTextInner customClass='try-our-free-legal-blogs-section__texts__body'>{children}</RichTextInner>
       </div>
       <div className='try-our-free-legal-blogs-section__image'>{image}</div>
-    </TryOurFreeLegalBlogsContentStyled>
+    </>
   )
 }
 

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

@@ -1,10 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Button } from '../../atoms/Button';
 import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems';
 import { WhyLawDistrictSectionStyled } from './WhyLawDistrictSection.styled';
 export const WhyLawDistrictSection = ({ title, items, userActive, link }) => {
     if (items.length === 0)
         return null;
-    return (_jsxs(WhyLawDistrictSectionStyled, { className: 'whyLawDistrictSection', children: [_jsx("h2", { className: 'why-lawDistrict__title serif --hero', children: title }), _jsx(WhyLawDistrictItems, { items: items }), !userActive && (_jsx(Button, { givenClass: 'whyLawDistrictSection__button', label: link.cta, link: link.url, onClick: link.onClick, dataQa: link.dataQa, isExternal: true, hasNoFollow: true }))] }));
+    const [isUserActive, setIsUserActive] = useState(false);
+    useEffect(() => {
+        setIsUserActive(userActive);
+    }, [userActive]);
+    return (_jsxs(WhyLawDistrictSectionStyled, { className: 'whyLawDistrictSection', children: [_jsx("h2", { className: 'why-lawDistrict__title serif --hero', children: title }), _jsx(WhyLawDistrictItems, { items: items }), !isUserActive && (_jsx(Button, { givenClass: 'whyLawDistrictSection__button', label: link.cta, link: link.url, onClick: link.onClick, dataQa: link.dataQa, isExternal: true, hasNoFollow: true }))] }));
 };
 export default WhyLawDistrictSection;

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { Button } from '../../atoms/Button'
 import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems'
@@ -8,12 +8,18 @@ import { WhyLawDistrictSectionStyled } from './WhyLawDistrictSection.styled'
 export const WhyLawDistrictSection: React.FC<WhyLawDistrictSectionProps> = ({ title, items, userActive, link }) => {
   if (items.length === 0) return null
 
+  const [isUserActive, setIsUserActive] = useState(false)
+
+  useEffect(() => {
+    setIsUserActive(userActive)
+  }, [userActive])
+
   return (
     <WhyLawDistrictSectionStyled className={'whyLawDistrictSection'}>
       <h2 className={'why-lawDistrict__title serif --hero'}>{title}</h2>
       <WhyLawDistrictItems items={items} />
 
-      {!userActive && (
+      {!isUserActive && (
         <Button
           givenClass='whyLawDistrictSection__button'
           label={link.cta}

package/dist/src/globalStyles/styles.scss

@@ -18,5 +18,27 @@
 @import 'tippy.js/dist/tippy.css';
 @import '../components/atoms/Tooltip/Tooltip.scss';
 
+@import '../components/organisms/AboutUsContent/AboutUsContent.scss';
+@import '../components/organisms/Accordion/Accordion.scss';
+@import '../components/organisms/ArticlesList/ArticlesList.scss';
+@import '../components/organisms/AsSeeInContent/AsSeeInContent.scss';
+@import '../components/organisms/CardFunctionality/CardFunctionality.scss';
+@import '../components/organisms/ContactJumbotron/ContactJumbotron.scss';
+@import '../components/organisms/CookiePolicyBar/CookiePolicyBar.scss';
+@import '../components/organisms/ErrorContentRatafia/ErrorContentRatafia.scss';
+@import '../components/organisms/FaqGroup/FaqGroup.scss';
+@import '../components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.scss';
+@import '../components/organisms/GuidelinesContent/GuidelinesContent.scss';
+@import '../components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContent.scss';
+@import '../components/organisms/KeyFactsLoadingContentRatafia/KeyFactsLoadingContentRatafia.scss';
+@import '../components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.scss';
+@import '../components/organisms/LanguageSelectorMobile/LanguageSelectorMobile.scss';
+@import '../components/organisms/LayoutRatafia/LayoutRatafia.scss';
+@import '../components/organisms/ListStepsGetForm/ListStepsGetForm.scss';
+@import '../components/organisms/LoginRatafiaContent/LoginRatafiaContent.scss';
+@import '../components/organisms/MobileBottomBar/MobileBottomBar.scss';
+@import '../components/organisms/StepsRatafiaContent/StepsRatafiaContent.scss';
+@import '../components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.scss';
+
 @import '../components/molecules/TextInput/TextInput.scss';
 @import '../components/molecules/TooltipMenu/TooltipMenu.scss';