hds-web 1.33.2 → 1.33.4

package/src/HDS/components/Pre-footers/linkImagePF.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { LinkCard } from '../Cards/Link'
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../Buttons'
+
+export default function LinkImagePF(props) {
+    const {
+        sectionPreFooterData
+    } = props;
+    return (
+        <>
+            <div className="w-full">
+                {/* <div className="rounded-3xl bg-neutral-0 shadow db:p-20 tb:p-10 px-5 py-10">
+                    <div className="pt-10 tb:pt-16 db:pt-24">
+                        <Typography textStyle="h4" as="h4" className="text-neutral-1000 pb-8">{sectionPreFooterData.title}</Typography>
+                        <div className="grid grid-cols-1 tb-l:grid-cols-2 gap-10 tb:gap-20 db:gap-30">
+                            <div className="max-w-[380px]">
+                                {
+                                    (sectionPreFooterData.link_card.length > 0) && sectionPreFooterData.link_card.map((card, index) => (
+                                        <div key={index} className="pb-4 last:pb-0 border border-neutral-150 rounded-2xl transition ease-in duration-150 hover:shadow-xl hover:border-transparent mb-4 last:mb-0">
+                                            <LinkCard
+                                                titleTextColor={card.titleTextColor}
+                                                descTextColor={card.descTextColor}
+                                                linkUrl={card.linkUrl}
+                                                cardBgColor={card.cardBgColor}
+                                                cardHoverBg={card.cardHoverBg}
+                                                iconVariant={card.iconVariant}
+                                                iconStrokeClass={card.iconStrokeColor}
+                                                iconArrowVariant={card.iconArrowVariant}
+                                                iconArrowStrokeClass={card.iconArrowStrokeColor}
+                                                title={card.title}
+                                                description={card.description}
+                                            />
+                                        </div>
+                                    ))
+                                }
+
+                            </div>
+                            <div className="text-center self-start">
+                                <img
+                                    loading="lazy"
+                                    src={sectionPreFooterData.get_tickets.img_url}
+                                    width={214}
+                                    height={284}
+                                    alt={sectionPreFooterData.get_tickets.title}
+                                    className="inline-block"
+                                />
+                                <Typography textStyle="h3" as="h3" className="text-neutral-1000 py-6">{sectionPreFooterData.get_tickets.title}</Typography>
+                                <a href={sectionPreFooterData.get_tickets.button.cta_link}>
+                                    <HDSButton
+                                        label={sectionPreFooterData.get_tickets.button.cta_text}
+                                        type='secondary'
+                                        leftIconVariant='none'
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='md'
+                                        rightAnimatedArrow={true}
+                                        rightAnimatedArrowColor='#3970FD'
+                                    />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div> */}
+            </div>
+        </>
+    )
+}
+

package/src/HDS/components/Snippet/CodeSnippet.js

@@ -0,0 +1,70 @@
+// import React, { useState, useRef, useEffect } from 'react';
+// import PropTypes from 'prop-types';
+// import Prism from 'prismjs';
+// import 'prismjs/themes/prism.css';
+// import 'prismjs/components/prism-javascript';
+
+// function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
+
+//   if(!snippet){
+//     snippet='as'
+//   }
+ 
+//   const [isCopied, setIsCopied] = useState(false);
+//   const preRef = useRef(null);
+
+//   async function copyToClipboard() {
+//     try {
+//       await navigator.clipboard.writeText(snippet);
+//       setIsCopied(true);
+//       setTimeout(() => setIsCopied(false), 1500);
+//     } catch (error) {
+//       console.error('Failed to copy to clipboard', error);
+//     }
+//   }
+
+  
+//   useEffect(() => {
+//     console.log(snippet)
+//     if (preRef.current ) {
+//       Prism.highlightAll();
+//     }
+//   }, [snippet, preRef.current]);
+
+
+//   const lines = snippet.split('\n');
+//   const lineCount = lines.length;
+//   if(snippet){}
+//   return (
+//     <div className={`${backgroundColor}  border border-neutral-100 rounded relative`}>
+//       {filename ? (
+//         <span className='bg-neutral-100 flex p-2 text-sm-medium text-neutral-900'>{filename}</span>
+//       ) : null}
+
+//       <div className='my-6 mx-10'>
+//         <pre style={{ whiteSpace: 'pre-wrap' }} ref={preRef} className='line-numbers'>
+//           {lines.map((line, index) => (
+//             <code className='language-javascript' key={index}>
+//               <span className='text-sm text-neutral-500 mr-4'>{index + 1}  </span>
+//               {line}
+//               {index < lineCount - 1 ? '\n' : null}
+//             </code>
+//           ))}
+//         </pre>
+
+//         <button
+//           className='border border-neutral-400 button-sm absolute bottom-0 right-0 mb-4 mr-4'
+//           onClick={copyToClipboard}
+//         >
+//           {isCopied ? 'Copied!' : 'Copy to Clipboard'}
+//         </button>
+//       </div>
+//     </div>
+//   );
+// }
+
+// // CodeSnippetWithCopy.propTypes = {
+// //   snippet: PropTypes.string.isRequired,
+// // };
+
+// export default CodeSnippetWithCopy;

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

