@npm_leadtech/legal-lib-components 7.77.0 → 7.78.1

package/dist/css/styles.css

@@ -93,7 +93,7 @@ html {
   --box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
   --global-gap: 1rem;
 }
-html[data-theme=legalfinity] {
+html[data-theme=primaryblue] {
   --font-sans: "Poppins", sans-serif;
   --font-serif: "Poppins", serif;
   --s-border-radius: 0.25rem;
@@ -278,7 +278,7 @@ html {
   --font-main: "Inter", sans-serif;
   --font-secondary: "Lora", serif;
 }
-html[data-theme=districtlaws] {
+html[data-theme=secondaryorange] {
   --primary-main-light-6: #fff5ee;
   --primary-main-light-5: #ffe1cc;
   --primary-main-light-4: #ffc59b;
@@ -316,7 +316,7 @@ html[data-theme=districtlaws] {
   --font-main: "Inter", sans-serif;
   --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistricts] {
+html[data-theme=secondaryblue] {
   --primary-main-light-6: #f9f9ff;
   --primary-main-light-5: #eceeff;
   --primary-main-light-4: #c3c9ff;
@@ -354,7 +354,7 @@ html[data-theme=lawdistricts] {
   --font-main: "Inter", sans-serif;
   --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistrict] {
+html[data-theme=primarygreen] {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -392,23 +392,23 @@ html[data-theme=lawdistrict] {
   --font-main: "Inter", sans-serif;
   --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistrict] .document-status.--in-progress {
+html[data-theme=primarygreen] .document-status.--in-progress {
   background-color: var(--secondary-main-light-4);
   border-color: var(--secondary-main-dark-1);
   color: var(--secondary-main-dark-2);
 }
-html[data-theme=lawdistrict] .document-status.--in-progress svg g > g {
+html[data-theme=primarygreen] .document-status.--in-progress svg g > g {
   fill: var(--secondary-main-dark-2);
 }
-html[data-theme=lawdistrict] .document-status.--is-new {
+html[data-theme=primarygreen] .document-status.--is-new {
   background-color: var(--secondary-main-dark-2);
   border-color: var(--secondary-main);
   color: var(--secondary-main-light-4);
 }
-html[data-theme=lawdistrict] .document-status.--is-new .icon {
+html[data-theme=primarygreen] .document-status.--is-new .icon {
   margin-right: 1.4rem;
 }
-html[data-theme=lawsdistrict] {
+html[data-theme=secondarypurple] {
   --primary-main-light-6: #f9f5ff;
   --primary-main-light-5: #e3d1ff;
   --primary-main-light-4: #b68aff;
@@ -446,7 +446,7 @@ html[data-theme=lawsdistrict] {
   --font-main: "Inter", sans-serif;
   --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistrictinfo] {
+html[data-theme=secondarygreen] {
   --primary-main-light-6: #f1fff7;
   --primary-main-light-5: #d5ffe6;
   --primary-main-light-4: #6affa5;
@@ -484,7 +484,7 @@ html[data-theme=lawdistrictinfo] {
   --font-main: "Inter", sans-serif;
   --font-secondary: "Lora", serif;
 }
-html[data-theme=uslawdistrict] {
+html[data-theme=secondarybrown] {
   --primary-main-light-6: #fffbf2;
   --primary-main-light-5: #fff6e5;
   --primary-main-light-4: #ffe6b7;
@@ -522,7 +522,7 @@ html[data-theme=uslawdistrict] {
   --font-main: "Inter", sans-serif;
   --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistrictonline] {
+html[data-theme=secondaryyellow] {
   --primary-main-light-6: #f9ffea;
   --primary-main-light-5: #f0ffc4;
   --primary-main-light-4: #e6ff9f;
@@ -560,7 +560,7 @@ html[data-theme=lawdistrictonline] {
   --font-main: "Inter", sans-serif;
   --font-secondary: "Lora", serif;
 }
-html[data-theme=legalfinity] {
+html[data-theme=primaryblue] {
   --button: #1039f5;
   --button-secondary: #1039f5;
   --button-hover: #3970ff;
@@ -859,7 +859,7 @@ body {
 .serif.--normal-weight {
   font-weight: normal;
 }
-html[data-theme=lawdistrict] .e-button.--primary-3 {
+html[data-theme=primarygreen] .e-button.--primary-3 {
   color: var(--neutral-main);
 }
 .e-button {

package/dist/src/components/atoms/Button/Button.scss

@@ -1,7 +1,7 @@
 @import '../../../globalStyles/variables.scss';
 @import '../../../globalStyles/mediaqueries.scss';
 
-html[data-theme='lawdistrict'] {
+html[data-theme='primarygreen'] {
   .e-button {
     &.--primary {
       &-3 {

package/dist/src/components/molecules/AccordionItem/AccordionItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type AccordionItemProps } from './AccordionItemProps.types';
-export declare const AccordionItem: ({ accordionRightContent, children, defaultHeightItem, index, isOpen, onClick, title }: AccordionItemProps) => React.JSX.Element;
+export declare const AccordionItem: ({ accordionRightContent, children, defaultHeightItem, index, isOpen, onClick, title, heightAutoChange }: AccordionItemProps) => React.JSX.Element;

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

@@ -1,21 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context';
 import { AccordionItemStyled } from './AccordionItem.styled';
-export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title }) => {
+export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title, heightAutoChange = false }) => {
     const contenReftHeight = useRef(null);
     const { state } = useStateDataAccordionItem(index);
     const { dispatch } = useDispatchDataAccordionItem();
+    const [heightAccordionItem, setHeightAccordionItem] = React.useState(defaultHeightItem);
     useEffect(() => {
         if (state.locked.actionType === 'unlocked') {
             onClick();
             dispatch({ type: 'unlocked', accordionItem: index, resetAction: 'default' });
         }
     }, [state.locked.actionType]);
+    useEffect(() => {
+        let intervalId;
+        if (heightAutoChange) {
+            intervalId = setInterval(() => {
+                const height = contenReftHeight.current?.children[0].getBoundingClientRect().height ?? defaultHeightItem;
+                if (heightAccordionItem !== height) {
+                    setHeightAccordionItem(height);
+                }
+            }, 500);
+        }
+        else {
+            setHeightAccordionItem(contenReftHeight?.current?.scrollHeight ?? defaultHeightItem);
+        }
+        return () => {
+            if (intervalId !== undefined) {
+                clearInterval(intervalId);
+            }
+        };
+    }, []);
     return (_jsxs(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
           ${state.locked.isLocked ? '--locked' : ''}`, onClick: () => {
                     !state.locked.isLocked && onClick();
-                }, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height: contenReftHeight?.current?.scrollHeight ?? defaultHeightItem } : { height: '0px' }, children: children })] }));
+                }, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height: heightAccordionItem } : { height: '0px' }, children: children })] }));
 };

package/dist/src/components/molecules/AccordionItem/AccordionItem.styled.js

@@ -56,7 +56,7 @@ export const AccordionItemStyled = styled.div `
     &.--locked {
       color: var(--neutral-neutral-2);
 
-      html[data-theme='legalfinity'] & {
+      html[data-theme='primaryblue'] & {
         color: var(--primary-main-dark-1);
       }
     }

package/dist/src/components/molecules/AccordionItem/AccordionItem.styled.ts

@@ -57,7 +57,7 @@ export const AccordionItemStyled = styled.div`
     &.--locked {
       color: var(--neutral-neutral-2);
 
-      html[data-theme='legalfinity'] & {
+      html[data-theme='primaryblue'] & {
         color: var(--primary-main-dark-1);
       }
     }

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

@@ -12,11 +12,13 @@ export const AccordionItem = ({
   index,
   isOpen,
   onClick,
-  title
+  title,
+  heightAutoChange = false
 }: AccordionItemProps): React.JSX.Element => {
   const contenReftHeight = useRef<HTMLInputElement>(null)
   const { state } = useStateDataAccordionItem(index)
   const { dispatch } = useDispatchDataAccordionItem()
+  const [heightAccordionItem, setHeightAccordionItem] = React.useState<number>(defaultHeightItem)
 
   useEffect(() => {
     if (state.locked.actionType === 'unlocked') {
@@ -25,6 +27,25 @@ export const AccordionItem = ({
     }
   }, [state.locked.actionType])
 
+  useEffect(() => {
+    let intervalId: ReturnType<typeof setInterval> | undefined
+    if (heightAutoChange) {
+      intervalId = setInterval(() => {
+        const height = contenReftHeight.current?.children[0].getBoundingClientRect().height ?? defaultHeightItem
+        if (heightAccordionItem !== height) {
+          setHeightAccordionItem(height)
+        }
+      }, 500)
+    } else {
+      setHeightAccordionItem(contenReftHeight?.current?.scrollHeight ?? defaultHeightItem)
+    }
+    return () => {
+      if (intervalId !== undefined) {
+        clearInterval(intervalId)
+      }
+    }
+  }, [])
+
   return (
     <AccordionItemStyled className='accordion__container'>
       <button
@@ -42,7 +63,7 @@ export const AccordionItem = ({
       <div
         ref={contenReftHeight}
         className={`accordion__content ${!isOpen ? '--closed' : ''}`}
-        style={isOpen ? { height: contenReftHeight?.current?.scrollHeight ?? defaultHeightItem } : { height: '0px' }}
+        style={isOpen ? { height: heightAccordionItem } : { height: '0px' }}
       >
         {children}
       </div>

package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.d.ts

@@ -6,4 +6,5 @@ export interface AccordionItemProps {
     isOpen?: boolean;
     onClick: () => void;
     title?: string;
+    heightAutoChange?: boolean;
 }

package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.ts

@@ -6,4 +6,5 @@ export interface AccordionItemProps {
   isOpen?: boolean
   onClick: () => void
   title?: string
+  heightAutoChange?: boolean
 }

package/dist/src/components/organisms/Accordion/Accordion.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type AccordionProps } from './AccordionProps.types';
-export declare const Accordion: ({ data, defaultActiveIndex, defaultHeightItem }: AccordionProps) => React.JSX.Element;
+export declare const Accordion: ({ data, defaultActiveIndex, defaultHeightItem, heightAutoChange }: AccordionProps) => React.JSX.Element;

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

@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { AccordionItem } from '../../molecules';
 import { AccordionProvider } from './Accordion.context';
 import { AccordionStyled } from './Accordion.styled';
-export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }) => {
+export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem, heightAutoChange = false }) => {
     const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
     const handleItemClick = (index) => {
         setActiveIndex((prevIndex) => (prevIndex === index ? -1 : index));
     };
     return (_jsx(AccordionProvider, { elements: data.length, children: _jsx(AccordionStyled, { children: data.map((item, index) => (_jsx(AccordionItem, { accordionRightContent: item?.accordionRightContent, defaultHeightItem: defaultHeightItem, index: index, isOpen: activeIndex === index, onClick: () => {
                     handleItemClick(index);
-                }, title: item.title, children: item.children }, index))) }) }));
+                }, title: item.title, heightAutoChange: heightAutoChange, children: item.children }, index))) }) }));
 };

package/dist/src/components/organisms/Accordion/Accordion.tsx

@@ -4,7 +4,12 @@ import { type AccordionProps } from './AccordionProps.types'
 import { AccordionProvider } from './Accordion.context'
 import { AccordionStyled } from './Accordion.styled'
 
-export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: AccordionProps): React.JSX.Element => {
+export const Accordion = ({
+  data,
+  defaultActiveIndex = 0,
+  defaultHeightItem,
+  heightAutoChange = false
+}: AccordionProps): React.JSX.Element => {
   const [activeIndex, setActiveIndex] = useState(defaultActiveIndex)
 
   const handleItemClick = (index: number): void => {
@@ -25,6 +30,7 @@ export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: A
               handleItemClick(index)
             }}
             title={item.title}
+            heightAutoChange={heightAutoChange}
           >
             {item.children}
           </AccordionItem>

package/dist/src/components/organisms/Accordion/AccordionProps.types.d.ts

@@ -8,5 +8,6 @@ export interface AccordionProps {
     data: AccordionItem[];
     defaultActiveIndex?: number;
     defaultHeightItem?: number;
+    heightAutoChange?: boolean;
 }
 export {};

package/dist/src/components/organisms/Accordion/AccordionProps.types.ts

@@ -9,4 +9,5 @@ export interface AccordionProps {
   data: AccordionItem[]
   defaultActiveIndex?: number
   defaultHeightItem?: number
+  heightAutoChange?: boolean
 }

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

@@ -13,7 +13,7 @@ export const HeaderStyled = styled.header `
     z-index: 111111111111;
   }
 
-  html[data-theme='lawdistrict'] {
+  html[data-theme='primarygreen'] {
     .header {
       &.product-header-background {
         background-color: var(--secondary-main-light-4);

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

@@ -14,7 +14,7 @@ export const HeaderStyled = styled.header`
     z-index: 111111111111;
   }
 
-  html[data-theme='lawdistrict'] {
+  html[data-theme='primarygreen'] {
     .header {
       &.product-header-background {
         background-color: var(--secondary-main-light-4);

package/dist/src/globalStyles/themes.scss

@@ -57,7 +57,7 @@ html {
   --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='districtlaws'] {
+html[data-theme='secondaryorange'] {
   --primary-main-light-6: #fff5ee;
   --primary-main-light-5: #ffe1cc;
   --primary-main-light-4: #ffc59b;
@@ -94,7 +94,7 @@ html[data-theme='districtlaws'] {
   --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='lawdistricts'] {
+html[data-theme='secondaryblue'] {
   --primary-main-light-6: #f9f9ff;
   --primary-main-light-5: #eceeff;
   --primary-main-light-4: #c3c9ff;
@@ -131,7 +131,7 @@ html[data-theme='lawdistricts'] {
   --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='lawdistrict'] {
+html[data-theme='primarygreen'] {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -168,7 +168,7 @@ html[data-theme='lawdistrict'] {
   --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='lawdistrict'] {
+html[data-theme='primarygreen'] {
   .document-status {
     &.--in-progress {
       background-color: var(--secondary-main-light-4);
@@ -194,7 +194,7 @@ html[data-theme='lawdistrict'] {
   }
 }
 
-html[data-theme='lawsdistrict'] {
+html[data-theme='secondarypurple'] {
   --primary-main-light-6: #f9f5ff;
   --primary-main-light-5: #e3d1ff;
   --primary-main-light-4: #b68aff;
@@ -231,7 +231,7 @@ html[data-theme='lawsdistrict'] {
   --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='lawdistrictinfo'] {
+html[data-theme='secondarygreen'] {
   --primary-main-light-6: #f1fff7;
   --primary-main-light-5: #d5ffe6;
   --primary-main-light-4: #6affa5;
@@ -268,7 +268,7 @@ html[data-theme='lawdistrictinfo'] {
   --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='uslawdistrict'] {
+html[data-theme='secondarybrown'] {
   --primary-main-light-6: #fffbf2;
   --primary-main-light-5: #fff6e5;
   --primary-main-light-4: #ffe6b7;
@@ -305,7 +305,7 @@ html[data-theme='uslawdistrict'] {
   --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='lawdistrictonline'] {
+html[data-theme='secondaryyellow'] {
   --primary-main-light-6: #f9ffea;
   --primary-main-light-5: #f0ffc4;
   --primary-main-light-4: #e6ff9f;
@@ -342,7 +342,7 @@ html[data-theme='lawdistrictonline'] {
   --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='legalfinity'] {
+html[data-theme='primaryblue'] {
   --button: #1039f5;
   --button-secondary: #1039f5;
   --button-hover: #3970ff;

package/dist/src/globalStyles/variablesCss.scss

@@ -15,7 +15,7 @@ html {
   --global-gap: 1rem;
 }
 
-html[data-theme='legalfinity'] {
+html[data-theme='primaryblue'] {
   --font-sans: 'Poppins', sans-serif;
   --font-serif: 'Poppins', serif;
 

package/package.json

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