@npm_leadtech/legal-lib-components 5.2.12 → 5.2.14

package/dist/css/styles.css

@@ -6410,7 +6410,7 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 }
 .trustworthy-websites__image {
   margin: 1.5rem;
-  max-width: 8rem;
+  max-width: 7rem;
 }
 .type-modules-list {
   display: flex;
@@ -6851,8 +6851,15 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 }
 .guidelines-section-main {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: nowrap;
+  padding: 1.5rem;
+}
+@media (min-width: 960px) {
+  .guidelines-section-main {
+    flex-direction: row;
+    padding: 0;
+  }
 }
 .guidelines-section__texts {
   flex-basis: 50%;
@@ -6909,7 +6916,7 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   }
 }
 .guidelines-section__image.is-mobile {
-  display: flex;
+  display: none;
 }
 @media (min-width: 720px) {
   .guidelines-section__image.is-mobile {
@@ -7511,9 +7518,14 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   flex-direction: column;
   box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
   background: var(--others-white);
-  transform: translateY(-50%);
+  transform: translateY(-5rem);
   padding: 1.5rem 0;
 }
+@media (min-width: 960px) {
+  .as-seen-in-section-box .as-seen-in-section {
+    transform: translateY(-50%);
+  }
+}
 .as-seen-in-section-box .as-seen-in-section__title {
   text-align: center;
   font-size: 32px;
@@ -7551,11 +7563,12 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 1rem;
 }
 @media (min-width: 960px) {
   .contact-us-section-blocks {
     flex-direction: row;
+    gap: 2.5rem;
   }
 }
 .contact-us-section-blocks__item {
@@ -7646,6 +7659,16 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
     max-width: 1200px;
   }
 }
+.blog .blog__description {
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.3px;
+  text-align: left;
+  color: #6d7275;
+  margin: 1rem 0 1.5rem 0;
+}
 .blog .blog__title {
   color: var(--primary-main-dark-1);
 }
@@ -7654,6 +7677,15 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
     margin-bottom: 3rem;
   }
 }
