hds-web 1.33.1 → 1.33.2

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

@@ -1,292 +0,0 @@
-import React, {useState, useRef, useEffect} 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 [isSticky, setIsSticky] = useState(false);
-    const stickyRef = useRef();
-    useEffect(() => {
-        const handleScroll = () => {
-            const tableHeader = stickyRef.current;
-            const tableHeaderRect = tableHeader.getBoundingClientRect();
-            const isSticky = tableHeaderRect.top <= 400; // Adjust this value if needed
-           
-            setIsSticky(true);
-        };
-
-        window.addEventListener('scroll', handleScroll);
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-
-
-
-
-    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='body1'>{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='body1'>{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='body1'>{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='body1'>{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='body1'>{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='body1'>{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='hidden tb:block' >
-                <div className=" mt-[70px] rounded-3xl  bg-neutral-0">
-
-                    {TABLE_HEADER && TABLE_HEADER[0] && TABLE_HEADER[0]['title'] && (
-                        <Typography
-                            textStyle='h4'
-                            className={`pb-10 pl-8 pt-[72px] ${HDSColor(title_color)}`}
-                        >
-                            {TABLE_HEADER[0]['title']}
-                        </Typography>
-                    )}
-                    <table className="rounded-3xl w-full table-fixed ">
-
-                        {TABLE_VALUE.map((section, index) => (
-                            <tbody key={index} className="border-90  bg-neutral-0">
-                                {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
-                                                            ref={stickyRef}
-                                                            className={`first:rounded-l-full last:rounded-r-full px-8 z-[100] top-[72px] sticky ${(index === 0) ? 'bg-neutral-0' : 'bg-neutral-100'
-                                                                }`}
-                                                        >
-                                                            <div className={`flex flex-col py-3.5 gap-[11px]`}>
-
-                                                            
-                                                            <Typography
-                                                                textStyle='h5'
-                                                                className='text-neutral-900 text-left whitespace-nowrap'
-                                                            >
-                                                                {keyIndex2}
-
-
-                                                            </Typography>
-                                                            {section[keyIndex][0][keyIndex2]['btn'] && section[keyIndex][0][keyIndex2]['btn_cta'] && <div className={`flex -mt-4`}>
-                                                                <a href={section[keyIndex][0][keyIndex2]['btn_cta']}>
-                                                                    <HDSButton
-                                                                        label={section[keyIndex][0][keyIndex2]['btn']}
-                                                                        type='secondaryLink'
-                                                                        leftIconVariant='none'
-                                                                        rightIconVariant='none'
-                                                                        state='default'
-                                                                        size='sm'
-                                                                        rightAnimatedArrow={true}
-                                                                        rightAnimatedArrowColor='#3970FD'
-                                                                        animatedHoverStroke='#3970FD'
-                                                                        btnTextColorClass='text-blue-500'
-                                                                        btnTextHoverClass=''
-                                                                        className=' '
-                                                                    />
-                                                                </a>
-                                                            </div>}
-                                                            </div>
-
-                                                        </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/TabOne.js

@@ -1,50 +0,0 @@
-import React from 'react';
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
-}
-
-export default function TabsOne(props) {
-    const tabs = Array.isArray(props.tabs) ? props.tabs : [];
-    return (
-      <div>
-        <div className="sm:hidden">
-          <label htmlFor="tabs" className="sr-only">
-            Select a tab
-          </label>
-          {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
-          <select
-            id="tabs"
-            name="tabs"
-            className="block w-full rounded-md border-amber-600 py-2 pl-3 pr-10 text-base focus:border-green-600 focus:outline-none focus:ring-pink-500 sm:text-sm"
-            defaultValue={tabs.length && tabs.find((tab) => tab.current).name}
-          >
-            {tabs.length && tabs.map((tab) => (
-              <option key={tab.name}>{tab.name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="hidden sm:block">
-          <div className="border-b border-neutral-200">
-            <nav className="-mb-px flex space-x-8" aria-label="Tabs">
-              {tabs.length && tabs.map((tab) => (
-                <a
-                  key={tab.name}
-                  href={tab.href}
-                  className={classNames(
-                    tab.current
-                      ? 'border-blue-600 text-blue-600 border-b-2'
-                      : 'border-transparent text-neutral-700 hover:text-blue-600 hover:border-blue-600',
-                    'whitespace-nowrap py-4 px-1 font-medium text-sm'
-                  )}
-                  aria-current={tab.current ? 'page' : undefined}
-                >
-                  {tab.name}
-                </a>
-              ))}
-            </nav>
-          </div>
-        </div>
-      </div>
-    );
-  }

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

@@ -1,47 +0,0 @@
-import React from 'react';
-
-function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
-  }
-  
-export default function Tabthree (props){
-    const tabs = Array.isArray(props.tabs) ? props.tabs : [];
-    return (
-      <div>
-        <div className="sm:hidden">
-          <label htmlFor="tabs" className="sr-only">
-            Select a tab
-          </label >
-          {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
-          <select
-            id="tabs"
-            name="tabs"
-            className="block w-full rounded-md border-pink-300 focus:border-pink-500 focus:ring-pink-500"
-            defaultValue={tabs.length && tabs.find((tab) => tab.current).name}
-          >
-            {tabs.length && tabs.map((tab) => (
-              <option key={tab.name}>{tab.name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="hidden sm:block">
-          <nav className="inline-flex space-x-4 bg-neutral-100 p-2 rounded" aria-label="Tabs">
-          {tabs.length && tabs.map((tab) => (
-              <a
-                key={tab.name}
-                href={tab.href}
-                className={classNames(
-                  tab.current ? 'bg-neutral-0 text-neutral-700' : 'text-neutral-700 bg-neutral-50 hover:text-gray-800',
-                  'px-3 py-2 font-medium text-sm rounded-md'
-                )}
-                aria-current={tab.current ? 'page' : undefined}
-              >
-                {tab.name}
-              </a>
-            ))}
-          </nav>
-        </div>
-      </div>
-    )
-  }
-  

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

@@ -1,46 +0,0 @@
-import React from 'react';
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
-}
-
-export default function Tabtwo(props) {
-  const tabs = Array.isArray(props.tabs) ? props.tabs : [];
-    return (
-      <div>
-        <div className="sm:hidden">
-          <label htmlFor="tabs" className="sr-only">
-            Select a tab
-          </label>
-          {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
-          <select
-            id="tabs"
-            name="tabs"
-            className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
-            defaultValue={tabs.length && tabs.find((tab) => tab.current).name}
-          >
-            {tabs.length && tabs.map((tab) => (
-              <option key={tab.name}>{tab.name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="hidden sm:block">
-          <nav className="flex space-x-4" aria-label="Tabs">
-          {tabs.length && tabs.map((tab) => (
-              <a
-                key={tab.name}
-                href={tab.href}
-                className={classNames(
-                  tab.current ? 'bg-blue-100 text-blue-600 border-blue-600 border-b-2' : 'text-neutral-700 hover:text-gray-700',
-                  'px-3 py-2 font-medium text-sm rounded-t-md'
-                )}
-                aria-current={tab.current ? 'page' : undefined}
-              >
-                {tab.name}
-              </a>
-            ))}
-          </nav>
-        </div>
-      </div>
-    )
-  }

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

@@ -1,5 +0,0 @@
-export {default as Tabone} from './TabOne';
-export {default as Tabthree} from './TabThree';
-export {default as Tabtwo} from './TabTwo';
-export {default as Tab} from './tab';
-export {default as V3Tab} from './v3tab';

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

@@ -1,91 +0,0 @@
-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,
-    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);
-    if (onTabClick) {
-      onTabClick(clickedTab);
-    }
-
-    // Move the pill indicator to the clicked tab
-    const pill = pillRef.current;
-    if (pill) {
-      const pillWidth = event.currentTarget.offsetWidth;
-      const clickedTabOffset = event.currentTarget.offsetLeft;
-      const pillOffset = pill.parentElement.offsetLeft;
-      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 className=''>
-      <div className="block">
-        <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
-          {tabs.map(tab => (
-            <div
-              key={tab.name}
-              onClick={(event) => handleTabClick(event, tab)}
-            >
-              <Typography 
-                className={`${tabClass(tab.name)} ${tab.name === activeTab.name ? '' : 'hover:bg-neutral-150'} 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] ${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
-              height: '28px' // Add desired height to make the pill visible
-            }}
-          />
-        </nav>
-      </div>
-    </div>
-  );
-}
-
-Tab.defaultProps = {
-  pillColor: 'bg-blue-500',
-}

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

@@ -1,61 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { HDSColor } from '../../foundation/ColorPalette';
-import { Typography } from '../../foundation/Typography'
-import { motion } from 'framer-motion';
-
-export default function V3Tab(props) {
-    const {
-        tabs,
-        onTabClick,
-        pillColor,
-        initalTab=true
-    } = props;
-    const initialActiveTab = tabs.find((tab) => tab.current)?.name || (initalTab ? tabs[0].name : '');
-    const [activeTab, setActiveTab] = useState(initialActiveTab);
-    let pillColorClass = '';
-    if (pillColor) {
-        pillColorClass = HDSColor(pillColor);
-    }
-    const handleTabClick = (clickedTab) => {
-        setActiveTab(clickedTab.name);
-        if (onTabClick) {
-            onTabClick(clickedTab);
-        }
-
-    };
-    return (
-        <div className="">
-            <div className="block ">
-                <nav className="relative inline-flex gap-2 rounded-[32px] " aria-label="Tabs">
-                    {tabs && tabs.map((tab) => (
-                        <button
-                            key={tab.name}
-                            onClick={() => {
-                                handleTabClick(tab);
-                            }}
-                            className={`${activeTab === tab.name ? ' text-neutral-0 transition-all duration-300' : ' hover:bg-neutral-500/30 text-neutral-400'} relative  px-3 py-1 whitespace-nowrap rounded-full hover:text-neutral-0 transition-all duration-300`}
-                        >
-                            {activeTab === tab.name && (
-                                <motion.div
-                                    layoutId="active-pill"
-                                    className={`absolute inset-0 ${pillColorClass}`}
-                                    style={{ borderRadius: 32 }}
-                                //  transition={{ duration:1 }}
-
-                                />
-                            )}
-                            <Typography textStyle="body3c-medium" className={`relative z-10 `}>
-                                {tab.name}
-                            </Typography>
-                        </button>
-                    ))}
-                </nav>
-            </div>
-        </div>
-    );
-}
-
-
-V3Tab.defaultProps = {
-    pillColor: 'bg-blue-500',
-}