@npm_leadtech/legal-lib-components 7.12.1 → 7.12.3

package/dist/images/svg/business-type.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 4H14V2C14 0.89 13.11 0 12 0H8C6.89 0 6 0.89 6 2V4H2C0.89 4 0.01 4.89 0.01 6L0 17C0 18.11 0.89 19 2 19H18C19.11 19 20 18.11 20 17V6C20 4.89 19.11 4 18 4ZM12 4H8V2H12V4Z" fill="#078080"/>
+</svg>

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

@@ -1,18 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { TopBarStyled } from './TopBar.styled';
-const TopBar = ({ isMobile, hide, isVisible, children }) => {
+const TopBar = ({ hide, children }) => {
     if (children === undefined)
         return null;
     const classnames = classNames({
         '--is-hidden': hide
     });
-    const topBarContentContainerClass = classNames({
-        'top-bar-content': !isMobile,
-        'top-bar-mobile': isMobile,
-        'fade-In': isMobile && isVisible,
-        'fade-Out': isMobile && !isVisible
-    });
-    return (_jsx(TopBarStyled, { className: `top-bar-wrapper ${classnames}`, children: _jsx("div", { className: 'top-bar', children: _jsx("div", { className: `${topBarContentContainerClass}`, children: children }) }) }));
+    return (_jsx(TopBarStyled, { className: `top-bar-content top-bar-wrapper ${classnames}`, children: _jsx("div", { className: 'top-bar', children: _jsx("div", { children: children }) }) }));
 };
 export default TopBar;

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

@@ -26,7 +26,7 @@ export const TopBarStyled = styled.div `
       width: 100%;
       height: 100%;
       justify-content: center;
-      align-items: flex-end;
+      align-items: center;
       border: 1px solid var(--neutral-neutral-4);
 
       @media ${device.mobile} {

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

@@ -27,7 +27,7 @@ export const TopBarStyled = styled.div`
       width: 100%;
       height: 100%;
       justify-content: center;
-      align-items: flex-end;
+      align-items: center;
       border: 1px solid var(--neutral-neutral-4);
 
       @media ${device.mobile} {

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

@@ -4,24 +4,17 @@ import classNames from 'classnames'
 import { type TopBarProps } from './TopBarProps.types'
 import { TopBarStyled } from './TopBar.styled'
 
-const TopBar: FC<TopBarProps> = ({ isMobile, hide, isVisible, children }) => {
+const TopBar: FC<TopBarProps> = ({ hide, children }) => {
   if (children === undefined) return null
 
   const classnames = classNames({
     '--is-hidden': hide
   })
 
-  const topBarContentContainerClass = classNames({
-    'top-bar-content': !isMobile,
-    'top-bar-mobile': isMobile,
-    'fade-In': isMobile && isVisible,
-    'fade-Out': isMobile && !isVisible
-  })
-
   return (
-    <TopBarStyled className={`top-bar-wrapper ${classnames}`}>
+    <TopBarStyled className={`top-bar-content top-bar-wrapper ${classnames}`}>
       <div className={'top-bar'}>
-        <div className={`${topBarContentContainerClass}`}>{children}</div>
+        <div>{children}</div>
       </div>
     </TopBarStyled>
   )

package/dist/src/components/atoms/TopBar/TopBarProps.types.d.ts

@@ -1,6 +1,4 @@
 export interface TopBarProps {
-    isMobile?: boolean;
     hide?: boolean;
-    isVisible?: boolean;
     children?: React.ReactNode;
 }

package/dist/src/components/atoms/TopBar/TopBarProps.types.ts

@@ -1,6 +1,4 @@
 export interface TopBarProps {
-  isMobile?: boolean
   hide?: boolean
-  isVisible?: boolean
   children?: React.ReactNode
 }

package/dist/src/components/molecules/DocumentListMenuSection/DocumentListMenuSectionProps.types.d.ts

@@ -5,7 +5,7 @@ export interface ProductListMenuProps {
     categoryUrl?: string;
 }
 export interface DocumentListMenuSectionProps {
-    icon: React.ReactNode;
+    icon: string;
     type: string;
     products: ProductListMenuProps[];
     slug: string;

package/dist/src/components/molecules/DocumentListMenuSection/DocumentListMenuSectionProps.types.ts

@@ -7,7 +7,7 @@ export interface ProductListMenuProps {
 }
 
 export interface DocumentListMenuSectionProps {
-  icon: React.ReactNode
+  icon: string
   type: string
   products: ProductListMenuProps[]
   slug: string

package/dist/src/components/molecules/MenuSectionTitle/MenuSectionTitle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuSectionTitleStyled } from './MenuSectionTitle.styled';
 export const MenuSectionTitle = ({ icon, title }) => {
-    return (_jsxs(MenuSectionTitleStyled, { className: 'menu-section-title-container', children: [_jsx("div", { className: 'menu-section-title__icon', children: icon ?? null }), _jsx("div", { className: '', children: _jsx("div", { className: 'jumbotron__title', children: title }) })] }));
+    return (_jsxs(MenuSectionTitleStyled, { className: 'menu-section-title-container', children: [_jsx("div", { className: 'menu-section-title__icon', children: _jsx("img", { src: icon, alt: title }) }), _jsx("div", { className: '', children: _jsx("div", { className: 'jumbotron__title', children: title }) })] }));
 };

package/dist/src/components/molecules/MenuSectionTitle/MenuSectionTitle.tsx

@@ -6,7 +6,9 @@ import { MenuSectionTitleStyled } from './MenuSectionTitle.styled'
 export const MenuSectionTitle: React.FC<MenuSectionTitleProps> = ({ icon, title }) => {
   return (
     <MenuSectionTitleStyled className='menu-section-title-container'>
-      <div className='menu-section-title__icon'>{icon ?? null}</div>
+      <div className='menu-section-title__icon'>
+        <img src={icon} alt={title} />
+      </div>
       <div className=''>
         <div className='jumbotron__title'>{title}</div>
       </div>

package/dist/src/components/molecules/MenuSectionTitle/MenuSectionTitleProps.types.d.ts

@@ -1,4 +1,4 @@
 export interface MenuSectionTitleProps {
-    icon: React.ReactNode;
+    icon: string;
     title: string;
 }

package/dist/src/components/molecules/MenuSectionTitle/MenuSectionTitleProps.types.ts

@@ -1,4 +1,4 @@
 export interface MenuSectionTitleProps {
-  icon: React.ReactNode
+  icon: string
   title: string
 }

package/dist/src/components/molecules/SearchBar/SearchBarProps.types.d.ts

@@ -27,6 +27,7 @@ export interface Routes {
     MY_DOCUMENTS: string;
     REGISTER: string;
     RATAFIA_LOGIN: string;
+    SIGN_EDITOR: string;
 }
 export interface SearchBarProps {
     products: Products[];

package/dist/src/components/molecules/SearchBar/SearchBarProps.types.ts

@@ -30,6 +30,7 @@ export interface Routes {
   MY_DOCUMENTS: string
   REGISTER: string
   RATAFIA_LOGIN: string
+  SIGN_EDITOR: string
 }
 
 export interface SearchBarProps {

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenuProps.types.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Routes } from '../../sections/Header/HeaderProps.types';
 export interface ProductListMenuProps {
     slug: string;
@@ -6,7 +5,7 @@ export interface ProductListMenuProps {
     categoryUrl?: string;
 }
 export interface DocumentListMenuSectionProps {
-    icon: React.ReactNode;
+    icon: string;
     type: string;
     products: ProductListMenuProps[];
     slug: string;

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenuProps.types.ts

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Routes } from '../../sections/Header/HeaderProps.types'
 
 export interface ProductListMenuProps {
@@ -8,7 +7,7 @@ export interface ProductListMenuProps {
 }
 
 export interface DocumentListMenuSectionProps {
-  icon: React.ReactNode
+  icon: string
   type: string
   products: ProductListMenuProps[]
   slug: string

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

@@ -5,6 +5,7 @@ export const MenuItemsStyled = styled.div `
   flex-direction: column;
   justify-content: flex-start;
   align-items: baseline;
+  margin-top: 1rem;
 
   &__wrapper {
     width: 100%;
@@ -140,14 +141,8 @@ export const MenuItemsStyled = styled.div `
       }
       @media ${device['mobile']} {
         position: static;
-        /* gap: 1rem; */
+        margin-bottom: 2rem;
       }
-      /* li { */
-      /* @media ${device['mobile']} {
-          padding: 0;
-          margin: 0;
-        }
-      } */
     }
 
     .products__list {
@@ -252,14 +247,13 @@ export const MenuItemsStyled = styled.div `
       @media ${device['mobile']} {
         font-weight: 700;
         padding: 1.5rem 0;
-        border-top: 1px solid var(--neutral-neutral-4);
       }
     }
   }
 
   li.menu-items-li {
     width: 100%;
-    margin: 0.25rem 0;
+    margin: 0.5rem 0;
     border-radius: var(--s-border-radius);
     transition: all 0.3s ease;
     padding: 0.25rem;
@@ -478,9 +472,10 @@ export const MenuItemsStyled = styled.div `
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      padding: 1.5rem 0;
-      margin: 0 1.5rem;
+      padding: 1.5rem 0 0 0;
+      margin: 0 1.5rem 1.5rem 1.5rem;
       border-top: 1px solid var(--neutral-neutral-4);
+      border-bottom: 1px solid var(--neutral-neutral-4);
     }
   }
 
@@ -589,6 +584,13 @@ export const MenuItemsStyled = styled.div `
     }
     .navigation-pane__resources {
       order: 5;
+      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);
+      border-bottom: 1px solid var(--neutral-neutral-4);
     }
   }
 `;

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

@@ -6,6 +6,7 @@ export const MenuItemsStyled = styled.div`
   flex-direction: column;
   justify-content: flex-start;
   align-items: baseline;
+  margin-top: 1rem;
 
   &__wrapper {
     width: 100%;
@@ -141,14 +142,8 @@ export const MenuItemsStyled = styled.div`
       }
       @media ${device['mobile']} {
         position: static;
-        /* gap: 1rem; */
+        margin-bottom: 2rem;
       }
-      /* li { */
-      /* @media ${device['mobile']} {
-          padding: 0;
-          margin: 0;
-        }
-      } */
     }
 
     .products__list {
@@ -253,14 +248,13 @@ export const MenuItemsStyled = styled.div`
       @media ${device['mobile']} {
         font-weight: 700;
         padding: 1.5rem 0;
-        border-top: 1px solid var(--neutral-neutral-4);
       }
     }
   }
 
   li.menu-items-li {
     width: 100%;
-    margin: 0.25rem 0;
+    margin: 0.5rem 0;
     border-radius: var(--s-border-radius);
     transition: all 0.3s ease;
     padding: 0.25rem;
@@ -479,9 +473,10 @@ export const MenuItemsStyled = styled.div`
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      padding: 1.5rem 0;
-      margin: 0 1.5rem;
+      padding: 1.5rem 0 0 0;
+      margin: 0 1.5rem 1.5rem 1.5rem;
       border-top: 1px solid var(--neutral-neutral-4);
+      border-bottom: 1px solid var(--neutral-neutral-4);
     }
   }
 
@@ -593,6 +588,13 @@ export const MenuItemsStyled = styled.div`
     }
     .navigation-pane__resources {
       order: 5;
+      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);
+      border-bottom: 1px solid var(--neutral-neutral-4);
     }
   }
 `

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

@@ -114,6 +114,11 @@ export const NavMenuStyled = styled.div `
           left: 0;
         }
 
+        @media ${device['mobile']} {
+          position: static;
+          margin-bottom: 2rem;
+        }
+
         .products__list {
           top: 2.2rem;
           right: 0;
@@ -196,20 +201,28 @@ export const NavMenuStyled = styled.div `
 
       .navigation-pane__resources {
         margin-right: 1rem;
-        display: none;
-
+        @media ${device['mobile']} {
+          width: 100%;
+        }
         & > ul {
           width: 150px;
         }
 
-        @media ${device['laptop']} {
+        @media ${device['landscape-tablets']} {
           display: block;
         }
+
+        &__title {
+          @media ${device['mobile']} {
+            font-weight: 700;
+            padding: 1.5rem 0;
+          }
+        }
       }
 
       li.menu-items-li {
         width: 100%;
-        margin: 0.25rem 0;
+        margin: 0.5rem 0;
         border-radius: var(--s-border-radius);
         transition: all 0.3s ease;
         padding: 0.25rem;
@@ -335,6 +348,7 @@ export const NavMenuStyled = styled.div `
     .trigger-menu-open,
     .trigger-menu-close {
       display: flex;
+      align-items: center;
     }
   }
 
@@ -439,9 +453,10 @@ export const NavMenuStyled = styled.div `
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      padding: 1.5rem 0;
-      margin: 0 1.5rem;
+      padding: 1.5rem 0 0 0;
+      margin: 0 1.5rem 1.5rem 1.5rem;
       border-top: 1px solid var(--neutral-neutral-4);
+      border-bottom: 1px solid var(--neutral-neutral-4);
     }
   }
 
@@ -545,6 +560,13 @@ export const NavMenuStyled = styled.div `
 
     .navigation-pane__resources {
       order: 5;
+      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);
+      border-bottom: 1px solid var(--neutral-neutral-4);
     }
   }
 `;

package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts

@@ -115,6 +115,11 @@ export const NavMenuStyled = styled.div`
           left: 0;
         }
 
+        @media ${device['mobile']} {
+          position: static;
+          margin-bottom: 2rem;
+        }
+
         .products__list {
           top: 2.2rem;
           right: 0;
@@ -197,20 +202,28 @@ export const NavMenuStyled = styled.div`
 
       .navigation-pane__resources {
         margin-right: 1rem;
-        display: none;
-
+        @media ${device['mobile']} {
+          width: 100%;
+        }
         & > ul {
           width: 150px;
         }
 
-        @media ${device['laptop']} {
+        @media ${device['landscape-tablets']} {
           display: block;
         }
+
+        &__title {
+          @media ${device['mobile']} {
+            font-weight: 700;
+            padding: 1.5rem 0;
+          }
+        }
       }
 
       li.menu-items-li {
         width: 100%;
-        margin: 0.25rem 0;
+        margin: 0.5rem 0;
         border-radius: var(--s-border-radius);
         transition: all 0.3s ease;
         padding: 0.25rem;
@@ -336,6 +349,7 @@ export const NavMenuStyled = styled.div`
     .trigger-menu-open,
     .trigger-menu-close {
       display: flex;
+      align-items: center;
     }
   }
 
@@ -440,9 +454,10 @@ export const NavMenuStyled = styled.div`
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      padding: 1.5rem 0;
-      margin: 0 1.5rem;
+      padding: 1.5rem 0 0 0;
+      margin: 0 1.5rem 1.5rem 1.5rem;
       border-top: 1px solid var(--neutral-neutral-4);
+      border-bottom: 1px solid var(--neutral-neutral-4);
     }
   }
 
@@ -549,6 +564,13 @@ export const NavMenuStyled = styled.div`
 
     .navigation-pane__resources {
       order: 5;
+      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);
+      border-bottom: 1px solid var(--neutral-neutral-4);
     }
   }
 `

package/dist/src/components/sections/Header/Header.styled.js

@@ -1,6 +1,13 @@
 import { device, size } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const HeaderStyled = styled.header `
+  @media (max-width: ${size.sm}) {
+    position: fixed;
+    top: 0;
+    background-color: white;
+    width: 100%;
+    z-index: 11111111111111;
+  }
   html[data-theme='lawdistrict'] {
     .header {
       &.product-header-background {

package/dist/src/components/sections/Header/Header.styled.ts

@@ -2,6 +2,13 @@ import { device, size } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const HeaderStyled = styled.header`
+  @media (max-width: ${size.sm}) {
+    position: fixed;
+    top: 0;
+    background-color: white;
+    width: 100%;
+    z-index: 11111111111111;
+  }
   html[data-theme='lawdistrict'] {
     .header {
       &.product-header-background {

package/package.json

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