hds-web 1.16.5 → 1.16.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.16.5",
+  "version": "1.16.7",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/assets/icons/queries.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.08997 8.99959C9.32507 8.33125 9.78912 7.76769 10.3999 7.40872C11.0107 7.04974 11.7289 6.91852 12.4271 7.0383C13.1254 7.15807 13.7588 7.52111 14.215 8.06311C14.6713 8.60512 14.921 9.29111 14.92 9.99959C14.92 11.9996 11.92 12.9996 11.92 12.9996M12 16.9996H12.01M3 7.94104V16.0582C3 16.4008 3 16.5721 3.05048 16.7249C3.09515 16.8601 3.16816 16.9842 3.26463 17.0889C3.37369 17.2072 3.52345 17.2904 3.82297 17.4568L11.223 21.5679C11.5066 21.7255 11.6484 21.8042 11.7985 21.8351C11.9315 21.8625 12.0685 21.8625 12.2015 21.8351C12.3516 21.8042 12.4934 21.7255 12.777 21.5679L20.177 17.4568C20.4766 17.2904 20.6263 17.2072 20.7354 17.0889C20.8318 16.9842 20.9049 16.8601 20.9495 16.7249C21 16.5721 21 16.4008 21 16.0582V7.94104C21 7.5984 21 7.42708 20.9495 7.27428C20.9049 7.1391 20.8318 7.01502 20.7354 6.91033C20.6263 6.79199 20.4766 6.70879 20.177 6.54239L12.777 2.43128C12.4934 2.27372 12.3516 2.19494 12.2015 2.16406C12.0685 2.13672 11.9315 2.13672 11.7985 2.16406C11.6484 2.19494 11.5066 2.27372 11.223 2.43128L3.82297 6.54239C3.52345 6.70879 3.37369 6.79199 3.26463 6.91033C3.16816 7.01502 3.09515 7.1391 3.05048 7.27428C3 7.42708 3 7.5984 3 7.94104Z"   stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.08997 9.00007C9.32507 8.33174 9.78912 7.76818 10.3999 7.40921C11.0107 7.05023 11.7289 6.91901 12.4271 7.03879C13.1254 7.15856 13.7588 7.5216 14.215 8.0636C14.6713 8.60561 14.921 9.2916 14.92 10.0001C14.92 12.0001 11.92 13.0001 11.92 13.0001M12 17.0001H12.01M3 7.94153V16.0586C3 16.4013 3 16.5726 3.05048 16.7254C3.09515 16.8606 3.16816 16.9847 3.26463 17.0893C3.37369 17.2077 3.52345 17.2909 3.82297 17.4573L11.223 21.5684C11.5066 21.726 11.6484 21.8047 11.7985 21.8356C11.9315 21.863 12.0685 21.863 12.2015 21.8356C12.3516 21.8047 12.4934 21.726 12.777 21.5684L20.177 17.4573C20.4766 17.2909 20.6263 17.2077 20.7354 17.0893C20.8318 16.9847 20.9049 16.8606 20.9495 16.7254C21 16.5726 21 16.4013 21 16.0586V7.94153C21 7.59889 21 7.42756 20.9495 7.27477C20.9049 7.13959 20.8318 7.01551 20.7354 6.91082C20.6263 6.79248 20.4766 6.70928 20.177 6.54288L12.777 2.43177C12.4934 2.27421 12.3516 2.19543 12.2015 2.16454C12.0685 2.13721 11.9315 2.13721 11.7985 2.16454C11.6484 2.19543 11.5066 2.27421 11.223 2.43177L3.82297 6.54288C3.52345 6.70928 3.37369 6.79248 3.26463 6.91082C3.16816 7.01551 3.09515 7.13959 3.05048 7.27477C3 7.42756 3 7.59889 3 7.94153Z" stroke="#1F2A37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/components/Cards/Dropdown/v3Dropdown.js

