@npm_leadtech/legal-lib-components 5.20.0 → 5.20.2

package/dist/src/components/atoms/FixedFooter/FixedFooter.styled.ts

@@ -0,0 +1,395 @@
+import styled from 'styled-components'
+
+export const FixedFooterStyled = styled.div`
+  .footer {
+    margin-top: auto;
+    left: 0;
+    bottom: 0;
+    position: static;
+    width: 100%;
+    background-color: var(--primary-main-dark-2);
+    color: var(--primary-main-light-6);
+  }
+
+  .language-selector-mobile-container {
+    max-width: 1200px;
+    margin: auto;
+    padding: 2.75rem 1rem 1rem;
+  }
+
+  @media (min-width: 720px) {
+    .language-selector-mobile-container {
+      display: none;
+    }
+  }
+
+  .footer a {
+    color: var(--primary-main-light-6);
+    text-decoration: none;
+  }
+
+  .footer li {
+    margin-bottom: 1.25rem;
+  }
+
+  .footer li a {
+    padding: 0.5rem 0;
+  }
+
+  .footer li:last-child {
+    margin-bottom: 0;
+  }
+
+  .footer__wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    max-width: 1200px;
+    width: 100%;
+    justify-content: center;
+    margin: 0 auto;
+    padding: 1rem 1rem 2.75rem;
+    grid-row-gap: 32px;
+  }
+
+  @media (min-width: 960px) {
+    .footer__wrapper {
+      padding: 2.75rem 0;
+    }
+  }
+
+  .footer__wrapper__logo {
+    width: 45%;
+    max-width: 45%;
+    display: flex;
+    align-items: baseline;
+  }
+
+  @media (min-width: 720px) {
+    .footer__wrapper__logo {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
+  .sem-footer__wrapper {
+    display: flex;
+    flex-flow: column wrap;
+    width: 100%;
+    max-width: 1200px;
+    justify-content: space-between;
+    margin: auto;
+    padding: 1rem 1rem 2.75rem;
+    grid-row-gap: 32px;
+  }
+
+  @media (min-width: 960px) {
+    .sem-footer__wrapper {
+      flex-flow: row wrap;
+      padding: 1.5rem 1rem;
+    }
+  }
+
+  .sem-footer__legal-links {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .sem-footer__legal-links li {
+    margin-bottom: 0;
+  }
+
+  .sem-footer__contact-info {
+    display: flex;
+    flex-flow: column;
+    column-gap: 0.5rem;
+    row-gap: 0.25rem;
+  }
+
+  @media (min-width: 575px) {
+    .sem-footer__contact-info {
+      flex-flow: row;
+    }
+  }
+
+  .sem-footer__contact-info__phone {
+    display: flex;
+    align-items: center;
+    font-size: 0.8rem;
+  }
+
+  .sem-footer__contact-info__schedule {
+    font-size: 0.75rem;
+  }
+
+  .fixed-container {
+    position: fixed;
+    bottom: 0;
+    z-index: 3;
+    width: 100%;
+  }
+
+  .footer__products,
+  .footer__popular-documents,
+  .footer__company {
+    width: 100%;
+    max-width: 50%;
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: flex-start;
+  }
+
+  .footer__products p,
+  .footer__popular-documents p,
+  .footer__company p {
+    margin-bottom: 1.5rem;
+  }
+
+  @media (min-width: 575px) {
+    .footer__products,
+    .footer__popular-documents,
+    .footer__company {
+      max-width: 28%;
+      padding-right: 1.5rem;
+    }
+  }
+
+  @media (min-width: 960px) {
+    .footer__products,
+    .footer__popular-documents,
+    .footer__company {
+      max-width: 20%;
+    }
+  }
+
+  @media (max-width: 575px) {
+    .footer__products,
+    .footer__popular-documents,
+    .footer__company {
+      max-width: 100%;
+    }
+  }
+
+  .footer__company__resources__findUs .footer__resources,
+  .footer__help__resources .footer__resources {
+    margin-top: 22px;
+  }
+
+  .footer__help__resources,
+  .footer__company {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: flex-start;
+    margin-bottom: 0;
+    max-width: 50%;
+    width: 100%;
+  }
+
+  @media (min-width: 575px) and (max-width: 960px) {
+    .footer__help__resources,
+    .footer__company {
+      display: block;
+    }
+  }
+
+  .footer__help__resources p,
+  .footer__company p {
+    margin-bottom: 1.5rem;
+  }
+
+  @media (min-width: 575px) {
+    .footer__help__resources,
+    .footer__company {
+      max-width: 22.5%;
+      padding-right: 1rem;
+    }
+  }
+
+  @media (min-width: 960px) {
+    .footer__help__resources,
+    .footer__company {
+      max-width: 15%;
+    }
+  }
+
+  .footer__findUs {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-direction: column;
+    max-width: 100%;
+  }
+
+  .footer__findUs .trustpilot-widget {
+    margin-top: 0;
+  }
+
+  @media (min-width: 575px) {
+    .footer__findUs .trustpilot-widget {
+      margin-top: 22px;
+    }
+  }
+
+  @media (min-width: 720px) {
+    .footer__findUs {
+      display: block;
+      max-width: 20%;
+    }
+  }
+
+  @media (min-width: 960px) {
+    .footer__findUs {
+      max-width: 15%;
+    }
+  }
+
+  @media (max-width: 575px) {
+    .footer__findUs {
+      width: 100%;
+    }
+  }
+
+  .footer__findUs ul {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .footer__findUs ul li {
+    margin-right: 0.4rem;
+  }
+
+  .footer-links__title {
+    width: 100%;
+    text-transform: uppercase;
+    font-weight: bold;
+    color: var(--primary-main-light-4);
+  }
+
+  .product-categories {
+    cursor: pointer;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    font-family: 'Inter', sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.33;
+    letter-spacing: -0.3px;
+    padding-top: 1rem;
+    width: 100%;
+    padding-bottom: 0.6rem;
+  }
+
+  .product-categories:not(:last-child) {
+    border-bottom: 1px solid var(--primary-main);
+  }
+
+  .product-categories:has(.open) {
+    padding-bottom: 0;
+  }
+
+  .expand-icon {
+    width: 10px;
+    height: 13px;
+    transform: rotate(90deg);
+    margin-right: 8px;
+  }
+
+  .expand-icon:before,
+  .expand-icon:after {
+    width: 2px;
+    background-color: var(--others-white);
+  }
+
+  .expand-icon.open {
+    transform: rotate(-90deg);
+  }
+
+  .rotate {
+    transform: rotate(180deg);
+  }
+
+  .list-box {
+    background-color: var(--primary-main-dark-1);
+    width: 100%;
+    padding-left: 0.5rem;
+    margin-top: 0.6rem;
+  }
+
+  .list-products {
+    margin: 14px 0;
+  }
+
+  .footer__media__logos__wrapper {
+    width: 84%;
+    display: flex;
+    justify-content: space-around;
+    padding-bottom: 35px;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+
+  .footer__media__logos__wrapper .logo {
+    display: inline-flex;
+    padding-left: 20px;
+    align-items: center;
+    height: 59px;
+  }
+
+  .footer__media__logos__wrapper .logo:first-child {
+    padding-left: 0;
+  }
+
+  @media (max-width: 720px) {
+    .footer__media__logos__wrapper {
+      width: 100%;
+      padding-bottom: 15px;
+      flex-wrap: wrap;
+    }
+
+    .footer__media__logos__wrapper .logo {
+      width: 50%;
+    }
+  }
+
+  .separator {
+    display: block;
+    width: 84%;
+    height: 1px;
+    background-color: var(--primary-main-light-1);
+    margin-bottom: 30px;
+  }
+
+  @media (max-width: 720px) {
+    .separator {
+      width: 100%;
+    }
+  }
+
+  .footer-trustpilot {
+    display: none;
+  }
+
+  @media (min-width: 720px) {
+    .footer-trustpilot {
+      display: flex;
+    }
+  }
+
+  .footer-trustpilot-mobile {
+    display: flex;
+    width: 100%;
+    margin: 1rem 0 2rem 0;
+  }
+
+  @media (min-width: 720px) {
+    .footer-trustpilot-mobile {
+      display: none;
+    }
+  }
+`