@@ -0,0 +1 @@
+// export {default as CodeSnippet} from './CodeSnippet';

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

@@ -0,0 +1,4 @@
+export {default as TableA} from './tableA';
+export {default as TableB} from './tableB';
+export {default as TableC} from './tableC';
+export {default as PricingTableB} from './tableD';

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

@@ -0,0 +1,56 @@
+import React from 'react';
+export default function TableA(props) {
+    const {
+        head,
+        description,
+        tableValue,
+        children
+
+    } = props;
+    return (
+        <div className="px-4 sm:px-6 lg:px-8 ">
+            <div className="sm:flex sm:items-center ">
+                <div className="sm:flex-auto">
+                    <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 className="-mx-4 mt-8 sm:-mx-0">
+                    <table className="min-w-full divide-y divide-gray-300 border">
+                        <thead>
+                            <tr>
+                                {Object.keys(tableValue[0]).map((key) => (
+                                    <th
+                                        key={key}
+                                        scope="col"
+                                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+                                    >
+                                        {key}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-200 bg-white">
+                            {tableValue.map((value,index) => (
+                                <tr key={index}>
+                                    {Object.keys(value).map((key, index2) => (
+                                        <td
+                                             key={index2+index}
+                                            className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
+                                        >
+                                            {``}{value[key]}
+
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,281 @@
+import React from 'react';
+import { useState } from 'react';
+import { Typography } from '../../foundation/Typography'
+import { Icon } from '../common-components/Icon'
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Tab } from '../Tabs'
+import ReactMarkdown from "react-markdown";
+
+const tabs = [
+    { name: 'Tier 1', href: '', current: true },
+    { name: 'Tier 2', href: '', current: false },
+    { name: 'Tier 3', href: '', current: false },
+]
+
+
+
+const levelCalc = (arr, index) => {
+
+    const keyIndex = 'key' + `${index}`;
+    if (arr[keyIndex] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant'])) {
+        return (
+            <>
+                <div className='flex gap-4 p-4 w-full'>
+                    {(arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
+                        <Icon height='h-5 w-5 stroke-[1.5px]' variant='checkcircle' strokeClass='stroke-green-500' />
+                    )
+                    }
+                        <>
+                            <Typography textStyle='body1c'
+                                className='text-neutral-700 [&>span]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0'>
+
+                                {arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null && (
+                                    <>
+                                        {`${arr[keyIndex]['text']} `}
+                                    </>
+                                )
+                                }
+                                {arr['rowTitle'] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
+                                    <>
+                                        <ReactMarkdown components={{ p: 'span' }}>
+                                            {`${arr['rowTitle']}`}
+                                        </ReactMarkdown>
+                                    </>
+
+                                )}
+                            </Typography>
+                        </>
+                  
+                </div>
+
+            </>
+        )
+    }
+    
+}
+
+export default function TableB(props) {
+    const {
+        title,
+        title_color,
+        description,
+        desc_color,
+        TABLE_VALUE,
+        TABLE_HEADER,
+    } = props;
+    const [activeTab, setActiveTab] = useState(1);
+
+    function handleTabClick(tab) {
+        if (tab.name === 'Tier 1') setActiveTab(1);
+        if (tab.name === 'Tier 2') setActiveTab(2);
+        if (tab.name === 'Tier 3') setActiveTab(3);
+        // Perform any other actions based on the clicked tab
+    }
+
+    return (
+        <div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
+            <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 className=' mt-11 p-2 bg-neutral-0 rounded-full shadow tb-l:hidden'>
+                        <Tab onTabClick={handleTabClick} tabs={tabs} />
+                    </div>
+                </div>
+
+            </div>
+
+            {/* code for mobile */}
+
+            <div className='tb-l:hidden'>
+                <div className="mt-8 bg-neutral-0 rounded-3xl ">
+                    <div className=" shadow rounded-3xl ">
+
+                        <div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
+                            <div className={'flex items-center gap-2'}>
+                                {TABLE_HEADER[activeTab]['icon'] &&
+                                    (
+                                        <Icon
+                                            height='h-6 w-6'
+                                            variant={TABLE_HEADER[activeTab]['icon']}
+                                            strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
+                                    )
+                                }
+                                {
+                                    TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
+                                        <Typography
+                                            textStyle='h5'
+                                            className={TABLE_HEADER[activeTab]['title_text_color']}>
+                                            {`${TABLE_HEADER[activeTab]['title']}`}
+                                        </Typography>)
+                                }
+                                {
+                                    TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
+                                        <Typography
+                                            textStyle='h5'
+                                            className={TABLE_HEADER[activeTab]['title_text_color']}>
+                                            {`${TABLE_HEADER[activeTab]['title']}`}
+                                        </Typography>)
+                                }
+
+
+                            </div>
+                            <div className=' max-w-[10rem]'>
+                                {TABLE_HEADER[activeTab]['descr'] && (
+                                    <Typography
+                                        textStyle='body1'
+                                        className={TABLE_HEADER[activeTab]['descr_text_color']}>
+                                        {`${TABLE_HEADER[activeTab]['descr']}`}
+                                    </Typography>)}
+                            </div>
+                        </div>
+
+                        <div className="divide-y divide-neutral-200 rounded-b-3xl">
+                            <div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl  items-center'>
+                                <div className='flex divide-y divide-neutral-200 flex-col w-full gap-2 items-start'>
+                                    {TABLE_VALUE.map((key, index) => (
+                                        <React.Fragment key={index}>
+
+                                            {levelCalc(key, activeTab)}
+
+                                        </React.Fragment>
+                                    ))}
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* code for mobile */}
+
+            <div className='hidden tb-l:block' >
+                <div className="mt-12 bg-neutral-0 rounded-3xl ">
+                    <table className="min-w-full shadow tableclss rounded-3xl ">
+                        <thead>
+                            <tr className='divide-x border-b border-neutral-200 divide-neutral-200 text-center rounded-t-3xl'>
+                                {Object.keys(TABLE_HEADER).map((key, index) => (
+                                    <th
+                                        key={index}
+                                        scope="col"
+                                        className="px-8 py-6 sm:table-cell"
+                                    >
+                                        <div className=''>
+                                            <div className='flex flex-col justify-center items-center text-center'>
+                                                <div className={'flex items-center gap-2 w-full justify-center'}>
+                                                    {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='h5'
+                                                                className={`w-full text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
+                                                                {TABLE_HEADER[key]['title']}
+                                                            </Typography>)
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[key]['title'] && key != 0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
+                                                                <ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
+                                                            </Typography>)
+                                                    }
+                                                </div>
+                                                <div className=' max-w-[10rem]'>
+                                                    {TABLE_HEADER[key]['descr'] && (
+                                                        <Typography
+                                                            textStyle='body1'
+                                                            className={HDSColor(TABLE_HEADER[key]['descr_text_color'])}>
+                                                            {TABLE_HEADER[key]['descr']}
+                                                        </Typography>)}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-neutral-200">
+                            {TABLE_VALUE.map((value, index) => (
+                                <tr className='divide-x divide-neutral-200' key={index}>
+                                    {Object.keys(value).map((keyIndex) => (
+
+                                        <React.Fragment key={index + keyIndex}>
+                                            {keyIndex !== null && keyIndex === 'rowTitle' && (<td
+
+                                                className="px-8 py-7 w-[22.5rem]"
+                                            >
+                                                <Typography className='max-w-[22rem] text-neutral-700 [&>p]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
+
+                                            </td>)}
+
+                                            {keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
+                                                <td
+
+                                                    className="px-8 py-7 border-table text-center "
+                                                >
+                                                    {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
+                                                        <></>
+
+                                                    )}
+                                                    {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
+                                                        <Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
+
+                                                    )}
+                                                    {(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
+                                                        <div className='flex justify-center'>
+                                                            <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>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+TableB.defaultProps = {
+    title_color: 'text-blue-800',
+    desc_color: 'text-blue-600'
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Typography } from '../../foundation/Typography';
+export default function TableA(props) {
+    const {
+        head,
+        description,
+        tableValue,
+        children
+
+    } = props;
+    const firstObjectLength = Object.keys(tableValue[0]).length;
+    return (
+        <div className=" ">
+            <div className="sm:flex sm:items-center ">
+                <div className="sm:flex-auto">
+                    <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 className="border border-neutral-100 rounded-2xl">
+                    <table className="min-w-full divide-y divide-neutral-100 ">
+                        <thead>
+                            <tr className='divide-x divide-neutral-100'>
+                                {Object.keys(tableValue[0]).map((key, index) => (
+                                    <th
+                                        key={key}
+                                        scope="col"
+                                        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 ">
+                            {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}
+                                            className={
+                                                'p-6 ' + ((index == `${tableValue.length - 2}`) ? 'rounded-3xl' : '')
+                                            }
+                                        >
+
+                                            <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>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}