hds-web 1.1.5 → 1.1.8

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Fragment } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { Icon } from '../common-components/Icon'
-import { Typography } from '../../foundation/Typography'
-import { HDSButton } from '../Buttons'
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../common-components/Icon';
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../Buttons';
+import { V3Dropdown } from '../Cards/Dropdown'
 
 const solutions = [
     {
@@ -43,39 +44,69 @@ export default function V3Header(props) {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
         >
-            <Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform lg:max-w-3xl">
-                <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                    <div className="relative grid gap-6 bg-neutral-0 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
-                        {solutions.map((item) => (
-                            <a
-                                key={item.name}
-                                href={item.href}
-                                className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
-                            >
-                                <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
-
-                                    {/* <item.icon className="h-6 w-6" aria-hidden="true" /> */}
-                                </div>
-                                <div className="ml-4">
-                                    <p className="text-base font-medium text-gray-900">{item.name}</p>
-                                    <p className="mt-1 text-sm text-gray-500">{item.description}</p>
-                                </div>
-                            </a>
-                        ))}
-                    </div>
-                    <div className="bg-gray-50 p-5 sm:p-8">
-                        <a href="#" className="-m-3 flow-root rounded-md p-3 hover:bg-gray-100">
-                            <div className="flex items-center">
-                                <div className="text-base font-medium text-gray-900">Enterprise</div>
-                                <span className="ml-3 inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-xs font-medium leading-5 text-indigo-800">
-                                    New
-                                </span>
-                            </div>
-                            <p className="mt-1 text-sm text-gray-500">
-                                Empower your entire team with even more advanced tools.
-                            </p>
-                        </a>
-                    </div>
+            <Popover.Panel className="fixed left-0 ml z-10 mt-3 transform ">
+            <div className='ml-[9.55rem]'>
+            <Icon variant='triangle' height='h-6 w-6 fill-neutral-100' strokeClass='stroke-neutral-100'/>
+            </div>
+                <div className=" p-2 bg-neutral-100 rounded-lg">
+                    
+                    <V3Dropdown
+                        primaryCard={{
+                            iconVariant: 'home03',
+                            mainDescription: 'description1',
+                            primaryBtnLabel: 'label 1',
+                            strokeClass: 'stroke-neutral-800'
+                        }}
+                        secondaryCardArr={[
+                            {
+                                childArray: [
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Analytics'
+                                    },
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Engagement'
+                                    },
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Security'
+                                    }
+                                ],
+                                label: 'Label1'
+                            },
+                            {
+                                childArray: [
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Analytics'
+                                    },
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Engagement'
+                                    },
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Security'
+                                    }
+                                ],
+                                label: 'Label1'
+                            }
+                        ]}
+                    />
+                   
                 </div>
             </Popover.Panel>
         </Transition>
