hds-web 1.6.8 → 1.6.9

package/src/HDS/components/Carousels/carouselCard.js

@@ -1,37 +1,13 @@
 import React from "react";
+import { useRef,useState } from "react";
 import { Icon } from "../common-components/Icon";
-import { HasConAvatar } from "../Avatars";
-export default function Carouseltest(props) {
+import { HDSButton } from "../Buttons";
+export default function CarouselCard(props) {
+    const carouselRef = useRef(null); // Create a ref using useRef
     const [currentCard, setCurrentCard] = React.useState(0);
     const [touchStart, setTouchStart] = React.useState(0);
     const [touchEnd, setTouchEnd] = React.useState(0);
-    const [visibleCardsContainerWidth, setvisibleCardsContainerWidth] = React.useState(0);
-    const [cardWidth, setcardWidth] = React.useState(0);
-    const [totalContainerWidth, setTotalContainerWidth] = React.useState(0);
-    const [totalClick, setTotalClick] = React.useState(1);
-    const [totalCards, setTotalCards] = React.useState(0);
-    React.useEffect(() => {
-        const visibleCardsContainerWidth = refs[0]?.current?.parentNode?.offsetWidth;
-        setvisibleCardsContainerWidth(visibleCardsContainerWidth);
-        const cardWidth = refs[0]?.current?.getBoundingClientRect().width; 
-        setcardWidth(cardWidth);
-
-        const totalCardsWidth = Object.values(refs).reduce((acc, ref) => {
-            const rect = ref.current.getBoundingClientRect();
-            return acc + rect.width + parseFloat(getComputedStyle(ref.current).marginLeft) + parseFloat(getComputedStyle(ref.current).marginRight);
-          }, 0);
-          setTotalContainerWidth(totalCardsWidth);
-          const noOfcardsinaview = (visibleCardsContainerWidth/cardWidth);
-          
-          const cardLength = props.length;
-          setTotalCards(cardLength);
-         
-          setTotalClick(2*(cardLength/noOfcardsinaview));
-          
-
-
-      }, []);
-      
+    const [showAllCards, setShowAllCards] = useState(false);
 
     const handleTouchStart = e => {
         setTouchStart(e.targetTouches[0].clientX);
@@ -51,70 +27,69 @@ export default function Carouseltest(props) {
         }
     };
 
-
     const refs = props.cards.reduce((acc, val, i) => {
         acc[i] = React.createRef();
         return acc;
     }, {});
 
-    const scrollToCard = i => {
-        setCurrentCard(i);
 
-        refs[i].current.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest',
-            inline: 'start',
-        });
-    };
+
+    const totalCards = props.cards.length;
 
     const nextCard = () => {
-        
-        if (currentCard >= totalCards-1 || currentCard > totalClick+1) {
-            scrollToCard(0);
-        } else {
-            scrollToCard(currentCard + 1);
+        let scrollByAmount = 1;
+        if (window.innerWidth > 800) {
+            scrollByAmount = 2;
+        }
+        if (window.innerWidth > 1140) {
+            scrollByAmount = 3;
+        }
+
+        if (currentCard < totalCards - scrollByAmount) {
+            setCurrentCard(currentCard + scrollByAmount);
+            carouselRef.current.scrollTo({
+                left: carouselRef.current.scrollLeft + carouselRef.current.children[0].offsetWidth * scrollByAmount,
+                behavior: "smooth",
+            });
+        }
+        else {
+            setCurrentCard(0);
+            carouselRef.current.scrollTo({
+                left: 0,
+                behavior: "smooth",
+            });
         }
     };
 
     const previousCard = () => {
-        if (currentCard === 0) {
-            scrollToCard(totalCards - 1);
-        } else {
-            scrollToCard(currentCard - 1);
+        let scrollByAmount = 1;
+        if (window.innerWidth > 800) {
+            scrollByAmount = 2;
         }
-    };
-    const slider = () => {
-
-        let x = visibleCardsContainerWidth;
-        let noOfcardsinaview = visibleCardsContainerWidth/cardWidth;
-  
-        let y = 1;
-     
-        // if((noOfcardsinaview*(currentCard+1))<=totalCards){
-        // let y = (totalContainerWidth/(noOfcardsinaview*visibleCardsContainerWidth))*(noOfcardsinaview*(currentCard+1));
-          
-        // }
-       
-        let slider1 = (384/(totalCards*cardWidth)) * (328)* (currentCard+noOfcardsinaview);
-        if(slider1>384){
-            slider1 = 384;
+        if (window.innerWidth > 1140) {
+            scrollByAmount = 3;
+        }
+
+        if (currentCard > 0) {
+            setCurrentCard(currentCard - scrollByAmount);
+            carouselRef.current.scrollTo({
+                left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
+                behavior: "smooth",
+            });
+        } else {
+            const lastCardIndex = totalCards - 1;
+            const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
+            setCurrentCard(lastCardIndex);
+            carouselRef.current.scrollTo({
+                left: scrollLeft,
+                behavior: "smooth",
+            });
         }
-        let roundOff = Math.floor(totalClick);
-        let slider2 = 384/(roundOff+Math.floor(noOfcardsinaview)+1);
-        let sliderWidth = 1;
-        sliderWidth = (slider2 * (currentCard+1))+ 'px';
-        
-        
-        return (
-            <div className=' '>
-                <div className='bg-pink-500 w-96 rounded-md content-center h-1'>
-                    <div className={`bg-blue-600 transition-all ease-in duration-300 rounded-md h-1  `} style={{ width: `${sliderWidth}` }} />
-                </div>
-            </div>
-        )
     };
 
-    const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
+    const maxVisibleCards = 6;
+
+    const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-purple-200 hover:bg-neutral-0 flex items-center justify-center';
 
     const sliderControl = isLeft => (
         <button
@@ -126,11 +101,11 @@ export default function Carouseltest(props) {
             <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
                 {isLeft ?
 
-                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#1F2A37' />
+                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
 
                     :
 
-                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#1F2A37' />
+                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
 
                 }
             </span>
@@ -139,19 +114,52 @@ export default function Carouseltest(props) {
     return (
         <div className="">
             <div className="block tb:hidden">
-                {props.cards.map((item, i) => (
-                    <div className="my-5" key={i} ref={refs[i]}>
-                        <div className="rounded-3xl ">
-                            {React.createElement(props.component, item)}
+                {showAllCards
+                    ? props.cards.map((item, i) => (
+                        <div className="my-5" key={i} ref={refs[i]}>
+                            <div className="rounded-3xl overflow-hidden">
+                                {React.createElement(props.component, item)}
+                            </div>
                         </div>
-
+                    ))
+                    : props.cards.slice(0, maxVisibleCards).map((item, i) => (
+                        <div className="my-5" key={i} ref={refs[i]}>
+                            <div className="rounded-3xl overflow-hidden">
+                                {React.createElement(props.component, item)}
+                            </div>
+                        </div>
+                    ))}
+                {props.cards.length > maxVisibleCards && (
+                    <div className="flex">
+                     <HDSButton
+                    label={showAllCards ? "View less" : "View more"}
+                    type='secondary'
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    state='default'
+                    size='sm'
+                    rightAnimatedArrow={true}
+                    rightAnimatedArrowColor='#1E56E3'
+                    animatedHoverStroke='group-hover:stroke-neutral-0'
+                    className='flex'
+                    btnTextColorClass='text-blue-600'
+                    btnBgColorClass=''
+                    onClick={() => setShowAllCards(!showAllCards)}
+                />  
+                    {/* <button
+                        className="text-blue-500 mt-1 cursor-pointer"
+                        onClick={() => setShowAllCards(!showAllCards)}
+                    >
+                        {showAllCards ? "View less" : "View more"}
+                    </button> */}
                     </div>
-                ))}
+                )}
             </div>
 
-            <div className="invisible flex flex-col-reverse  tb:visible">
-                <div className="flex items-center justify-around mt-20 ">
-                    {slider()}
+
+            <div className="hidden tb:flex tb:flex-col">
+                <div className="flex pb-12 items-center justify-end ">
+                    {/* {slider()} */}
                     <div className="flex">
                         {sliderControl(true)}
                         {sliderControl()}
@@ -173,10 +181,13 @@ export default function Carouseltest(props) {
                     }}
                 >
                     <div className="">
-                        <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}>
+                        <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
+                            ref={carouselRef}
+                        >
 
                             {props.cards.map((item, i) => (
-                                <div className="snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
+                                // <div className="max-[1140px]:snap-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
+                                <div className=" db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={i} ref={refs[i]}>
                                     <div className="w-full select-none rounded-3xl object-contain">
                                         {React.createElement(props.component, item)}
                                     </div>

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

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, {useState} 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 { V3Dropdown } from '../Cards/Dropdown'
+import { HDSColor } from '../../foundation/ColorPalette';
 
 const solutions = [
     {
@@ -33,6 +34,7 @@ function classNames(...classes) {
 
 export default function V3Header(props) {
 
+    const [isShowing, setIsShowing] = useState(false)
 
     const dropdown = (solutions) => (
         <Transition
@@ -45,11 +47,9 @@ export default function V3Header(props) {
             leaveTo="opacity-0 translate-y-1"
         >
             <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',
@@ -106,7 +106,7 @@ export default function V3Header(props) {
                             }
                         ]}
                     />
-                   
+
                 </div>
             </Popover.Panel>
         </Transition>
@@ -116,17 +116,28 @@ export default function V3Header(props) {
     (
         <>
             {HEADER_LIST.map((item, index) => (
-                <Popover className="relative">
-                    {({ open }) => (
+                <Popover className="relative" key={index}>
+                    {({ open  }) => (
                         <>
                             <Popover.Button
                                 className={classNames(
-                                    open ? 'text-pink-800' : 'text-gray-500',
+                                    open ? '' : 'text-gray-500',
                                     'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
                                 )}
+                                onMouseEnter={() => setIsShowing(true)}
+                                onMouseLeave={() => setIsShowing(false)}
+                                
                             >
+                                <div className='flex flex-col items-center'>
                                 <Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
-                                {/* <Icon height='h-5' variant={'home03'} strokeColor={'#1EA7FD'} /> */}
+                                {open && (
+                                <div className='absolute z-20 top-8'>
+                                    {/* <Icon variant='triangle' height='h-4 w-4' strokeClass='stroke-neutral-1000' /> */}
+                                
+                                </div>
+                                
+                                )}
+                                </div>
                             </Popover.Button>
                             <div className=''>
                                 {dropdown(item['titleDropdown'])}
@@ -142,59 +153,71 @@ export default function V3Header(props) {
     )
 
     return (
-        <Popover className="relative bg-white">
-            <div className="flex items-center bg-neutral-50 justify-between p-6 md:justify-start md:space-x-6">
-                <div>
-                    <a href="#" className="flex items-center">
-                        <Icon variant={'hasuraPrimary'} strokeColor={''} />
+        <Popover className="relative">
+            <div className={`flex items-center ${HDSColor(props.headerBg)} justify-between p-6 tb-l:justify-between tb-l:space-x-6`}>
+                <div className='flex items-center'>
+                    <a href={props.headerUrl} className="flex items-center">
+                        <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
                     </a>
-                </div>
-                <div className="-my-2 -mr-2 md:hidden">
-                    <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 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
-                        <span className="sr-only">Open menu</span>
-                        <div className=' gap-6 flex'>
-                            <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} />
-                            <Icon height={'h-5 w-5'} variant={'menu05'} strokeColor={'#3970FD'} />
-                        </div>
-                    </Popover.Button>
-                </div>
-                <div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
-                    <Popover.Group as="nav" className="flex space-x-6">
+                    <Popover.Group as="nav" className="hidden tb-l:pl-8 tb-l:flex tb-l:space-x-6">
                         {headerListfn(props.HEADER_LIST)}
                     </Popover.Group>
+                </div>
+                <div className='flex tb-l:justify-between'>
+                    <div className=" tb-l:flex tb-l:flex-1 tb-l:items-center tb-l:justify-between">
 
+                        <div className="flex items-center gap-4 tb-l:ml-12">
 
-                    <div className="flex items-center gap-6 md:ml-12">
-
-                        <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
-                        <HDSButton
-                            label="Log In"
-                            type='tonal'
-                            leftIconVariant='none'
-                            rightIconVariant='none'
-                            state='default'
-                            size='sm'
-                            rightAnimatedArrow='true'
-                            rightAnimatedArrowColor='#3970FD'
-                            animatedHoverStroke='group-hover:stroke-neutral-0'
-                        />
-                        <HDSButton
-                            label="Get Started"
-                            type='primary'
-                            leftIconVariant='none'
-                            rightIconVariant='none'
-                            state='default'
-                            size='sm'
-                            rightAnimatedArrow='true'
-                            rightAnimatedArrowColor='#ffffff'
-                            animatedHoverStroke='group-hover:stroke-neutral-0'
-                        />
+                            {/* <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
+                            <div>
 
-                    </div>
+                            </div>
+                            <a href='' className='hidden tb:flex'>
+                                <Typography textStyle='body3c-medium' className='text-neutral-800'>
+                                    Contact Sales
+                                </Typography>
+                            </a>
+                            <HDSButton
+                                label="Log In"
+                                type='tonal'
+                                leftIconVariant='none'
+                                rightIconVariant='none'
+                                state='default'
+                                size='sm'
+                                rightAnimatedArrow='true'
+                                rightAnimatedArrowColor='#3970FD'
+                                animatedHoverStroke='group-hover:stroke-neutral-0'
+                                className='hidden tb-l:flex'
+                            />
+                            <HDSButton
+                                label="Get Started"
+                                type='primary'
+                                leftIconVariant='none'
+                                rightIconVariant='none'
+                                state='default'
+                                size='sm'
+                                rightAnimatedArrow='true'
+                                rightAnimatedArrowColor='#ffffff'
+                                animatedHoverStroke='group-hover:stroke-neutral-0'
+                                className='hidden tb:flex'
+                            />
+
+                        </div>
 
 
 
+                    </div>
+                    <div className="tb-l:hidden flex items-center">
+                        <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                            <span className="sr-only">Open menu</span>
+                            <div className=' gap-6 flex'>
+                                {/* <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
+                                <Icon height={'h-5 w-5'} variant={'menu05'} strokeColor={'#3970FD'} />
+                            </div>
+                        </Popover.Button>
+                    </div>
                 </div>
+
             </div>
 
             <Transition
@@ -206,12 +229,12 @@ export default function V3Header(props) {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
             >
-                <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="">
+                <Popover.Panel focus className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right transform transition tb-l:hidden">
+                    <div className=" rounded-lg bg-neutral-0 h-[calc(100%-112px)]  shadow-lg">
+                        <div className="bg-neutral-0">
                             <div className="flex items-center justify-end">
                                 <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">
+                                    <Popover.Button className="inline-flex items-center justify-center pt-4 pr-4 w-full focus:ring-0">
                                         <Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
                                     </Popover.Button>
                                 </div>
@@ -252,33 +275,35 @@ export default function V3Header(props) {
                         <div className="py-6 px-5 ">
                             <div className="mt-6 ">
                                 <div className='flex flex-row justify-around'>
-                                    <div className='w-full '>
-                                        <HDSButton
-                                            label="Log In"
-                                            type='tonal'
-                                            leftIconVariant='none'
-                                            rightIconVariant='none'
-                                            state='default'
-                                            size='sm'
-                                            rightAnimatedArrow='true'
-                                            rightAnimatedArrowColor='#3970FD'
-                                            animatedHoverStroke='group-hover:stroke-neutral-0'
-
-                                        />
-                                    </div>
-                                    <div className='w-full'>
-                                        <HDSButton
-                                            label="Sign up"
-                                            type='primary'
-                                            leftIconVariant='none'
-                                            rightIconVariant='none'
-                                            state='default'
-                                            size='sm'
-                                            rightAnimatedArrow='true'
-                                            rightAnimatedArrowColor='#ffffff'
-                                            animatedHoverStroke='group-hover:stroke-neutral-0'
-
-                                        />
+                                    <div className='w-full flex gap-2'>
+                                        <div className='w-1/2'>
+                                            <HDSButton
+                                                label="Log In"
+                                                type='tonal'
+                                                leftIconVariant='none'
+                                                rightIconVariant='none'
+                                                state='default'
+                                                size='sm'
+                                                rightAnimatedArrow='true'
+                                                rightAnimatedArrowColor='#3970FD'
+                                                animatedHoverStroke='group-hover:stroke-neutral-0'
+
+
+                                            />
+                                        </div>
+                                        <div className='w-1/2'>
+                                            <HDSButton
+                                                label="Sign up"
+                                                type='primary'
+                                                leftIconVariant='none'
+                                                rightIconVariant='none'
+                                                state='default'
+                                                size='sm'
+                                                rightAnimatedArrow='true'
+                                                rightAnimatedArrowColor='#ffffff'
+                                                animatedHoverStroke='group-hover:stroke-neutral-0'
+                                            />
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -364,5 +389,6 @@ V3Header.defaultProps = {
             ]
         },
 
-    ]
+    ],
+    headerUrl: 'https://hasura.io/'
 }