hds-web 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Avatars/hasConAv.js

@@ -1,23 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '../../foundation/Typography'
-import { Icon } from '../common-components/Icon';
+import {Typography} from '../../foundation/Typography'
 
 export default function HasConAvatar({ name, designation, size, imageUrl }) {
     const hasImageUrl = imageUrl && imageUrl.length > 0;
     return (
-        <div className={`${size} group rounded-3xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow hover:shadow-xl tb:min-w-[18rem]`}>
+        <div className={`${size} tb:max-w-[289px] group rounded-3xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow hover:shadow-xl tb:min-w-[18rem]`}>
 
-            <div className="tb:flex-col tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 bg-neutral-0 text-center">
+            <div className="px-5 py-[30px] tb:p-0 text-left tb:flex-col min-h-[96px] tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 tb-l:text-center">
                 <Typography textStyle='body1c-bold' className='text-blue-400'>{name}</Typography>
                 <Typography textStyle='body3c-medium' className='text-blue-800'>{designation}</Typography>
             </div>
-            <div className='relative '>
+            <div className='relative self-center'>
                 <img
-                    className={`inline-block w-[9rem] tb:min-w-[18rem] tb:rounded border-neutral-0 rounded-r-2xl `}
+                    className={`inline-block min-w-[100px] w-[9rem] tb:min-w-[18rem] tb:rounded border-neutral-0 tb-l:rounded-r-2xl `}
                     src={imageUrl}
                 />
-                 <div className="absolute rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
+                 <div className="absolute tb-l:rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
             </div>
 
 

package/src/HDS/components/BadgesCaption/badges.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
 import {Typography} from '../../foundation/Typography'
+import { HDSColor } from '../../foundation/ColorPalette';
 const sizeClasses = {
   sm: 'py-0.5 px-2 hds-d-body3c',
   default: 'py-1 px-3',
@@ -27,8 +28,10 @@ const colorVariants = {
 export default function Badge({
   leftIconVariant,
   leftIconColor,
+  leftIconColorClass,
   rightIconVariant,
   rightIconColor,
+  rightIconColorClass,
   size,
   children,
   color,
@@ -44,7 +47,7 @@ export default function Badge({
 
   return (
     <button
-      className={`${sizeClasses[size]} ${
+      className={` cursor-default ${sizeClasses[size]} ${
         colorVariants[color]
       } inline-flex items-center rounded-full`}
       onClick={handleClick}
@@ -52,14 +55,14 @@ export default function Badge({
     >
        {leftIconVariant && leftIconVariant !== 'none' && (
           <div className='mr-1'>
-            <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
+            <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} strokeClass={HDSColor(leftIconColorClass)} />
           </div>
         )}
         <Typography textStyle='body3c-medium'>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>
-            <Icon height={'h-4'} variant={rightIconVariant} strokeColor={rightIconColor} />
+            <Icon height={'h-4'} variant={rightIconVariant} strokeColor={rightIconColor} rightIconColorClass={HDSColor(rightIconColorClass)} />
           </div>
         )}
     </button>

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

@@ -1,2 +1,3 @@
 export {default as TalkCard} from './talkCard';
+export {default as TalkCard2} from './talkcard2';
 export {default as IconCard} from './iconCard';

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

@@ -29,11 +29,9 @@ export default function TalkCard(props) {
 
                     {props.para &&
                         <Typography
-                            className='line-clamp-3 text-neutral-700 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0'
-                            textStyle='body1'>
-                            <ReactMarkdown>
+                            className='line-clamp-3 text-neutral-700'
+                            textStyle='body1c'>
                                 {props.para}
-                            </ReactMarkdown>
                         </Typography>}
 
                 </div>

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

@@ -0,0 +1,112 @@
+import React from "react";
+import { Badges } from '../../BadgesCaption';
+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 TalkCard2(props) {
+    let CardClass = ''
+    if (props.speakerSet === undefined) {
+        CardClass = 'tb-l:justify-center';
+    }
+    else CardClass = 'tb-l:justify-between';
+
+    return (
+
+        <div className="grid">
+            <div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
+                <div className={"px-8 py-6 tb-l:border-r tb-l:border-r-neutral-200"}>
+                    <div className="flex 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={value.leftIconColorClass}
+                                        children={value.label}
+
+                                    />
+                                </div>
+                            ))
+                        }
+
+                    </div>
+                    <div className="tb-l:w-[520px]">
+
+                        <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>
+                        }
+                        {props.readUrl && (
+                            <a href={props.readUrl}>
+                                <HDSButton
+                                    label='Read more'
+                                    type='secondaryLink'
+                                    leftIconVariant='none'
+                                    rightIconVariant='none'
+                                    state='default'
+                                    size='md'
+                                    rightAnimatedArrow={true}
+                                    rightAnimatedArrowColor='#3970FD'
+                                    className='mt-4'
+                                    btnTextColorClass='text-blue-500'
+                                    animatedHoverStroke='stroke-blue-500'
+                                />
+                            </a>
+                        )}
+
+
+                    </div>
+
+                </div>
+
+                <div className={`${CardClass} divide-y divide-neutral-150 flex tb-l:w-full flex-col pt-0`} >
+                    {
+                        props.speakerSet && (
+                            <div className="pl-8 flex gap-6 tb-l:pt-12 tb:mt-0 tb-l:pb-12 pb-6 flex-col ">
+                                {props.speakerSet.map((value, i) => (
+                                    <div key={i} className="block">
+
+                                        <ProfileAvatar
+                                            name={value.name}
+                                            size='md'
+                                            designation={value.designation}
+                                            imageUrl={value.imageUrl}
+                                        />
+                                    </div>
+
+                                ))}
+                            </div>
+                        )
+                    }
+                   {props.eventTime && <div className=" w-full pl-8 p-6 flex flex-row justify-between items-center">
+                        <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
+                        <a href={props.addCalendarUrl}>
+                            <HDSButton
+                                leftIconVariant='calendarplus02'
+                                leftIconColor="#1E56E3"
+                                rightIconVariant='none'
+                                state='default'
+                                size='sm'
+                                type="iconOnly"
+                                label=''
+                            />
+                        </a>
+                    </div>}
+                </div>
+            </div>
+        </div>
+
+    )
+
+}

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

@@ -1,37 +1,9 @@
 import React from "react";
 import { Icon } from "../common-components/Icon";
-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 [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);
@@ -51,25 +23,28 @@ export default function Carouseltest(props) {
         }
     };
 
-
     const refs = props.cards.reduce((acc, val, i) => {
         acc[i] = React.createRef();
         return acc;
     }, {});
 
-    const scrollToCard = i => {
+    const scrollToCard = (i) => {
         setCurrentCard(i);
+    
+        if (refs[i] && refs[i].current) {
+          refs[i].current.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+          });
+        }
+      };
 
-        refs[i].current.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest',
-            inline: 'start',
-        });
-    };
+    const totalCards = props.cards.length;
 
     const nextCard = () => {
-        
-        if (currentCard >= totalCards-1 || currentCard > totalClick+1) {
+        console.log(currentCard, totalCards)
+        if (currentCard >= totalCards-3) {
             scrollToCard(0);
         } else {
             scrollToCard(currentCard + 1);
@@ -83,38 +58,8 @@ export default function Carouseltest(props) {
             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 arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
+ 
+    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 +71,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>
@@ -149,9 +94,9 @@ export default function Carouseltest(props) {
                 ))}
             </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()}