@npm_leadtech/legal-lib-components 5.2.14 → 5.2.16

package/dist/css/styles.css

@@ -1283,6 +1283,7 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 }
 .pane-wrapper:nth-child(2) {
   text-align: right;
+  padding-right: 0;
 }
 @media (min-width: 328px) and (max-width: 720px) {
   .pane-wrapper:nth-child(2) {
@@ -1291,10 +1292,22 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 }
 .pane-wrapper:nth-child(3) {
   margin-top: 30px;
-}
-.pane-wrapper:last-child {
   padding-right: 0;
 }
+.pane-wrapper:nth-child(4) {
+  margin-top: 45px;
+  text-align: right;
+}
+@media (min-width: 328px) and (max-width: 720px) {
+  .pane-wrapper:nth-child(4) {
+    text-align: left;
+    margin-top: 16px;
+  }
+}
+.pane-wrapper:nth-child(4) .pane--title {
+  font-size: 0.75rem;
+  padding: 0;
+}
 .pane-wrapper span {
   display: block;
 }
@@ -1303,6 +1316,8 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   text-indent: -0.625rem;
 }
 .pane--title {
+  border: none;
+  background: none;
   color: var(--neutral-neutral-2);
   font-size: 0.875rem;
   line-height: 1.29;
@@ -1322,6 +1337,9 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
     font-size: 0.875rem;
   }
 }
+.pane--title.pane--title--button {
+  cursor: pointer;
+}
 .pane--description {
   color: var(--neutral-main);
   font-size: 1rem;
@@ -6410,7 +6428,7 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 }
 .trustworthy-websites__image {
   margin: 1.5rem;
-  max-width: 7rem;
+  max-width: 8rem;
 }
 .type-modules-list {
   display: flex;
@@ -6851,15 +6869,8 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 }
 .guidelines-section-main {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex-wrap: nowrap;
-  padding: 1.5rem;
-}
-@media (min-width: 960px) {
-  .guidelines-section-main {
-    flex-direction: row;
-    padding: 0;
-  }
 }
 .guidelines-section__texts {
   flex-basis: 50%;
@@ -6916,7 +6927,7 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   }
 }
 .guidelines-section__image.is-mobile {
-  display: none;
+  display: flex;
 }
 @media (min-width: 720px) {
   .guidelines-section__image.is-mobile {
@@ -7518,14 +7529,9 @@ 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(-5rem);
+  transform: translateY(-50%);
   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;
@@ -7536,61 +7542,6 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   letter-spacing: -0.3px;
   margin: 1rem 0;
 }
-.contact-us-section {
-  display: flex;
-  flex-direction: column;
-  transform: translateY(-5rem);
-  color: var(--neutral-neutral-1);
-  margin-top: 1rem;
-}
-.contact-us-section__title {
-  text-align: center;
-  font-size: 32px;
-  font-family: "Lora", serif;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 42px;
-  letter-spacing: -0.3px;
-  margin: 1rem 0;
-}
-.contact-us-section__text {
-  text-align: center;
-  font-style: normal;
-  font-weight: 400;
-  margin: 0 0 2rem 0;
-}
-.contact-us-section-blocks {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 1rem;
-}
-@media (min-width: 960px) {
-  .contact-us-section-blocks {
-    flex-direction: row;
-    gap: 2.5rem;
-  }
-}
-.contact-us-section-blocks__item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: white;
-  box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
-  border-radius: 0.25rem;
-  min-width: 200px;
-  padding: 1rem;
-}
-.contact-us-section-blocks__item__image {
-  width: 2rem;
-}
-.contact-us-section-blocks__item__title {
-  margin-top: 1rem;
-  line-height: 1rem;
-}
-.contact-us-section-blocks__item__text {
-  font-size: 14px;
-}
 .benefit-ratafia-section {
   display: flex;
   justify-content: center;
@@ -7659,16 +7610,6 @@ 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);
 }
@@ -7677,15 +7618,6 @@ 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;
@@ -8261,12 +8193,6 @@ 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/atoms/CardPane/CardPane.scss

@@ -51,16 +51,28 @@
     }
     &:nth-child(2) {
       text-align: right;
+      padding-right: 0;
       @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
         text-align: left;
       }
     }
     &:nth-child(3) {
       margin-top: 30px;
-    }
-    &:last-child {
       padding-right: 0;
     }
