@purpurds/promotion-card 8.2.5 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/promotion-card",
-  "version": "8.2.5",
+  "version": "8.3.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/promotion-card.cjs.js",
   "types": "./dist/promotion-card.d.ts",
@@ -17,15 +17,15 @@
   "source": "src/promotion-card.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/badge": "8.2.5",
-    "@purpurds/card": "8.2.5",
-    "@purpurds/button": "8.2.5",
-    "@purpurds/common-types": "8.2.5",
-    "@purpurds/cta-link": "8.2.5",
-    "@purpurds/heading": "8.2.5",
-    "@purpurds/icon": "8.2.5",
-    "@purpurds/paragraph": "8.2.5",
-    "@purpurds/tokens": "8.2.5"
+    "@purpurds/badge": "8.3.0",
+    "@purpurds/button": "8.3.0",
+    "@purpurds/card": "8.3.0",
+    "@purpurds/common-types": "8.3.0",
+    "@purpurds/cta-link": "8.3.0",
+    "@purpurds/heading": "8.3.0",
+    "@purpurds/icon": "8.3.0",
+    "@purpurds/paragraph": "8.3.0",
+    "@purpurds/tokens": "8.3.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^9.0.18",
@@ -46,9 +46,9 @@
     "vite": "^6.2.1",
     "vitest": "^3.1.2",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/text-spacing": "8.2.5",
-    "@purpurds/grid": "8.2.5",
-    "@purpurds/theme": "8.2.5"
+    "@purpurds/grid": "8.3.0",
+    "@purpurds/text-spacing": "8.3.0",
+    "@purpurds/theme": "8.3.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/promotion-card.stories.tsx

@@ -76,6 +76,7 @@ const meta = {
         },
       },
     },
+    forceColorScheme: { control: "radio", options: ["light", "dark"] },
     actions: { control: false },
     badgeIcon: { control: false },
     decorativeImage: { control: false },
@@ -137,7 +138,6 @@ export const Showcase: Story = {
 
 export const WithDecorativeImage: Story = {
   args: {
-    hasGradient: true,
     decorativeImage: (
       <img
         src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
@@ -186,7 +186,6 @@ export const WithProductImage: Story = {
 
 export const CardGroup: Story = {
   args: {
-    hasGradient: true,
     decorativeImage: (
       <img
         src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"

package/src/promotion-card.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, type ReactNode } from "react";
+import React, { forwardRef, type ReactNode, useId } from "react";
 import { Badge } from "@purpurds/badge";
 import { Card } from "@purpurds/card";
 import type { BaseProps } from "@purpurds/common-types";
 import { Heading, type HeadingTagType, type HeadingVariant } from "@purpurds/heading";
 import { Paragraph } from "@purpurds/paragraph";
-import { useColorScheme } from "@purpurds/theme";
+import { type ColorScheme, useApplyTheme, useTheme } from "@purpurds/theme";
 import c from "classnames/bind";
 
 import styles from "./promotion-card.module.scss";
@@ -39,8 +39,8 @@ const colors: StyleRecord = {
   quaternary: "var(--purpur-color-text-tone-on-tone-tertiary)",
 } as const;
 
-type DecorativeImage = { decorativeImage?: ReactNode; hasGradient?: boolean };
-type ProductImage = { productImage?: ReactNode; hasGradient?: never };
+type DecorativeImage = { decorativeImage?: ReactNode };
+type ProductImage = { productImage?: ReactNode };
 
 export type PromotionCardProps = Omit<BaseProps, "children"> & {
   variant?: PromotionCardVariant;
@@ -54,6 +54,11 @@ export type PromotionCardProps = Omit<BaseProps, "children"> & {
   children: ReactNode;
   alignment?: "space-between" | "flex-end";
   additionalText?: ReactNode;
+  forceColorScheme?: ColorScheme;
+  /**
+   * @deprecated Gradient has been removed from both design and implementation. This prop will be removed in the next major release.
+   */
+  hasGradient?: boolean;
 } & (DecorativeImage | ProductImage);
 
 const cx = c.bind(styles);
@@ -76,14 +81,22 @@ export const PromotionCard = forwardRef<HTMLDivElement, PromotionCardProps>(
       style,
       alignment = "space-between",
       additionalText,
+      forceColorScheme,
       ...props
     },
     ref
   ) => {
-    const [colorScheme] = useColorScheme();
     let rest = props;
     let image;
 
+    const id = useId();
+    const { options, currentColorScheme } = useTheme();
+
+    useApplyTheme({
+      cssVariablesSelector: `[data-id="${id}"]`,
+      currentColorScheme: forceColorScheme ?? options?.promotionCardScheme,
+    });
+
     if ("decorativeImage" in props) {
       const { decorativeImage, ...spread } = props;
       image = decorativeImage;
@@ -92,22 +105,24 @@ export const PromotionCard = forwardRef<HTMLDivElement, PromotionCardProps>(
       const { productImage, ...spread } = props;
       image = productImage;
       rest = spread;
-    } else if ("hasGradient" in props) {
-      rest = props;
     }
 
+    const effectiveColorScheme =
+      forceColorScheme ?? options?.promotionCardScheme ?? currentColorScheme;
+
     const customProperties = {
       "--promotion-card-background": backgrounds[variant],
       "--promotion-card-color": colors[variant],
       "--promotion-card-background-image": image
         ? "none"
-        : colorScheme === "dark"
+        : effectiveColorScheme === "dark"
         ? backgroundImagesDark[variant]
         : backgroundImages[variant],
     } as React.CSSProperties;
 
     return (
       <Card
+        data-id={id}
         data-testid={dataTestid}
         ref={ref}
         fullHeight