hds-web 1.6.6 → 1.6.8

package/src/HDS/components/Cards/Misc/talkCard.js

@@ -4,19 +4,18 @@ import { Typography } from '../../../foundation/Typography'
 import { ProfileAvatar } from '../../Avatars'
 import { Time } from "../../../helpers/Time";
 import { HDSButton } from '../../Buttons'
-import ReactMarkdown from "react-markdown";
 
 export default function TalkCard(props) {
     let CardClass = ''
-    if (props.speakerSet === undefined) {
+    if (props.speakerSet === undefined && props.eventTime === undefined) {
         CardClass = 'flex';
     }
-    else CardClass = 'flex tb-l:flex-row flex-col';
+    else CardClass = 'grid shadow';
     return (
 
-        <div className="grid w-full">
-            <div className={`${CardClass} w-full max-w-[882px]`}>
-                <div className={"px-8 py-6" + ((props.speakerSet) ? " border-b tb-l:w-[62%] border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" : "")}>
+        <div className=" ">
+            <div className={`${CardClass} rounded-3xl  bg-neutral-0 grid-cols-1 tb:grid-cols-2  border border-neutral-200 w-full max-w-[882px]`}>
+                <div className="px-8 py-6 border-b rounded-3xl border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
                     <Badges
                         size={props.badges.size}
                         color={props.badges.color}
@@ -25,19 +24,19 @@ export default function TalkCard(props) {
                         children={props.badges.label}
                     />
 
-                    <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
-
-                    {props.para &&
-                        <Typography
-                            className='line-clamp-3 text-neutral-700'
-                            textStyle='body1c'>
-                                {props.para}
-                        </Typography>}
-
+                    <Typography
+                        className='my-2 text-blue-800'
+                        textStyle='h5'>{props.title}
+                    </Typography>
+                    <Typography
+                        className='my-2 text-neutral-700'
+                        textStyle='body1'>{props.para}</Typography>
                 </div>
 
-                {props.speakerSet && (
-                    <div className="flex flex-col tb-l:w-[38%] pt-0 tb:pt-[2.875rem] justify-between">
+                {props.speakerSet &&
+                    props.eventTime &&
+
+                    <div className="flex flex-col pt-0 tb:pt-[2.875rem] justify-between">
                         {
                             props.speakerSet && (
                                 <div className="pl-6 flex gap-6 mt-9 tb:mt-0 mb-9 flex-col ">
@@ -68,10 +67,10 @@ export default function TalkCard(props) {
                                 label=''
                             />
                         </div>
-                    </div>)}
+                    </div>}
             </div>
         </div>
 
     )
 
-}
+}

package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js

@@ -1,99 +1,68 @@
 import React from "react";
 import PropTypes from 'prop-types';
-import { HDSColor } from '../../../foundation/ColorPalette';
+import {HDSColor} from '../../../foundation/ColorPalette';
 import { Badges } from '../../BadgesCaption';
 import { ProfileAvatar } from '../../Avatars'
 import { Typography } from "../../../foundation/Typography";
-import ReactMarkdown from "react-markdown";
 
 
 export default function TalkDetailCard(props) {
   const badgeLeftIconColor = HDSColor(props.badgeLeftIconColor);
   return (
-    <div className="grid grid-cols-1 tb:grid-cols-2 gap-6 db:gap-28 tb:gap-16">
-      <div>
-      <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
-        {props.badges &&
-          props.badges.map((value, index) => (
-            <div key={index} className='flex  whitespace-nowrap'>
-              <Badges
-                size={value.size}
-                color={value.color}
-                leftIconVariant={value.leftIconVariant}
-                leftIconColor={value.leftIconColor}
-                leftIconColorClass={HDSColor(value.leftIconColorClass)}
-                children={value.label}
-
-              />
-              
-            </div>
-          ))
-        }
-        </div>
-
-        {
-          props.tag_line && (<Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>)
-        }
-        {
-          props.title && (<Typography textStyle='h3' as='h3' className='text-blue-900 pb-6 db:pb-0'>{props.title}</Typography>)
-        }
-        {
-          props.social_share && (
-            <div className='flex pb-6 tb:pt-0 tb:pb-0 items-center '>
-              {
-                props.social_share.map((socialShare, i) => (
-                  <a href={socialShare.share_url} className='mx-2 first:ml-0 last:mr-0'>
-                    <img src={socialShare.img_url} alt={socialShare.img_alt} />
-                  </a>
-                ))
-              }
-            </div>
-          )
-        }
-        {
-          props.speaker_card && (
-            <div className="border-t border-neutral-200 border-b pb-6 tb:border-0 tb:pb-0">
-              <Typography textStyle='h6' as='h6' className='uppercase   text-neutral-500 pb-6 pt-6 tb:pt-14'>speakers</Typography>
-            
-                {
-                  props.speaker_card.map((speaker, i) => (
-                    <div key={i} className='pb-4 last:pb-0'>
-                      <ProfileAvatar
-                        name={speaker.name}
-                        size='md'
-                        designation={speaker.designation}
-                        imageUrl={speaker.imageUrl}
-                        avatarVariant="circle"
-                        avatarBgColor={props.avatarBgColor}
-                      />
-                    </div>
-                  ))
-                }
-         
-            </div>
-          )
-        }
-      </div>
-      <div>
-        <Typography textStyle="h4" as="h4" className="text-neutral-800 pb-4">About the Talk</Typography>
-        {
-          props.description && (
-            <Typography className='text-neutral-800 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0' textStyle='body1'>
-              <ReactMarkdown>{props.description}</ReactMarkdown>
-            </Typography>
-          )
-        }
-      </div>
+    <div>
+      <Badges
+        color={props.badgeColor}
+        leftIconColor={badgeLeftIconColor}
+        leftIconVariant='home03'
+        size='default'
+      >
+        {props.talk_type}
+      </Badges>
+      <Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>
+      <Typography textStyle='h3' as='h3' className='text-blue-900 pb-4'>{props.title}</Typography>
+      {
+        props.social_share && (
+          <div className='flex items-center pb-14'>
+            {
+              props.social_share.map((socialShare, i) => (
+                <div className='mx-2 first:ml-0 last:mr-0'>
+                  <img src={socialShare.img_url} alt={socialShare.img_alt} />
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+      {
+        props.speaker_card && (
+          <div>
+            <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
+            {
+              props.speaker_card.map((speaker, i) => (
+                <div className='pb-4 last:pb-0'>
+                  <ProfileAvatar
+                    name={speaker.name}
+                    size='md'
+                    designation={speaker.designation}
+                    imageUrl={speaker.speakerImgUrl}
+                    avatarVariant="circle"
+                  />
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
     </div>
   )
 }
 
 TalkDetailCard.defaultProps = {
-  // badgeColor: 'green',
-  // badgeLeftIconColor: 'stroke-neutral-0',
-  // talk_type: 'Talk',
-  // tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
-  // title: 'Deploying Hasura apps the fast way with the new Vercel integration',
-  // social_share: '',
-  // speaker_card: '',
+  badgeColor: 'green',
+  badgeLeftIconColor: 'stroke-neutral-0',
+  talk_type: 'Talk',
+  tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
+  title: 'Deploying Hasura apps the fast way with the new Vercel integration',
+  social_share: '',
+  speaker_card: '',
 };

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

@@ -1,13 +1,37 @@
 import React from "react";
-import { useRef,useState } from "react";
 import { Icon } from "../common-components/Icon";
-import { HDSButton } from "../Buttons";
-export default function CarouselCard(props) {
-    const carouselRef = useRef(null); // Create a ref using useRef
+import { HasConAvatar } from "../Avatars";
+export default function Carouseltest(props) {
     const [currentCard, setCurrentCard] = React.useState(0);
     const [touchStart, setTouchStart] = React.useState(0);
     const [touchEnd, setTouchEnd] = React.useState(0);
-    const [showAllCards, setShowAllCards] = useState(false);
+    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 handleTouchStart = e => {
         setTouchStart(e.targetTouches[0].clientX);
@@ -27,69 +51,70 @@ export default function CarouselCard(props) {
         }
     };
 
+
     const refs = props.cards.reduce((acc, val, i) => {
         acc[i] = React.createRef();
         return acc;
     }, {});
 
+    const scrollToCard = i => {
+        setCurrentCard(i);
 
-
-    const totalCards = props.cards.length;
+        refs[i].current.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+        });
+    };
 
     const nextCard = () => {
-        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",
-            });
+        
+        if (currentCard >= totalCards-1 || currentCard > totalClick+1) {
+            scrollToCard(0);
+        } else {
+            scrollToCard(currentCard + 1);
         }
     };
 
     const previousCard = () => {
-        let scrollByAmount = 1;
-        if (window.innerWidth > 800) {
-            scrollByAmount = 2;
-        }
-        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",
-            });
+        if (currentCard === 0) {
+            scrollToCard(totalCards - 1);
         } 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",
-            });
+            scrollToCard(currentCard - 1);
         }
     };
+    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;
+        }
+        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 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 arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
 
     const sliderControl = isLeft => (
         <button
@@ -101,11 +126,11 @@ export default function CarouselCard(props) {
             <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
                 {isLeft ?
 
-                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
+                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#1F2A37' />
 
                     :
 
-                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
+                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#1F2A37' />
 
                 }
             </span>
@@ -114,52 +139,19 @@ export default function CarouselCard(props) {
     return (
         <div className="">
             <div className="block tb:hidden">
-                {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>
+                {props.cards.map((item, i) => (
+                    <div className="my-5" key={i} ref={refs[i]}>
+                        <div className="rounded-3xl ">
+                            {React.createElement(props.component, item)}
                         </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="hidden tb:flex tb:flex-col">
-                <div className="flex pb-12 items-center justify-end ">
-                    {/* {slider()} */}
+            <div className="invisible flex flex-col-reverse  tb:visible">
+                <div className="flex items-center justify-around mt-20 ">
+                    {slider()}
                     <div className="flex">
                         {sliderControl(true)}
                         {sliderControl()}
@@ -181,13 +173,10 @@ export default function CarouselCard(props) {
                     }}
                 >
                     <div className="">
-                        <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
-                            ref={carouselRef}
-                        >
+                        <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}>
 
                             {props.cards.map((item, 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="snap-center 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>