hds-web 1.8.5 → 1.8.6

package/package.json

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

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

@@ -14,11 +14,23 @@ const AvatarVariant = {
     'square': 'rounded-lg',
 }
 
-export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant }) {
+const ProfileAvatarVariant = {
+    'default': {
+        'titleTextStyle': 'text-hds-m-body2c-bold tb:text-hds-t-body2c-bold db:text-hds-d-body2c-bold',
+        'desgnTextStyle': 'text-hds-m-body3c tb:text-hds-t-body3c db:text-hds-d-body3c'
+    },
+    'secondary': {
+        'titleTextStyle': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
+        'desgnTextStyle': 'text-hds-m-body2 tb:text-hds-t-body2 db:text-hds-d-body2'
+    }
+}
+
+export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant, avatarType }) {
     const imgSizeClass = imgSizes[size] || imgSizes.md;
     const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
     const defaultAvatarIcon = "user03";
     const hasImageUrl = imageUrl && imageUrl.length > 0;
+    const AvType = avatarType || 'default';
 
     return (
         <div className="group block flex-shrink-0">
@@ -28,6 +40,7 @@ export default function ProfileAvatar({avatarBgColor, name, designation, size, i
                         <img
                             className={`${imgSizeClass} ${avatarVariantClass} ${HDSColor(avatarBgColor)} rounded inline-block`}
                             src={imageUrl}
+                            alt={name}
                         />
                     ) : (
                         <Icon
@@ -38,8 +51,8 @@ export default function ProfileAvatar({avatarBgColor, name, designation, size, i
                     )}
                 </div>
                 <div className="ml-3">
-                        <Typography textStyle='body2c-bold' className={` text-neutral-800`}>{name}</Typography>
-                        <Typography textStyle='body3c' className={` text-neutral-500`}>{designation}</Typography>
+                    <div className={`${ProfileAvatarVariant[AvType]['titleTextStyle']} text-neutral-800`}>{name}</div>
+                    <div className={`${ProfileAvatarVariant[AvType]['desgnTextStyle']} text-neutral-600`}>{designation}</div>
                 </div>
             </div>
         </div>

package/src/HDS/components/Cards/VideoCard/homeVC.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+export default function HomeVC(props) {
+
+
+    return (
+        <>
+
+            <div className='carouselShadow'>
+                <div className='w-[643.51px] h-[472.64px] bg-base-1000 rounded-2xl flex flex-col items-center justify-center border-2 border-neutral-300'>
+                    <div className='w-[598.55px] h-[449.94px] border-x-2 border-neutral-800 bg-base-1000 rounded-lg grid grid-cols-2  '>
+                        <div className='relative bg-neutral-0 w-full h-full'></div>
+                        <div className='relative bg-yellow-100 w-[221px] justify-self-end h-full'></div>
+                    </div>
+                    <div className='w-[598.55px] h-[449.94px] border-x-2 border-neutral-800 bg-base-1000 rounded-lg grid grid-cols-2  '>
+                        <div className='relative bg-neutral-0 w-full h-full'></div>
+                        <div className='relative bg-yellow-100 w-[221px] justify-self-end h-full'></div>
+                    </div>
+                    <div className='w-[598.55px] h-[449.94px] border-x-2 border-neutral-800 bg-base-1000 rounded-lg grid grid-cols-2  '>
+                        <div className='relative bg-neutral-0 w-full h-full'></div>
+                        <div className='relative bg-yellow-100 w-[221px] justify-self-end h-full'></div>
+                    </div>
+
+                </div>
+                {/* <div className='relative mx-auto top-[442.72px] w-[151.7px] h-[3.1px] bg-neutral-0/20' /> */}
+            </div>
+        </>)
+}

package/src/HDS/components/Cards/VideoCard/index.js

@@ -0,0 +1 @@
+export { default as VideoCard } from './homeVC';

package/src/HDS/components/Cards/index.js

@@ -8,3 +8,4 @@ export * from './TalkDetailCard';
 export * from './ImageSlider';
 export * from './CommunityCard';
 export * from './Announcement';
+export * from './VideoCard';

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

@@ -5,28 +5,8 @@ import { HDSButton } from "../Buttons";
 export default function HomePageCarousel(props) {
     const carouselRef = useRef(null); // Create a ref using useRef
     const [currentCard, setCurrentCard] = React.useState(0);
-    const [touchStart, setTouchStart] = React.useState(0);
-    const [touchEnd, setTouchEnd] = React.useState(0);
     const [showAllCards, setShowAllCards] = useState(false);
 
-    const handleTouchStart = e => {
-        setTouchStart(e.targetTouches[0].clientX);
-    };
-
-    const handleTouchMove = e => {
-        setTouchEnd(e.targetTouches[0].clientX);
-    };
-
-    const handleTouchEnd = () => {
-        if (touchStart - touchEnd > 150) {
-            nextCard();
-        }
-
-        if (touchStart - touchEnd < -150) {
-            previousCard();
-        }
-    };
-
     const refs = props.cards.reduce((acc, val, i) => {
         acc[i] = React.createRef();
         return acc;
@@ -146,8 +126,8 @@ export default function HomePageCarousel(props) {
             </div>
 
 
-            <div className="hidden tb:flex tb:flex-col">
-                <div className="flex pb-12 items-center justify-end ">
+            <div className="hidden tb:flex tb:flex-col-reverse">
+                <div className="flex pt-10 justify-center items-center">
                     {/* {slider()} */}
                     <div className="flex">
                         {sliderControl(true)}
@@ -155,19 +135,7 @@ export default function HomePageCarousel(props) {
                     </div>
                 </div>
                 <div className="justify-center select-none  items-center"
-                    onTouchStart={handleTouchStart}
-                    onTouchMove={handleTouchMove}
-                    onTouchEnd={handleTouchEnd}
-                    onMouseDown={e => setTouchStart(e.clientX)}
-                    onMouseUp={e => {
-                        if (touchStart - e.clientX > 50) {
-                            nextCard();
-                        }
-
-                        if (touchStart - e.clientX < -50) {
-                            previousCard();
-                        }
-                    }}
+                  
                 >
                     <div className="">
                         <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
@@ -175,7 +143,6 @@ export default function HomePageCarousel(props) {
                         >
 
                             {props.cards.map((item, i) => (
-                                // <div className="max-[1140px]:snap-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
                                 <div className=" db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={i} ref={refs[i]}>
                                     <div className="w-full select-none rounded-3xl object-contain">
                                         {React.createElement(props.component, item)}
@@ -183,6 +150,12 @@ export default function HomePageCarousel(props) {
 
                                 </div>
                             ))}
+                            <div className="db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={totalCards}>
+                                <div className="w-full select-none rounded-3xl object-contain">
+                                    {React.createElement(props.component, props.cards[0])}
+                                </div>
+                            </div>
+                        
 
                         </div>
                     </div>

package/src/HDS/helpers/Sliders/index.js

@@ -0,0 +1 @@
+export { default as ScrollSlider } from './scrollSlider';

package/src/HDS/helpers/Sliders/scrollSlider.js

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { VideoCard } from "../../components/Cards/VideoCard";
+import { HomepageCarousel } from '../../components';
+
+const SideCard = () => (
+    <div className='bg-green-500 w-[300px] flex flex-col items-center justify-between rounded-3xl max-h-[338px]'>
+        <div className='w-[300px] flex justify-center'>
+            <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png' alt='imgb' className='p-5 ' />
+        </div>
+        <div className='w-[300px] flex justify-center'>
+            <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png' alt='imga' className='p-2 w-[194px]' />
+        </div>
+    </div>
+)
+
+const carouselItems = [
+    {
+        name: "John Smith",
+        designation: "CEO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Jane Doe",
+        designation: "CTO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Bob Johnson",
+        designation: "COO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Bob Johnson",
+        designation: "COO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    }
+];
+
+export default function ScrollSlider() {
+    const [isScrollActive, setScrollActive] = useState(false);
+
+    const handleMouseEnter = () => {
+        setScrollActive(true); // Mouse entered, scroll is active
+    };
+
+    const handleMouseLeave = () => {
+        setScrollActive(false); // Mouse left, scroll is inactive
+    };
+    return (
+        <div
+            className={`flex flex-row gap-4 w-screen h-screen items-center  justify-center`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            <div className={`${isScrollActive ? 'translate-y-0' : ''}  -translate-y-36 transition-all duration-[1500ms]`}>
+                <SideCard />
+            </div>
+            <div className='w-[643px] '>
+                <HomepageCarousel
+                    cards={carouselItems}
+                    component={VideoCard}
+                    length={carouselItems.length}
+                    
+                />
+            </div>
+            <div className={`${isScrollActive ? '-translate-y-0' : ''} translate-y-36  transition-all duration-[1500ms]`}>
+                <SideCard />
+            </div>
+        </div>
+    );
+}

package/src/HDS/helpers/index.js

@@ -1,2 +1,3 @@
 export * from './Translations';
-export * from './Media';
+export * from './Media';
+export * from './Sliders'

package/src/index.css

@@ -4,6 +4,8 @@
 @tailwind utilities;
 /* Typography classes */
 
+
+
 .carouselShadow{
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }

package/src/styles/tailwind.css

@@ -1514,6 +1514,10 @@ select{
   max-height: 26.25;
 }
 
+.max-h-\[338px\]{
+  max-height: 338px;
+}
+
 .max-h-full{
   max-height: 100%;
 }
@@ -1594,10 +1598,6 @@ select{
   width: 1.5rem;
 }
 
-.w-72{
-  width: 18rem;
-}
-
 .w-8{
   width: 2rem;
 }
@@ -1614,6 +1614,10 @@ select{
   width: 151.7px;
 }
 
+.w-\[194px\]{
+  width: 194px;
+}
+
 .w-\[22\.5rem\]{
   width: 22.5rem;
 }
@@ -1630,6 +1634,10 @@ select{
   width: 290px;
 }
 
+.w-\[300px\]{
+  width: 300px;
+}
+
 .w-\[598\.55px\]{
   width: 598.55px;
 }
@@ -1646,6 +1654,10 @@ select{
   width: 643.51px;
 }
 
+.w-\[643px\]{
+  width: 643px;
+}
+
 .w-\[70\%\]{
   width: 70%;
 }
@@ -1692,10 +1704,6 @@ select{
   min-width: 20px;
 }
 
-.min-w-\[22rem\]{
-  min-width: 22rem;
-}
-
 .min-w-\[24px\]{
   min-width: 24px;
 }
@@ -1867,6 +1875,12 @@ select{
           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));
 }
 
+.-translate-y-36{
+  --tw-translate-y: -9rem;
+  -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));
+}
+
 .-translate-y-\[0px\]{
   --tw-translate-y: -0px;
   -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));
@@ -1903,6 +1917,12 @@ select{
           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));
 }
 
+.translate-y-36{
+  --tw-translate-y: 9rem;
+  -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));
+}
+
 .translate-y-\[-20px\]{
   --tw-translate-y: -20px;
   -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));
@@ -1915,6 +1935,12 @@ select{
           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));
 }
 
+.-translate-y-0{
+  --tw-translate-y: -0px;
+  -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));
+}
+
 .-rotate-45{
   --tw-rotate: -45deg;
   -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));
@@ -2028,6 +2054,10 @@ select{
   flex-direction: row;
 }
 
+.flex-row-reverse{
+  flex-direction: row-reverse;
+}
+
 .flex-col{
   flex-direction: column;
 }
@@ -5835,6 +5865,10 @@ select{
   padding: 0.625rem;
 }
 
+.p-20{
+  padding: 5rem;
+}
+
 .p-3{
   padding: 0.75rem;
 }
@@ -7176,6 +7210,10 @@ select{
   transition-duration: 100ms;
 }
 
+.duration-1000{
+  transition-duration: 1000ms;
+}
+
 .duration-150{
   transition-duration: 150ms;
 }
@@ -7192,6 +7230,10 @@ select{
   transition-duration: 500ms;
 }
 
+.duration-\[1500ms\]{
+  transition-duration: 1500ms;
+}
+
 .ease-in{
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -9720,6 +9762,10 @@ select{
     flex-direction: column;
   }
 
+  .tb\:flex-col-reverse{
+    flex-direction: column-reverse;
+  }
+
   .tb\:items-center{
     align-items: center;
   }