@npm_leadtech/legal-lib-components 5.2.11 → 5.2.13

package/dist/css/styles.css

@@ -1291,20 +1291,9 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 }
 .pane-wrapper:nth-child(3) {
   margin-top: 30px;
-  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;
+.pane-wrapper:last-child {
+  padding-right: 0;
 }
 .pane-wrapper span {
   display: block;
@@ -1314,8 +1303,6 @@ 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;
@@ -1335,9 +1322,6 @@ 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;
@@ -6426,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;
@@ -6867,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%;
@@ -6925,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 {
@@ -7527,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;
@@ -7540,6 +7536,61 @@ 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;
@@ -8191,6 +8242,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/atoms/CardPane/CardPane.scss

@@ -57,20 +57,10 @@
     }
     &:nth-child(3) {
       margin-top: 30px;
-      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;
-      }
+    &:last-child {
+      padding-right: 0;
     }
-
     span {
       display: block;
       &.marker {
@@ -80,8 +70,6 @@
     }
   }
   &--title {
-    border: none;
-    background: none;
     color: get-color(neutral, neutral-2);
     font-size: 0.875rem;
     line-height: 1.29;
@@ -94,10 +82,6 @@
     @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,6 +1,5 @@
-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 })) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CardPaneInfo = ({ description, subdescription, id, title }) => {
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {
@@ -9,8 +8,8 @@ const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) =
         else if (description === 'Inactive') {
             descriptionClass = 'pane--description--inactive';
         }
-        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 }), _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, _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: [_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));
 };
 export default CardPaneInfo;

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

@@ -4,18 +4,7 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-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>
-      )}
-    </>
-  )
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title }) => {
   if (description === 'Active' || description === 'Inactive') {
     let descriptionClass
     if (description === 'Active') {
@@ -25,7 +14,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
     }
     return (
       <div key={id} className='pane-wrapper'>
-        {paneTitle}
+        <div className='pane--title'>{title}</div>
         <div data-testid='description-div' className={descriptionClass}>
           <li className='position'>
             <div className='marker'>{description}</div>
@@ -37,7 +26,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
 
   return (
     <div key={id} className='pane-wrapper'>
-      {paneTitle}
+      <div className='pane--title'>{title}</div>
       <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,5 +6,4 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
-    handleClick?: () => void;
 }

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

@@ -7,5 +7,4 @@ 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: 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.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 }) => {
+const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    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 })] }) }));
+    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))) }))] }))] }));
 };
 export default AsSeeInSection;

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;
@@ -29,3 +33,65 @@
     }
   }
 }
+
+.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,7 +4,13 @@ import { AsSeeInContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
 // import './AsSeeInSection.scss'
 
-const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
+const AsSeeInSection: FC<AsSeeInSectionProps> = ({
+  title,
+  contentAsSeeIn,
+  contactSectionTitle,
+  contactSectionText,
+  contactSectionBlocks
+}) => {
   if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
     return null
   }
@@ -15,6 +21,23 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
         <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,4 +2,11 @@ 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,4 +3,11 @@ 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/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.11",
+  "version": "5.2.13",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",