@npm_leadtech/legal-lib-components 7.27.4 → 7.28.1

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

@@ -4,7 +4,7 @@ import { DocumentMainMenu } from '../../../components/organisms/DocumentMainMenu
 import { MenuItemsStyled } from './MenuItems.styled';
 import { RatafiaLandingIcon } from '../../atoms/RatafiaLandingIcon';
 import arrowDown from '../../../../images/svg/arrow-down.svg';
-export const MenuItems = ({ hasProducts, seeAllDocumentsText, setCookiePolicyFunc, routes, finalMenu, isMobile, configVars, navMenuItems, extraMenu }) => {
-    return (_jsxs(MenuItemsStyled, { className: `${isMobile ? 'navigation-pane' : 'left-nav'}`, children: [hasProducts && (_jsxs("div", { className: 'navigation-pane__products', children: [_jsxs("div", { className: 'navigation-pane__products__container', children: [_jsx("p", { className: 'navigation-pane__products__title', children: 'Documents' }), _jsx("img", { src: arrowDown, alt: 'arrow-down' })] }), _jsx("div", { className: 'products__list', children: isMobile ? (_jsx(DocumentListMenu, { routes: routes, seeAllLegalDocs: seeAllDocumentsText?.seeAllLegalDocs ?? '', seeAllTypeDocs: seeAllDocumentsText?.seeAllTypeDocs ?? '', finalMenu: finalMenu, hasSubCategoryPage: configVars.HAS_SUBCATEGORY_PAGE, setCookiePolicyFunc: setCookiePolicyFunc })) : (_jsx(DocumentMainMenu, { seeAllTypeDocs: seeAllDocumentsText?.seeAllTypeDocs ?? '', allLegalDocs: seeAllDocumentsText?.allLegalDocs ?? '', allTypeDocs: seeAllDocumentsText?.allTypeDocs ?? '', setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, hasSubCategoryPage: configVars.HAS_SUBCATEGORY_PAGE, finalMenu: finalMenu })) })] })), !!navMenuItems &&
+export const MenuItems = ({ hasProducts, seeAllDocumentsText, setCookiePolicyFunc, routes, finalMenu, configVars, navMenuItems, extraMenu }) => {
+    return (_jsxs(MenuItemsStyled, { children: [hasProducts && (_jsxs("div", { className: 'navigation-pane__products', children: [_jsxs("div", { className: 'navigation-pane__products__container', children: [_jsx("p", { className: 'navigation-pane__products__title', children: 'Documents' }), _jsx("img", { src: arrowDown, alt: 'arrow-down' })] }), _jsxs("div", { className: 'products__list', children: [_jsx("div", { className: 'menu-mobile-wrapper', children: _jsx(DocumentListMenu, { routes: routes, seeAllLegalDocs: seeAllDocumentsText?.seeAllLegalDocs ?? '', seeAllTypeDocs: seeAllDocumentsText?.seeAllTypeDocs ?? '', finalMenu: finalMenu, hasSubCategoryPage: configVars.HAS_SUBCATEGORY_PAGE, setCookiePolicyFunc: setCookiePolicyFunc }) }), _jsx("div", { className: 'menu-desktop-wrapper', children: _jsx(DocumentMainMenu, { seeAllTypeDocs: seeAllDocumentsText?.seeAllTypeDocs ?? '', allLegalDocs: seeAllDocumentsText?.allLegalDocs ?? '', allTypeDocs: seeAllDocumentsText?.allTypeDocs ?? '', setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, hasSubCategoryPage: configVars.HAS_SUBCATEGORY_PAGE, finalMenu: finalMenu }) })] })] })), !!navMenuItems &&
                 navMenuItems.map((item) => (_jsx("div", { className: `navigation-pane__link`, children: _jsxs("a", { className: `navigation-pane__link__title`, title: item.title, "data-qa": item.dataQa, href: item.href, children: [_jsx("p", { children: item.label }), item.label === 'LawGenius' && _jsx(RatafiaLandingIcon, {})] }) }, item.title))), !!extraMenu && extraMenu?.items?.length > 0 && (_jsxs("div", { className: 'navigation-pane__resources', children: [_jsxs("div", { className: 'navigation-pane__resources__container', children: [_jsx("p", { className: 'navigation-pane__resources__title', children: extraMenu.title }), _jsx("img", { src: arrowDown, alt: 'arrow-down' })] }), _jsx("ul", { className: 'resources__list', children: extraMenu.items.map((item) => (_jsx("li", { className: 'menu-items-li', children: _jsx("a", { title: item.title, "data-qa": item.dataQa, href: item.href, children: item.label }) }, item.title))) })] }))] }));
 };

package/dist/src/components/organisms/MenuItems/MenuItems.styled.js

@@ -6,6 +6,35 @@ export const MenuItemsStyled = styled.div `
   justify-content: flex-start;
   align-items: flex-start;
 
+  @media (min-width: 1024px) {
+    gap: 2rem;
+  }
+
+  @media ((min-width: ${size.tab} ) and (max-width: 1024px)) {
+    gap: 1rem;
+  }
+
+  .menu-desktop-wrapper {
+    display: none;
+  }
+  .menu-mobile-wrapper {
+    display: block;
+  }
+
+  @media ${device.tablets} {
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    width: 100%;
+
+    .menu-desktop-wrapper {
+      display: block;
+    }
+    .menu-mobile-wrapper {
+      display: none;
+    }
+  }
+
   &__wrapper {
     width: 100%;
     margin-top: 1rem;
@@ -23,25 +52,11 @@ export const MenuItemsStyled = styled.div `
     }
   }
 
-  .left-nav {
-    position: relative;
-    width: 100%;
-    display: none;
-    flex-flow: row wrap;
-    justify-content: flex-end;
-  }
-
   &__spacer {
     display: flex;
     flex: 1;
   }
 
-  .left-nav {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-
   .header-phone {
     display: flex;
     align-items: center;
@@ -70,14 +85,6 @@ export const MenuItemsStyled = styled.div `
     }
   }
 
-  @media ${device.tablets} {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-  }
-
   &.--no-products {
     justify-content: flex-end;
     align-items: center;
@@ -363,67 +370,18 @@ export const MenuItemsStyled = styled.div `
     margin-right: 1rem;
   }
 
-  // mobile pane
-
-  .navigation-pane {
-    .navigation-pane.--is-mobile {
-      display: flex;
-
-      @media (max-width: ${size.tab}) {
-        display: none;
-      }
-
-      .navigation-pane__user-menu {
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        margin: 0 1rem;
-        padding: 1.5rem 0;
-      }
-
-      .navigation-pane__ratafia {
-        padding: 1.5rem 1.5rem 0.5rem 1.5rem;
-
-        .navigation-pane__ratafia__title {
-          display: flex;
-          justify-content: start;
-          align-items: center;
-          gap: 0.25rem;
-        }
-      }
-
-      .navigation-pane__resources {
-        .resources__list {
-          @media ${device['mobile']} {
-            margin-bottom: 2rem;
-          }
-        }
-      }
-    }
-
-    &__trigger {
-      display: flex;
-      align-content: center;
-      flex-flow: row wrap;
-      align-items: center;
-      font-weight: bold;
-      color: var(--button-secondary);
-      padding: 4px 8px;
-      border: 1px solid var(--neutral-neutral-3);
-      border-radius: var(--s-border-radius);
-      z-index: 200;
-      //Prevent user from copying template
-      -webkit-touch-callout: none;
-      -moz-user-select: none;
-      -webkit-user-select: none;
-      -ms-user-select: none;
-      -o-user-select: none;
-      user-select: none;
-
-      span {
-        margin-right: 0.5rem;
-      }
-    }
+  &__trigger {
+    display: flex;
+    align-content: center;
+    flex-flow: row wrap;
+    align-items: center;
+    font-weight: bold;
+    color: var(--button-secondary);
+    padding: 4px 8px;
+    border: 1px solid var(--neutral-neutral-3);
+    border-radius: var(--s-border-radius);
+    z-index: 200;
+    user-select: none;
   }
 
   .header {
@@ -434,7 +392,7 @@ export const MenuItemsStyled = styled.div `
     }
   }
 
-  .--is-open .--is-mobile .navigation-pane {
+  &.--is-open {
     .navigation-pane__wrapper {
       width: 100%;
       margin-top: 1rem;
@@ -445,204 +403,20 @@ export const MenuItemsStyled = styled.div `
       overflow: auto;
       height: calc(100% - 65px);
       z-index: 100;
+    }
 
-      .search {
-        padding-right: 1.5rem;
-        padding-left: 1.5rem;
-      }
+    .search {
+      padding-right: 1.5rem;
+      padding-left: 1.5rem;
     }
 
-    &__user-menu {
+    .navigation-pane__user-menu {
       display: flex;
       flex-flow: row nowrap;
       justify-content: center;
       align-content: center;
       padding: 1.5rem 0;
       margin: 0 1rem;
-
-      .log-in {
-        min-width: 120px;
-        margin-right: 0.5rem;
-      }
-    }
-
-    &__ratafia {
-      padding: 1.5rem 1.5rem 0.5rem 1.5rem;
-      &__title {
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        gap: 0.25rem;
-      }
-    }
-
-    &__esignature {
-      padding: 0.5rem 1.5rem 0.5rem 1.5rem;
-    }
-
-    &__user-name {
-      margin-right: 1rem;
-      font-weight: bold;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      width: 8rem;
-      color: var(--primary-main-light-5);
-      padding: 0.5rem 1rem;
-      border-radius: var(--s-border-radius);
-      background-color: var(--primary-main-light-6);
-    }
-
-    &__products,
-    &__help,
-    &__resources {
-      p {
-        font-weight: bold;
-
-        img {
-          display: none;
-        }
-      }
-
-      li {
-        margin-top: 1rem;
-
-        &:last-child {
-          margin-bottom: 1.5rem;
-        }
-      }
-    }
-
-    &__help {
-      padding: 1.5rem 0;
-      margin: 0 1.5rem;
-      border-top: 1px solid var(--neutral-neutral-4);
-    }
-
-    &__products__title {
-      display: none;
-    }
-
-    .navigation-pane__resources {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      padding: 1.5rem 0;
-      margin: 0 1.5rem 2rem 1.5rem;
-      border-top: 1px solid var(--neutral-neutral-4);
-      border-bottom: 1px solid var(--neutral-neutral-4);
-    }
-  }
-
-  .--is-open {
-    .--is-mobile {
-      .navigation-pane {
-        .navigation-pane__wrapper {
-          width: 100%;
-          margin-top: 1rem;
-          left: 0;
-          background: var(--others-white);
-          position: fixed;
-          box-shadow: var(--box-shadow-menu);
-          overflow: auto;
-          height: calc(100% - 65px);
-          z-index: 100;
-        }
-      }
-
-      .search {
-        padding-right: 1.5rem;
-        padding-left: 1.5rem;
-      }
-
-      .navigation-pane__user-menu {
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-content: center;
-        padding: 1.5rem 0;
-        margin: 0 1rem;
-
-        .log-in {
-          min-width: 120px;
-          margin-right: 0.5rem;
-        }
-      }
-
-      .navigation-pane__ratafia {
-        padding: 1.5rem 1.5rem 0.5rem 1.5rem;
-
-        .navigation-pane__ratafia__title {
-          display: flex;
-          justify-content: start;
-          align-items: center;
-          gap: 0.25rem;
-        }
-      }
-
-      .navigation-pane__esignature {
-        padding: 0.5rem 1.5rem 0.5rem 1.5rem;
-      }
-
-      .navigation-pane__user-name {
-        margin-right: 1rem;
-        font-weight: bold;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        width: 8rem;
-        color: var(--primary-main-light-5);
-        padding: 0.5rem 1rem;
-        border-radius: var(--s-border-radius);
-        background-color: var(--neutral-neutral-6);
-      }
-
-      .navigation-pane__products,
-      .navigation-pane__help,
-      .navigation-pane__resources {
-        p {
-          font-weight: bold;
-
-          img {
-            display: none;
-          }
-        }
-
-        li {
-          margin-top: 1rem;
-
-          &:last-child {
-            margin-bottom: 1.5rem;
-          }
-        }
-      }
-
-      .navigation-pane__help {
-        padding: 1.5rem 0;
-        margin: 0 1.5rem;
-        border-top: 1px solid var(--neutral-neutral-4);
-      }
-
-      .navigation-pane__products__title {
-        display: none;
-      }
-
-      .navigation-pane__resources {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 1.5rem 0 0 0;
-        margin: 0 1.5rem 1.5rem 1.5rem;
-        border-top: 1px solid var(--neutral-neutral-4);
-      }
-    }
-  }
-
-  .is-tablet {
-    display: none;
-
-    @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
-      display: flex;
     }
   }
 
@@ -675,13 +449,6 @@ export const MenuItemsStyled = styled.div `
     }
 
     .navigation-pane__user-menu {
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: center;
-      align-content: center;
-      padding: 1.5rem 0;
-      margin: 0 1rem;
-
       .log-in {
         min-width: 120px;
         margin-right: 0.5rem;