hds-web 1.31.5 → 1.31.6

package/package.json

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

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Typography } from "../../foundation/Typography";
 import { Icon } from '../../components/common-components/Icon';
 import { Badges } from "../../components/BadgesCaption";
+import {LiveStatus} from "../../components/BadgesCaption";
 
 export default function EventListingCard(props) {
   return (
@@ -9,10 +10,22 @@ export default function EventListingCard(props) {
       <div className="self-start rounded-t-3xl">
         {
           props.eventListingImg && (
-            <div className="">
-              <img src={props.eventListingImg} alt={props.title} className={` rounded-t-3xl h-[179px] object-cover ${props.imgBG}`} />
+            <div className="relative">
+              <div>
+                <img src={props.eventListingImg} alt={props.title} className={` rounded-t-3xl h-[179px] object-cover ${props.imgBG}`} />
+                {props.imgTagText && <div className=" scale-75 absolute top-2 -right-1">
+                  <LiveStatus
+                    statusCircleBgClass={props.circleBG ?? 'bg-red-400'}
+                    statusTextClass='text-neutral-900'
+                    bgClass='bg-neutral-0'
+                    statusText={props.imgTagText ?? 'Concluded'}
+                  />
+                </div>}
+              </div>
+
             </div>
           )
+
         }
       </div>
       <div className="border border-neutral-200 group-hover/eventListing:border-opacity-0 transition-all duration-300 rounded-b-3xl">
@@ -35,7 +48,12 @@ export default function EventListingCard(props) {
           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" />
+              <div>
+
+                <Icon className='z-10 stroke-2 group-hover/eventListing:translate-x-[0.15rem] group-hover/eventListing:transition-all group-hover/eventListing:duration-300' height={`h-5 w-5`} variant={'chevronright'} strokeClass='stroke-neutral-500' />
+
+                <Icon className='invisible stroke-2 group-hover/eventListing:transition-all group-hover/eventListing:delay-100 group-hover/eventListing:visible ' height={`h-5 w-5 -mt-5`} variant='minus01' strokeClass='stroke-neutral-500' />
+              </div>
             </Typography>
           )
         }

package/src/styles/tailwind.css

@@ -1054,6 +1054,14 @@ select{
   top: 100%;
 }
 
+.-right-2{
+  right: -0.5rem;
+}
+
+.-right-1{
+  right: -0.25rem;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -2358,6 +2366,20 @@ 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));
 }
 
+.scale-50{
+  --tw-scale-x: .5;
+  --tw-scale-y: .5;
+  -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));
+}
+
+.scale-75{
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  -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));
+}
+
 .transform{
   -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));
@@ -10489,6 +10511,10 @@ select{
   visibility: visible;
 }
 
+.group\/eventListing:hover .group-hover\/eventListing\:visible{
+  visibility: visible;
+}
+
 .group\/sc:hover .group-hover\/sc\:block{
   display: block;
 }
@@ -10551,6 +10577,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));
 }
 
+.group\/eventListing:hover .group-hover\/eventListing\: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));
+}
+
 .group\/eventListing:hover .group-hover\/eventListing\:border-opacity-0{
   --tw-border-opacity: 0;
 }
@@ -10725,10 +10757,26 @@ select{
   transition-duration: 150ms;
 }
 
+.group\/arrow:hover .group-hover\/arrow\:transition-all{
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.group\/eventListing:hover .group-hover\/eventListing\:transition-all{
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .group:hover .group-hover\:delay-100{
   transition-delay: 100ms;
 }
 
+.group\/eventListing:hover .group-hover\/eventListing\:delay-100{
+  transition-delay: 100ms;
+}
+
 .group:hover .group-hover\:duration-100{
   transition-duration: 100ms;
 }
@@ -10737,6 +10785,10 @@ select{
   transition-duration: 300ms;
 }
 
+.group\/eventListing:hover .group-hover\/eventListing\:duration-300{
+  transition-duration: 300ms;
+}
+
 .group:hover .group-hover\:ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }