hds-web 1.3.2 → 1.3.4

package/package.json

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

package/src/HDS/assets/icons/calendar-plus-01.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 8H3M16 2V5M8 2V5M12 18V12M9 15H15M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 8H3M16 2V5M8 2V5M12 18V12M9 15H15M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z"  stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/assets/icons/calendar-plus-02.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 11.5V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22H12.5M21 10H3M16 2V6M8 2V6M18 21V15M15 18H21"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 11.5V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22H12.5M21 10H3M16 2V6M8 2V6M18 21V15M15 18H21"  stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -8,8 +8,8 @@ export default function HasConAvatar({ name, designation, size, imageUrl }) {
         <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="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>
+                <Typography textStyle='h5' className='text-blue-400'>{name}</Typography>
+                <Typography textStyle='h7' className='text-blue-800 uppercase'>{designation}</Typography>
             </div>
             <div className='relative self-center'>
                 <img

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
+import { Typography } from '../../foundation/Typography';
 const imgSizes = {
     'xs': 'h-8 w-8',
     'sm': 'h-10 w-10',
-    'md': 'h-12 w-12',
+    'md': 'h-12 w-12 min-w-[48px]',
     'lg': 'h-[60px] w-[60px]',
 }
 const AvatarVariant = {
@@ -12,21 +13,6 @@ const AvatarVariant = {
     'square': 'rounded-lg',
 }
 
-
-const nameTextStyle = {
-    'xs': 'text-d-body1c-bold',
-    'sm': 'text-d-body1c-bold',
-    'md': 'text-d-body1c-bold',
-    'lg': 'text-d-body1c-bold'
-}
-
-const desgnTextStyle = {
-    'xs': 'text-hds-d-body3c ',
-    'sm': 'text-hds-d-body3c ',
-    'md': 'text-hds-d-body3c ',
-    'lg': 'text-hds-d-body3c '
-}
-
 export default function ProfileAvatar({ name, designation, size, imageUrl, avatarVariant }) {
     const imgSizeClass = imgSizes[size] || imgSizes.md;
     const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
@@ -50,15 +36,8 @@ export default function ProfileAvatar({ name, designation, size, imageUrl, avata
                     )}
                 </div>
                 <div className="ml-3">
-                    <p
-                        className={`${nameTextStyle[`${size}`]}text-neutral-900 group-hover:text-gray-900`}
-                    >
-                        {name}
-                    </p>
-                    <p
-                        className={`${desgnTextStyle[`${size}`]}  text-neutral-500 group-hover:text-gray-700`}>
-                        {designation}
-                    </p>
+                        <Typography textStyle='body2-semi-bold' className={` text-blue-800`}>{name}</Typography>
+                        <Typography textStyle='body3' className={` text-neutral-500`}>{designation}</Typography>
                 </div>
             </div>
         </div>

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

@@ -164,7 +164,7 @@ 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 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} />
+            <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>
         )}
         {label}

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

