hds-web 1.31.5 → 1.31.7

package/package.json

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

package/src/HDS/components/BadgesCaption/badges.js

@@ -25,7 +25,8 @@ const colorVariants = {
   green: 'bg-green-200 text-green-800 group-hover:bg-green-300  ',
   purple500: 'bg-purple-500 shadow-sm',
   blue500:'bg-blue-500 shadow-sm',
-  green500:'bg-green-500 shadow-sm'
+  green500:'bg-green-500 shadow-sm',
+  borderN400:'border border-neutral-400'
 
 }
 
@@ -40,7 +41,8 @@ export default function Badge({
   children,
   color,
   text_color,
-  onClick
+  onClick,
+  cursorClass
 }) {
   const [isClicked, setIsClicked] = useState(false);
   const handleClick = () => {
@@ -52,7 +54,7 @@ export default function Badge({
 
   return (
     <button
-      className={` cursor-default ${sizeClasses[size]} ${
+      className={` ${cursorClass ?? 'cursor-default'} ${sizeClasses[size]} ${
         colorVariants[color]
       } inline-flex items-center rounded-full`}
       onClick={handleClick}

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

@@ -894,6 +894,10 @@ select{
   left: -60%;
 }
 
+.-right-1{
+  right: -0.25rem;
+}
+
 .-right-\[44px\]{
   right: -44px;
 }
@@ -2358,6 +2362,13 @@ 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-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));
@@ -2400,14 +2411,14 @@ select{
           animation: bounce 1s infinite;
 }
 
-.cursor-default{
-  cursor: default;
-}
-
 .cursor-pointer{
   cursor: pointer;
 }
 
+.cursor-default{
+  cursor: default;
+}
+
 .select-none{
   -webkit-user-select: none;
           user-select: none;
@@ -10481,6 +10492,10 @@ select{
   visibility: visible;
 }
 
+.group\/eventListing:hover .group-hover\/eventListing\:visible{
+  visibility: visible;
+}
+
 .group\/icon:hover .group-hover\/icon\:visible{
   visibility: visible;
 }
@@ -10497,20 +10512,20 @@ select{
   display: flex;
 }
 
-.group\/arrow:hover .group-hover\/arrow\:translate-x-\[0\.15rem\]{
-  --tw-translate-x: 0.15rem;
+.group\/btn:hover .group-hover\/btn\:translate-x-1{
+  --tw-translate-x: 0.25rem;
   -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\/btn:hover .group-hover\/btn\:translate-x-1{
+.group\/card:hover .group-hover\/card\:translate-x-1{
   --tw-translate-x: 0.25rem;
   -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\/card:hover .group-hover\/card\:translate-x-1{
-  --tw-translate-x: 0.25rem;
+.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));
 }
@@ -10719,16 +10734,30 @@ select{
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.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\: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\:delay-100{
+  transition-delay: 100ms;
+}
+
 .group:hover .group-hover\:delay-100{
   transition-delay: 100ms;
 }
 
+.group\/eventListing:hover .group-hover\/eventListing\:duration-300{
+  transition-duration: 300ms;
+}
+
 .group:hover .group-hover\:duration-100{
   transition-duration: 100ms;
 }