@@ -97,7 +128,7 @@ export default function V3Header(props) {
                                 <Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
                                 {/* <Icon height='h-5' variant={'home03'} strokeColor={'#1EA7FD'} /> */}
                             </Popover.Button>
-                            <div className='block'>
+                            <div className=''>
                                 {dropdown(item['titleDropdown'])}
                             </div>
 
@@ -175,17 +206,17 @@ export default function V3Header(props) {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
             >
-                <Popover.Panel focus className="absolute bg-neutral-0 inset-x-0 top-0 origin-top-right transform transition md:hidden">
-                    <div className=" rounded-lg bg-white shadow-lg">
-                        <div className="px-5  pt-5 pb-6">
+                <Popover.Panel focus className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right transform transition md:hidden">
+                    <div className=" rounded-lg bg-white h-[calc(100%-112px)]  shadow-lg">
+                        <div className="">
                             <div className="flex items-center justify-end">
-                                <div className="-mr-2">
+                                <div className="">
                                     <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 w-full">
                                         <Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
                                     </Popover.Button>
                                 </div>
                             </div>
-                            <div className="mt-6 ">
+                            <div className="mt-6 abcdefhgk flex flex-col gap-6">
                                 <div className='flex flex-col items-center'>
                                     <img
                                         className="inline-block w-full px-4 "
@@ -194,62 +225,43 @@ export default function V3Header(props) {
                                     />
                                 </div>
 
-                                <nav className="grid gap-8 p-6">
+                                <nav className="grid divide-y divide-neutral-200 border border-neutral-200 rounded-3xl  ">
                                     {props.HEADER_LIST.map((item) => (
                                         <a
                                             key={item['title']}
-                                            
-                                            className="-m-3 bg-blue-100 flex items-center rounded-2xl px-6 py-4"
+
+                                            className="flex justify-between items-center p-4"
                                         >
 
-                                            <div className="flex h-10 w-10  flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
+                                            <div className="flex items-center justify-center gap-2 ">
 
                                                 <Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
 
+
+                                                <Typography textStyle='body3c-medium' className='text-neutral-900'>
+                                                    {`${item['title']}`}
+                                                </Typography>
                                             </div>
-                                         <Typography textStyle='body3c-medium' className=''>
-                                            {`${item['title']}`}
-                                         </Typography>
+
+                                            <Icon height='h-5 w-5 stroke-[1.5px]' variant={'chevronright'} strokeClass='stroke-neutral-500' />
                                         </a>
                                     ))}
                                 </nav>
                             </div>
                         </div>
-                        <div className="py-6 px-5">
-                            {/* <div className="grid grid-cols-2 gap-4">
-                                <a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
-                                    Pricing
-                                </a>
-
-                                <a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
-                                    Docs
-                                </a>
-
-                                <a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
-                                    Enterprise
-                                </a>
-                                {resources.map((item) => (
-                                    <a
-                                        key={item.name}
-                                        href={item.href}
-                                        className="text-base font-medium text-gray-900 hover:text-gray-700"
-                                    >
-                                        {item.name}
-                                    </a>
-                                ))}
-                            </div> */}
-                            <div className="mt-6">
+                        <div className="py-6 px-5 ">
+                            <div className="mt-6 ">
                                 <div className='flex flex-row justify-around'>
-                                    <div className='w-full'>
+                                    <div className='w-full '>
                                         <HDSButton
                                             label="Log In"
-                                            type='primary'
+                                            type='tonal'
                                             leftIconVariant='none'
                                             rightIconVariant='none'
                                             state='default'
                                             size='sm'
                                             rightAnimatedArrow='true'
-                                            rightAnimatedArrowColor='#ffffff'
+                                            rightAnimatedArrowColor='#3970FD'
                                             animatedHoverStroke='group-hover:stroke-neutral-0'
 
                                         />
@@ -351,6 +363,6 @@ V3Header.defaultProps = {
                 },
             ]
         },
-    
+
     ]
 }

package/src/HDS/components/Hero/h2.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { useState, useEffect } from "react";
 import { Typography } from "../../foundation/Typography";
 import { HDSButton } from "../Buttons";
