hds-web 0.1.5 → 0.1.6

package/package.json

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

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

@@ -2,6 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
 
+const ANIMATED_ARR_CLASSES = {
+  'icon1':{
+    'sm':'h-5 ',
+    'md': 'h-5',
+    'lg': 'h-6'
+  },
+  'icon2':{
+    'sm':'h-5 -mt-5',
+    'md': 'h-5 -mt-5',
+    'lg': 'h-6 -mt-6'
+  },
+ 
+}
+
+
 const Buttonclasses = {
   'primary': {
     'default': {
@@ -95,6 +110,7 @@ export default function Button(props) {
 
   const buttonClasses = [
     'inline-flex items-center',
+    'hover:shadow',
     'rounded-full',
     `button-${size}`,
     'group',
@@ -119,9 +135,9 @@ export default function Button(props) {
 
         {rightAnimatedArrow && rightAnimatedArrow !== 'none' && (
           <div className=' hover:transition-all '>
-            <Icon className='z-10 stroke-2 group-hover:translate-x-[0.098rem] group-hover:transition-all' height='h-4' variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
+            <Icon className='z-10 stroke-[1.5px] group-hover:translate-x-[0.15rem] group-hover:transition-all' height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]}`} variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
 
-            <Icon className='invisible stroke-2 -mt-4 group-hover:transition-all group-hover:delay-100 group-hover:visible ' height='h-4' variant='minus01' strokeColor={rightAnimatedArrowColor} />
+            <Icon className='invisible stroke-[1.5px] group-hover:transition-all group-hover:delay-100 group-hover:visible' height={`${ANIMATED_ARR_CLASSES['icon2'][`${size}`]}`} variant='minus01' strokeColor={rightAnimatedArrowColor} />
 
           </div>
         )}

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

@@ -5,6 +5,22 @@ 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);
+    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 handleTouchStart = e => {
         setTouchStart(e.targetTouches[0].clientX);
@@ -57,13 +73,31 @@ export default function Carouseltest(props) {
         }
     };
     const slider = () => {
-        let sliderWidth = 24/(totalCards-1) * (currentCard) + 'rem';
-        let sliderClass = 'w-[' + sliderWidth +'rem]';
-        console.log(sliderClass);
+
+        let x = visibleCardsContainerWidth;
+        let noOfcardsinaview = visibleCardsContainerWidth/cardWidth;
+        let y = 1;
+        console.log('noOfcardsinaview*currentCard',noOfcardsinaview*(currentCard+1));
+        // if((noOfcardsinaview*(currentCard+1))<=totalCards){
+        // let y = (totalContainerWidth/(noOfcardsinaview*visibleCardsContainerWidth))*(noOfcardsinaview*(currentCard+1));
+          
+        // }
+        console.log(totalContainerWidth, visibleCardsContainerWidth, currentCard )
+        let slider1 = (384/(totalCards*cardWidth)) * (328)* (currentCard);
+        if(slider1>384){
+            slider1 = 384;
+        }
+       
+      
+        console.log('x',x, 'slider1', slider1 );
+
+
+
+        let sliderWidth = slider1+ 'px';
         return (
             <div className=' '>
-                <div className='bg-blue-100 w-96 rounded-md content-center h-1'>
-                    <div className={`bg-blue-600 rounded-md h-1 `} style={{ width: `${sliderWidth}` }} />
+                <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>
         )

package/src/HDS/components/common-components/Card/copyCard.js

@@ -17,9 +17,9 @@ const Card = ({ text }) => {
 
   return (
     <div className="relative bg-white rounded-md shadow-md p-4 border bg-storybook-default-heading">
-      <p className="code-md font-medium text-center text-neutral-100">{text}</p>
+      <p className="code-md whitespace-pre-wrap font-medium  text-neutral-100">{text}</p>
       <button
-        className=" code-md absolute bottom-0 right-0 border px-4 py-4 bg-neutral-100 text-storybook-default-heading rounded hover:bg-blue-600 focus:bg-blue-600 focus:outline-none"
+        className=" code-md absolute bottom-0 right-0 border px-4 py-4 bg-neutral-100 text-storybook-default-heading rounded hover:bg-blue-100 focus:bg-blue-100 focus:outline-none"
         onClick={handleCopy}
       >
         {isCopied ? "Copied!" : "Copy"}

package/src/styles/tailwind.css

@@ -1128,6 +1128,14 @@ select {
   margin-top: -1rem;
 }
 
+.-mt-5 {
+  margin-top: -1.25rem;
+}
+
+.-mt-6 {
+  margin-top: -1.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1829,6 +1837,10 @@ select {
   white-space: pre-line;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2509,8 +2521,8 @@ select {
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
-.stroke-2 {
-  stroke-width: 2;
+.stroke-\[1\.5px\] {
+  stroke-width: 1.5px;
 }
 
 .object-contain {
@@ -3704,6 +3716,10 @@ select {
   transition-duration: 200ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .duration-500 {
   transition-duration: 500ms;
 }
@@ -4789,8 +4805,8 @@ select {
   display: block;
 }
 
-.group:hover .group-hover\:translate-x-\[0\.098rem\] {
-  --tw-translate-x: 0.098rem;
+.group:hover .group-hover\:translate-x-\[0\.15rem\] {
+  --tw-translate-x: 0.15rem;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }