hds-web 1.3.6 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "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/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/styles/tailwind.css

@@ -1408,6 +1408,10 @@ select {
   min-height: 96px;
 }
 
+.min-h-\[116px\] {
+  min-height: 116px;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1564,6 +1568,10 @@ select {
   min-width: 100%;
 }
 
+.min-w-\[144px\] {
+  min-width: 144px;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -8025,6 +8033,16 @@ select {
   stroke: #FFFFFF;
 }
 
+@media (max-width: 1140px) {
+  .max-\[1140px\]\:shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .max-\[1140px\]\:snap-center {
+    scroll-snap-align: center;
+  }
+}
+
 @media (min-width: 360px) {
   .mb-s\:flex-row {
     flex-direction: row;
@@ -8142,6 +8160,10 @@ select {
     max-width: 530px;
   }
 
+  .tb\:snap-always {
+    scroll-snap-stop: always;
+  }
+
   .tb\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }