hds-web 1.26.4 → 1.26.6

package/package.json

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

package/src/HDS/modules/Events/eventListingCard.js

@@ -5,18 +5,19 @@ import { Badges } from "../../components/BadgesCaption";
 
 export default function EventListingCard(props) {
   return (
-    <>
+    <div className="group/eventListing hover:shadow-xl rounded-3xl transition-all duration-300">
       <div className="self-start">
         {
           props.eventListingImg && (
-            <div>
-              <img src={props.eventListingImg} alt={props.title} />
+            <div className="">
+              <img src={props.eventListingImg} alt={props.title} className={` rounded-t-3xl max-h-[179px] object-contain ${props.imgBG}`} />
             </div>
           )
         }
-        
+      </div>
+      <div className="border border-neutral-200 group-hover/eventListing:border-opacity-0 transition-all duration-300 rounded-b-3xl">
         <div className="p-6 pb-0">
-          {props.eventType && 
+          {props.eventType &&
             <Badges
               color={props.badgeColor ?? 'green'}
               children={props.eventType}
@@ -27,17 +28,18 @@ export default function EventListingCard(props) {
               <Typography textStyle="h4" as="h4" className="text-neutral-1000 py-2">{props.title}</Typography>
             )
           }
-          
+
         </div>
+
+        {
+          props.eventDate && (
+            <Typography textStyle="body3-medium" className="text-neutral-700 flex items-center duration-300 self-end p-6 pt-0">
+              {props.eventDate}
+              <Icon height={'h-5 w-5 stroke-[1.5px] ml-1 transition-all duration-300 ease-in-out group-hover/arrow:translate-x-[0.15rem]'} variant="chevronright" strokeClass="stroke-neutral-700" />
+            </Typography>
+          )
+        }
       </div>
-      {
-        props.eventDate && (
-          <Typography textStyle="body3-medium" className="text-neutral-700 flex items-center duration-300 self-end p-6 pt-0">
-            {props.eventDate}
-            <Icon height={'h-5 w-5 stroke-[1.5px] ml-1 transition-all duration-300 ease-in-out group-hover/arrow:translate-x-[0.15rem]'} variant="chevronright" strokeClass="stroke-neutral-700" />
-          </Typography>
-        )
-      }
-    </>
+    </div>
   )
 }

package/src/styles/tailwind.css

@@ -1768,6 +1768,10 @@ select{
   max-height: 100vh;
 }
 
+.max-h-\[179px\]{
+  max-height: 179px;
+}
+
 .min-h-\[12px\]{
   min-height: 12px;
 }
@@ -2194,6 +2198,10 @@ select{
   max-width: min-content;
 }
 
+.max-w-\[270px\]{
+  max-width: 270px;
+}
+
 .flex-1{
   flex: 1 1 0%;
 }
@@ -10404,6 +10412,10 @@ 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));
 }
 
+.group\/eventListing:hover .group-hover\/eventListing\:border-opacity-0{
+  --tw-border-opacity: 0;
+}
+
 .group\/card:hover .group-hover\/card\:bg-blue-200{
   --tw-bg-opacity: 1;
   background-color: rgb(223 232 255 / var(--tw-bg-opacity));