@purpurds/promotion-card 6.12.5 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/promotion-card",
-  "version": "6.12.5",
+  "version": "7.1.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/promotion-card.cjs.js",
   "types": "./dist/promotion-card.d.ts",
@@ -17,14 +17,14 @@
   "source": "src/promotion-card.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/button": "6.12.5",
-    "@purpurds/card": "6.12.5",
-    "@purpurds/cta-link": "6.12.5",
-    "@purpurds/badge": "6.12.5",
-    "@purpurds/heading": "6.12.5",
-    "@purpurds/paragraph": "6.12.5",
-    "@purpurds/icon": "6.12.5",
-    "@purpurds/tokens": "6.12.5"
+    "@purpurds/badge": "7.1.0",
+    "@purpurds/button": "7.1.0",
+    "@purpurds/card": "7.1.0",
+    "@purpurds/heading": "7.1.0",
+    "@purpurds/paragraph": "7.1.0",
+    "@purpurds/cta-link": "7.1.0",
+    "@purpurds/icon": "7.1.0",
+    "@purpurds/tokens": "7.1.0"
   },
   "devDependencies": {
     "eslint": "9.24.0",
@@ -44,9 +44,9 @@
     "typescript": "^5.6.3",
     "vite": "^6.2.1",
     "vitest": "^3.1.2",
-    "@purpurds/text-spacing": "6.12.5",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/grid": "6.12.5"
+    "@purpurds/text-spacing": "7.1.0",
+    "@purpurds/grid": "7.1.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/promotion-card.stories.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { Button } from "@purpurds/button";
+import { CtaLink } from "@purpurds/cta-link";
 import { Grid } from "@purpurds/grid";
 import { HeadingTag, TitleVariant } from "@purpurds/heading";
 import { IconCheckmark } from "@purpurds/icon/checkmark";
@@ -34,16 +36,16 @@ const meta = {
     badgeText: "Badge title",
     badgeIcon: <IconOffering size="xs" />,
     title: "Title goes here lorem ipsum",
-    actions: [
-      {
-        label: "Primary link",
-        href: "#",
-      },
-      {
-        label: "Secondary link",
-        href: "#",
-      },
-    ],
+    actions: (
+      <>
+        <CtaLink variant="primary" href="#" negative>
+          Primary link
+        </CtaLink>
+        <CtaLink variant="secondary" href="#" negative>
+          Secondary link
+        </CtaLink>
+      </>
+    ),
     additionalText: "Additional texts such as legal ones",
     enableTitleHyphenation: false,
   },
@@ -185,12 +187,11 @@ export const CardGroup: Story = {
         </PromotionCard>
         <PromotionCard
           {...args}
-          actions={[
-            {
-              label: "Primary link",
-              href: "#",
-            },
-          ]}
+          actions={
+            <CtaLink variant="primary" href="#" negative>
+              Primary link
+            </CtaLink>
+          }
         >
           <Paragraph>
             Get our popular broadband and we&apos;ll offer you two months and the initial fee. Or
@@ -215,20 +216,28 @@ export const Showcase: Story = {
 
 export const ActionButtons: Story = {
   args: {
-    actions: [
-      {
-        label: "Primary button",
-        onClick: () => {
-          alert("Primary button clicked");
-        },
-      },
-      {
-        label: "Secondary button",
-        onClick: () => {
-          alert("Secondary button clicked");
-        },
-      },
-    ],
+    actions: (
+      <>
+        <Button
+          variant="primary"
+          onClick={() => {
+            alert("Primary button clicked");
+          }}
+          negative
+        >
+          Primary button
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            alert("Secondary button clicked");
+          }}
+          negative
+        >
+          Secondary button
+        </Button>
+      </>
+    ),
   },
   tags: ["visual:check"],
 };

package/src/promotion-card.test.tsx

@@ -163,4 +163,22 @@ describe("PromotionCard", () => {
 
     expect(screen.queryByTestId("promotion-card-gradient")).not.toBeInTheDocument();
   });
+
+  it("should render action elements", async () => {
+    render(
+      <PromotionCard
+        actions={
+          <button type="button" data-testid="action">
+            Action
+          </button>
+        }
+        {...props}
+      >
+        <div />
+      </PromotionCard>
+    );
+
+    const actionElement = await screen.findByTestId("action");
+    expect(actionElement).toBeInTheDocument();
+  });
 });

package/src/promotion-card.tsx

@@ -6,9 +6,7 @@ import React, {
   ReactNode,
 } from "react";
 import { Badge } from "@purpurds/badge";
-import { Button, type ButtonProps } from "@purpurds/button";
 import { Card } from "@purpurds/card";
-import { CtaAnchorProps, CtaLink } from "@purpurds/cta-link";
 import { Heading, HeadingTagType, TitleVariantType } from "@purpurds/heading";
 import { Paragraph } from "@purpurds/paragraph";
 import c from "classnames/bind";
@@ -42,11 +40,6 @@ const colors: StyleRecord = {
 type DecorativeImage = { decorativeImage?: ReactNode; hasGradient?: boolean };
 type ProductImage = { productImage?: ReactNode; hasGradient?: never };
 
-type Action = { label: string } & (
-  | Omit<ButtonProps, "children" | "variant">
-  | Omit<CtaAnchorProps, "children" | "variant">
-);
-
 export type PromotionCardProps = {
   ["data-testid"]?: string;
   variant?: PromotionCardVariant;
@@ -56,7 +49,7 @@ export type PromotionCardProps = {
   enableTitleHyphenation?: boolean;
   badgeText?: string;
   badgeIcon?: ReactNode;
-  actions?: Action[];
+  actions?: ReactNode;
   children: ReactNode;
   alignment?: "space-between" | "flex-end";
   additionalText?: ReactNode;
@@ -164,26 +157,7 @@ const PromotionCardComponent = (
             </Heading>
             <div className={cx(`${rootClassName}__body`)}>
               <div className={cx(`${rootClassName}__child-content`)}>{children}</div>
-              {actions && actions.length > 0 && (
-                <div className={cx(`${rootClassName}__actions`)}>
-                  {actions.map(({ label, ...rest }, index) => {
-                    const actionVariant = index === 0 ? "primary" : "secondary";
-                    const props = {
-                      variant: actionVariant,
-                      negative: variant === "primary",
-                      ...rest,
-                      children: label,
-                    } as const;
-                    if (isValidAnchor(props)) {
-                      return <CtaLink key={label} {...props} />;
-                    }
-                    if ("onClick" in props && !("href" in props)) {
-                      return <Button key={label} {...props} />;
-                    }
-                    return null;
-                  })}
-                </div>
-              )}
+              {actions && <div className={cx(`${rootClassName}__actions`)}>{actions}</div>}
               {additionalText && (
                 <Paragraph
                   negative
@@ -221,9 +195,5 @@ const PromotionCardComponent = (
   );
 };
 
-const isValidAnchor = (action: object): action is CtaAnchorProps => {
-  return "href" in action;
-};
-
 export const PromotionCard = forwardRef(PromotionCardComponent);
 PromotionCard.displayName = "PromotionCard";