+    &:nth-child(4) {
+      margin-top: 45px;
+      text-align: right;
+      @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+        text-align: left;
+        margin-top: 16px;
+      }
+      .pane--title {
+        font-size: 0.75rem;
+        padding: 0;
+      }
+    }
+
     span {
       display: block;
       &.marker {
@@ -70,6 +82,8 @@
     }
   }
   &--title {
+    border: none;
+    background: none;
     color: get-color(neutral, neutral-2);
     font-size: 0.875rem;
     line-height: 1.29;
@@ -82,6 +96,10 @@
     @include laptop {
       font-size: 0.875rem;
     }
+
+    &.pane--title--button {
+      cursor: pointer;
+    }
   }
   &--description {
     color: get-color(neutral);

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CardPaneInfo = ({ description, subdescription, id, title }) => {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
+    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {
@@ -8,8 +9,8 @@ const CardPaneInfo = ({ description, subdescription, id, title }) => {
         else if (description === 'Inactive') {
             descriptionClass = 'pane--description--inactive';
         }
-        return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
+        return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
     }
-    return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
+    return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
 };
 export default CardPaneInfo;

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -4,7 +4,18 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title }) => {
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
+  const paneTitle = (
+    <>
+      {handleClick ? (
+        <button onClick={handleClick} className='pane--title pane--title--button'>
+          {title}
+        </button>
+      ) : (
+        <div className='pane--title'>{title}</div>
+      )}
+    </>
+  )
   if (description === 'Active' || description === 'Inactive') {
     let descriptionClass
     if (description === 'Active') {
@@ -14,7 +25,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
     }
     return (
       <div key={id} className='pane-wrapper'>
-        <div className='pane--title'>{title}</div>
+        {paneTitle}
         <div data-testid='description-div' className={descriptionClass}>
           <li className='position'>
             <div className='marker'>{description}</div>
@@ -26,7 +37,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
 
   return (
     <div key={id} className='pane-wrapper'>
-      <div className='pane--title'>{title}</div>
+      {paneTitle}
       <div className='pane--description'>
         {description}
         {subdescription !== undefined && <span className='pane--description--subdescription'>{subdescription}</span>}

package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts

@@ -6,4 +6,5 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
+    handleClick?: () => void;
 }

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -7,4 +7,5 @@ export interface CardPaneInfoProps {
   id: string
   title: string
   subdescription?: string
+  handleClick?: () => void
 }

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

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

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

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

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AsSeeInContent } from '../../organisms';
 // import './AsSeeInSection.scss'
-const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
+const AsSeeInSection = ({ title, contentAsSeeIn }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsxs("section", { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (_jsxs("div", { className: 'contact-us-section', children: [_jsx("h2", { className: 'contact-us-section__title', children: contactSectionTitle }), _jsx("p", { className: 'contact-us-section__text', children: contactSectionText }), Array.isArray(contactSectionBlocks) && (_jsx("div", { className: 'contact-us-section-blocks', children: contactSectionBlocks.map((item, index) => (_jsxs("div", { className: 'contact-us-section-blocks__item', children: [_jsx("div", { className: 'contact-us-section-blocks__item__image', children: item.image }), _jsx("div", { className: 'contact-us-section-blocks__item__title', children: item.title }), _jsx("p", { className: 'contact-us-section-blocks__item__text', children: item.body })] }, index))) }))] }))] }));
+    return (_jsx("section", { className: 'as-seen-in-section-box', children: _jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }) }));
 };
 export default AsSeeInSection;

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

@@ -14,13 +14,9 @@
     flex-direction: column;
     box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
     background: get-color(others, white);
-    transform: translateY(-5rem);
+    transform: translateY(-50%);
     padding: 1.5rem 0;
 
-    @include laptop {
-      transform: translateY(-50%);
-    }
-
     &__title {
       text-align: center;
       font-size: 32px;
@@ -33,65 +29,3 @@
     }
   }
 }
