hds-web 1.13.5 → 1.13.6

package/package.json

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

package/src/HDS/components/Tables/tableD.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 import { Typography } from '../../foundation/Typography'
 import { Icon } from '../common-components/Icon'
 import { HDSColor } from '../../foundation/ColorPalette';
@@ -14,7 +14,26 @@ export default function PricingTableB(props) {
         TABLE_VALUE,
         TABLE_HEADER,
     } = props;
+ 
+    const [isSticky, setIsSticky] = useState(false);
+    useEffect(() => {
+        const handleScroll = () => {
+            const tableHeader = stickyRef.current;
+            const tableHeaderRect = tableHeader.getBoundingClientRect();
+            const isSticky = tableHeaderRect.top <= 10; // Adjust this value if needed
+
+            setIsSticky(true);
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
     console.log(TABLE_VALUE)
+  
+    const stickyRef = useRef(null);
     const tableValuesm = (section, keyIndex) => {
 
         let columnSize = '';
@@ -42,7 +61,7 @@ export default function PricingTableB(props) {
                                             className="pl-[30px] border-80 "
                                         >
                                             <div className=' '>
-                                                <Typography className='py-4 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
+                                                <Typography className='py-4 text-neutral-700' textStyle='body1'>{value[keyIndex]}</Typography>
                                             </div>
                                         </td>)}
                                 {keyIndex !== null
@@ -174,76 +193,7 @@ export default function PricingTableB(props) {
                         </Typography>
                     )}
                     <table className="rounded-3xl w-full table-fixed ">
-                        {/* <thead>
-                            <tr className=' text-left first:pr-20 '>
-                                {Object.keys(TABLE_HEADER).map((key, index) => (
-                                    <th
-                                        key={index}
-                                        scope="col"
-                                        className="px-8 pb-[54px] sm:table-cell text-left"
-                                    >
-                                        <div className='flex text-left'>
-                                            <div className='flex flex-col text-center'>
-                                                <div className={'flex  gap-2'}>
-                                                    {TABLE_HEADER[key]['icon'] &&
-                                                        (
-                                                            <Icon
-                                                                height='h-6 w-6 stroke-[1.5px]'
-                                                                variant={TABLE_HEADER[key]['icon']}
-                                                                strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
-                                                        )
-                                                    }
-                                                    {
-                                                        TABLE_HEADER[key]['title'] && key == 0 && (
-                                                            <Typography
-                                                                textStyle='h3'
-                                                                className={` w-1/2 text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
-                                                                {TABLE_HEADER[key]['title']}
-                                                            </Typography>)
-                                                    }
-                                                    {
-                                                        TABLE_HEADER[key]['title'] && key != 0 && (
-                                                            <Typography
-                                                                textStyle='h5'
-                                                                className={` text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
-                                                                <ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
-                                                            </Typography>)
-                                                    }
-                                                </div>
-                                                <div className=''>
-                                                    {TABLE_HEADER[key]['descr'] && (
-                                                        <Typography
-                                                            textStyle='body1'
-                                                            className={` text-left ${HDSColor(TABLE_HEADER[key]['descr_text_color'])}`}>
-                                                            {TABLE_HEADER[key]['descr']}
-                                                        </Typography>)}
-
-                                                    {TABLE_HEADER[key]['button_title'] &&
-                                                        (
-                                                            <a href={TABLE_HEADER[key]['button_link']}>
-                                                                <HDSButton
-                                                                    label={TABLE_HEADER[key]['button_title']}
-                                                                    type='secondary'
-                                                                    leftIconVariant='none'
-                                                                    rightIconVariant='none'
-                                                                    state='default'
-                                                                    size='sm'
-                                                                    rightAnimatedArrow={true}
-                                                                    rightAnimatedArrowColor='#3970FD'
-                                                                    className='mt-4'
-                                                                />
-                                                            </a>
-
-                                                        )
-
-                                                    }
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </th>
-                                ))}
-                            </tr>
-                        </thead> */}
+                       
                         {TABLE_VALUE.map((section, index) => (
                             <tbody key={index} className="border-90  bg-neutral-0">
                                 {Object.keys(section).map((keyIndex) => (
@@ -253,18 +203,22 @@ export default function PricingTableB(props) {
                                                 <React.Fragment key={keyIndex2 + keyIndex + index}>
                                                     {keyIndex2 !== null && (
                                                         <th
-                                                            className='first:rounded-l-full last:rounded-r-full px-8 sticky top-0 z-10'
+                                                            ref={stickyRef}
+                                                            className={`first:rounded-l-full last:rounded-r-full px-8 ${isSticky ? ' sticky top-0 z-10 bg-neutral-100' : ''
+                                                                }`}
                                                         >
                                                             <Typography
                                                                 textStyle='h5'
-                                                                className='text-neutral-900 py-3.5 text-left'
+                                                                className='text-neutral-900 py-3.5 text-left whitespace-nowrap'
                                                             >
                                                                 {keyIndex2}
+                                                               
 
                                                             </Typography>
-                                                           { <div className='flex -mt-2'>
+                                                            {section[keyIndex][0][keyIndex2]['btn'] && section[keyIndex][0][keyIndex2]['btn_cta'] && <div className={`flex -mt-5`}>
+                                                                <a href={section[keyIndex][0][keyIndex2]['btn_cta']}>
                                                                 <HDSButton
-                                                                    label='Try free'
+                                                                    label={section[keyIndex][0][keyIndex2]['btn']}
                                                                     type='secondaryLink'
                                                                     leftIconVariant='none'
                                                                     rightIconVariant='none'
@@ -277,6 +231,7 @@ export default function PricingTableB(props) {
                                                                     btnTextHoverClass=''
                                                                     className=' '
                                                                 />
+                                                                </a>
                                                             </div>}
 
                                                         </th>

package/src/index.css

@@ -41,6 +41,15 @@
 
 /*test*/
 
+.myElement {
+  position: sticky;
+  top: 0px;
+}
+
+/* styles for when the header is in sticky mode */
+.myElement.is-pinned {
+  color: red;
+}
 
 .carouselShadow{
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

package/src/styles/tailwind.css

@@ -1217,6 +1217,10 @@ select{
   margin-left: -1px;
 }
 
+.-mt-2{
+  margin-top: -0.5rem;
+}
+
 .-mt-4{
   margin-top: -1rem;
 }
@@ -1393,14 +1397,6 @@ select{
   margin-top: 70px;
 }
 
-.-mt-1{
-  margin-top: -0.25rem;
-}
-
-.-mt-2{
-  margin-top: -0.5rem;
-}
-
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -6221,10 +6217,6 @@ select{
   padding-bottom: 2rem;
 }
 
-.pb-\[54px\]{
-  padding-bottom: 54px;
-}
-
 .pb-\[56\.2\%\]{
   padding-bottom: 56.2%;
 }
@@ -7443,6 +7435,18 @@ select{
 
 /*test*/
 
+.myElement {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0px;
+}
+
+/* styles for when the header is in sticky mode */
+
+.myElement.is-pinned {
+  color: red;
+}
+
 .carouselShadow{
   -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
           filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
@@ -8677,10 +8681,6 @@ select{
   border-bottom-left-radius: 9999px;
 }
 
-.first\:pr-20:first-child{
-  padding-right: 5rem;
-}
-
 .last\:mb-0:last-child{
   margin-bottom: 0px;
 }