@@ -8,7 +8,7 @@ export default function DropdownA(props) {
   return (
     <div>
 
-      <div className='tb-l:flex mb-2 tb-l:mb-0 flex w-full tb-l:bg-neutral-150 flex-col tb-l:flex-row max-w-7xl rounded-2xl '>
+      <div className='tb-l:flex mb-2 tb-l:mb-0 flex w-full tb-l:bg-neutral-150 flex-col tb-l:flex-row max-w-7xl tb-l:gap-2 rounded-2xl '>
 
         {props.primaryCard &&
           <div className="">

package/src/HDS/components/Headers/v3Header.js

@@ -36,6 +36,7 @@ function classNames(...classes) {
 
 
 export default function V3Header(props) {
+    const listSize = props.HEADER_LIST.length;
     const [mobileNavOpen, setmobileNavOpen] = useState(false);
     const [isProduct, setIsProduct] = useState(false)
     const [isDeveloper, setIsDeveloper] = useState(false)
@@ -46,7 +47,7 @@ export default function V3Header(props) {
 
     //testing
     const [dropdownVisibility, setDropdownVisibility] = useState(Array(props.HEADER_LIST.length).fill(false));
-
+    console.log(mobileNavOpen, isProduct, dropdownVisibility, currentTab)
     const handleDropdownEnter = (index) => {
         setDropdownVisibility((prevVisibility) => {
             const updatedVisibility = [...prevVisibility];
@@ -117,7 +118,7 @@ export default function V3Header(props) {
                                         initial={{ opacity: 0 }}
                                         animate={{ opacity: 1 }}
                                         transition={{ ease: 'easeInOut', duration: 0.1 }}
-                                        className="absolute -left-[137px] z-[2] transform"
+                                        className={"absolute -left-[137px] z-[2] transform " + (dropdownVisibility[0] ? '-left-[137px] ' : '') + (dropdownVisibility[1] ? '-left-[218px]' : '') + (dropdownVisibility[3] ? '-left-[50px] ' : '') }
                                         
                                     >
                                         {renderDropdown(
@@ -202,20 +203,30 @@ export default function V3Header(props) {
         setIsCompany(false);
         setIsProduct(false);
         setCurrentTab('')
+        props.HEADER_LIST.forEach((item, index) => {
+            // Access the values of each item and the index
+            handleDropdownLeave(index)
+        });
     }
-    function handleBackClick(sda) {
-        console.log('clicked', sda);
+    function handleBackClick() {
         setIsDeveloper(false);
         setIsCompany(false);
         setIsProduct(false);
         setCurrentTab('');
+        props.HEADER_LIST.forEach((item, index) => {
+            // Access the values of each item and the index
+            handleDropdownLeave(index)
+        });
+       
     }
 
 
     function handleMbDropdownClick(title) {
-
+        const i = props.HEADER_LIST.findIndex(item => item.title === title);
+        handleDropdownEnter(i);
         // Implement your logic to open the additional options for the clicked dropdown
         if (title === 'Developer') {
+            
             setIsDeveloper(true);
         }
         if (title === 'Product') {
@@ -252,8 +263,8 @@ export default function V3Header(props) {
                             <AlgoliaSearch {...props} />
                         </div>
                         {!(isCompany || isDeveloper || isProduct) &&
-                            (<div onClick={() => handleMbDropdownClose()}>
-                            <div className=' h-5 mt-3 cursor-pointer' >
+                            (<div className='h-5 w-5 mt-3' onClick={() => handleMbDropdownClose()}>
+                            <div className=' h-5  cursor-pointer' >
                                 <div aria-hidden="true" className={`${class1} block  absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
                                 <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform  transition duration-500 ease-in-out`}></div>
                             </div>
@@ -323,7 +334,7 @@ export default function V3Header(props) {
 
                         <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
 
-                            <div className='pt-4 pb-4 mr-[16px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
+                            <div className='pt-6 pb-4 tb:mr-[16px] mr-[34px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
                                 {(isCompany || isDeveloper || isProduct) && 
                                 (
                                 <div
@@ -343,13 +354,16 @@ export default function V3Header(props) {
                                 </motion.div>
                                 {(isCompany || isDeveloper || isProduct) &&
                                     (
-                                <div
+                                    <motion.div
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
                                     className=' flex flex-row justify-start z-10'
-                                    onClick={() => handleBackClick()}
+                                        onClick={() => handleMbDropdownClose()}
 
                                 >
                                     <Icon height='w-5 h-5 ml-4 stroke-2 cursor-pointer' variant={'xclose'} strokeClass='stroke-neutral-1000' />
-                                </div>)}
+                                    </motion.div>)}
 
                             </div>
                             <AnimatePresence mode='wait' exit={false} >

package/src/HDS/modules/TextCard/textCard.js

@@ -58,7 +58,7 @@ export default function TextCard(props) {
                       <Typography
                         key={i}
                         textStyle="body1"
-                        className="pb-6 pr-8  [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
+                        className="pb-6 pr-8 max-w-[412px] [&>p]:pb-2 [&>p]:text-neutral-600 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
                         <ReactMarkdown>
                           {desc.description}
                         </ReactMarkdown>
@@ -92,7 +92,7 @@ export default function TextCard(props) {
                     )
                   }
                   {props.addiDescription && (
-                    <Typography textStyle='body1' className='text-neutral-600'>{props.addiDescription}</Typography>
+                    <Typography textStyle='body1' className='text-neutral-600 max-w-[412px]'>{props.addiDescription}</Typography>
                   )
                   }
                 </>
@@ -100,14 +100,14 @@ export default function TextCard(props) {
             }
             {
               props.feature_cards_links && (
-                <div className='tb:border border-neutral-150 rounded-3xl'>
+                <div className='tb:border border-neutral-150 rounded-3xl max-w-[460px]'>
                   {
                     props.feature_cards_links.map((list, i) => {
                       const currentStrokeColor = HDSColor(list.icon_color)
                       const imgBgColor = HDSColor(list.tab_img_bg_class)
                       return (
                         <div key={i} className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={() => setImgActive(list.title)}>
-                          <div className={'m-2 p-0 tb:p-6 rounded-2xl transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
+                          <div className={'my-4 tb-l:m-2 p-4 tb:p-6 rounded-2xl transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
                             <div className='flex items-center pb-4'>
                               <Icon
                                 height={`w-6 h-6 mr-2 stroke-[1.5px]`}
@@ -117,7 +117,7 @@ export default function TextCard(props) {
                               />
                               <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
                             </div>
-                            {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-1000'>{list.description}</Typography>}
+                            {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-600'>{list.description}</Typography>}
                             {
                               list.descriptions_list && list.descriptions_list.map((descList, j) => {
                                 const iconBgColor = HDSColor(descList.icon_bg_color);
@@ -132,7 +132,7 @@ export default function TextCard(props) {
                                         strokeColor=""
                                       />
                                     </div>
-                                    <Typography textStyle='body3' className='text-neutral-1000'>{descList.description}</Typography>
+                                    <Typography textStyle='body3' className='text-neutral-600'>{descList.description}</Typography>
                                   </div>
                                 )
                               })
@@ -158,7 +158,7 @@ export default function TextCard(props) {
                             }
                             {
                               list.tab_img_url && (
-                                <div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
+                                <div className={`${imgBgColor} tb-l:hidden p-4 tb-l:p-12 rounded-2xl mt-8`}>
                                   <img src={list.tab_img_url} alt={list.title} loading="lazy" />
                                 </div>
                               )
@@ -206,7 +206,7 @@ export default function TextCard(props) {
                     <Typography
                       key={i}
                       textStyle="body1"
-                      className="pb-6 pr-8  [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
+                      className="pb-6 pr-8 max-w-[412px] [&>p]:pb-2 last:[&>p]:pb-0 [&>p]:text-neutral-600 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
                       <ReactMarkdown>
                         {desc.description}
                       </ReactMarkdown>
@@ -240,7 +240,7 @@ export default function TextCard(props) {
                   )
                 }
                 {props.addiDescription && (
-                  <Typography textStyle='body1' className='text-neutral-600'>{props.addiDescription}</Typography>
+                  <Typography textStyle='body1' className='text-neutral-600 max-w-[412px]'>{props.addiDescription}</Typography>
                 )
                 }
               </div>
@@ -256,7 +256,7 @@ export default function TextCard(props) {
                             <Fragment key={i}>
                               {
                                 imgActive === img.title && (
-                                  <div className={((img.tab_img_bg_class === "pattern") ? "bg-neutral-100" : "") + ` hidden h-full p-12 tb-l:flex items-center justify-center rounded-2xl db:rounded-3xl relative bg-neutral-100`}>
+                                  <div className={((img.tab_img_bg_class === "pattern") ? "bg-neutral-100" : "") + ` hidden h-full p-4 tb-l:p-12 tb-l:flex items-center justify-center rounded-2xl db:rounded-3xl relative bg-neutral-100`}>
                                     {
                                       img.tab_img_bg_class === "pattern" && (
                                         <div className="pattern-gradient absolute left-0 top-0 w-full h-full rounded-3xl"></div>
@@ -279,7 +279,7 @@ export default function TextCard(props) {
                                           />
                                         </video>
                                       ) : (
-                                        <img className="z-[1]" src={img.tab_img_url} alt={img.title} loading="lazy" />
+                                        <img className="z-[1] max-h-[530px]" src={img.tab_img_url} alt={img.title} loading="lazy" />
                                       )
                                     }
                                   </div>

package/src/styles/tailwind.css

@@ -1029,6 +1029,14 @@ select{
   top: 96px;
 }
 
+.-left-\[218px\]{
+  left: -218px;
+}
+
+.-left-\[50px\]{
+  left: -50px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1081,14 +1089,6 @@ select{
   z-index: 2;
 }
 
-.z-\[5\]{
-  z-index: 5;
-}
-
-.z-\[6\]{
-  z-index: 6;
-}
-
 .col-span-1{
   grid-column: span 1 / span 1;
 }
@@ -1268,10 +1268,6 @@ select{
   margin-left: -1rem;
 }
 
-.-ml-9{
-  margin-left: -2.25rem;
-}
-
 .-ml-px{
   margin-left: -1px;
 }
@@ -1396,8 +1392,8 @@ select{
   margin-right: 2rem;
 }
 
-.mr-\[17px\]{
-  margin-right: 17px;
+.mr-\[16px\]{
+  margin-right: 16px;
 }
 
 .mr-\[30px\]{
@@ -1468,8 +1464,8 @@ select{
   margin-top: 70px;
 }
 
-.mr-\[16px\]{
-  margin-right: 16px;
+.mr-\[34px\]{
+  margin-right: 34px;
 }
 
 .line-clamp-3{
@@ -1715,6 +1711,10 @@ select{
   min-height: 64px;
 }
 
+.\!w-full{
+  width: 100% !important;
+}
+
 .w-1\/2{
   width: 50%;
 }
@@ -1877,10 +1877,6 @@ select{
   width: 100vw;
 }
 
-.\!w-full{
-  width: 100% !important;
-}
-
 .min-w-\[11\.5rem\]{
   min-width: 11.5rem;
 }
@@ -6001,10 +5997,6 @@ select{
   padding-top: 2rem;
 }
 
-.pt-9{
-  padding-top: 2.25rem;
-}
-
 .pt-\[72px\]{
   padding-top: 72px;
 }
@@ -9726,6 +9718,10 @@ select{
     margin-top: -4px;
   }
 
+  .tb\:mr-\[16px\]{
+    margin-right: 16px;
+  }
+
   .tb\:block{
     display: block;
   }
@@ -10546,6 +10542,14 @@ select{
     margin-top: 0px;
   }
 
+  .tb-l\:mr-\[34px\]{
+    margin-right: 34px;
+  }
+
+  .tb-l\:mr-\[16px\]{
+    margin-right: 16px;
+  }
+
   .tb-l\:block{
     display: block;
   }
@@ -10644,6 +10648,10 @@ select{
     gap: 0px;
   }
 
+  .tb-l\:gap-2{
+    gap: 0.5rem;
+  }
+
   .tb-l\:gap-20{
     gap: 5rem;
   }