@@ -80,11 +81,11 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
       >
         {
           logo ? (
-            <div className={"pb-4 db:text-left text-center tb-l:text-left" + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>
+            <div className={"pb-4 db:text-left tb:text-center tb-l:text-left" + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>
               <img className="w-[290px] inline-block" src={logo} alt="Brand" />
             </div>
           ) : (
-            <Typography textStyle={fontSize ? fontSize : "h1"} as="h1" className={"pb-2 text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
+            <Typography textStyle='h2' as="h2" className={"pb-2 tb:text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
           )
         }
       </div>
@@ -93,20 +94,35 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const heroButton = () => (
     heroData.buttons && (
-      <div className={" gap-2 flex items-center justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
-        {
-          heroData.buttons.map((btn, index) => (
+      <div className={" gap-6 flex items-center tb:justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
+        
+        
+            {heroData.buttons[0] &&
             <HDSButton
+            type="secondary"
+            btnTextColorClass={HDSColor('text-neutral-0')}
               leftIconVariant='none'
               rightIconVariant='none'
-              label={btn.cta_text}
+              label={heroData.buttons[0].cta_text}
               state='default'
               size='lg'
               rightAnimatedArrow='true'
               rightAnimatedArrowColor='#ffffff'
             />
-          ))
-        }
+      }
+            {heroData.buttons[1] && <HDSButton
+            type="primaryLink"
+            btnTextColorClass={HDSColor('text-neutral-0')}
+              leftIconVariant='none'
+              rightIconVariant='none'
+              label={heroData.buttons[1].cta_text}
+              state='default'
+              size='lg'
+              rightAnimatedArrow='true'
+              rightAnimatedArrowColor='#ffffff'
+            />}
+      
+        
       </div>
     )
   )
@@ -137,20 +153,20 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const imageCard = (heroData) => (
     heroData.imageUrl && (
-      <div className="">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-[560px] h-[580px] rounded-b-3xl' />
+      <div className="w-1/2 tb-l:w-full tb:flex tb:flex-col tb:justify-center">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-full ' />
       </div>
     )
   )
   
   const videoGradientBg = HDSColor(heroData.video_gradient_bg);
   return (
-    <div className="db:pt-32 mb-10 db:mb-5 tb:mb-16 tb-l:mb-0">
-      <div className="tb:px-4">
-        <div className={"max-w-7xl mx-auto rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
+    <div className="">
+      <div className="">
+        <div className={"max-w-7xl mx-auto px-20 py-20 rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
           <div className="w-full">
-            <div className={"db:flex db:w-full tb-l:flex block" + ((heroData.video_url) ? " tb:block" : " tb:flex")}>
-              <div className={("w-full")}
+            <div className={"tb-l:flex tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
+              <div className='w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
               >
                 {
                   heroData.tag_line && (
@@ -166,13 +182,13 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
                 {title(heroData)}
                 {
                   heroData.sub_title && (
-                    <Typography textStyle="sub1" className={"text-center db:text-left tb-l:text-left " + ((heroData.sub_title_color) ? heroData.sub_title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.sub_title}</Typography>
+                    <Typography textStyle="sub1" className={"tb-l:text-center db:text-left flex" + ((heroData.sub_title_color) ? heroData.sub_title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.sub_title}</Typography>
                   )
                 }
 
                 {
                   heroData.description && (
-                    <Typography textStyle="sub2" className="text-center tb:text-left db:text-left tb-l:text-left text-blue-700 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                    <Typography textStyle="sub1" className="tb-l:text-center db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
                   )
                 }
                 {heroButton(heroData)}

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

@@ -25,6 +25,7 @@ function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
 
   
   useEffect(() => {
+    console.log(snippet)
     if (preRef.current ) {
       Prism.highlightAll();
     }

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

@@ -1,2 +1,3 @@
 export {default as TableA} from './tableA';
-export {default as TableB} from './tableB';
+export {default as TableB} from './tableB';
+export {default as TableC} from './tableC';

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

@@ -15,14 +15,7 @@ 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 className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
-            <button
-              type="button"
-              className="block rounded-md bg-indigo-600 py-2 px-3 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              Add user
-            </button>
-            </div> */}
+                
             </div>
 
             <div>
@@ -42,14 +35,14 @@ export default function TableA(props) {
                             </tr>
                         </thead>
                         <tbody className="divide-y divide-gray-200 bg-white">
-                            {tableValue.map((person) => (
-                                <tr key={uuidv4()}>
-                                    {Object.keys(person).map((key) => (
+                            {tableValue.map((value,index) => (
+                                <tr key={index}>
+                                    {Object.keys(value).map((key, index2) => (
                                         <td
-                                             key={uuidv4()}
+                                             key={index2+index}
                                             className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
                                         >
-                                            {``}{person[key]}
+                                            {``}{value[key]}
 
                                         </td>
                                     ))}

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Typography } from '../../foundation/Typography';
+export default function TableA(props) {
+    const {
+        head,
+        description,
+        tableValue,
+        children
+
+    } = props;
+    console.log(tableValue.length);
+    const tableLength = tableValue.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 bg-neutral-50 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) => (
+                                    <th
+                                        key={key}
+                                        scope="col"
+                                        className="text-left sm:table-cell"
+                                    >
+                                        <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'>
+                                    {Object.keys(value).map((key, index2) => (
+                                        <td
+                                             key={index2+index}
+                                            className={
+                                                'p-6 bg-neutral-0 ' + ((index == `${tableValue.length-1}`) ? '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>
+
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                        </div>
+                        </table>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/index.css

@@ -386,7 +386,7 @@
 
 }
 .bg-transparent{
-    background-color: transparent;
+    background-color: transparent !important;
 }
 
 .language-javascript {