hds-web 1.6.8 → 1.7.0

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

@@ -9,9 +9,7 @@ export default function TableA(props) {
         children
 
     } = props;
-    console.log(tableValue.length);
-    const tableLength = tableValue.length;
-    
+    const firstObjectLength = Object.keys(tableValue[0]).length;
     return (
         <div className=" ">
             <div className="sm:flex sm:items-center ">
@@ -19,51 +17,50 @@ export default function TableA(props) {
                     <h1 className="text-base font-semibold leading-6 text-gray-900">{head}</h1>
                     <p className="mt-2 text-sm text-gray-700">{description}</p>
                 </div>
-                
-            </div>
 
+            </div>
             <div>
-                <div className="border bg-neutral-50 border-neutral-100 rounded-2xl">
+                <div className="border border-neutral-100 rounded-2xl">
                     <table className="min-w-full divide-y divide-neutral-100 ">
-                       <div>
-
-
                         <thead>
                             <tr className='divide-x divide-neutral-100'>
-                                {Object.keys(tableValue[0]).map((key) => (
+                                {Object.keys(tableValue[0]).map((key, index) => (
                                     <th
                                         key={key}
                                         scope="col"
-                                        className="text-left sm:table-cell"
+                                        className={(index === 0) ? 'rounded-tl-2xl text-left sm:table-cell bg-neutral-50' : 'text-left sm:table-cell bg-neutral-50 rounded-tr-2xl'}
                                     >
                                         <Typography className='p-6' textStyle='body3c-bold'>{key}</Typography>
-                                        
+
                                     </th>
                                 ))}
+
                             </tr>
                         </thead>
-                      
-                        <tbody className="divide-y rounded-b-3xl divide-neutral-100 bg-white">
-                            {tableValue.map((value,index) => (
-                                <tr key={index} className='divide-x divide-neutral-100'>
+                        <tbody className="divide-y rounded-b-3xl divide-neutral-100 ">
+                            {tableValue.slice(1).map((value, index) => (
+                                <tr key={index} className='divide-x divide-neutral-100 '>
                                     {Object.keys(value).map((key, index2) => (
+
+
+
                                         <td
-                                             key={index2+index}
+                                            key={index2 + index}
                                             className={
-                                                'p-6 bg-neutral-0 ' + ((index == `${tableValue.length-1}`) ? 'rounded-3xl' : '')
+                                                'p-6 ' + ((index == `${tableValue.length - 2}`) ? 'rounded-3xl' : '')
                                             }
                                         >
-                                            
-                                            <Typography textStyle='body3c-bold' className='bg-transparent text-neutral-800'>{key}</Typography>
-                                            <Typography textStyle='body3' className='text-neutral-800 mt-2'>Endless hours spent writing boilerplate code, resolvers, or mapping logic.</Typography>
+
+                                            <Typography textStyle='body3c-bold' className='bg-transparent text-neutral-800'>{key.toString()}</Typography>
+                                            <Typography textStyle='body3' className='text-neutral-800 mt-2'>{value[key].toString()}</Typography>
 
                                         </td>
+
                                     ))}
                                 </tr>
                             ))}
                         </tbody>
-                        </div>
-                        </table>
+                    </table>
                 </div>
             </div>
         </div>

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

@@ -0,0 +1,326 @@
+import React from 'react';
+import { Typography } from '../../foundation/Typography'
+import { Icon } from '../common-components/Icon'
+import { HDSColor } from '../../foundation/ColorPalette';
+import ReactMarkdown from "react-markdown";
+import { HDSButton } from "../Buttons"
+
+export default function PricingTableB(props) {
+    const {
+        title,
+        title_color,
+        description,
+        desc_color,
+        TABLE_VALUE,
+        TABLE_HEADER,
+    } = props;
+    const tableValuesm = (section, keyIndex) => {
+
+        let columnSize = '';
+        let scrapData;
+        if (section[keyIndex][0]) {
+            scrapData = section[keyIndex][0];
+        }
+
+        const firstKeys = section[keyIndex].map(item => Object.keys(item)[0]);
+        const rowTitleKey = firstKeys[0];
+        if (section[keyIndex].length) {
+            columnSize = section[keyIndex].length;
+        }
+        return (
+            <>
+                {section[keyIndex].map((value, index) => (
+                    <tr className='' key={index}>
+                        {Object.keys(value).map((keyIndex) => (
+                            <React.Fragment key={index + keyIndex}>
+                                {keyIndex !== null
+                                    && keyIndex === rowTitleKey
+                                    && index != (columnSize - 1)
+                                    && index != 0 && (
+                                        <td
+
+                                            className="pl-[30px] border-80 "
+                                        >
+                                            <div className=' '>
+                                                <Typography className='py-4 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
+                                            </div>
+                                        </td>)}
+                                {keyIndex !== null
+                                    && keyIndex === rowTitleKey
+                                    && index != (columnSize - 1)
+                                    && index == 0 && (
+                                        <td
+                                            className="pl-[30px] border-80 "
+                                        >
+                                            <div className=' '>
+                                                <Typography className='pb-4 pt-12 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
+                                            </div>
+
+
+                                        </td>)}
+
+                                {keyIndex !== null
+                                    && keyIndex === rowTitleKey
+                                    && index == (columnSize - 1) && (
+                                        <td
+
+                                            className="pl-[30px] border-80 "
+                                        >
+                                            <div className=' '>
+                                                <Typography className='pt-4 pb-12 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
+                                            </div>
+
+
+                                        </td>)}
+
+                                {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index != 0 && index != (columnSize - 1) && (
+                                    <td
+
+                                        className="px-8 text-left ml-[30px] border-80 "
+                                    >
+                                        {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
+                                            <div className=''></div>
+
+                                        )}
+                                        {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
+                                            <div className=' '>
+                                                <Typography className='text-neutral-700 py-4' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
+                                            </div>
+
+
+                                        )}
+                                        {(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
+                                            <div className='flex '>
+                                                <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
+                                            </div>
+                                        )}
+                                    </td>)
+                                }
+                                {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == 0 && (
+                                    <td
+
+                                        className="px-8 text-left ml-[30px] border-80 "
+                                    >
+                                        {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
+                                            <div className=''></div>
+
+                                        )}
+                                        {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
+                                            <div className=' '>
+                                                <Typography className='text-neutral-700 pb-4 pt-12' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
+                                            </div>
+
+
+                                        )}
+                                        {(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
+                                            <div className='flex pb-4 pt-12'>
+                                                <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
+                                            </div>
+                                        )}
+                                    </td>)
+                                }
+                                {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == (columnSize - 1) && (
+                                    <td
+
+                                        className="px-8 text-left ml-[30px] border-80 "
+                                    >
+                                        {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
+                                            <div className=''></div>
+
+                                        )}
+                                        {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
+                                            <div className=' '>
+                                                <Typography className='text-neutral-700 pt-4 pb-12' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
+                                            </div>
+
+
+                                        )}
+                                        {(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
+                                            <div className='flex pt-4 pb-12 '>
+                                                <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
+                                            </div>
+                                        )}
+                                    </td>)
+                                }
+
+                                {keyIndex === null && (
+                                    <td
+                                        key={index}
+                                        className="px-8 py-7 border-table text-center"
+                                    >
+                                    </td>
+                                )}
+
+
+                            </React.Fragment>
+                        ))}
+                    </tr>
+                ))}
+            </>
+        )
+    }
+    return (
+        <div className='px-10'>
+            <div className=" flex justify-around ">
+                <div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
+                    <div>
+                        {title && (
+                            <Typography
+                                textStyle='h3'
+                                className={HDSColor(title_color)}
+                            >
+                                {title}
+                            </Typography>
+                        )}
+                        {description && (
+                            <Typography
+                                textStyle='body1c'
+                                className={HDSColor(desc_color)}
+                            >
+                                {description}
+                            </Typography>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <div className='hidden tb:block' >
+                <div className=" mt-[70px] rounded-3xl ">
+                    <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">
+                                {Object.keys(section).map((keyIndex) => (
+                                    <>
+                                        <tr key={index + keyIndex} className=''>
+                                            {Object.keys(section[keyIndex][0]).map((keyIndex2) => (
+                                                <React.Fragment key={keyIndex2 + keyIndex + index}>
+                                                    {keyIndex2 !== null && (
+                                                        <th
+                                                            className='bg-neutral-100 first:rounded-l-full last:rounded-r-full px-8'
+                                                        >
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className='text-neutral-900 py-3.5 text-left'
+                                                            >
+                                                                {keyIndex2}
+                                                            </Typography>
+                                                        </th>
+                                                    )}
+                                                </React.Fragment>
+                                            ))}
+                                        </tr>
+                                        {tableValuesm(section, keyIndex)}
+                                    </>
+                                ))
+                                }
+                            </tbody>
+                        ))
+                        }
+                        {TABLE_HEADER && (
+                            <>
+                                <tbody>
+                                    <tr>
+                                        <td></td>
+                                        {TABLE_HEADER.map((value, index) => (
+                                            <React.Fragment key={index}>
+                                                {index != 0 && value['button_title'] &&
+                                                    <td key={index} className='px-8'>
+                                                        <a href={value['button_link']}>
+                                                            <HDSButton
+                                                                label={value['button_title']}
+                                                                type='secondary'
+                                                                leftIconVariant='none'
+                                                                rightIconVariant='none'
+                                                                state='default'
+                                                                size='sm'
+                                                                rightAnimatedArrow={true}
+                                                                rightAnimatedArrowColor='#3970FD'
+                                                                className='mt-4 mb-16'
+                                                            />
+                                                        </a>
+
+                                                    </td>}
+                                            </React.Fragment>
+                                        ))
+                                        }
+
+                                    </tr>
+                                </tbody>
+                            </>
+                        )}
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}
+

package/src/HDS/components/Tabs/tab.js

@@ -1,11 +1,22 @@
 import React, { useState, useRef } from 'react';
+import { HDSColor } from '../../foundation/ColorPalette';
 import { Typography } from '../../foundation/Typography'
+import PropTypes from 'prop-types';
 
 export default function Tab(props) {
-  const { tabs, onTabClick } = props;
+  const {
+    tabs,
+    onTabClick,
+    pillColor,
+  } = props;
   const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
   const pillRef = useRef(null);
-
+  let pillColorClass = '';
+  if(pillColor){
+     pillColorClass = HDSColor(pillColor);
+  }
+ 
+  
   const handleTabClick = (event, clickedTab) => {
     event.preventDefault();
     setActiveTab(clickedTab);
@@ -19,35 +30,51 @@ export default function Tab(props) {
       const pillWidth = event.currentTarget.offsetWidth;
       const clickedTabOffset = event.currentTarget.offsetLeft;
       const pillOffset = pill.parentElement.offsetLeft;
-      const translateX = clickedTabOffset ;
+      const translateX = clickedTabOffset;
 
       pill.style.transform = `translateX(${translateX}px)`;
       pill.style.width = `${pillWidth}px`;
     }
   };
+  let tabTextClass = ''; 
+
+  function tabClass(name) {
+    
+    // console.log(currentTab['tabTextColorClass']);
+    
+    if(activeTab['tabTextColorClass']){
+      tabTextClass = HDSColor(activeTab['tabTextColorClass']);
+    }
+    else tabTextClass = 'text-neutral-500'
 
+    let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
+    let clasnInActive = ' flex-nowrap rounded-full ' + tabTextClass;
+    if (activeTab.name === name) {
+      return classActive;
+    }
+    else {
+      return clasnInActive;
+    }
+  }
   return (
-    <div>
+    <div className=''>
       <div className="block">
-        <nav className="relative inline-flex gap-2  p-2 rounded-full" aria-label="Tabs">
+        <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
           {tabs.map(tab => (
-            <a
+            <div
               key={tab.name}
-              href="#"
-              className={`px-3 py-1 font-medium text-sm rounded-full ${
-                activeTab === tab
-                  ? ' first:bg-blue-500  text-neutral-0 transition-all  delay-100 duration-100 '
-                  : 'text-neutral-500 transition-all delay-200  flex-nowrap '
-              }`}
-              aria-current={activeTab === tab ? 'page' : undefined}
               onClick={(event) => handleTabClick(event, tab)}
             >
-              <Typography className='z-[2] relative whitespace-nowrap' textStyle='body3c-medium'>{tab.name}</Typography>
-            </a>
+              <Typography 
+              className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
+              textStyle='body3c-medium'>
+                {tab.name}
+              </Typography>
+            </div>
           ))}
           <span
             ref={pillRef}
-            className="absolute left-0 z-[1] bg-blue-500 rounded-full transition-all ease-in-out duration-700"
+            className={`absolute left-0 z-[1] ${pillColorClass} rounded-full transition-all ease-in duration-150`}
             style={{
               left: `${activeTab.index * 100}%`,
               width: `${activeTab.width}px`, // Use the width of the clicked tab
@@ -59,3 +86,7 @@ export default function Tab(props) {
     </div>
   );
 }
+
+Tab.defaultProps = {
+  pillColor: 'bg-blue-500',
+}

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import {HDSColor} from '../../../foundation/ColorPalette';
 import PropTypes from 'prop-types';
+import {ReactComponent as Hasura1Icon } from "../../../assets/icons/hasura-1.svg"
+import {ReactComponent as Hasura2Icon } from "../../../assets/icons/hasura-2.svg"
+import {ReactComponent as Hasura3Icon } from "../../../assets/icons/hasura-3.svg"
 import {ReactComponent as HasuraPrimaryIcon } from "../../../assets/icons/HasuraPrimary.svg"
 import {ReactComponent as ClockrewindIcon } from "../../../assets/icons/clock-rewind.svg"
 import {ReactComponent as PassportIcon } from "../../../assets/icons/passport.svg"
@@ -1177,6 +1180,9 @@ import {ReactComponent as Minus01Icon } from "../../../assets/icons/minus-01.svg
 import {ReactComponent as HasuraIcon } from "../../../assets/icons/hasura.svg"
 
 const iconReferenceMap = {
+    hasura1: Hasura1Icon,
+    hasura2: Hasura2Icon,
+    hasura3: Hasura3Icon,
     hasuraPrimary: HasuraPrimaryIcon,
     hasura: HasuraIcon,
     minus01: Minus01Icon,

package/src/HDS/components/index.js

@@ -12,4 +12,5 @@ export * from './Snippet';
 export * from './Tabs';
 export * from './Tooltip';
 export * from './Hero';
-export * from './Tables';
+export * from './Tables';
+export * from './Carousels';