@purpurds/promotion-card 5.21.1 → 5.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/promotion-card",
-  "version": "5.21.1",
+  "version": "5.23.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.21.1",
-    "@purpurds/card": "5.21.1",
-    "@purpurds/cta-link": "5.21.1",
-    "@purpurds/heading": "5.21.1",
-    "@purpurds/button": "5.21.1",
-    "@purpurds/icon": "5.21.1",
-    "@purpurds/tokens": "5.21.1"
+    "@purpurds/badge": "5.23.0",
+    "@purpurds/cta-link": "5.23.0",
+    "@purpurds/heading": "5.23.0",
+    "@purpurds/button": "5.23.0",
+    "@purpurds/icon": "5.23.0",
+    "@purpurds/tokens": "5.23.0",
+    "@purpurds/card": "5.23.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/text-spacing": "5.21.1",
-    "@purpurds/grid": "5.21.1",
-    "@purpurds/paragraph": "5.21.1"
+    "@purpurds/paragraph": "5.23.0",
+    "@purpurds/text-spacing": "5.23.0",
+    "@purpurds/grid": "5.23.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/promotion-card.tsx

@@ -1,8 +1,14 @@
-import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import React, {
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  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";
 
@@ -35,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;
@@ -48,28 +55,31 @@ export type PromotionCardProps = {
   badgeText?: string;
   badgeIcon?: ReactNode;
   className?: string;
-  actions?: Array<{ label: string } & (CtaButton | CtaLink)>;
+  actions?: Array<Action>;
   children: ReactNode;
 } & (DecorativeImage | ProductImage);
 
 const cx = c.bind(styles);
 const rootClassName = "purpur-promotion-card";
 
-export const PromotionCard = ({
-  ["data-testid"]: dataTestid,
-  variant = "primary",
-  badgeText,
-  badgeIcon,
-  title,
-  titleTag = "h2",
-  titleVariant = "title-300",
-  enableTitleHyphenation = true,
-  className,
-  actions,
-  children,
-  style,
-  ...props
-}: PromotionCardProps & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+const PromotionCardComponent = (
+  {
+    ["data-testid"]: dataTestid,
+    variant = "primary",
+    badgeText,
+    badgeIcon,
+    title,
+    titleTag = "h2",
+    titleVariant = "title-300",
+    enableTitleHyphenation = true,
+    className,
+    actions,
+    children,
+    style,
+    ...props
+  }: PromotionCardProps & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
   let rest = props;
   let image;
   let showGradient;
@@ -97,7 +107,7 @@ export const PromotionCard = ({
   } as React.CSSProperties;
 
   return (
-    <Card className={cx(`${rootClassName}__card`)}>
+    <Card ref={ref} className={cx(`${rootClassName}__card`)}>
       <div
         data-testid={dataTestid}
         style={{
@@ -146,22 +156,24 @@ export const PromotionCard = ({
               <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>
@@ -197,4 +209,11 @@ export const PromotionCard = ({
   );
 };
 
+const isCtaLinkProps = (
+  action: Omit<CtaLinkPropsWithoutChildren | ButtonPropsWithoutChildren, "variant">
+): action is Omit<CtaLinkPropsWithoutChildren, "variant"> => {
+  return "href" in action;
+};
+
+export const PromotionCard = forwardRef(PromotionCardComponent);
 PromotionCard.displayName = "PromotionCard";