hds-web 1.4.7 → 1.4.9

package/package.json

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

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

@@ -10,7 +10,7 @@ const imgSizes = {
     'lg': 'h-[60px] w-[60px]',
 }
 const AvatarVariant = {
-    'circular': 'shadow rounded-full border-[1.5px] border-neutral-0',
+    'circular': 'shadow rounded-full ',
     'square': 'rounded-lg',
 }
 

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

@@ -58,7 +58,7 @@ export default function Badge({
             <Icon height={'h-4 w-4 stroke-[1.5px]'} variant={leftIconVariant} strokeColor={leftIconColor} strokeClass={HDSColor(leftIconColorClass)} />
           </div>
         )}
-        <Typography textStyle='body3c-medium'>{children}</Typography>
+        <Typography textStyle='body3c'>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>

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

@@ -40,16 +40,16 @@ export default function TalkCard2(props) {
                     </div>
                     <div className="tb-l:w-[380px] db:w-[520px] flex flex-col tb:justify-between">
                         <div>
-                            <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
+                            <Typography className='mt-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
                             {props.para &&
                                 <Typography
-                                    className='line-clamp-3 text-neutral-700'
+                                    className='line-clamp-3 mt-2 text-neutral-700'
                                     textStyle='body1c'>
                                     {props.para}
                                 </Typography>
                             }
                         </div>
-                        <div className="pb-6 flex">
+                        <div className="flex pb-6 tb-l:pb-0">
                             {props.readUrl &&
                                 props.para && (
                                     <a href={props.readUrl}>
@@ -72,10 +72,10 @@ export default function TalkCard2(props) {
                     </div>
                 </div>
 
-                <div className={`${CardClass} divide-y divide-neutral-150 flex tb-l:w-full flex-col pt-0`} >
+                <div className={`${CardClass} tb-l:divide-y-2 divide-neutral-200 flex tb-l:w-full flex-col pt-0`} >
                     {
                         props.speakerSet && (
-                            <div className="px-6 pt-6 border-t border-neutral-200 tb-l:border-0 flex gap-6 tb-l:pt-12 tb:mt-0 tb-l:pb-12 pb-6 flex-col ">
+                            <div className="px-6 py-6 border-t border-neutral-200 flex flex-col gap-6 tb:mt-0 tb-l:border-0 tb-l:h-full tb-l:justify-center  ">
                                 {props.speakerSet.map((value, i) => (
                                     <div key={i} className="block">
 
@@ -92,22 +92,23 @@ export default function TalkCard2(props) {
                             </div>
                         )
                     }
-                    {props.eventTime && <div className=" w-full pl-6 p-6 flex flex-row justify-between items-center">
-                        <Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
-                        {props.addCalendarUrl &&
-                            <a href={props.addCalendarUrl}>
-                                <HDSButton
-                                    leftIconVariant='calendarplus02'
-                                    leftIconColor="#1E56E3"
-                                    rightIconVariant='none'
-                                    state='default'
-                                    size='sm'
-                                    type="iconOnly"
-                                    label=''
-                                />
-                            </a>
-                        }
-                    </div>}
+                    {props.eventTime &&
+                        <div className="border-t border-neutral-200 tb-l:border-0 w-full pl-6 p-6 flex flex-row justify-between items-center">
+                            <Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
+                            {props.addCalendarUrl &&
+                                <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/Cards/TalkDetailCard/talkDetailCard.js

@@ -51,20 +51,22 @@ export default function TalkDetailCard(props) {
           props.speaker_card && (
             <div>
               <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'>
-                    <ProfileAvatar
-                      name={speaker.name}
-                      size='md'
-                      designation={speaker.designation}
-                      imageUrl={speaker.imageUrl}
-                      avatarVariant="circle"
-                      avatarBgColor={props.avatarBgColor}
-                    />
-                  </div>
-                ))
-              }
+              <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
+                {
+                  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>
           )
         }

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

@@ -94,7 +94,7 @@ export default function TableB(props) {
                             </Typography>
                         )}
                     </div>
-                    <div className=' mt-11 rounded-full shadow tb-l:hidden'>
+                    <div className=' mt-11 p-2 bg-neutral-0 rounded-full shadow tb-l:hidden'>
                         <Tab onTabClick={handleTabClick} tabs={tabs} />
                     </div>
                 </div>
@@ -170,7 +170,7 @@ export default function TableB(props) {
                 <div className="mt-12 bg-neutral-0 rounded-3xl ">
                     <table className="min-w-full shadow tableclss rounded-3xl ">
                         <thead>
-                            <tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
+                            <tr className='divide-x border-b border-neutral-200 divide-neutral-200 text-center rounded-t-3xl'>
                                 {Object.keys(TABLE_HEADER).map((key, index) => (
                                     <th
                                         key={index}

package/src/styles/tailwind.css

@@ -8747,6 +8747,10 @@ select {
     display: none;
   }
 
+  .tb-l\:h-full {
+    height: 100%;
+  }
+
   .tb-l\:w-1\/2 {
     width: 50%;
   }
@@ -8817,6 +8821,12 @@ select {
     margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .tb-l\:divide-y-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-y-reverse: 0;
+    border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+    border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
+  }
+
   .tb-l\:self-center {
     align-self: center;
   }
@@ -8857,8 +8867,8 @@ select {
     padding-bottom: 3rem;
   }
 
-  .tb-l\:pb-12 {
-    padding-bottom: 3rem;
+  .tb-l\:pb-0 {
+    padding-bottom: 0px;
   }
 
   .tb-l\:pb-6 {
@@ -8869,10 +8879,6 @@ select {
     padding-left: 2rem;
   }
 
-  .tb-l\:pt-12 {
-    padding-top: 3rem;
-  }
-
   .tb-l\:text-left {
     text-align: left;
   }