@pradip1995/segment-product-card 0.3.24 → 0.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,6 @@
     "./product-scroll": "./src/product-scroll.tsx",
     "./product-rail-variants": "./src/product-rail-variants.tsx"
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
@@ -30,8 +26,8 @@
   },
   "dependencies": {
     "@pradip1995/segment-login-popup": "^0.1.3",
-    "@pradip1995/segment-primitives": "^0.4.2",
-    "@pradip1995/segment-tokens": "^0.3.7"
+    "@pradip1995/segment-primitives": "^0.4.11",
+    "@pradip1995/segment-tokens": "^0.3.14"
   },
   "devDependencies": {
     "@medusajs/types": "^2.0.0",
@@ -41,5 +37,10 @@
     "next": ">=15",
     "react": "19.0.3",
     "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "test": "node --experimental-strip-types --test src/*.test.ts"
   }
-}
+}

package/src/beauty-product-card.tsx

@@ -61,7 +61,7 @@ export default function BeautyProductCard({
         href={`/products/${product.handle}`}
         className="beauty-product-card__link flex flex-col h-full"
       >
-        <div className="beauty-product-card__media relative aspect-square bg-[var(--color-surface-muted)] overflow-hidden">
+        <div className="beauty-product-card__media group/media relative aspect-square bg-[var(--color-surface-muted)] overflow-hidden">
           {product.thumbnail?.trim() ? (
             <Image
               src={product.thumbnail.trim()}

package/src/default-product-card.tsx

@@ -43,7 +43,7 @@ export default function DefaultProductCard({
       className="product-card group flex flex-col w-full h-full relative"
     >
       <LocalizedLink href={`/products/${product.handle}`} className="product-card__link flex flex-col h-full">
-        <div className="product-card__media relative aspect-[3/4] bg-surface-muted overflow-hidden rounded-lg">
+        <div className="product-card__media group/media relative aspect-[3/4] bg-surface-muted overflow-hidden rounded-lg">
           {product.thumbnail?.trim() ? (
             <Image
               src={product.thumbnail.trim()}

package/src/jewelry-product-card.tsx

@@ -11,6 +11,7 @@ type Props = {
   product: HttpTypes.StoreProduct
   region?: HttpTypes.StoreRegion
   countryCode?: string
+  showWishlist?: boolean
   wishlistProductIds?: string[]
 }
 
@@ -18,6 +19,7 @@ export default function JewelryProductCard({
   product,
   region,
   countryCode: countryCodeProp,
+  showWishlist = true,
   wishlistProductIds,
 }: Props) {
   const variant = product.variants?.[0]
@@ -40,7 +42,7 @@ export default function JewelryProductCard({
         className="jewelry-product-card__link flex flex-col h-full"
       >
         <div
-          className={`jewelry-product-card__media relative aspect-square overflow-hidden rounded-2xl bg-[var(--color-surface-muted)]${
+          className={`jewelry-product-card__media group/media relative aspect-square overflow-hidden rounded-2xl bg-[var(--color-surface-muted)]${
             hover ? " jewelry-product-card__media--has-hover" : ""
           }`}
         >
@@ -70,11 +72,12 @@ export default function JewelryProductCard({
             <div className="jewelry-product-card__placeholder w-full h-full" />
           )}
 
-          {product.id ? (
+          {showWishlist && product.id ? (
             <ProductCardActions
               product={product}
               countryCode={countryCode}
               wishlistProductIds={wishlistProductIds}
+              showWishlist={showWishlist}
             />
           ) : null}
         </div>

package/src/product-card-actions-class.test.ts

@@ -0,0 +1,67 @@
+import { describe, it } from "node:test"
+import assert from "node:assert/strict"
+import {
+  productCardActionsClass,
+  productCardWishlistClass,
+} from "./product-card-actions-class.ts"
+
+const WISHLIST_CASES = [
+  {
+    name: "wishlist wrap is visible without hover",
+    wantIncludes: ["product-card__wishlist-wrap", "top-3.5", "right-3.5", "pointer-events-auto"],
+    wantExcludes: ["opacity-0", "group-hover/media"],
+  },
+]
+
+const CART_CASES = [
+  {
+    name: "hover hides cart actions until named media group hover",
+    visibility: "hover" as const,
+    wantIncludes: [
+      "opacity-0",
+      "group-hover/media:opacity-100",
+      "group-hover/media:pointer-events-auto",
+    ],
+    wantExcludes: ["top-3.5"],
+  },
+  {
+    name: "always keeps cart actions visible",
+    visibility: "always" as const,
+    wantIncludes: ["top-3.5", "right-3.5", "pointer-events-auto"],
+    wantExcludes: ["opacity-0", "group-hover/media"],
+  },
+  {
+    name: "unknown visibility falls back to hover",
+    visibility: undefined,
+    wantIncludes: ["opacity-0", "group-hover/media:opacity-100"],
+    wantExcludes: ["top-3.5"],
+  },
+]
+
+describe("productCardWishlistClass", () => {
+  for (const tc of WISHLIST_CASES) {
+    it(tc.name, () => {
+      const className = productCardWishlistClass()
+      for (const snippet of tc.wantIncludes) {
+        assert.match(className, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
+      }
+      for (const snippet of tc.wantExcludes) {
+        assert.doesNotMatch(className, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
+      }
+    })
+  }
+})
+
+describe("productCardActionsClass", () => {
+  for (const tc of CART_CASES) {
+    it(tc.name, () => {
+      const className = productCardActionsClass(tc.visibility)
+      for (const snippet of tc.wantIncludes) {
+        assert.match(className, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
+      }
+      for (const snippet of tc.wantExcludes) {
+        assert.doesNotMatch(className, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
+      }
+    })
+  }
+})

package/src/product-card-actions-class.ts

@@ -0,0 +1,16 @@
+export type ProductCardActionsVisibility = "hover" | "always"
+
+export function productCardWishlistClass(): string {
+  return "product-card__wishlist-wrap absolute top-3.5 right-3.5 z-30 pointer-events-auto"
+}
+
+export function productCardActionsClass(
+  visibility?: ProductCardActionsVisibility
+): string {
+  const mode = visibility === "always" ? "always" : "hover"
+  const base = "product-card__actions absolute z-30"
+  if (mode === "always") {
+    return `${base} top-3.5 right-3.5 pointer-events-auto`
+  }
+  return `${base} bottom-3.5 right-3.5 opacity-0 group-hover/media:opacity-100 transition-opacity duration-300 pointer-events-none group-hover/media:pointer-events-auto`
+}

package/src/product-card-actions.tsx

@@ -12,12 +12,18 @@ import type { HttpTypes } from "@medusajs/types"
 import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
 import LoginRequiredModal from "@pradip1995/segment-login-popup/required"
 import QuickAddPanel from "./quick-add-panel"
+import {
+  productCardActionsClass,
+  productCardWishlistClass,
+  type ProductCardActionsVisibility,
+} from "./product-card-actions-class"
 
 type Props = {
   product: HttpTypes.StoreProduct
   countryCode: string
   wishlistProductIds?: string[]
   showWishlist?: boolean
+  actionsVisible?: ProductCardActionsVisibility
 }
 
 function findVariantForOptions(
@@ -44,6 +50,7 @@ export default function ProductCardActions({
   countryCode,
   wishlistProductIds,
   showWishlist = true,
+  actionsVisible = "hover",
 }: Props) {
   const router = useRouter()
   const [wishlisted, setWishlisted] = useState(false)
@@ -181,8 +188,8 @@ export default function ProductCardActions({
 
   return (
     <>
-      <div className="product-card__actions absolute bottom-3.5 right-3.5 z-30 opacity-0 group-hover/media:opacity-100 transition-opacity duration-300 pointer-events-none group-hover/media:pointer-events-auto" onClick={stopCardNav}>
-        {showWishlist ? (
+      {showWishlist ? (
+        <div className={productCardWishlistClass()} onClick={stopCardNav}>
           <button
             type="button"
             className={`product-card__wishlist-btn${wishlisted ? " product-card__wishlist-btn--active" : ""}${
@@ -200,8 +207,10 @@ export default function ProductCardActions({
               <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
             </svg>
           </button>
-        ) : null}
+        </div>
+      ) : null}
 
+      <div className={productCardActionsClass(actionsVisible)} onClick={stopCardNav}>
         <button
           type="button"
           className="product-card__cart-btn"

package/src/segment.css

@@ -58,6 +58,11 @@
   right: 0.875rem;
 }
 
+.beauty-product-card .product-card__wishlist-wrap {
+  top: 0.625rem;
+  right: 0.625rem;
+}
+
 .beauty-product-card .product-card__wishlist-btn,
 .beauty-product-card .product-card__cart-btn {
   width: 2.125rem;
@@ -304,10 +309,22 @@
   background: linear-gradient(135deg, var(--color-surface-muted) 0%, var(--color-surface-alt) 100%);
 }
 
+.product-card__wishlist-wrap {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 30;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.jewelry-product-card .product-card__wishlist-wrap {
+  top: 0.75rem;
+  right: 0.75rem;
+}
+
 .jewelry-product-card .product-card__actions {
-  bottom: 0.875rem;
-  top: auto;
-  right: 0.875rem;
+  display: none;
 }
 
 .jewelry-product-card .product-card__wishlist-btn {