@@ -18,10 +18,10 @@ export default function TalkCard2(props) {
         <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">
+                    <div className="flex flex-col tb:flex-row tb:gap-3 gap-2">
                         {props.badges &&
                             props.badges.map((value, index) => (
-                                <div key={index} className='flex whitespace-nowrap'>
+                                <div key={index} className='flex  whitespace-nowrap'>
                                     <Badges
                                         size={value.size}
                                         color={value.color}
@@ -36,8 +36,10 @@ export default function TalkCard2(props) {
                         }
 
                     </div>
-                    <div className="tb-l:w-[520px]">
+                    <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 &&
@@ -47,6 +49,8 @@ export default function TalkCard2(props) {
                                     {props.para}   
                             </Typography>
                         }
+                        </div>
+                        <div className="pb-6 flex">
                         {props.readUrl && (
                             <a href={props.readUrl}>
                                 <HDSButton
@@ -64,6 +68,7 @@ export default function TalkCard2(props) {
                                 />
                             </a>
                         )}
+                        </div>
 
 
                     </div>
@@ -73,7 +78,7 @@ export default function TalkCard2(props) {
                 <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 ">
+                            <div className="px-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">
 
@@ -90,7 +95,7 @@ export default function TalkCard2(props) {
                         )
                     }
                    {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>
+                        <Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
                         <a href={props.addCalendarUrl}>
                             <HDSButton
                                 leftIconVariant='calendarplus02'

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Icon } from "../common-components/Icon";
-export default function Carouseltest(props) {
+export default function CarouselCard(props) {
     const [currentCard, setCurrentCard] = React.useState(0);
     const [touchStart, setTouchStart] = React.useState(0);
     const [touchEnd, setTouchEnd] = React.useState(0);
@@ -43,7 +43,6 @@ export default function Carouseltest(props) {
     const totalCards = props.cards.length;
 
     const nextCard = () => {
-        console.log(currentCard, totalCards)
         if (currentCard >= totalCards-3) {
             scrollToCard(0);
         } else {

package/src/HDS/components/index.js

@@ -12,4 +12,5 @@ export * from './Snippet';
 export * from './Tabs';
 export * from './Tooltip';
 export * from './Hero';
-export * from './Tables';
+export * from './Tables';
+export * from './Carousels';

package/src/styles/tailwind.css

@@ -1185,6 +1185,10 @@ select {
   margin-left: 1rem;
 }
 
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
 .ml-8 {
   margin-left: 2rem;
 }
@@ -1229,10 +1233,6 @@ select {
   margin-top: 0.5rem;
 }
 
-.mt-20 {
-  margin-top: 5rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1261,10 +1261,6 @@ select {
   margin-top: 2.25rem;
 }
 
-.ml-6 {
-  margin-left: 1.5rem;
-}
-
 .line-clamp-3 {
   overflow: hidden;
   display: -webkit-box;
@@ -1312,10 +1308,6 @@ select {
   aspect-ratio: 2/1;
 }
 
-.h-1 {
-  height: 0.25rem;
-}
-
 .h-1\/2 {
   height: 50%;
 }
@@ -1542,24 +1534,8 @@ select {
   width: 100vw;
 }
 
-.w-\[520px\] {
-  width: 520px;
-}
-
-.w-\[62\%\] {
-  width: 62%;
-}
-
-.w-\[18\%\] {
-  width: 18%;
-}
-
-.w-\[82\%\] {
-  width: 82%;
-}
-
-.w-\[434px\] {
-  width: 434px;
+.min-w-\[100px\] {
+  min-width: 100px;
 }
 
 .min-w-\[11\.5rem\] {
@@ -1574,6 +1550,10 @@ select {
   min-width: 348px;
 }
 
+.min-w-\[48px\] {
+  min-width: 48px;
+}
+
 .min-w-fit {
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
@@ -1584,10 +1564,6 @@ select {
   min-width: 100%;
 }
 
-.min-w-\[100px\] {
-  min-width: 100px;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1646,14 +1622,6 @@ select {
   max-width: min-content;
 }
 
-.max-w-\[430px\] {
-  max-width: 430px;
-}
-
-.max-w-\[520px\] {
-  max-width: 520px;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1779,14 +1747,14 @@ select {
           animation: bounce 1s infinite;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .cursor-default {
   cursor: default;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .select-none {
   -webkit-user-select: none;
           user-select: none;
@@ -1848,10 +1816,6 @@ select {
   place-content: space-evenly;
 }
 
-.content-center {
-  align-content: center;
-}
-
 .items-start {
   align-items: flex-start;
 }
@@ -1936,10 +1900,6 @@ select {
   gap: 25rem;
 }
 
-.gap-8 {
-  gap: 2rem;
-}
-
 .gap-x-1 {
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -2051,12 +2011,6 @@ select {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
-.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));
-}
-
 .divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
   border-color: rgb(30 86 227 / 0.1);
 }
@@ -2187,11 +2141,6 @@ select {
   border-bottom-left-radius: 0.375rem;
 }
 
-.rounded-r-2xl {
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
-}
-
 .rounded-r-md {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -2264,10 +2213,6 @@ select {
   border-top-width: 1px;
 }
 
-.border-r-2 {
-  border-right-width: 2px;
-}
-
 .border-solid {
   border-style: solid;
 }
@@ -5178,6 +5123,10 @@ select {
   stroke-width: 1.5px;
 }
 
+.stroke-\[1\.5\] {
+  stroke-width: 1.5;
+}
+
 .object-contain {
   object-fit: contain;
 }
@@ -5387,6 +5336,10 @@ select {
   padding-bottom: 2.5rem;
 }
 
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
 .pb-16 {
   padding-bottom: 4rem;
 }
@@ -5447,6 +5400,10 @@ select {
   padding-left: 1.75rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -5511,22 +5468,6 @@ select {
   padding-top: 1.5rem;
 }
 
-.pt-12 {
-  padding-top: 3rem;
-}
-
-.pb-9 {
-  padding-bottom: 2.25rem;
-}
-
-.pl-8 {
-  padding-left: 2rem;
-}
-
-.pb-12 {
-  padding-bottom: 3rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -5560,13 +5501,6 @@ select {
   font-weight: 500;
 }
 
-.text-hds-d-body3c {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  letter-spacing: ;
-  font-weight: 400;
-}
-
 .text-hds-d-body3c-medium {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -5638,21 +5572,21 @@ select {
 }
 
 .text-hds-m-body2-bold {
-  font-size: 875rem;
+  font-size: 0.875rem;
   line-height: 1.5rem;
   letter-spacing: ;
   font-weight: 700;
 }
 
 .text-hds-m-body2-medium {
-  font-size: 875rem;
+  font-size: 0.875rem;
   line-height: 1.5rem;
   letter-spacing: ;
   font-weight: 500;
 }
 
 .text-hds-m-body2-semi-bold {
-  font-size: 875rem;
+  font-size: 0.875rem;
   line-height: 1.5rem;
   letter-spacing: ;
   font-weight: 600;
@@ -7670,14 +7604,14 @@ select {
   background-color: rgb(13 65 198 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-neutral-100:hover {
+.hover\:bg-neutral-0:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-neutral-0:hover {
+.hover\:bg-neutral-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
 .hover\:text-blue-600:hover {
@@ -8091,11 +8025,13 @@ select {
   stroke: #FFFFFF;
 }
 
-@media (min-width: 600px) {
-  .tb\:visible {
-    visibility: visible;
+@media (min-width: 360px) {
+  .mb-s\:flex-row {
+    flex-direction: row;
   }
+}
 
+@media (min-width: 600px) {
   .tb\:mb-16 {
     margin-bottom: 4rem;
   }
@@ -8194,6 +8130,10 @@ select {
     max-width: 25rem;
   }
 
+  .tb\:max-w-\[289px\] {
+    max-width: 289px;
+  }
+
   .tb\:max-w-\[290px\] {
     max-width: 290px;
   }
@@ -8202,10 +8142,6 @@ select {
     max-width: 530px;
   }
 
-  .tb\:max-w-\[289px\] {
-    max-width: 289px;
-  }
-
   .tb\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -8250,6 +8186,10 @@ select {
     gap: 31.5rem;
   }
 
+  .tb\:gap-3 {
+    gap: 0.75rem;
+  }
+
   .tb\:gap-x-16 {
     -webkit-column-gap: 4rem;
             column-gap: 4rem;
@@ -8277,6 +8217,10 @@ select {
     border-right-color: rgb(236 237 240 / var(--tw-border-opacity));
   }
 
+  .tb\:p-0 {
+    padding: 0px;
+  }
+
   .tb\:p-10 {
     padding: 2.5rem;
   }
@@ -8285,10 +8229,6 @@ select {
     padding: 4rem;
   }
 
-  .tb\:p-0 {
-    padding: 0px;
-  }
-
   .tb\:px-3 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
@@ -8727,6 +8667,10 @@ select {
     width: 38%;
   }
 
+  .tb-l\:w-\[520px\] {
+    width: 520px;
+  }
+
   .tb-l\:w-\[62\%\] {
     width: 62%;
   }
@@ -8739,10 +8683,6 @@ select {
     width: 100%;
   }
 
-  .tb-l\:w-\[520px\] {
-    width: 520px;
-  }
-
   .tb-l\:min-w-\[400px\] {
     min-width: 400px;
   }
@@ -8803,24 +8743,10 @@ select {
     border-bottom-right-radius: 1rem;
   }
 
-  .tb-l\:border-l {
-    border-left-width: 1px;
-  }
-
   .tb-l\:border-r {
     border-right-width: 1px;
   }
 
-  .tb-l\:border-neutral-200 {
-    --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
-  }
-
-  .tb-l\:border-l-neutral-200 {
-    --tw-border-opacity: 1;
-    border-left-color: rgb(229 231 235 / var(--tw-border-opacity));
-  }
-
   .tb-l\:border-r-neutral-200 {
     --tw-border-opacity: 1;
     border-right-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -8839,6 +8765,10 @@ select {
     padding-bottom: 3rem;
   }
 
+  .tb-l\:pb-12 {
+    padding-bottom: 3rem;
+  }
+
   .tb-l\:pl-8 {
     padding-left: 2rem;
   }
@@ -8847,18 +8777,6 @@ select {
     padding-top: 3rem;
   }
 
-  .tb-l\:pb-9 {
-    padding-bottom: 2.25rem;
-  }
-
-  .tb-l\:pl-32 {
-    padding-left: 8rem;
-  }
-
-  .tb-l\:pb-12 {
-    padding-bottom: 3rem;
-  }
-
   .tb-l\:text-left {
     text-align: left;
   }
@@ -8955,10 +8873,6 @@ select {
     width: 100%;
   }
 
-  .db\:w-\[520px\] {
-    width: 520px;
-  }
-
   .db\:min-w-\[625px\] {
     min-width: 625px;
   }
@@ -9065,10 +8979,6 @@ select {
     padding-top: 8rem;
   }
 
-  .db\:pt-0 {
-    padding-top: 0px;
-  }
-
   .db\:text-left {
     text-align: left;
   }

package/tailwind.config.js

@@ -510,7 +510,7 @@ module.exports = {
         // add more for more breakpoints
 
         // body2-medium-style
-        'hds-m-body2-medium': ['875rem', {
+        'hds-m-body2-medium': ['0.875rem', {
           lineHeight: '1.5rem',
           letterSpacing: '',
           fontWeight: '500',
@@ -528,7 +528,7 @@ module.exports = {
         // add more for more breakpoints
 
         // body2-semi-bold-style
-        'hds-m-body2-semi-bold': ['875rem', {
+        'hds-m-body2-semi-bold': ['0.875rem', {
           lineHeight: '1.5rem',
           letterSpacing: '',
           fontWeight: '600',
@@ -546,7 +546,7 @@ module.exports = {
         // add more for more breakpoints
 
         // body2-bold-style
-        'hds-m-body2-bold': ['875rem', {
+        'hds-m-body2-bold': ['0.875rem', {
           lineHeight: '1.5rem',
           letterSpacing: '',
           fontWeight: '700',