-
-.contact-us-section {
-  display: flex;
-  flex-direction: column;
-  transform: translateY(-5rem);
-  color: var(--neutral-neutral-1);
-  margin-top: 1rem;
-
-  &__title {
-    text-align: center;
-    font-size: 32px;
-    font-family: $font-serif;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 42px;
-    letter-spacing: -0.3px;
-    margin: 1rem 0;
-  }
-
-  &__text {
-    text-align: center;
-    font-style: normal;
-    font-weight: 400;
-    margin: 0 0 2rem 0;
-  }
-
-  &-blocks {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: 1rem;
-
-    @include laptop {
-      flex-direction: row;
-      gap: 2.5rem;
-    }
-
-    &__item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      background-color: white;
-      box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
-      border-radius: 0.25rem;
-      min-width: 200px;
-      padding: 1rem;
-
-      &__image {
-        width: 2rem;
-      }
-
-      &__title {
-        margin-top: 1rem;
-        line-height: 1rem;
-      }
-
-      &__text {
-        font-size: 14px;
-      }
-    }
-  }
-}

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

@@ -4,13 +4,7 @@ import { AsSeeInContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
 // import './AsSeeInSection.scss'
 
-const AsSeeInSection: FC<AsSeeInSectionProps> = ({
-  title,
-  contentAsSeeIn,
-  contactSectionTitle,
-  contactSectionText,
-  contactSectionBlocks
-}) => {
+const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
   if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
     return null
   }
@@ -21,23 +15,6 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({
         <h2 className='as-seen-in-section__title'>{title}</h2>
         <AsSeeInContent trustWorthyImages={contentAsSeeIn.trustWorthyImages}>{contentAsSeeIn.children}</AsSeeInContent>
       </div>
-      {Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (
-        <div className='contact-us-section'>
-          <h2 className='contact-us-section__title'>{contactSectionTitle}</h2>
-          <p className='contact-us-section__text'>{contactSectionText}</p>
-          {Array.isArray(contactSectionBlocks) && (
-            <div className='contact-us-section-blocks'>
-              {contactSectionBlocks.map((item, index) => (
-                <div className='contact-us-section-blocks__item' key={index}>
-                  <div className='contact-us-section-blocks__item__image'>{item.image}</div>
-                  <div className='contact-us-section-blocks__item__title'>{item.title}</div>
-                  <p className='contact-us-section-blocks__item__text'>{item.body}</p>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
     </section>
   )
 }

package/dist/src/components/sections/AsSeeInSection/AsSeeInSectionProps.types.d.ts

@@ -2,11 +2,4 @@ import { type AsSeeInContentProps } from '../../organisms/AsSeeInContent';
 export interface AsSeeInSectionProps {
     title: string;
     contentAsSeeIn: AsSeeInContentProps;
-    contactSectionTitle: string;
-    contactSectionText: string;
-    contactSectionBlocks?: {
-        image: React.ReactNode;
-        title: string;
-        body: string;
-    }[];
 }

package/dist/src/components/sections/AsSeeInSection/AsSeeInSectionProps.types.ts

@@ -3,11 +3,4 @@ import { type AsSeeInContentProps } from '../../organisms/AsSeeInContent'
 export interface AsSeeInSectionProps {
   title: string
   contentAsSeeIn: AsSeeInContentProps
-  contactSectionTitle: string
-  contactSectionText: string
-  contactSectionBlocks?: {
-    image: React.ReactNode
-    title: string
-    body: string
-  }[]
 }

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

@@ -2,10 +2,9 @@ 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 = null, blogDescription = null, articles }) => {
+const BlogSection = ({ blogTitle, blogCta, articles }) => {
     if (articles.articles?.length === 0)
-        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' })] }));
+        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' })] }));
 };
 export default BlogSection;

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

@@ -14,33 +14,12 @@
     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,18 +6,14 @@ import { type BlogSectionProps } from './BlogSectionProps.types'
 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 (
     <div className={'blog'}>
-      <h2 className={`serif --super-large blog__title ${categoryProductTitle ? 'category-product-title' : ''}`}>
-        {blogTitle}
-      </h2>
-      {blogDescription && <p className='blog__description'>{blogDescription}</p>}
+      <h2 className={'serif --super-large blog__title'}>{blogTitle}</h2>
       <ArticlesList articles={articles.articles} />
-      {blogCta && <Button dataQa='' color='secondary' label={blogCta} givenClass='cta-button' link={'/articles'} />}
+      <Button dataQa='' color='secondary' label={blogCta} givenClass='cta-button' link={'/articles'} />
     </div>
   )
 }

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/PeopleSayAboutUsSection/PeopleSayAboutUsSection.scss

@@ -5,11 +5,6 @@
   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.14",
+  "version": "5.2.16",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",