@npm_leadtech/legal-lib-components 5.22.5 → 5.22.7

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

@@ -69,5 +69,5 @@ export const FixedFooter = ({ config = {
     show: false,
     content: _jsx(_Fragment, {})
 } }) => {
-    return (_jsxs(FixedFooterStyled, { children: [preFooter.show && (_jsx("section", { className: 'prefooter', children: _jsx("div", { className: 'wrapper', children: _jsxs("div", { className: 'prefooter-container', children: [_jsx("div", { className: 'serif --hero prefooter__title', children: preFooter.title }), _jsx("div", { className: 'prefooter--columns', children: preFooter.columns.map((column, index) => (_jsx("p", { className: 'prefooter--columns__text', children: column }, index))) }), preFooter.hasButton && (_jsx(Button, { label: preFooter.buttonLabel, onClick: preFooter.buttonClick, link: preFooter.buttonLink, dataQa: 'cta-footer', isExternal: true, hasNoFollow: true }))] }) }) })), config.isSEMPage && config.isMobile && (_jsx("footer", { className: 'sem-footer', children: _jsxs("section", { className: 'sem-footer__wrapper', children: [_jsx("ul", { className: 'sem-footer__legal-links', children: companyBlock.links }), _jsxs("div", { className: 'sem-footer__contact-info', children: [_jsxs("div", { className: 'sem-footer__contact-info__phone', children: [_jsx(PhoneIcon, { width: 20, height: 20, fill: 'white' }), _jsxs("b", { children: [config.sitePhone, " "] })] }), _jsx("div", { className: 'sem-footer__contact-info__schedule', children: config.siteSchedule })] }), _jsx("div", { className: 'fixed-container', children: footer.createDocumentBlock })] }) })), !config.isSEMPage && (_jsxs("footer", { children: [!config.hide && !config.noFooter ? (_jsxs(_Fragment, { children: [_jsx("div", { className: 'language-selector-mobile-container', children: languageSelector.show === true && languageSelector.content }), _jsxs("section", { className: 'footer__wrapper', children: [_jsxs("div", { className: 'footer__products', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: productsBlock.title }), productsBlock.productsCategories, _jsx("div", { className: 'sans-serif --extra-small product-categories', children: productsBlock.allProductsLink })] }), _jsxs("div", { className: 'footer__popular-documents', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: popularDocumentsBlock.title }), _jsx("ul", { children: popularDocumentsBlock.popularDocuments }), config.isTablet && (_jsxs("div", { className: 'footer__help__tablet', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: helpBlock.title }), _jsx("ul", { children: helpBlock.links })] }))] }), (config.isMobile || config.isDesktop) && (_jsxs("div", { className: 'footer__company', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: companyBlock.title }), _jsx("ul", { children: companyBlock.links })] })), _jsx("div", { className: 'footer__company__resources__findUs', children: config.isTablet && (_jsxs(_Fragment, { children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: companyBlock.title }), _jsx("ul", { children: companyBlock.links }), !config.isJonSnow && config.hasGrav && config.isTablet && (_jsxs("div", { className: 'footer__resources', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: resourcesBlock.title }), _jsx("ul", { children: resourcesBlock.links })] }))] })) }), !config.isTablet && (_jsx("div", { className: 'footer__help__resources', children: _jsxs("div", { children: [_jsxs("div", { className: 'footer__help', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: helpBlock.title }), _jsx("ul", { children: helpBlock.links })] }), !config.isJonSnow && config.hasGrav && (_jsxs("div", { className: 'footer__resources', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: resourcesBlock.title }), _jsx("ul", { children: resourcesBlock.links })] }))] }) })), _jsxs("div", { className: 'footer__findUs', children: [_jsxs("div", { className: 'find-us-container', children: [!config.isJonSnow && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'find-us-content', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: "Find us" }), _jsxs("ul", { children: [_jsx("li", { children: _jsx("a", { href: 'https://www.facebook.com/lawdistrictlegal', rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: facebook, alt: 'Facebook logo', width: '32', height: '32' }) }) }), _jsx("li", { children: _jsx("a", { href: 'https://twitter.com/district_law', rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: x, alt: 'Twitter logo', width: '32', height: '32' }) }) }), _jsx("li", { children: _jsx("a", { href: 'https://www.linkedin.com/company/law-district/', rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: linkedin, alt: 'Linkedin logo', width: '32', height: '32' }) }) }), _jsx("li", { children: _jsx("a", { href: 'https://www.pinterest.com/lawdistrict/', rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: pinterest, alt: 'Pinterest logo', width: '32', height: '32' }) }) })] })] }), _jsxs("div", { className: 'footer-contact-box', children: [_jsx("span", { className: 'footer-contact-box_phone', children: config.sitePhone }), _jsx(Button, { centered: true, isExternal: true, link: `tel:${config.sitePhone}`, givenClass: 'footer-contact-box_phone-button', label: config.sitePhone, dataQa: 'footer_contact_box' })] })] })), _jsx("div", { className: 'footer__logo', children: _jsx(Logo, { className: 'footer__lawdistrict', siteName: config.siteName, width: '138', height: '24', type: 'white' }) })] }), config.hasTrustPilot && footer.trustPilotWidget] }), !config.isJonSnow && (_jsx("div", { className: 'footer__mobile-contact', children: _jsx(ContactBox, { mobile: true, phone: config.sitePhone, schedule: config.siteSchedule, mobileGtmTag: 'clicked_phone_footer', dataQa: 'footer_contact_box', darkMode: true }) }))] })] })) : null, config.hasContactBar && (_jsx(WideInfoBar, { children: _jsxs(_Fragment, { children: [_jsxs("div", { className: `contact-bar-wrapper ${(config.isJonSnow || config.isAnonymousPayment) && 'hidden'}`, children: [_jsx(IconWeb, {}), _jsxs("div", { className: 'contact-bar-wrapper__text', children: [_jsxs("div", { className: 'is-mobile', children: [_jsx("a", { className: 'phone', href: `tel:${config.sitePhone}`, children: _jsx("strong", { children: config.sitePhone }) }), ` - ${config.siteSchedule}`] }), _jsxs("div", { className: 'no-mobile', children: [_jsx("strong", { children: config.sitePhone }), " - ", config.siteSchedule] })] })] }), _jsxs("div", { className: 'contact-bar-wrapper', children: [_jsx("img", { src: securityIconBlack, alt: '' }), _jsx("p", { className: 'contact-bar-wrapper__text', children: footer.securityText })] }), _jsxs("div", { className: 'contact-bar-wrapper', children: [_jsx("img", { src: guaranteeIconGrey, alt: '' }), _jsx("p", { className: 'contact-bar-wrapper__text', children: footer.guaranteeText })] })] }) })), _jsx(Disclaimer, { text: footer.disclaimerText, siteUrl: config.siteUrl }), _jsx("div", { className: 'fixed-container', children: footer.createDocumentBlock })] })), footer.bottomFixedBlock] }));
+    return (_jsxs(FixedFooterStyled, { children: [preFooter.show && (_jsx("section", { className: 'prefooter', children: _jsx("div", { className: 'wrapper', children: _jsxs("div", { className: 'prefooter-container', children: [_jsx("div", { className: 'serif --hero prefooter__title', children: preFooter.title }), _jsx("div", { className: 'prefooter--columns', children: preFooter.columns.map((column, index) => (_jsx("p", { className: 'prefooter--columns__text', children: column }, index))) }), preFooter.hasButton && (_jsx(Button, { label: preFooter.buttonLabel, onClick: preFooter.buttonClick, link: preFooter.buttonLink, dataQa: 'cta-footer', isExternal: true, hasNoFollow: true }))] }) }) })), config.isSEMPage && config.isMobile && (_jsx("footer", { className: 'sem-footer', children: _jsxs("section", { className: 'sem-footer__wrapper', children: [_jsx("ul", { className: 'sem-footer__legal-links', children: companyBlock.links }), _jsxs("div", { className: 'sem-footer__contact-info', children: [_jsxs("div", { className: 'sem-footer__contact-info__phone', children: [_jsx(PhoneIcon, { width: 20, height: 20, fill: 'white' }), _jsxs("b", { children: [config.sitePhone, " "] })] }), _jsx("div", { className: 'sem-footer__contact-info__schedule', children: config.siteSchedule })] }), _jsx("div", { className: 'fixed-container', children: footer.createDocumentBlock })] }) })), !config.isSEMPage && (_jsxs("footer", { children: [!config.hide && !config.noFooter ? (_jsxs(_Fragment, { children: [_jsx("div", { className: 'language-selector-mobile-container', children: languageSelector.show === true && languageSelector.content }), _jsxs("section", { className: 'footer__wrapper', children: [_jsxs("div", { className: 'footer__products', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: productsBlock.title }), productsBlock.productsCategories, _jsx("div", { className: 'sans-serif --extra-small product-categories', children: productsBlock.allProductsLink })] }), _jsxs("div", { className: 'footer__popular-documents', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: popularDocumentsBlock.title }), _jsx("ul", { children: popularDocumentsBlock.popularDocuments }), config.isTablet && (_jsxs("div", { className: 'footer__help__tablet', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: helpBlock.title }), _jsx("ul", { children: helpBlock.links })] }))] }), (config.isMobile || config.isDesktop) && (_jsxs("div", { className: 'footer__company', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: companyBlock.title }), _jsx("ul", { children: companyBlock.links })] })), _jsx("div", { className: 'footer__company__resources__findUs', children: config.isTablet && (_jsxs(_Fragment, { children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: companyBlock.title }), _jsx("ul", { children: companyBlock.links }), !config.isJonSnow && config.hasGrav && config.isTablet && (_jsxs("div", { className: 'footer__resources', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: resourcesBlock.title }), _jsx("ul", { children: resourcesBlock.links })] }))] })) }), !config.isTablet && (_jsx("div", { className: 'footer__help__resources', children: _jsxs("div", { children: [_jsxs("div", { className: 'footer__help', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: helpBlock.title }), _jsx("ul", { children: helpBlock.links })] }), !config.isJonSnow && config.hasGrav && (_jsxs("div", { className: 'footer__resources', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: resourcesBlock.title }), _jsx("ul", { children: resourcesBlock.links })] }))] }) })), _jsxs("div", { className: 'footer__findUs', children: [_jsxs("div", { className: 'find-us-container', children: [!config.isJonSnow && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'find-us-content', children: [_jsx("p", { className: 'sans-serif --small footer-links__title', children: "Find us" }), _jsxs("ul", { children: [_jsx("li", { children: _jsx("a", { href: 'https://www.facebook.com/lawdistrictlegal', rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: facebook, alt: 'Facebook logo', width: '32', height: '32' }) }) }), _jsx("li", { children: _jsx("a", { href: 'https://twitter.com/district_law', rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: x, alt: 'Twitter logo', width: '32', height: '32' }) }) }), _jsx("li", { children: _jsx("a", { href: 'https://www.linkedin.com/company/law-district/', rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: linkedin, alt: 'Linkedin logo', width: '32', height: '32' }) }) }), _jsx("li", { children: _jsx("a", { href: 'https://www.pinterest.com/lawdistrict/', rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: pinterest, alt: 'Pinterest logo', width: '32', height: '32' }) }) })] })] }), _jsxs("div", { className: 'footer-contact-box', children: [_jsx("span", { className: 'footer-contact-box_phone', children: config.sitePhone }), _jsx(Button, { centered: true, isExternal: true, link: `tel:${config.sitePhone}`, givenClass: 'footer-contact-box-button', label: config.sitePhone, dataQa: 'footer_contact_box' })] })] })), _jsx("div", { className: 'footer__logo', children: _jsx(Logo, { className: 'footer__lawdistrict', siteName: config.siteName, width: '138', height: '24', type: 'white' }) })] }), config.hasTrustPilot && footer.trustPilotWidget] }), !config.isJonSnow && (_jsx("div", { className: 'footer-mobile-contact-box', children: _jsx(ContactBox, { mobile: true, phone: config.sitePhone, schedule: config.siteSchedule, mobileGtmTag: 'clicked_phone_footer', dataQa: 'footer_contact_box', darkMode: true }) }))] })] })) : null, config.hasContactBar && (_jsx(WideInfoBar, { children: _jsxs(_Fragment, { children: [_jsxs("div", { className: `contact-bar-wrapper ${(config.isJonSnow || config.isAnonymousPayment) && 'hidden'}`, children: [_jsx(IconWeb, {}), _jsxs("div", { className: 'contact-bar-wrapper__text', children: [_jsxs("div", { className: 'is-mobile', children: [_jsx("a", { className: 'phone', href: `tel:${config.sitePhone}`, children: _jsx("strong", { children: config.sitePhone }) }), ` - ${config.siteSchedule}`] }), _jsxs("div", { className: 'no-mobile', children: [_jsx("strong", { children: config.sitePhone }), " - ", config.siteSchedule] })] })] }), _jsxs("div", { className: 'contact-bar-wrapper', children: [_jsx("img", { src: securityIconBlack, alt: '' }), _jsx("p", { className: 'contact-bar-wrapper__text', children: footer.securityText })] }), _jsxs("div", { className: 'contact-bar-wrapper', children: [_jsx("img", { src: guaranteeIconGrey, alt: '' }), _jsx("p", { className: 'contact-bar-wrapper__text', children: footer.guaranteeText })] })] }) })), _jsx(Disclaimer, { text: footer.disclaimerText, siteUrl: config.siteUrl }), _jsx("div", { className: 'fixed-container', children: footer.createDocumentBlock })] })), footer.bottomFixedBlock] }));
 };

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

