@npm_leadtech/legal-lib-components 5.9.3 → 5.9.5

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { ArticleStyled } from './Article.styled';
 import { Button } from '../../atoms';
-const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
-    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("img", { src: imageUrl, className: isCategoryProductPage ? 'image image-category' : 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: isCategoryProductPage ? 'information information-category' : 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
+const Article = ({ imageUrl, title, articleUrl, summary }) => {
+    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("img", { src: imageUrl, className: 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), _jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true })] })] }));
 };
 export default Article;

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

@@ -25,13 +25,6 @@ export const ArticleStyled = styled.div `
     }
   }
 
-  .image-category {
-    @media ${device['landscape-tablets']} {
-      width: 100%;
-      height: 13em;
-    }
-  }
-
   .information {
     width: 100%;
     padding: 1rem 1.5rem 0;
@@ -68,29 +61,5 @@ export const ArticleStyled = styled.div `
         margin-top: 0;
       }
     }
-
-    .button-image-container {
-      align-items: center;
-      margin: 1rem 0 2rem 0;
-      display: flex;
-
-      .thinner-letter {
-        font-family: $font-sans;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 22px;
-        letter-spacing: -0.3px;
-        text-align: left;
-        margin: 0;
-        padding: 0 1rem 0 0;
-      }
-    }
-  }
-
-  .information-category {
-    @media ${device['landscape-tablets']} {
-      width: 100%;
-      height: auto;
-    }
   }
 `;

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

@@ -26,13 +26,6 @@ export const ArticleStyled = styled.div`
     }
   }
 
-  .image-category {
-    @media ${device['landscape-tablets']} {
-      width: 100%;
-      height: 13em;
-    }
-  }
-
   .information {
     width: 100%;
     padding: 1rem 1.5rem 0;
@@ -69,29 +62,5 @@ export const ArticleStyled = styled.div`
         margin-top: 0;
       }
     }
-
-    .button-image-container {
-      align-items: center;
-      margin: 1rem 0 2rem 0;
-      display: flex;
-
-      .thinner-letter {
-        font-family: $font-sans;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 22px;
-        letter-spacing: -0.3px;
-        text-align: left;
-        margin: 0;
-        padding: 0 1rem 0 0;
-      }
-    }
-  }
-
-  .information-category {
-    @media ${device['landscape-tablets']} {
-      width: 100%;
-      height: auto;
-    }
   }
 `

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

@@ -1,39 +1,19 @@
 import React, { type FC } from 'react'
 
-import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg'
 import { type ArticleProps } from './ArticleProps.types'
 import { ArticleStyled } from './Article.styled'
 import { Button } from '../../atoms'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) => {
   return (
     <ArticleStyled className='article'>
-      <img
-        src={imageUrl}
-        className={isCategoryProductPage ? 'image image-category' : 'image'}
-        loading='lazy'
-        alt={title}
-      />
-      <div className={isCategoryProductPage ? 'information information-category' : 'information'}>
+      <img src={imageUrl} className='image' loading='lazy' alt={title} />
+      <div className='information'>
         <a href={articleUrl} target='_blank' rel='noreferrer'>
           <p className='title sans-serif --big'>{title} </p>
         </a>
         <div className='summary'>{summary}</div>
-        {isCategoryProductPage ? (
-          <div className='button-image-container'>
-            <Button
-              givenClass='thinner-letter'
-              color='tertiary'
-              label={'Read more'}
-              dataQa='article-read-more'
-              link={articleUrl}
-              isExternal
-            />
-            <img className='article__arrow-right' src={ArrowRight} alt=''></img>
-          </div>
-        ) : (
-          <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
-        )}
+        <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
       </div>
     </ArticleStyled>
   )

package/dist/src/components/molecules/Article/ArticleProps.types.d.ts

@@ -4,5 +4,4 @@ export interface ArticleProps {
     articleUrl: string;
     summary: string;
     id: string;
-    isCategoryProductPage: boolean;
 }

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -4,5 +4,4 @@ export interface ArticleProps {
   articleUrl: string
   summary: string
   id: string
-  isCategoryProductPage: boolean
 }

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

@@ -2,12 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px';
 import { FaqItemStyled } from './FaqItem.styled';
-export const FaqItem = ({ slug, title, children }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    return (_jsxs(FaqItemStyled, { className: `faqItem ${isOpen ? 'open' : ''}`, children: [_jsx("div", { id: slug, className: 'fakeAnchor' }), _jsxs("details", { itemProp: 'mainEntity', itemScope: true, itemType: 'https://www.schema.org/Question', className: 'content', open: isOpen, children: [_jsxs("summary", { role: 'button', tabIndex: isOpen ? 0 : -1, onClick: (e) => {
-                            e.preventDefault();
+export const FaqItem = ({ slug, title, children, index }) => {
+    const [isOpen, setIsOpen] = React.useState(index === 0);
+    return (_jsxs(FaqItemStyled, { className: `faqItem ${isOpen ? 'open' : ''}`, children: [_jsx("div", { id: slug, className: 'fakeAnchor' }), _jsxs("details", { itemProp: 'mainEntity', itemScope: true, itemType: 'https://www.schema.org/Question', className: 'content', open: index === 0, children: [_jsxs("summary", { role: 'button', tabIndex: index === 0 ? 0 : -1, onClick: () => {
                             setIsOpen(!isOpen);
                         }, onKeyUp: () => {
                             setIsOpen(!isOpen);
-                        }, className: 'question', children: [_jsx("h3", { itemProp: 'name', className: 'title', children: title }), _jsx(ChevronRight24px, {})] }), _jsx("div", { itemScope: true, itemProp: 'acceptedAnswer', itemType: 'https://www.schema.org/Answer', className: 'answer', children: _jsx("span", { itemProp: 'text', children: children }) })] })] }));
+                        }, className: 'question', children: [_jsx("h3", { tabIndex: index === 0 ? 0 : -1, itemProp: 'name', className: 'title', children: title }), _jsx(ChevronRight24px, {})] }), _jsx("div", { itemScope: true, itemProp: 'acceptedAnswer', itemType: 'https://www.schema.org/Answer', className: 'answer', children: _jsx("span", { itemProp: 'text', children: children }) })] })] }));
 };

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

@@ -4,8 +4,8 @@ import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight2
 import { type FaqItemProps } from './FaqItemProps'
 import { FaqItemStyled } from './FaqItem.styled'
 
-export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false)
+export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children, index }) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(index === 0)
 
   return (
     <FaqItemStyled className={`faqItem ${isOpen ? 'open' : ''}`}>
@@ -15,13 +15,12 @@ export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
         itemScope
         itemType='https://www.schema.org/Question'
         className='content'
-        open={isOpen}
+        open={index === 0}
       >
         <summary
           role='button'
-          tabIndex={isOpen ? 0 : -1}
-          onClick={(e) => {
-            e.preventDefault()
+          tabIndex={index === 0 ? 0 : -1}
+          onClick={() => {
             setIsOpen(!isOpen)
           }}
           onKeyUp={() => {
@@ -29,7 +28,7 @@ export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
           }}
           className='question'
         >
-          <h3 itemProp='name' className='title'>
+          <h3 tabIndex={index === 0 ? 0 : -1} itemProp='name' className='title'>
             {title}
           </h3>
           <ChevronRight24px />

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Article } from '../../molecules';
 // import './ArticlesList.scss'
-const ArticlesList = ({ articles = [], isCategoryProductPage = false }) => {
+const ArticlesList = ({ articles = [] }) => {
     if (articles?.length === 0)
         return null;
-    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article, isCategoryProductPage: isCategoryProductPage }, `article_${article?.id}`))) }));
+    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article }, `article_${article?.id}`))) }));
 };
 export default ArticlesList;

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

