hds-web 1.3.6 → 1.3.8

package/package.json

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

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

@@ -7,13 +7,13 @@ export default function HasConAvatar({ name, designation, size, imageUrl }) {
     return (
         <div className={`tb:max-w-[289px] group rounded-3xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow tb:min-w-[18rem]`}>
 
-            <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:text-center">
-                <Typography textStyle='h5' className='text-blue-400'>{name}</Typography>
-                <Typography textStyle='h7' className='text-blue-800 uppercase'>{designation}</Typography>
+            <div className="px-5 py-[30px] tb:p-0 text-left tb:flex-col min-h-[116px] tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 tb:text-center">
+                <div  className=' text-hds-m-body1c-bold tb:text-hds-t-h5 db:text-hds-d-h5 text-blue-400'>{name}</div>
+                <div  className=' text-hds-m-body3c-medium tb:text-hds-t-h7 db:text-hds-d-h7 text-blue-800 uppercase'>{designation}</div>
             </div>
             <div className='relative self-center'>
                 <img
-                    className={`inline-block min-w-[100px] w-[9rem] tb:min-w-[18rem] tb:rounded border-neutral-0 tb-l:rounded-r-2xl `}
+                    className={`inline-block min-w-[144px] w-[9rem] tb:min-w-[18rem] tb:rounded border-neutral-0 tb-l:rounded-r-2xl `}
                     src={imageUrl}
                 />
                  {/* <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> */}

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

@@ -36,8 +36,8 @@ export default function ProfileAvatar({ name, designation, size, imageUrl, avata
                     )}
                 </div>
                 <div className="ml-3">
-                        <Typography textStyle='body2-semi-bold' className={` text-blue-800`}>{name}</Typography>
-                        <Typography textStyle='body3' className={` text-neutral-500`}>{designation}</Typography>
+                        <Typography textStyle='body2c-bold' className={` text-neutral-800`}>{name}</Typography>
+                        <Typography textStyle='body3c' className={` text-neutral-500`}>{designation}</Typography>
                 </div>
             </div>
         </div>

package/src/HDS/components/Buttons/button.js

@@ -163,8 +163,8 @@ export default function Button(props) {
         )}
         
          {leftIconVariant && leftIconVariant !== 'none' && type=='iconOnly' && (
-          <div className={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
-            <Icon variant={leftIconVariant} height='group-active:stroke-neutral-0 stroke-[1.5px] group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0' strokeColor={leftIconColor} />
+          <div className={``}>
+            <Icon variant={leftIconVariant} height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} group-active:stroke-neutral-0 stroke-[1.5px] group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0`} strokeColor={leftIconColor} />
           </div>
         )}
         {label}

package/src/HDS/components/Cards/Link/link.js

@@ -13,7 +13,7 @@ export default function LinkCard(props) {
         <>
             <a
                 href={props.linkUrl}
-                className={`${cardHoverClasses} ${cardBgColorClass} min-w-[11.5rem] rounded-2xl border border-neutral-150 p-6 block`}
+                className={`${cardHoverClasses} ${cardBgColorClass} rounded-2xl border border-neutral-150 p-6 block`}
             >
                 {props.brandImageUrl ?
                     (

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

@@ -5,13 +5,15 @@ import { ProfileAvatar } from '../../Avatars'
 import { Time } from "../../../helpers/Time";
 import { HDSButton } from '../../Buttons'
 import ReactMarkdown from "react-markdown";
+import { HDSColor } from "../../../foundation/ColorPalette";
 
 export default function TalkCard2(props) {
     let CardClass = ''
-    if (props.speakerSet === undefined) {
-        CardClass = 'tb-l:justify-center';
+    if (props.speakerSet) {
+        CardClass = 'tb-l:justify-between';
     }
-    else CardClass = 'tb-l:justify-between';
+    else CardClass = 'tb-l:justify-center';
+
 
     return (
 
@@ -27,7 +29,7 @@ export default function TalkCard2(props) {
                                         color={value.color}
                                         leftIconVariant={value.leftIconVariant}
                                         leftIconColor={value.leftIconColor}
-                                        leftIconColorClass={value.leftIconColorClass}
+                                        leftIconColorClass={HDSColor(value.leftIconColorClass)}
                                         children={value.label}
 
                                     />
@@ -38,41 +40,36 @@ export default function TalkCard2(props) {
                     </div>
                     <div className="tb-l:w-[520px] h-full flex flex-col tb:justify-between">
                         <div>
-
-                        
-                        <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>
+                            {props.para &&
+                                <Typography
+                                    className='line-clamp-3 text-neutral-700'
+                                    textStyle='body1c'>
+                                    {props.para}
+                                </Typography>
+                            }
                         </div>
                         <div className="pb-6 flex">
-                        {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>
-                        )}
+                            {props.readUrl &&
+                                props.para && (
+                                    <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>
 
                 <div className={`${CardClass} divide-y divide-neutral-150 flex tb-l:w-full flex-col pt-0`} >
@@ -94,19 +91,21 @@ export default function TalkCard2(props) {
                             </div>
                         )
                     }
-                   {props.eventTime && <div className=" w-full pl-8 p-6 flex flex-row justify-between items-center">
+                    {props.eventTime && <div className=" w-full pl-8 p-6 flex flex-row justify-between items-center">
                         <Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
-                        <a href={props.addCalendarUrl}>
-                            <HDSButton
-                                leftIconVariant='calendarplus02'
-                                leftIconColor="#1E56E3"
-                                rightIconVariant='none'
-                                state='default'
-                                size='sm'
-                                type="iconOnly"
-                                label=''
-                            />
-                        </a>
+                        {props.addCalendarUrl &&
+                            <a href={props.addCalendarUrl}>
+                                <HDSButton
+                                    leftIconVariant='calendarplus02'
+                                    leftIconColor="#1E56E3"
+                                    rightIconVariant='none'
+                                    state='default'
+                                    size='sm'
+                                    type="iconOnly"
+                                    label=''
+                                />
+                            </a>
+                        }
                     </div>}
                 </div>
             </div>

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

@@ -1,6 +1,6 @@
 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";
@@ -12,16 +12,22 @@ export default function TalkDetailCard(props) {
   return (
     <div className="grid grid-cols-1 tb:grid-cols-2 gap-16 db:gap-28 tb:gap-16">
       <div>
-        {
-          props.badgeColor && (
-            <Badges
-              color={props.badgeColor}
-              size='sm'
-            >
-              {props.talk_type}
-            </Badges>
-          )
+        {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>
+          ))
         }
+
         {
           props.tag_line && (<Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>)
         }
@@ -30,7 +36,7 @@ export default function TalkDetailCard(props) {
         }
         {
           props.social_share && (
-            <div className='flex items-center pb-8 tb:pb-14'>
+            <div className='flex items-center '>
               {
                 props.social_share.map((socialShare, i) => (
                   <a href={socialShare.share_url} className='mx-2 first:ml-0 last:mr-0'>
@@ -44,7 +50,7 @@ export default function TalkDetailCard(props) {
         {
           props.speaker_card && (
             <div>
-              <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
+              <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6 pt-8 tb:pt-14'>speakers</Typography>
               {
                 props.speaker_card.map((speaker, i) => (
                   <div className='pb-4 last:pb-0'>
@@ -52,7 +58,7 @@ export default function TalkDetailCard(props) {
                       name={speaker.name}
                       size='md'
                       designation={speaker.designation}
-                      imageUrl={speaker.speakerImgUrl}
+                      imageUrl={speaker.imageUrl}
                       avatarVariant="circle"
                     />
                   </div>

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

@@ -43,8 +43,11 @@ export default function CarouselCard(props) {
     const totalCards = props.cards.length;
 
     const nextCard = () => {
-        const scrollByAmount = window.innerWidth > 900 ? 3 : 1;
-    
+        
+        let scrollByAmount = '';
+        if(window.innerWidth>1140){scrollByAmount = 3}
+        else if(window.innerWidth<1140 && window.innerWidth>800) {scrollByAmount = 2}
+        else scrollByAmount = 1;
         if (currentCard >= totalCards - scrollByAmount) {
           scrollToCard(0);
         } else {
@@ -52,13 +55,22 @@ export default function CarouselCard(props) {
         }
       };
     
-    const previousCard = () => {
+      const previousCard = () => {
+        let scrollByAmount = "";
+        if (window.innerWidth > 1140) {
+          scrollByAmount = 3;
+        } else if (window.innerWidth > 800) {
+          scrollByAmount = 2;
+        } else {
+          scrollByAmount = 1;
+        }
+    
         if (currentCard === 0) {
-            scrollToCard(totalCards - 1);
+          scrollToCard(totalCards - scrollByAmount);
         } else {
-            scrollToCard(currentCard - 1);
+          scrollToCard(currentCard - scrollByAmount);
         }
-    };
+      };
  
     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';
 
@@ -122,7 +134,7 @@ export default function CarouselCard(props) {
                         <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}>
 
                             {props.cards.map((item, i) => (
-                                <div className="snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
+                                <div className="max-[1140px]:snap-center tb:snap-always mx-5 max-[1140px]: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/Hero/h3.js

@@ -50,9 +50,9 @@ export default function HeroCapability(props) {
     const LinkCardsFn = (heroData) => {
         return (
           heroData.linkCards && (
-            <div className="flex mt-16 gap-6 justify-center">
+            <div className="flex px-8 tb:px-0 tb:justify-center overflow-scroll flex-row mt-16 gap-6 tb:flex-row ">
               {heroData.linkCards.map((card, index) => (
-                <div key={index} className="w-full">
+                <div key={index} className="w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]">
                   <LinkCard
                   titleTextColor= {card.titleTextColor}
                     descTextColor={card.descTextColor}
@@ -115,17 +115,17 @@ export default function HeroCapability(props) {
         <div className={`${bgClass} max-w-7xl rounded-3xl`} >
             {props.heroData.navTabs &&
 
-                <div className='pt-5 px-8 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
+                <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
 
-                    <div className='flex overflow-visible scrollbar-hide tb-l:justify-center justify-start'>
-                        <div className={`${bgTabClass} rounded-[32px]`}>
+                    <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
+                        <div className={`${bgTabClass}  rounded-[32px]`}>
                             <Tab
                                 onTabClick={handleTabClick}
                                 tabs={props.heroData.navTabs}
                             />
                         </div>
                     </div>
-                    <div className='flex flex-col-reverse pt-6 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
+                    <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
                         <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
                             {props.heroData.tabContent &&
                                 props.heroData.tabContent[activeTab] &&

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

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