@npm_leadtech/legal-lib-components 5.2.13 → 5.2.14

package/dist/css/styles.css

@@ -7659,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);
 }
@@ -7667,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;

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/package.json

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