@@ -5,13 +5,13 @@ import { Article, type ArticleProps } from '../../molecules'
 import { type ArticlesListProps } from './ArticlesListProps.types'
 // import './ArticlesList.scss'
 
-const ArticlesList: FC<ArticlesListProps> = ({ articles = [], isCategoryProductPage = false }) => {
+const ArticlesList: FC<ArticlesListProps> = ({ articles = [] }) => {
   if (articles?.length === 0) return null
 
   return (
     <div className='articles_wrapper'>
       {articles.map((article: ArticleProps) => (
-        <Article key={`article_${article?.id}`} {...article} isCategoryProductPage={isCategoryProductPage} />
+        <Article key={`article_${article?.id}`} {...article} />
       ))}
     </div>
   )

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.d.ts

@@ -1,5 +1,4 @@
 import { type ArticleProps } from '../../molecules';
 export interface ArticlesListProps {
     articles: ArticleProps[];
-    isCategoryProductPage?: boolean;
 }

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.ts

@@ -2,5 +2,4 @@ import { type ArticleProps } from '../../molecules'
 
 export interface ArticlesListProps {
   articles: ArticleProps[]
-  isCategoryProductPage?: boolean
 }

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, RichTextStrapi } from '../../atoms';
 import { ArticlesList } from '../../organisms';
 import { BlogSectionStyled } from './BlogSection.styled';
+import { Button } from '../../atoms';
 // import './BlogSection.scss'
-const BlogSection = ({ blogTitle, blogCta = null, blogDescription = null, articles }) => {
+const BlogSection = ({ blogTitle, blogCta, articles }) => {
     if (articles.articles?.length === 0)
-        return;
-    const categoryProductTitle = !!blogDescription;
-    return (_jsxs(BlogSectionStyled, { className: 'blog', children: [_jsx("h2", { className: `serif --super-large blog__title ${categoryProductTitle ? 'category-product-title' : ''}`, children: blogTitle }), blogDescription && _jsx(RichTextStrapi, { className: 'blog__description', html: blogDescription }), _jsx(ArticlesList, { articles: articles.articles, isCategoryProductPage: categoryProductTitle }), blogCta && _jsx(Button, { dataQa: '', color: 'secondary', label: blogCta, givenClass: 'cta-button', link: '/articles' })] }));
+        return null;
+    return (_jsxs(BlogSectionStyled, { 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' })] }));
 };
 export default BlogSection;

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

@@ -19,27 +19,6 @@ export const BlogSectionStyled = styled.div `
     @media ${device.laptop} {
       margin-bottom: 3rem;
     }
-
-    &.category-product-title {
-      margin-bottom: 0;
-      font-family: var(--font-sans);
-      font-size: 28px;
-      font-weight: 700;
-      line-height: 32px;
-      letter-spacing: -0.3px;
-      text-align: left;
-    }
-  }
-
-  .blog__description {
-    font-family: var(--font-sans);
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: -0.3px;
-    text-align: left;
-    color: #3d4042;
-    margin: 1rem 0 1.5rem 0;
   }
 
   .cta-button {

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

@@ -20,27 +20,6 @@ export const BlogSectionStyled = styled.div`
     @media ${device.laptop} {
       margin-bottom: 3rem;
     }
-
-    &.category-product-title {
-      margin-bottom: 0;
-      font-family: var(--font-sans);
-      font-size: 28px;
-      font-weight: 700;
-      line-height: 32px;
-      letter-spacing: -0.3px;
-      text-align: left;
-    }
-  }
-
-  .blog__description {
-    font-family: var(--font-sans);
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: -0.3px;
-    text-align: left;
-    color: #3d4042;
-    margin: 1rem 0 1.5rem 0;
   }
 
   .cta-button {

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

@@ -1,24 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { type FC } from 'react'
 
-import { Button, RichTextStrapi } from '../../atoms'
 import { ArticlesList } from '../../organisms'
 import { type BlogSectionProps } from './BlogSectionProps.types'
 import { BlogSectionStyled } from './BlogSection.styled'
+import { Button } from '../../atoms'
 // import './BlogSection.scss'
 
-const BlogSection: FC<BlogSectionProps> = ({ blogTitle, blogCta = null, blogDescription = null, articles }) => {
-  if (articles.articles?.length === 0) return
-  const categoryProductTitle = !!blogDescription
+const BlogSection: FC<BlogSectionProps> = ({ blogTitle, blogCta, articles }) => {
+  if (articles.articles?.length === 0) return null
 
   return (
     <BlogSectionStyled className={'blog'}>
-      <h2 className={`serif --super-large blog__title ${categoryProductTitle ? 'category-product-title' : ''}`}>
-        {blogTitle}
-      </h2>
-      {blogDescription && <RichTextStrapi className='blog__description' html={blogDescription} />}
-      <ArticlesList articles={articles.articles} isCategoryProductPage={categoryProductTitle} />
-      {blogCta && <Button dataQa='' color='secondary' label={blogCta} givenClass='cta-button' link={'/articles'} />}
+      <h2 className={'serif --super-large blog__title'}>{blogTitle}</h2>
+      <ArticlesList articles={articles.articles} />
+      <Button dataQa='' color='secondary' label={blogCta} givenClass='cta-button' link={'/articles'} />
     </BlogSectionStyled>
   )
 }

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

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

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

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

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/custom.d.ts

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

package/package.json

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

package/dist/images/svg/arrow-right-24px-outlined.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.70531 0.705315C8.31578 0.31578 7.68422 0.31578 7.29468 0.705316C6.9054 1.0946 6.90511 1.72568 7.29405 2.11531L12.17 7H0.999999C0.447714 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H12.17L7.29405 13.8847C6.90511 14.2743 6.9054 14.9054 7.29468 15.2947C7.68422 15.6842 8.31578 15.6842 8.70532 15.2947L15.2929 8.70711C15.6834 8.31658 15.6834 7.68342 15.2929 7.29289L8.70531 0.705315Z" fill="#078080"/>
-</svg>

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

@@ -1,54 +0,0 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
-
-.blog {
-  text-align: center;
-  margin: 0 auto 3rem;
-  padding: 0 1rem;
-  max-width: $md;
-
-  @include laptop {
-    padding: 0;
-  }
-  @include desktop {
-    max-width: $lg;
-  }
-
-  .blog__description {
-    font-family: $font-sans;
-    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: var(--primary-main-dark-1);
-
-    @include laptop {
-      margin-bottom: 3rem;
-    }
-
-    &.category-product-title {
-      margin-bottom: 0;
-      font-family: $font-sans;
-      font-size: 28px;
-      font-weight: 700;
-      line-height: 32px;
-      letter-spacing: -0.3px;
-      text-align: left;
-    }
-  }
-
-  .cta-button {
-    width: 100%;
-    margin-top: 3rem;
-    display: inline-block;
-    @include landscape-tablets {
-      width: auto;
-    }
-  }
-}