@purpurds/promotion-card 5.22.0 → 5.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/promotion-card",
-  "version": "5.22.0",
+  "version": "5.24.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/promotion-card.cjs.js",
   "types": "./dist/promotion-card.d.ts",
@@ -16,13 +16,13 @@
   "source": "src/promotion-card.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/badge": "5.22.0",
-    "@purpurds/card": "5.22.0",
-    "@purpurds/heading": "5.22.0",
-    "@purpurds/cta-link": "5.22.0",
-    "@purpurds/icon": "5.22.0",
-    "@purpurds/tokens": "5.22.0",
-    "@purpurds/button": "5.22.0"
+    "@purpurds/card": "5.24.0",
+    "@purpurds/cta-link": "5.24.0",
+    "@purpurds/badge": "5.24.0",
+    "@purpurds/heading": "5.24.0",
+    "@purpurds/button": "5.24.0",
+    "@purpurds/icon": "5.24.0",
+    "@purpurds/tokens": "5.24.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -47,9 +47,9 @@
     "vite": "5.4.8",
     "vitest": "^2.1.2",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/paragraph": "5.22.0",
-    "@purpurds/text-spacing": "5.22.0",
-    "@purpurds/grid": "5.22.0"
+    "@purpurds/paragraph": "5.24.0",
+    "@purpurds/text-spacing": "5.24.0",
+    "@purpurds/grid": "5.24.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/promotion-card.tsx

@@ -6,9 +6,9 @@ import React, {
   ReactNode,
 } from "react";
 import { Badge } from "@purpurds/badge";
-import { Button } from "@purpurds/button";
+import { type ButtonProps, Button } from "@purpurds/button";
 import { Card } from "@purpurds/card";
-import { CtaLink } from "@purpurds/cta-link";
+import { type CtaLinkProps, CtaLink } from "@purpurds/cta-link";
 import { Heading, HeadingTagType, TitleVariantType } from "@purpurds/heading";
 import c from "classnames/bind";
 
@@ -41,8 +41,9 @@ const colors: StyleRecord = {
 type DecorativeImage = { decorativeImage?: ReactNode; hasGradient?: boolean };
 type ProductImage = { productImage?: ReactNode; hasGradient?: never };
 
-type CtaButton = { href?: never; onClick: () => void };
-type CtaLink = { href: string; onClick?: never };
+type ButtonPropsWithoutChildren = Omit<ButtonProps, "children">;
+type CtaLinkPropsWithoutChildren = Omit<CtaLinkProps, "children">;
+type Action = { label: string } & (ButtonPropsWithoutChildren | CtaLinkPropsWithoutChildren);
 
 export type PromotionCardProps = {
   ["data-testid"]?: string;
@@ -54,7 +55,7 @@ export type PromotionCardProps = {
   badgeText?: string;
   badgeIcon?: ReactNode;
   className?: string;
-  actions?: Array<{ label: string } & (CtaButton | CtaLink)>;
+  actions?: Array<Action>;
   children: ReactNode;
 } & (DecorativeImage | ProductImage);
 
@@ -155,22 +156,24 @@ const PromotionCardComponent = (
               <div className={cx(`${rootClassName}__child-content`)}>{children}</div>
               {actions && actions.length > 0 && (
                 <div className={cx(`${rootClassName}__actions`)}>
-                  {actions.map(({ label, href, onClick }, index) =>
-                    href ? (
+                  {actions.map(({ label, variant, iconOnly = undefined, ...rest }, index) =>
+                    isCtaLinkProps(rest) ? (
                       <CtaLink
-                        variant={index === 0 ? "primary" : "secondary"}
+                        iconOnly={iconOnly}
+                        variant={variant ?? index === 0 ? "primary" : "secondary"}
                         key={label}
-                        href={href}
                         negative={variant === "primary"}
+                        {...rest}
                       >
                         {label}
                       </CtaLink>
                     ) : (
                       <Button
-                        variant={index === 0 ? "primary" : "secondary"}
+                        iconOnly={iconOnly}
+                        variant={variant ?? index === 0 ? "primary" : "secondary"}
                         key={label}
-                        onClick={onClick}
                         negative={variant === "primary"}
+                        {...rest}
                       >
                         {label}
                       </Button>
@@ -206,5 +209,11 @@ const PromotionCardComponent = (
   );
 };
 
+const isCtaLinkProps = (
+  action: Omit<CtaLinkPropsWithoutChildren | ButtonPropsWithoutChildren, "variant">
+): action is Omit<CtaLinkPropsWithoutChildren, "variant"> => {
+  return "href" in action;
+};
+
 export const PromotionCard = forwardRef(PromotionCardComponent);
 PromotionCard.displayName = "PromotionCard";