@@ -591,4 +591,201 @@ export const FixedFooterStyled = styled.div `
       display: none;
     }
   }
+  /* Diferencias en prefooter */
+  .prefooter {
+    background-color: var(--primary-main-light-5); /* Color diferente */
+  }
+  .prefooter--columns p {
+    color: var(--neutral-neutral-2); /* Color diferente */
+  }
+
+  /* Adiciones en footer */
+  footer {
+    /*LEG-5512: A/B*/
+  }
+
+  footer .desktop_view .bottom-text-link {
+    text-decoration: underline;
+  }
+
+  footer .wide-info-bar.green {
+    background-color: var(--neutral-neutral-6);
+    color: var(--neutral-neutral-1);
+  }
+
+  footer .footer__wrapper.hideMobile {
+    display: none;
+  }
+  @media (min-width: 720px) {
+    footer .footer__wrapper.hideMobile {
+      display: flex;
+    }
+  }
+
+  footer .footer__logo {
+    width: 45%;
+    max-width: 45%;
+    display: flex;
+  }
+  @media (min-width: 720px) {
+    footer .footer__logo {
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 2rem;
+      align-items: center;
+    }
+  }
+
+  footer .footer__products .products__list,
+  footer .footer__popular-documents .products__list,
+  footer .footer__company .products__list {
+    top: 2.2rem;
+    right: 0;
+  }
+
+  footer .footer__products .products__list .icon-arrow,
+  footer .footer__popular-documents .products__list .icon-arrow,
+  footer .footer__company .products__list .icon-arrow {
+    width: 0.625rem;
+    height: 0.813rem;
+  }
+
+  footer .footer__products .products__list .icon-arrow::before,
+  footer .footer__popular-documents .products__list .icon-arrow::before,
+  footer .footer__company .products__list .icon-arrow::before {
+    top: 0;
+    transform: rotate(-45deg);
+  }
+
+  footer .footer__products .products__list .icon-arrow::after,
+  footer .footer__popular-documents .products__list .icon-arrow::after,
+  footer .footer__company .products__list .icon-arrow::after {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+
+  footer .footer__products .products__list .icon-arrow::before,
+  footer .footer__products .products__list .icon-arrow::after,
+  footer .footer__popular-documents .products__list .icon-arrow::before,
+  footer .footer__popular-documents .products__list .icon-arrow::after,
+  footer .footer__company .products__list .icon-arrow::before,
+  footer .footer__company .products__list .icon-arrow::after {
+    height: 64%;
+    left: 50%;
+    content: '';
+    position: absolute;
+  }
+
+  footer .footer__products .products__list::marker,
+  footer .footer__popular-documents .products__list::marker,
+  footer .footer__company .products__list::marker {
+    content: none;
+  }
+
+  footer .footer__products .products__list:hover .icon-arrow:before,
+  footer .footer__products .products__list:hover .icon-arrow:after,
+  footer .footer__popular-documents .products__list:hover .icon-arrow:before,
+  footer .footer__popular-documents .products__list:hover .icon-arrow:after,
+  footer .footer__company .products__list:hover .icon-arrow:before,
+  footer .footer__company .products__list:hover .icon-arrow:after {
+    background-color: var(--others-white);
+  }
+
+  footer .separation-line {
+    width: 100%;
+    height: 1px;
+    background-color: var(--primary-main);
+    margin-bottom: 0.5rem;
+  }
+
+  footer .footer__mobile-contact {
+    display: block;
+    width: 100%;
+  }
+  @media (min-width: 720px) {
+    footer .footer__mobile-contact {
+      display: none;
+    }
+  }
+
+  footer .footer__findus__mobile {
+    display: none;
+  }
+  @media (max-width: 720px) {
+    footer .footer__findus__mobile {
+      display: block;
+    }
+    footer .footer__findus__mobile ul {
+      display: flex;
+    }
+    footer .footer__findus__mobile ul li {
+      width: inherit;
+      margin-right: 1rem;
+    }
+  }
+
+  footer .find-us-container .contact-box-container {
+    display: none;
+  }
+  @media (min-width: 720px) {
+    footer .find-us-container .contact-box-container {
+      display: block;
+    }
+  }
+  footer .find-us-container .contact-box-container .contact-box__phone {
+    color: var(--others-white);
+  }
+  footer .find-us-container .contact-box-container .contact-box__schedule {
+    color: var(--neutral-neutral-3);
+  }
+  .contact-bar-wrapper {
+    display: flex;
+    align-items: center;
+  }
+  .contact-bar-wrapper.hidden {
+    display: none;
+  }
+  .contact-bar-wrapper__text {
+    width: -moz-max-content;
+    width: max-content;
+    margin: 0.25rem;
+  }
+  @media (min-width: 720px) {
+    .contact-bar-wrapper__text {
+      margin: 1rem 0.5rem;
+    }
+  }
+  .contact-bar-wrapper__text .phone {
+    color: var(--neutral-neutral-1);
+  }
+  .contact-bar-wrapper__text .is-mobile {
+    display: inline;
+  }
+  @media (min-width: 720px) {
+    .contact-bar-wrapper__text .is-mobile {
+      display: none;
+    }
+  }
+  .contact-bar-wrapper .is-mobile {
+    display: flex;
+    display: inline-table;
+  }
+  @media (min-width: 720px) {
+    .contact-bar-wrapper .is-mobile {
+      display: none;
+    }
+  }
+  .contact-bar-wrapper .no-mobile {
+    display: none;
+  }
+  @media (min-width: 720px) {
+    .contact-bar-wrapper .no-mobile {
+      display: inline;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+  }
+  .contact-bar-wrapper .no-mobile .phone {
+    color: var(--primary-main-dark-1);
+  }
 `;

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

