hds-web 1.8.4 → 1.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -18,8 +18,6 @@
     "react-dom": "^17.0.1",
     "react-markdown": "^8.0.7",
     "react-scripts": "5.0.1",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "^1.8.1",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4",
     "yarn": "^1.22.19"

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/ImageSlider/imageSlider.js

@@ -1,55 +1,54 @@
-import React from "react";
-import Slider from "react-slick";
-import { HDSColor } from '../../../foundation/ColorPalette';
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
+// import React from "react";
+// import Slider from "react-slick";
+// import { HDSColor } from '../../../foundation/ColorPalette';
 
 
-export default function ImageSlider(props) {
-  // console.log(props.brands);
-  const slideSettings = {
-    infinite: true,
-    slidesToShow: props.slidesToShow,
-    slidesToScroll: 1,
-    autoplay: true,
-    speed: props.speed,
-    autoplaySpeed: props.autoplaySpeed,
-    cssEase: "linear",
-    responsive: [
-      {
-        breakpoint: 1024,
-        settings: {
-          slidesToShow: 4,
-          slidesToScroll: 1,
-        },
-      },
-      {
-        breakpoint: 767,
-        settings: {
-          slidesToShow: 3,
-          slidesToScroll: 1,
-        },
-      },
-      {
-        breakpoint: 500,
-        settings: {
-          slidesToShow: 2,
-          slidesToScroll: 1,
-        },
-      },
-    ],
-  };
-  const gradientBgClass = HDSColor(props.gradientBgColor);
-  return (
-    <div>
-      <Slider {...slideSettings} className={`before:content-[''] before:w-[90px] before:h-full before:inline-block before:absolute before:top-0 before:left-0 before:z-[1] before:bg-gradient-to-r before:${gradientBgClass} before:to-transparent
-        after:content-[''] after:w-[90px] after:h-full after:inline-block after:absolute after:top-0 after:left-[unset] after:right-0 after:z-[1] after:bg-gradient-to-r after:${gradientBgClass} after:to-transparent after:rotate-180`}>
-        {props.brands.map((brand, index) => (
-          <div key={index} className="m-4">
-            <img src={brand.imgUrl} alt={brand.imgAlt} />
-          </div>
-        ))}
-      </Slider>
-    </div>
-  )
-}
+
+// export default function ImageSlider(props) {
+//   // console.log(props.brands);
+//   const slideSettings = {
+//     infinite: true,
+//     slidesToShow: props.slidesToShow,
+//     slidesToScroll: 1,
+//     autoplay: true,
+//     speed: props.speed,
+//     autoplaySpeed: props.autoplaySpeed,
+//     cssEase: "linear",
+//     responsive: [
+//       {
+//         breakpoint: 1024,
+//         settings: {
+//           slidesToShow: 4,
+//           slidesToScroll: 1,
+//         },
+//       },
+//       {
+//         breakpoint: 767,
+//         settings: {
+//           slidesToShow: 3,
+//           slidesToScroll: 1,
+//         },
+//       },
+//       {
+//         breakpoint: 500,
+//         settings: {
+//           slidesToShow: 2,
+//           slidesToScroll: 1,
+//         },
+//       },
+//     ],
+//   };
+//   const gradientBgClass = HDSColor(props.gradientBgColor);
+//   return (
+//     <div>
+//       <Slider {...slideSettings} className={`before:content-[''] before:w-[90px] before:h-full before:inline-block before:absolute before:top-0 before:left-0 before:z-[1] before:bg-gradient-to-r before:${gradientBgClass} before:to-transparent
+//         after:content-[''] after:w-[90px] after:h-full after:inline-block after:absolute after:top-0 after:left-[unset] after:right-0 after:z-[1] after:bg-gradient-to-r after:${gradientBgClass} after:to-transparent after:rotate-180`}>
+//         {props.brands.map((brand, index) => (
+//           <div key={index} className="m-4">
+//             <img src={brand.imgUrl} alt={brand.imgAlt} />
+//           </div>
+//         ))}
+//       </Slider>
+//     </div>
+//   )
+// }

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

@@ -1 +1 @@
-export {default as ImageSlider} from './imageSlider';
+// export {default as ImageSlider} from './imageSlider';

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

@@ -1,9 +1,11 @@
-/* @import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,300&display=swap'); */
+@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,300&display=swap');
 @tailwind base;
 @tailwind components;
 @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));
 }