+.blog .blog__title.category-product-title {
+  margin-bottom: 0;
+  font-family: Inter;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 32px;
+  letter-spacing: -0.3px;
+  text-align: left;
+}
 .blog .cta-button {
   width: 100%;
   margin-top: 3rem;
@@ -8229,6 +8261,12 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   width: 100%;
   margin: 0 auto;
   text-align: center;
+  padding: 1.5rem;
+}
+@media (min-width: 960px) {
+  .people-say {
+    padding: 0;
+  }
 }
 @media (min-width: 1200px) {
   .people-say {

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

@@ -9,6 +9,6 @@
 
   &__image {
     margin: 1.5rem;
-    max-width: 8rem;
+    max-width: 7rem;
   }
 }

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

@@ -4,8 +4,14 @@
 .guidelines-section {
   &-main {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex-wrap: nowrap;
+    padding: 1.5rem;
+
+    @include laptop {
+      flex-direction: row;
+      padding: 0;
+    }
   }
 
   &__texts {
@@ -65,7 +71,7 @@
     }
 
     &.is-mobile {
-      display: flex;
+      display: none;
 
       @include landscape-tablets {
         display: none;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.scss

@@ -14,9 +14,13 @@
     flex-direction: column;
     box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
     background: get-color(others, white);
-    transform: translateY(-50%);
+    transform: translateY(-5rem);
     padding: 1.5rem 0;
 
+    @include laptop {
+      transform: translateY(-50%);
+    }
+
     &__title {
       text-align: center;
       font-size: 32px;
@@ -59,10 +63,11 @@
     display: flex;
     justify-content: center;
     flex-direction: column;
-    gap: 2.5rem;
+    gap: 1rem;
 
     @include laptop {
       flex-direction: row;
+      gap: 2.5rem;
     }
 
     &__item {

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

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArticlesList } from '../../organisms';
 import { Button } from '../../atoms';
 // import './BlogSection.scss'
-const BlogSection = ({ blogTitle, blogCta, articles }) => {
+const BlogSection = ({ blogTitle, blogCta = null, blogDescription = null, articles }) => {
     if (articles.articles?.length === 0)
-        return null;
-    return (_jsxs("div", { className: 'blog', children: [_jsx("h2", { className: 'serif --super-large blog__title', children: blogTitle }), _jsx(ArticlesList, { articles: articles.articles }), _jsx(Button, { dataQa: '', color: 'secondary', label: blogCta, givenClass: 'cta-button', link: '/articles' })] }));
+        return;
+    const categoryProductTitle = !!blogDescription;
+    return (_jsxs("div", { className: 'blog', children: [_jsx("h2", { className: `serif --super-large blog__title ${categoryProductTitle ? 'category-product-title' : ''}`, children: blogTitle }), blogDescription && _jsx("p", { className: 'blog__description', children: blogDescription }), _jsx(ArticlesList, { articles: articles.articles }), blogCta && _jsx(Button, { dataQa: '', color: 'secondary', label: blogCta, givenClass: 'cta-button', link: '/articles' })] }));
 };
 export default BlogSection;

package/dist/src/components/sections/BlogSection/BlogSection.scss

@@ -14,12 +14,33 @@
     max-width: $lg;
   }
 
+  .blog__description {
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    text-align: left;
+    color: #6d7275;
+    margin: 1rem 0 1.5rem 0;
+  }
+
   .blog__title {
     color: get-color(primary, main-dark-1);
 
     @include laptop {
       margin-bottom: 3rem;
     }
+
+    &.category-product-title {
+      margin-bottom: 0;
+      font-family: Inter;
+      font-size: 28px;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      text-align: left;
+    }
   }
 
   .cta-button {

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

@@ -6,14 +6,18 @@ import { type BlogSectionProps } from './BlogSectionProps.types'
 import { Button } from '../../atoms'
 // import './BlogSection.scss'
 
-const BlogSection: FC<BlogSectionProps> = ({ blogTitle, blogCta, articles }) => {
-  if (articles.articles?.length === 0) return null
+const BlogSection: FC<BlogSectionProps> = ({ blogTitle, blogCta = null, blogDescription = null, articles }) => {
+  if (articles.articles?.length === 0) return
+  const categoryProductTitle = !!blogDescription
 
   return (
     <div className={'blog'}>
-      <h2 className={'serif --super-large blog__title'}>{blogTitle}</h2>
+      <h2 className={`serif --super-large blog__title ${categoryProductTitle ? 'category-product-title' : ''}`}>
+        {blogTitle}
+      </h2>
+      {blogDescription && <p className='blog__description'>{blogDescription}</p>}
       <ArticlesList articles={articles.articles} />
-      <Button dataQa='' color='secondary' label={blogCta} givenClass='cta-button' link={'/articles'} />
+      {blogCta && <Button dataQa='' color='secondary' label={blogCta} givenClass='cta-button' link={'/articles'} />}
     </div>
   )
 }

package/dist/src/components/sections/BlogSection/BlogSectionProps.types.d.ts

@@ -1,6 +1,7 @@
 import { type ArticlesListProps } from '../../organisms';
 export interface BlogSectionProps {
     blogTitle: string;
-    blogCta: string;
+    blogCta?: string | null;
+    blogDescription?: string | null;
     articles: ArticlesListProps;
 }

package/dist/src/components/sections/BlogSection/BlogSectionProps.types.ts

@@ -2,6 +2,7 @@ import { type ArticlesListProps } from '../../organisms'
 
 export interface BlogSectionProps {
   blogTitle: string
-  blogCta: string
+  blogCta?: string | null
+  blogDescription?: string | null
   articles: ArticlesListProps
 }

package/dist/src/components/sections/PeopleSayAboutUsSection/PeopleSayAboutUsSection.scss

@@ -5,6 +5,11 @@
   width: 100%;
   margin: 0 auto;
   text-align: center;
+  padding: 1.5rem;
+
+  @include laptop {
+    padding: 0;
+  }
 
   @include desktop {
     max-width: $max-width;

package/package.json

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