@@ -592,4 +592,201 @@ export const FixedFooterStyled = styled.div`
       display: none;
     }
   }
+  /* Diferencias en prefooter */
+  .prefooter {
+    background-color: var(--primary-main-light-5); /* Color diferente */
+  }
+  .prefooter--columns p {
+    color: var(--neutral-neutral-2); /* Color diferente */
+  }
+
+  /* Adiciones en footer */
+  footer {
+    /*LEG-5512: A/B*/
+  }
+
+  footer .desktop_view .bottom-text-link {
+    text-decoration: underline;
+  }
+
+  footer .wide-info-bar.green {
+    background-color: var(--neutral-neutral-6);
+    color: var(--neutral-neutral-1);
+  }
+
+  footer .footer__wrapper.hideMobile {
+    display: none;
+  }
+  @media (min-width: 720px) {
+    footer .footer__wrapper.hideMobile {
+      display: flex;
+    }
+  }
+
+  footer .footer__logo {
+    width: 45%;
+    max-width: 45%;
+    display: flex;
+  }
+  @media (min-width: 720px) {
+    footer .footer__logo {
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 2rem;
+      align-items: center;
+    }
+  }
+
+  footer .footer__products .products__list,
+  footer .footer__popular-documents .products__list,
+  footer .footer__company .products__list {
+    top: 2.2rem;
+    right: 0;
+  }
+
+  footer .footer__products .products__list .icon-arrow,
+  footer .footer__popular-documents .products__list .icon-arrow,
+  footer .footer__company .products__list .icon-arrow {
+    width: 0.625rem;
+    height: 0.813rem;
+  }
+
+  footer .footer__products .products__list .icon-arrow::before,
+  footer .footer__popular-documents .products__list .icon-arrow::before,
+  footer .footer__company .products__list .icon-arrow::before {
+    top: 0;
+    transform: rotate(-45deg);
+  }
+
+  footer .footer__products .products__list .icon-arrow::after,
+  footer .footer__popular-documents .products__list .icon-arrow::after,
+  footer .footer__company .products__list .icon-arrow::after {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+
+  footer .footer__products .products__list .icon-arrow::before,
+  footer .footer__products .products__list .icon-arrow::after,
+  footer .footer__popular-documents .products__list .icon-arrow::before,
+  footer .footer__popular-documents .products__list .icon-arrow::after,
+  footer .footer__company .products__list .icon-arrow::before,
+  footer .footer__company .products__list .icon-arrow::after {
+    height: 64%;
+    left: 50%;
+    content: '';
+    position: absolute;
+  }
+
+  footer .footer__products .products__list::marker,
+  footer .footer__popular-documents .products__list::marker,
+  footer .footer__company .products__list::marker {
+    content: none;
+  }
+
+  footer .footer__products .products__list:hover .icon-arrow:before,
+  footer .footer__products .products__list:hover .icon-arrow:after,
+  footer .footer__popular-documents .products__list:hover .icon-arrow:before,
+  footer .footer__popular-documents .products__list:hover .icon-arrow:after,
+  footer .footer__company .products__list:hover .icon-arrow:before,
+  footer .footer__company .products__list:hover .icon-arrow:after {
+    background-color: var(--others-white);
+  }
+
+  footer .separation-line {
+    width: 100%;
+    height: 1px;
+    background-color: var(--primary-main);
+    margin-bottom: 0.5rem;
+  }
+
+  footer .footer__mobile-contact {
+    display: block;
+    width: 100%;
+  }
+  @media (min-width: 720px) {
+    footer .footer__mobile-contact {
+      display: none;
+    }
+  }
+
+  footer .footer__findus__mobile {
+    display: none;
+  }
+  @media (max-width: 720px) {
+    footer .footer__findus__mobile {
+      display: block;
+    }
+    footer .footer__findus__mobile ul {
+      display: flex;
+    }
+    footer .footer__findus__mobile ul li {
+      width: inherit;
+      margin-right: 1rem;
+    }
+  }
+
+  footer .find-us-container .contact-box-container {
+    display: none;
+  }
+  @media (min-width: 720px) {
+    footer .find-us-container .contact-box-container {
+      display: block;
+    }
+  }
+  footer .find-us-container .contact-box-container .contact-box__phone {
+    color: var(--others-white);
+  }
+  footer .find-us-container .contact-box-container .contact-box__schedule {
+    color: var(--neutral-neutral-3);
+  }
+  .contact-bar-wrapper {
+    display: flex;
+    align-items: center;
+  }
+  .contact-bar-wrapper.hidden {
+    display: none;
+  }
+  .contact-bar-wrapper__text {
+    width: -moz-max-content;
+    width: max-content;
+    margin: 0.25rem;
+  }
+  @media (min-width: 720px) {
+    .contact-bar-wrapper__text {
+      margin: 1rem 0.5rem;
+    }
+  }
+  .contact-bar-wrapper__text .phone {
+    color: var(--neutral-neutral-1);
+  }
+  .contact-bar-wrapper__text .is-mobile {
+    display: inline;
+  }
+  @media (min-width: 720px) {
+    .contact-bar-wrapper__text .is-mobile {
+      display: none;
+    }
+  }
+  .contact-bar-wrapper .is-mobile {
+    display: flex;
+    display: inline-table;
+  }
+  @media (min-width: 720px) {
+    .contact-bar-wrapper .is-mobile {
+      display: none;
+    }
+  }
+  .contact-bar-wrapper .no-mobile {
+    display: none;
+  }
+  @media (min-width: 720px) {
+    .contact-bar-wrapper .no-mobile {
+      display: inline;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+  }
+  .contact-bar-wrapper .no-mobile .phone {
+    color: var(--primary-main-dark-1);
+  }
 `

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

@@ -231,7 +231,7 @@ export const FixedFooter: React.FC<FixedFooterProps> = ({
                             centered
                             isExternal
                             link={`tel:${config.sitePhone}`}
-                            givenClass={'footer-contact-box_phone-button'}
+                            givenClass={'footer-contact-box-button'}
                             label={config.sitePhone}
                             dataQa={'footer_contact_box'}
                           />
@@ -251,7 +251,7 @@ export const FixedFooter: React.FC<FixedFooterProps> = ({
                   {config.hasTrustPilot && footer.trustPilotWidget}
                 </div>
                 {!config.isJonSnow && (
-                  <div className={'footer__mobile-contact'}>
+                  <div className={'footer-mobile-contact-box'}>
                     <ContactBox
                       mobile={true}
                       phone={config.sitePhone}

package/package.json

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