package/dist/src/components/atoms/FixedFooter/FixedFooter.tsx

@@ -0,0 +1,303 @@
+import { Button } from '../Button'
+import { ContactBox } from '../../molecules/ContactBox'
+import { Disclaimer } from '../Disclaimer'
+import { FixedFooterProps } from './FixedFooterProps'
+import { FixedFooterStyled } from './FixedFooter.styled'
+import { IconWeb } from '../../../../images/componentsSvg/IconWeb'
+import { Logo } from '../Logo'
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon'
+import React from 'react'
+import { WideInfoBar } from '../WideInfoBar'
+import facebook from '../../../../images/svg/facebook.svg'
+import guaranteeIconGrey from '../../../../images/svg/icon-24-px-satisfaction-grey.svg'
+import linkedin from '../../../../images/svg/linkedin.svg'
+import pinterest from '../../../../images/svg/pinterest.svg'
+import securityIconBlack from '../../../../images/svg/icon-24-px-security_black.svg'
+import x from '../../../../images/svg/x.svg'
+
+export const FixedFooter: React.FC<FixedFooterProps> = ({
+  config = {
+    siteName: 'LawDistrict',
+    sitePhone: '123-456-7890',
+    siteSchedule: 'Monday - Friday, 9am - 5pm',
+    siteUrl: 'https://www.lawdistrict.com',
+    hasGrav: true,
+    hasCookieMessage: true,
+    hasContactBar: false,
+    hasTrustPilot: true,
+    isJonSnow: false,
+    isSEMPage: false,
+    isMobile: false,
+    isTablet: false,
+    isDesktop: true,
+    isAnonymousPayment: false,
+    hide: false,
+    noFooter: false
+  },
+  footer = {
+    disclaimerText: '',
+    guaranteeText: '',
+    securityText: '',
+    bottomFixedBlock: <></>,
+    createDocumentBlock: <></>,
+    trustPilotWidget: <></>
+  },
+  preFooter = {
+    show: true,
+    title: 'Try LawDistrict Now',
+    columns: [
+      'Instant and complete access to our entire library of legal forms',
+      'Edit, download and print in PDF and Word format from any device',
+      'Save time and money on legal document creation'
+    ],
+    hasButton: true,
+    buttonLabel: 'Get Unlimited Access Now',
+    buttonLink: './',
+    buttonClick: () => {}
+  },
+  productsBlock = {
+    title: 'Products',
+    productsCategories: <></>,
+    allProductsLink: <></>
+  },
+  popularDocumentsBlock = {
+    title: 'Popular Documents',
+    popularDocuments: <></>
+  },
+  companyBlock = {
+    title: 'Company',
+    links: <></>
+  },
+  helpBlock = {
+    title: 'Help',
+    links: <></>
+  },
+  resourcesBlock = {
+    title: 'Resources',
+    links: <></>
+  },
+  languageSelector = {
+    show: false,
+    content: <></>
+  }
+}) => {
+  return (
+    <FixedFooterStyled>
+      {preFooter.show && (
+        <section className={'prefooter'}>
+          <div className='wrapper'>
+            <div className='prefooter-container'>
+              <div className='serif --hero prefooter__title'>{preFooter.title}</div>
+              <div className={'prefooter--columns'}>
+                {preFooter.columns.map((column, index) => (
+                  <p key={index} className='prefooter--columns__text'>
+                    {column}
+                  </p>
+                ))}
+              </div>
+              {preFooter.hasButton && (
+                <Button
+                  label={preFooter.buttonLabel}
+                  onClick={preFooter.buttonClick}
+                  link={preFooter.buttonLink}
+                  dataQa={'cta-footer'}
+                  isExternal
+                  hasNoFollow
+                />
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+      {config.isSEMPage && config.isMobile && (
+        <footer className={'sem-footer'}>
+          <section className={'sem-footer__wrapper'}>
+            <ul className='sem-footer__legal-links'>{companyBlock.links}</ul>
+            <div className='sem-footer__contact-info'>
+              <div className='sem-footer__contact-info__phone'>
+                <PhoneIcon width={20} height={20} fill={'white'} />
+                <b>{config.sitePhone} </b>
+              </div>
+              <div className='sem-footer__contact-info__schedule'>{config.siteSchedule}</div>
+            </div>
+            <div className='fixed-container'>{footer.createDocumentBlock}</div>
+          </section>
+        </footer>
+      )}
+      {!config.isSEMPage && (
+        <footer>
+          {!config.hide && !config.noFooter ? (
+            <>
+              <div className='language-selector-mobile-container'>
+                {languageSelector.show === true && languageSelector.content}
+              </div>
+              <section className={'footer__wrapper'}>
+                <div className={'footer__products'}>
+                  <p className={'sans-serif --small footer-links__title'}>{productsBlock.title}</p>
+                  {productsBlock.productsCategories}
+                  <div className={'sans-serif --extra-small product-categories'}>{productsBlock.allProductsLink}</div>
+                </div>
+                <div className={'footer__popular-documents'}>
+                  <p className={'sans-serif --small footer-links__title'}>{popularDocumentsBlock.title}</p>
+                  <ul>{popularDocumentsBlock.popularDocuments}</ul>
+                  {config.isTablet && (
+                    <div className='footer__help__tablet'>
+                      <p className={'sans-serif --small footer-links__title'}>{helpBlock.title}</p>
+                      <ul>{helpBlock.links}</ul>
+                    </div>
+                  )}
+                </div>
+                {(config.isMobile || config.isDesktop) && (
+                  <div className={'footer__company'}>
+                    <p className={'sans-serif --small footer-links__title'}>{companyBlock.title}</p>
+                    <ul>{companyBlock.links}</ul>
+                  </div>
+                )}
+                <div className='footer__company__resources__findUs'>
+                  {config.isTablet && (
+                    <>
+                      <p className={'sans-serif --small footer-links__title'}>{companyBlock.title}</p>
+                      <ul>{companyBlock.links}</ul>
+
+                      {!config.isJonSnow && config.hasGrav && config.isTablet && (
+                        <div className='footer__resources'>
+                          <p className={'sans-serif --small footer-links__title'}>{resourcesBlock.title}</p>
+                          <ul>{resourcesBlock.links}</ul>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+                {!config.isTablet && (
+                  <div className={'footer__help__resources'}>
+                    <div>
+                      <div className='footer__help'>
+                        <p className={'sans-serif --small footer-links__title'}>{helpBlock.title}</p>
+                        <ul>{helpBlock.links}</ul>
+                      </div>
+                      {!config.isJonSnow && config.hasGrav && (
+                        <div className='footer__resources'>
+                          <p className={'sans-serif --small footer-links__title'}>{resourcesBlock.title}</p>
+                          <ul>{resourcesBlock.links}</ul>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+                <div className={'footer__findUs'}>
+                  <div className='find-us-container'>
+                    {!config.isJonSnow && (
+                      <>
+                        <div className='find-us-content'>
+                          <p className={'sans-serif --small footer-links__title'}>Find us</p>
+                          <ul>
+                            <li>
+                              <a
+                                href={'https://www.facebook.com/lawdistrictlegal'}
+                                rel='noopener noreferrer'
+                                target='_blank'
+                              >
+                                <img src={facebook} alt='Facebook logo' width='32' height='32' />
+                              </a>
+                            </li>
+                            <li>
+                              <a href={'https://twitter.com/district_law'} rel='noopener noreferrer' target='_blank'>
+                                <img src={x} alt='Twitter logo' width='32' height='32' />
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                href={'https://www.linkedin.com/company/law-district/'}
+                                rel='noopener noreferrer'
+                                target='_blank'
+                              >
+                                <img src={linkedin} alt='Linkedin logo' width='32' height='32' />
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                href={'https://www.pinterest.com/lawdistrict/'}
+                                rel='noopener noreferrer'
+                                target='_blank'
+                              >
+                                <img src={pinterest} alt='Pinterest logo' width='32' height='32' />
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div className={'footer-contact-box'}>
+                          <span className='footer-contact-box_phone'>{config.sitePhone}</span>
+                          <Button
+                            centered
+                            isExternal
+                            link={`tel:${config.sitePhone}`}
+                            givenClass={'footer-contact-box_phone-button'}
+                            label={config.sitePhone}
+                            dataQa={'footer_contact_box'}
+                          />
+                        </div>
+                      </>
+                    )}
+                    <div className={'footer__logo'}>
+                      <Logo
+                        className='footer__lawdistrict'
+                        siteName={config.siteName}
+                        width='138'
+                        height='24'
+                        type='white'
+                      />
+                    </div>
+                  </div>
+                  {config.hasTrustPilot && footer.trustPilotWidget}
+                </div>
+                {!config.isJonSnow && (
+                  <div className={'footer__mobile-contact'}>
+                    <ContactBox
+                      mobile={true}
+                      phone={config.sitePhone}
+                      schedule={config.siteSchedule}
+                      mobileGtmTag='clicked_phone_footer'
+                      dataQa='footer_contact_box'
+                      darkMode
+                    />
+                  </div>
+                )}
+              </section>
+            </>
+          ) : null}
+          {config.hasContactBar && (
+            <WideInfoBar>
+              <>
+                <div className={`contact-bar-wrapper ${(config.isJonSnow || config.isAnonymousPayment) && 'hidden'}`}>
+                  <IconWeb />
+                  <div className='contact-bar-wrapper__text'>
+                    <div className='is-mobile'>
+                      <a className='phone' href={`tel:${config.sitePhone}`}>
+                        <strong>{config.sitePhone}</strong>
+                      </a>
+                      {` - ${config.siteSchedule}`}
+                    </div>
+                    <div className='no-mobile'>
+                      <strong>{config.sitePhone}</strong> - {config.siteSchedule}
+                    </div>
+                  </div>
+                </div>
+                <div className='contact-bar-wrapper'>
+                  <img src={securityIconBlack} alt='' />
+                  <p className='contact-bar-wrapper__text'>{footer.securityText}</p>
+                </div>
+                <div className='contact-bar-wrapper'>
+                  <img src={guaranteeIconGrey} alt='' />
+                  <p className='contact-bar-wrapper__text'>{footer.guaranteeText}</p>
+                </div>
+              </>
+            </WideInfoBar>
+          )}
+          <Disclaimer text={footer.disclaimerText} siteUrl={config.siteUrl} />
+          <div className='fixed-container'>{footer.createDocumentBlock}</div>
+        </footer>
+      )}
+      {footer.bottomFixedBlock}
+    </FixedFooterStyled>
+  )
+}