@pradip1995/segment-product-card 0.3.14 → 0.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/product-rail-variants.tsx

@@ -12,15 +12,17 @@ function ProductRailHeader({
   href = "/store",
 }: {
   title: string
-  viewAllLink: string
+  viewAllLink?: string
   href?: string
 }) {
   return (
     <div className="home-section-header">
       <h2 className="home-section-header__title">{title}</h2>
-      <LocalizedLink href={href} className="home-section-header__link">
-        {viewAllLink}
-      </LocalizedLink>
+      {viewAllLink ? (
+        <LocalizedLink href={href} className="home-section-header__link">
+          {viewAllLink}
+        </LocalizedLink>
+      ) : null}
     </div>
   )
 }
@@ -108,6 +110,7 @@ export function ProductRailByVariant({
   href,
   wishlistProductIds,
   productCardVariant,
+  showNavButtons,
 }: {
   variant: ProductRailVariant
   products: HttpTypes.StoreProduct[]
@@ -115,10 +118,11 @@ export function ProductRailByVariant({
   ratings?: Array<{ product_id?: string; rating?: number }>
   countryCode?: string
   title: string
-  viewAllLink: string
+  viewAllLink?: string
   href?: string
   wishlistProductIds?: string[]
   productCardVariant?: ProductCardVariant
+  showNavButtons?: boolean
 }) {
   return (
     <>
@@ -131,6 +135,7 @@ export function ProductRailByVariant({
           countryCode={countryCode}
           wishlistProductIds={wishlistProductIds}
           productCardVariant={productCardVariant}
+          showNavButtons={showNavButtons}
         />
       ) : variant === "featured" ? (
         <ProductRailFeatured

package/src/product-scroll.tsx

@@ -11,6 +11,7 @@ type ProductScrollProps = {
   countryCode?: string
   wishlistProductIds?: string[]
   productCardVariant?: ProductCardVariant
+  showNavButtons?: boolean
 }
 
 export default function ProductScroll({
@@ -20,6 +21,7 @@ export default function ProductScroll({
   countryCode,
   wishlistProductIds,
   productCardVariant,
+  showNavButtons = true,
 }: ProductScrollProps) {
   const viewportRef = useRef<HTMLDivElement>(null)
 
@@ -37,14 +39,16 @@ export default function ProductScroll({
 
   return (
     <div className="product-scroll bestsellers-carousel">
-      <button
-        type="button"
-        className="product-scroll__nav bestsellers-carousel__nav product-scroll__nav--prev bestsellers-carousel__nav--prev"
-        onClick={() => scroll("prev")}
-        aria-label="Previous products"
-      >
-        ‹
-      </button>
+      {showNavButtons ? (
+        <button
+          type="button"
+          className="product-scroll__nav bestsellers-carousel__nav product-scroll__nav--prev bestsellers-carousel__nav--prev"
+          onClick={() => scroll("prev")}
+          aria-label="Previous products"
+        >
+          ‹
+        </button>
+      ) : null}
       <div
         ref={viewportRef}
         className="product-scroll__viewport bestsellers-carousel__viewport"
@@ -67,14 +71,16 @@ export default function ProductScroll({
           ))}
         </div>
       </div>
-      <button
-        type="button"
-        className="product-scroll__nav bestsellers-carousel__nav product-scroll__nav--next bestsellers-carousel__nav--next"
-        onClick={() => scroll("next")}
-        aria-label="Next products"
-      >
-        ›
-      </button>
+      {showNavButtons ? (
+        <button
+          type="button"
+          className="product-scroll__nav bestsellers-carousel__nav product-scroll__nav--next bestsellers-carousel__nav--next"
+          onClick={() => scroll("next")}
+          aria-label="Next products"
+        >
+          ›
+        </button>
+      ) : null}
     </div>
   )
 }

package/src/segment.css

@@ -266,6 +266,24 @@
 }
 
 .jewelry-product-card .product-card__actions {
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.jewelry-product-card .product-card__wishlist-btn {
+  width: 2.125rem;
+  height: 2.125rem;
+  border-radius: 999px;
+  border: 1px solid rgba(59, 31, 78, 0.12);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.jewelry-product-card .product-card__wishlist-btn--active {
+  background: var(--color-brand-accent-muted, #f4eff8);
+}
+
+/* Cart uses the bottom Add to cart bar — hide the icon duplicate */
+.jewelry-product-card .product-card__cart-btn {
   display: none;
 }