@sikka/hawa 0.0.242 → 0.0.243

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.242",
+  "version": "0.0.243",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaIconCount.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+type IconCountTypes = {
+  icon: any
+  count?: string
+}
+
+export const HawaIconCount: React.FunctionComponent<IconCountTypes> = (
+  props
+) => {
+  return (
+    <div className="flex h-fit  flex-row items-center  gap-2 px-2">
+      <div>{props.icon}</div>
+      <div className="text-sm">{props.count}</div>
+    </div>
+  )
+}

package/src/elements/HawaItemCard.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
+import { HawaButton } from "./HawaButton"
+import { FaReply } from "react-icons/fa"
 
 interface ItemCardTypes {
   actions?: any
@@ -10,7 +12,16 @@ interface ItemCardTypes {
   lang?: string
   cardImage?: string
   onCardClick?: any
+  counts?: any
   orientation?: "horizontal" | "vertical"
+  /** Enabling this blurs the image on hover and shows an action button */
+  clickableImage?: boolean
+  /** The function of the action button on the image of the card */
+  clickableImageAction?: () => void
+  /** The text of the action button on the image of the card */
+  clickableImageActionText: string
+  /** The icon of the action button on the image of the card */
+  clickableImageActionIcon?: any
 }
 
 type THeaderActions = {
@@ -21,8 +32,13 @@ type THeaderActions = {
 }
 export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
   actions,
+  counts,
   content,
   headerActions,
+  clickableImage,
+  clickableImageAction,
+  clickableImageActionText,
+  clickableImageActionIcon,
   header,
   cardImage,
   orientation = "vertical",
@@ -64,17 +80,32 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
       {...props}
     >
       {cardImage && (
-        <img
-          src={"https://via.placeholder.com/50"}
-          // className=" h-full w-full max-w-sm bg-red-500  bg-[url('https://via.placeholder.com/50')] bg-cover bg-no-repeat"
-          className={clsx(imageStyles[orientation])}
-          // className="h-40 w-fit rounded-tl-lg rounded-bl-lg bg-[url('https://via.placeholder.com/50')] bg-cover bg-no-repeat          "
-          // className="h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
-        />
+        <div className="group relative overflow-clip rounded-t">
+          <img
+            src={"https://via.placeholder.com/50"}
+            className={clsx(
+              imageStyles[orientation],
+              clickableImage
+                ? "overflow-clip transition-all group-hover:blur-lg"
+                : ""
+            )}
+          />
+          {clickableImage && (
+            <div className="absolute left-0 top-0 flex h-full w-full items-center  justify-center opacity-0 transition-all group-hover:opacity-100 ">
+              <HawaButton
+                startIcon={clickableImageActionIcon}
+                variant="outlined"
+                onClick={clickableImageAction}
+              >
+                {clickableImageActionText}
+              </HawaButton>
+            </div>
+          )}
+        </div>
       )}
-      <div className="relative w-full  px-6 pt-6">
+      <div className="relative w-full p-6">
         {headerActions && (
-          <div className="max-h- bg-red absolute right-0 top-0 flex justify-end pt-3 pr-3">
+          <div className="max-h- bg-red absolute right-0 top-0 flex justify-end pr-3 pt-3">
             <HawaMenu position="top-right" menuItems={headerActions}>
               <div
                 className={clsx(headerActionsButtonStyle)}
@@ -105,9 +136,20 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
             {content}
           </p>
         )}
-        {actions && (
-          <div className="flex justify-end rounded-b-lg p-3">{actions}</div>
-        )}
+        {actions || counts ? (
+          <div
+            className={clsx(
+              "mt-3 flex items-center rounded-b-lg ",
+              actions && counts ? "justify-between" : "justify-end"
+            )}
+          >
+            {counts}
+            {actions}
+          </div>
+        ) : null}
+        {/* {counts && (
+          <div className="flex justify-end rounded-b-lg">{counts}</div>
+        )} */}
       </div>
     </div>
   )

package/src/elements/index.ts

@@ -3,6 +3,7 @@ export * from "./HawaSwitch"
 export * from "./HawaCheckbox"
 export * from "./HawaPanelTabs"
 export * from "./HawaChip"
+export * from "./HawaIconCount"
 export * from "./HawaSettingsRow"
 export * from "./HawaSelect"
 export * from "./HawaRange"

package/src/styles.css

@@ -1659,18 +1659,9 @@ video {
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
-.bg-\[url\(\'https\:\/\/via\.placeholder\.com\/50\'\)\] {
-  background-image: url('https://via.placeholder.com/50');
-}
 .bg-none {
   background-image: none;
 }
-.bg-cover {
-  background-size: cover;
-}
-.bg-no-repeat {
-  background-repeat: no-repeat;
-}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1705,6 +1696,9 @@ video {
 .p-5 {
   padding: 1.25rem;
 }
+.p-6 {
+  padding: 1.5rem;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1806,9 +1800,6 @@ video {
 .pt-4 {
   padding-top: 1rem;
 }
-.pt-6 {
-  padding-top: 1.5rem;
-}
 .text-left {
   text-align: left;
 }
@@ -2387,6 +2378,15 @@ body {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
+.group:hover .group-hover\:blur-lg {
+  --tw-blur: blur(16px);
+  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);
+}
+
 .peer:checked ~ .peer-checked\:bg-buttonPrimary-500 {
   background-color: var(--button-primary-500);
 }