hds-web 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.3.1",
+  "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/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()}

package/src/styles/tailwind.css

@@ -1261,6 +1261,10 @@ select {
   margin-top: 2.25rem;
 }
 
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
 .line-clamp-3 {
   overflow: hidden;
   display: -webkit-box;
@@ -1408,6 +1412,10 @@ select {
   max-height: 100%;
 }
 
+.min-h-\[96px\] {
+  min-height: 96px;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1576,6 +1584,10 @@ select {
   min-width: 100%;
 }
 
+.min-w-\[100px\] {
+  min-width: 100px;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -2072,6 +2084,10 @@ select {
   align-self: flex-end;
 }
 
+.self-center {
+  align-self: center;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -5362,6 +5378,11 @@ select {
   padding-bottom: 1.625rem;
 }
 
+.py-\[30px\] {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -5502,6 +5523,10 @@ select {
   padding-left: 2rem;
 }
 
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -7650,6 +7675,11 @@ select {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-neutral-0:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .hover\:text-blue-600:hover {
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -8172,6 +8202,10 @@ select {
     max-width: 530px;
   }
 
+  .tb\:max-w-\[289px\] {
+    max-width: 289px;
+  }
+
   .tb\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -8251,6 +8285,10 @@ select {
     padding: 4rem;
   }
 
+  .tb\:p-0 {
+    padding: 0px;
+  }
+
   .tb\:px-3 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
@@ -8755,6 +8793,16 @@ select {
     align-self: center;
   }
 
+  .tb-l\:rounded-b-3xl {
+    border-bottom-right-radius: 1.5rem;
+    border-bottom-left-radius: 1.5rem;
+  }
+
+  .tb-l\:rounded-r-2xl {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+
   .tb-l\:border-l {
     border-left-width: 1px;
   }