@npm_leadtech/legal-lib-components 5.7.1 → 5.7.2

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

@@ -2,15 +2,15 @@ import React, { type FC } from 'react'
 
 import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent'
 import { type TryOurFreeLegalBlogsSectionProps } from './TryOurFreeLegalBlogsSectionProps.types'
-// import './TryOurFreeLegalBlogsSection.scss'
+import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection.styled'
 
 const TryOurFreeLegalBlogsSection: FC<TryOurFreeLegalBlogsSectionProps> = ({ contentTryOurFreeLegalBlogs }) => {
   return (
-    <section className='try-our-free-legal-blogs-section wrapper wrapper--responsive'>
+    <TryOurFreeLegalBlogsSectionStyled className='try-our-free-legal-blogs-section wrapper wrapper--responsive'>
       <TryOurFreeLegalBlogsContent title={contentTryOurFreeLegalBlogs.title} image={contentTryOurFreeLegalBlogs.image}>
         {contentTryOurFreeLegalBlogs.children}
       </TryOurFreeLegalBlogsContent>
-    </section>
+    </TryOurFreeLegalBlogsSectionStyled>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
-// import './TryUsSection.scss'
+import { TryUsSectionStyled } from './TryUsSection.styled';
 export const TryUsSection = ({ children, hasUserToken = false, cta }) => {
-    return (_jsxs("section", { className: 'try-us-section', children: [children, !hasUserToken && _jsx(Button, { ...cta })] }));
+    return (_jsxs(TryUsSectionStyled, { className: 'try-us-section', children: [children, !hasUserToken && _jsx(Button, { ...cta })] }));
 };

package/dist/src/components/sections/TryUsSection/TryUsSection.styled.d.ts

@@ -0,0 +1 @@
+export declare const TryUsSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

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

@@ -0,0 +1,23 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const TryUsSectionStyled = styled.section `
+  padding: 2rem;
+  text-align: center;
+  background-color: var(--neutral-neutral-6);
+  color: var(--neutral-neutral-1);
+
+  .m-richText {
+    max-width: 50rem;
+    margin: 0 auto;
+  }
+
+  .e-button {
+    display: inline-block;
+    margin-top: 1.5rem;
+    width: 100%;
+
+    @media ${device['landscape-tablets']} {
+      width: auto;
+    }
+  }
+`;

package/dist/src/components/sections/TryUsSection/{TryUsSection.scss → TryUsSection.styled.ts}

@@ -1,7 +1,7 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.try-us-section {
+export const TryUsSectionStyled = styled.section`
   padding: 2rem;
   text-align: center;
   background-color: var(--neutral-neutral-6);
@@ -17,8 +17,8 @@
     margin-top: 1.5rem;
     width: 100%;
 
-    @include landscape-tablets {
+    @media ${device['landscape-tablets']} {
       width: auto;
     }
   }
-}
+`

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

@@ -2,13 +2,13 @@ import React, { type FC } from 'react'
 import { Button } from '../../atoms'
 
 import { type TryUsSectionProps } from './TryUsSectionProps'
-// import './TryUsSection.scss'
+import { TryUsSectionStyled } from './TryUsSection.styled'
 
 export const TryUsSection: FC<TryUsSectionProps> = ({ children, hasUserToken = false, cta }) => {
   return (
-    <section className='try-us-section'>
+    <TryUsSectionStyled className='try-us-section'>
       {children}
       {!hasUserToken && <Button {...cta} />}
-    </section>
+    </TryUsSectionStyled>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RichTextStrapi } from '../../atoms';
-// import './UnsubscribeSection.scss'
+import { UnsubscribeSectionStyled } from './UnsubscribeSection.styled';
 export const UnsubscribeSection = ({ text }) => {
-    return (_jsx("section", { className: 'wrapper', children: _jsx("div", { className: 'unsubscribe', children: _jsx(RichTextStrapi, { ...text }) }) }));
+    return (_jsx(UnsubscribeSectionStyled, { className: 'wrapper', children: _jsx("div", { className: 'unsubscribe', children: _jsx(RichTextStrapi, { ...text }) }) }));
 };

package/dist/src/components/sections/UnsubscribeSection/UnsubscribeSection.styled.d.ts

@@ -0,0 +1 @@
+export declare const UnsubscribeSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

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

@@ -0,0 +1,63 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const UnsubscribeSectionStyled = styled.section `
+  .unsubscribe {
+    div:first-child {
+      background: var(--neutral-neutral-6);
+      display: flex;
+      flex-flow: row wrap;
+      margin-bottom: 4rem;
+      @media ${device['landscape-tablets']} {
+        margin: 0 3rem 3rem 3rem;
+      }
+    }
+
+    .m-richText p + h2 {
+      margin-top: 0;
+    }
+
+    h2 {
+      color: var(--neutral-neutral-1);
+      background: var(--others-white);
+      width: 100%;
+      font-size: 1.75rem;
+      padding: 2rem 1rem 1rem 1rem;
+
+      @media ${device['landscape-tablets']} {
+        font-size: 2rem;
+        padding: 2.7rem 0 1rem 0;
+      }
+    }
+
+    .m-richText h2 + p {
+      padding-top: 1.5rem;
+    }
+
+    .m-richText p {
+      padding: 0 2rem 1.5rem 2rem;
+      width: 100%;
+      margin: 0;
+
+      @media ${device.laptop} {
+        padding: 0 8rem 1.5rem 8rem;
+      }
+      @media ${device.laptop} {
+        padding: 0 15rem 1.5rem 15rem;
+      }
+    }
+
+    img {
+      max-width: 100%;
+      display: block;
+      margin: 0;
+    }
+
+    .image-preview {
+      margin: 0 auto;
+      padding: 0.5rem 0;
+      border: none;
+      width: auto;
+      height: auto;
+    }
+  }
+`;

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

@@ -0,0 +1,64 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const UnsubscribeSectionStyled = styled.section`
+  .unsubscribe {
+    div:first-child {
+      background: var(--neutral-neutral-6);
+      display: flex;
+      flex-flow: row wrap;
+      margin-bottom: 4rem;
+      @media ${device['landscape-tablets']} {
+        margin: 0 3rem 3rem 3rem;
+      }
+    }
+
+    .m-richText p + h2 {
+      margin-top: 0;
+    }
+
+    h2 {
+      color: var(--neutral-neutral-1);
+      background: var(--others-white);
+      width: 100%;
+      font-size: 1.75rem;
+      padding: 2rem 1rem 1rem 1rem;
+
+      @media ${device['landscape-tablets']} {
+        font-size: 2rem;
+        padding: 2.7rem 0 1rem 0;
+      }
+    }
+
+    .m-richText h2 + p {
+      padding-top: 1.5rem;
+    }
+
+    .m-richText p {
+      padding: 0 2rem 1.5rem 2rem;
+      width: 100%;
+      margin: 0;
+
+      @media ${device.laptop} {
+        padding: 0 8rem 1.5rem 8rem;
+      }
+      @media ${device.laptop} {
+        padding: 0 15rem 1.5rem 15rem;
+      }
+    }
+
+    img {
+      max-width: 100%;
+      display: block;
+      margin: 0;
+    }
+
+    .image-preview {
+      margin: 0 auto;
+      padding: 0.5rem 0;
+      border: none;
+      width: auto;
+      height: auto;
+    }
+  }
+`

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

@@ -2,14 +2,14 @@ import React from 'react'
 
 import { RichTextStrapi } from '../../atoms'
 import { type UnsubscribeSectionProps } from './UnsubscribeSectionProps'
-// import './UnsubscribeSection.scss'
+import { UnsubscribeSectionStyled } from './UnsubscribeSection.styled'
 
 export const UnsubscribeSection: React.FC<UnsubscribeSectionProps> = ({ text }) => {
   return (
-    <section className='wrapper'>
+    <UnsubscribeSectionStyled className='wrapper'>
       <div className='unsubscribe'>
         <RichTextStrapi {...text} />
       </div>
-    </section>
+    </UnsubscribeSectionStyled>
   )
 }

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms/Button';
 import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems';
-// import './WhyLawDistrictSection.scss'
+import { WhyLawDistrictSectionStyled } from './WhyLawDistrictSection.styled';
 export const WhyLawDistrictSection = ({ title, items, userActive, link }) => {
     if (items.length === 0)
         return null;
-    return (_jsxs("section", { 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 }))] }));
+    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 }))] }));
 };
 export default WhyLawDistrictSection;

package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.styled.d.ts

@@ -0,0 +1 @@
+export declare const WhyLawDistrictSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

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

@@ -0,0 +1,36 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const WhyLawDistrictSectionStyled = styled.section `
+  text-align: center;
+  background-color: var(--neutral-neutral-6);
+  width: 100%;
+  padding-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+
+  @media ${device['landscape-tablets']} {
+    padding-bottom: 0rem;
+    display: block;
+  }
+
+  .whyLawDistrictSection {
+    &__title {
+      @media ${device.laptop} {
+        padding: 0;
+      }
+    }
+
+    &__button {
+      display: flex;
+      justify-content: center;
+      width: 80%;
+      margin-bottom: 1rem;
+
+      @media ${device['landscape-tablets']} {
+        margin-bottom: 3.5rem;
+        display: inline-block;
+        width: auto;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,37 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const WhyLawDistrictSectionStyled = styled.section`
+  text-align: center;
+  background-color: var(--neutral-neutral-6);
+  width: 100%;
+  padding-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+
+  @media ${device['landscape-tablets']} {
+    padding-bottom: 0rem;
+    display: block;
+  }
+
+  .whyLawDistrictSection {
+    &__title {
+      @media ${device.laptop} {
+        padding: 0;
+      }
+    }
+
+    &__button {
+      display: flex;
+      justify-content: center;
+      width: 80%;
+      margin-bottom: 1rem;
+
+      @media ${device['landscape-tablets']} {
+        margin-bottom: 3.5rem;
+        display: inline-block;
+        width: auto;
+      }
+    }
+  }
+`

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

@@ -3,14 +3,13 @@ import React from 'react'
 import { Button } from '../../atoms/Button'
 import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems'
 import { type WhyLawDistrictSectionProps } from './WhyLawDistrictSectionProps.types'
-
-// import './WhyLawDistrictSection.scss'
+import { WhyLawDistrictSectionStyled } from './WhyLawDistrictSection.styled'
 
 export const WhyLawDistrictSection: React.FC<WhyLawDistrictSectionProps> = ({ title, items, userActive, link }) => {
   if (items.length === 0) return null
 
   return (
-    <section className={'whyLawDistrictSection'}>
+    <WhyLawDistrictSectionStyled className={'whyLawDistrictSection'}>
       <h2 className={'why-lawDistrict__title serif --hero'}>{title}</h2>
       <WhyLawDistrictItems items={items} />
 
@@ -25,7 +24,7 @@ export const WhyLawDistrictSection: React.FC<WhyLawDistrictSectionProps> = ({ ti
           hasNoFollow
         />
       )}
-    </section>
+    </WhyLawDistrictSectionStyled>
   )
 }
 

package/dist/src/custom.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 declare module '*.svg' {
-  const content: any
+  const content: string
   export default content
 }
 

package/dist/src/globalStyles/styles.scss

@@ -82,33 +82,3 @@
 @import '../components/organisms/MobileBottomBar/MobileBottomBar.scss';
 @import '../components/organisms/StepsRatafiaContent/StepsRatafiaContent.scss';
 @import '../components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.scss';
-
-@import '../components/sections/AboutUsSection/AboutUsSection.scss';
-@import '../components/sections/AsideMenuSection/AsideMenuSection.scss';
-@import '../components/sections/AsSeeInSection/AsSeeInSection.scss';
-@import '../components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.scss';
-@import '../components/sections/BlogSection/BlogSection.scss';
-@import '../components/sections/ContactSection/ContactSection.scss';
-@import '../components/sections/ExpertsSection/ExpertsSection.scss';
-@import '../components/sections/FaqSection/FaqSection.scss';
-@import '../components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.scss';
-@import '../components/sections/FunctionalityCardsSection/FunctionalityCardsSection.scss';
-@import '../components/sections/GuidelinesSection/GuidelinesSection.scss';
-@import '../components/sections/HowGetYourFormsSection/HowGetYourFormsSection.scss';
-@import '../components/sections/JumbotronRatafiaSection/JumbotronRatafiaSection.scss';
-@import '../components/sections/JumbotronSimplifiedSection/JumbotronSimplifiedSection.scss';
-@import '../components/sections/LearnMoreSection/LearnMoreSection.scss';
-@import '../components/sections/LegalSection/LegalSection.scss';
-@import '../components/sections/MidBannerRatafiaSection/MidBannerRatafiaSection.scss';
-@import '../components/sections/PeopleSayAboutUsSection/PeopleSayAboutUsSection.scss';
-@import '../components/sections/StepsRatafiaSection/StepsRatafiaSection.scss';
-@import '../components/sections/TryItRatafiaSection/TryItRatafiaSection.scss';
-@import '../components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.scss';
-@import '../components/sections/TryUsSection/TryUsSection.scss';
-@import '../components/sections/UnsubscribeSection/UnsubscribeSection.scss';
-@import '../components/sections/WhyLawDistrictSection/WhyLawDistrictSection.scss';
-
-@import '../components/pages/ErrorRatafiaPage/ErrorRatafiaPage.scss';
-@import '../components/pages/FaqsPage/FaqsPage.scss';
-@import '../components/pages/KeyFactsResultRatafiaPage/KeyFactsResultRatafiaPage.scss';
-@import '../components/pages/LoginRatafiaPage/LoginPageRatafia.scss';