@purpurds/promotion-card 7.6.1 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/promotion-card",
-  "version": "7.6.1",
+  "version": "7.8.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/promotion-card.cjs.js",
   "types": "./dist/promotion-card.d.ts",
@@ -17,36 +17,37 @@
   "source": "src/promotion-card.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/badge": "7.6.1",
-    "@purpurds/button": "7.6.1",
-    "@purpurds/heading": "7.6.1",
-    "@purpurds/cta-link": "7.6.1",
-    "@purpurds/card": "7.6.1",
-    "@purpurds/paragraph": "7.6.1",
-    "@purpurds/icon": "7.6.1",
-    "@purpurds/tokens": "7.6.1"
+    "@purpurds/badge": "7.8.0",
+    "@purpurds/button": "7.8.0",
+    "@purpurds/card": "7.8.0",
+    "@purpurds/heading": "7.8.0",
+    "@purpurds/paragraph": "7.8.0",
+    "@purpurds/cta-link": "7.8.0",
+    "@purpurds/icon": "7.8.0",
+    "@purpurds/common-types": "7.8.0",
+    "@purpurds/tokens": "7.8.0"
   },
   "devDependencies": {
-    "eslint": "9.24.0",
-    "@storybook/react": "^8.6.4",
-    "storybook": "^8.6.4",
+    "@storybook/react-vite": "^9.0.18",
     "@testing-library/dom": "~10.4.0",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~16.2.0",
     "@types/node": "20.12.12",
     "@types/react-dom": "^19.0.4",
     "@types/react": "^19.0.10",
+    "eslint": "9.24.0",
     "jsdom": "~22.1.0",
     "lint-staged": "15.5.0",
     "prettier": "~2.8.8",
     "react-dom": "^19.0.0",
     "react": "^19.0.0",
+    "storybook": "^9.0.18",
     "typescript": "^5.6.3",
     "vite": "^6.2.1",
     "vitest": "^3.1.2",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/grid": "7.6.1",
-    "@purpurds/text-spacing": "7.6.1"
+    "@purpurds/grid": "7.8.0",
+    "@purpurds/text-spacing": "7.8.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/promotion-card.stories.tsx

@@ -6,7 +6,7 @@ import { HeadingTag, TitleVariant } from "@purpurds/heading";
 import { IconCheckmark } from "@purpurds/icon/checkmark";
 import { IconOffering } from "@purpurds/icon/offering";
 import { Paragraph } from "@purpurds/paragraph";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import "@purpurds/badge/styles";
 import "@purpurds/button/styles";
@@ -126,7 +126,7 @@ export const WithDecorativeImage: Story = {
     decorativeImage: (
       <img
         src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
-        alt="Familjens unga ser på tv tillsammans mysig stämning men spännande"
+        alt="The family's young ones are watching TV together in a cozy but exciting atmosphere"
       />
     ),
   },
@@ -150,11 +150,11 @@ export const WithProductImage: Story = {
       >
         <source
           type="image/webp"
-          srcSet="https://www.telia.se/images/j6b4qnxw7ufu/5E89mxmBBAYshpycYSoPFD/1912f041265530726efb07097f035b91/101023__160_b2ddd755-1bb7-415c-83f8-cbcd4bf7eb0c?fit=scale&w=500&fm=webp&q=99"
+          srcSet="https://www.telia.se/images/j6b4qnxw7ufu/5SQlvYckTDsTPdrdxzUbHD/1d6ca31184938d248d4db82f2c126cd4/115282__160_14ab6ec8-98f7-4a84-a630-6c89cc9b9859?fit=scale&w=500&fm=webp&q=99"
         />
         <img
-          src="https://www.telia.se/images/j6b4qnxw7ufu/5E89mxmBBAYshpycYSoPFD/1912f041265530726efb07097f035b91/101023__160_b2ddd755-1bb7-415c-83f8-cbcd4bf7eb0c?fit=scale&w=500&fm=webp&q=99"
-          alt="Familjens unga ser på tv tillsammans"
+          src="https://www.telia.se/images/j6b4qnxw7ufu/5SQlvYckTDsTPdrdxzUbHD/1d6ca31184938d248d4db82f2c126cd4/115282__160_14ab6ec8-98f7-4a84-a630-6c89cc9b9859?fit=scale&w=500&fm=png&q=99"
+          alt="Iphone 16"
         />
       </picture>
     ),
@@ -175,7 +175,7 @@ export const CardGroup: Story = {
     decorativeImage: (
       <img
         src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
-        alt="Familjens unga ser på tv tillsammans mysig stämning men spännande"
+        alt="The family's young ones are watching TV together in a cozy but exciting atmosphere"
       />
     ),
   },

package/src/promotion-card.tsx

@@ -1,12 +1,7 @@
-import React, {
-  type DetailedHTMLProps,
-  type ForwardedRef,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-} from "react";
+import React, { forwardRef, type ReactNode } from "react";
 import { Badge } from "@purpurds/badge";
 import { Card } from "@purpurds/card";
+import type { BaseProps } from "@purpurds/common-types";
 import { Heading, type HeadingTagType, type TitleVariantType } from "@purpurds/heading";
 import { Paragraph } from "@purpurds/paragraph";
 import c from "classnames/bind";
@@ -40,8 +35,7 @@ const colors: StyleRecord = {
 type DecorativeImage = { decorativeImage?: ReactNode; hasGradient?: boolean };
 type ProductImage = { productImage?: ReactNode; hasGradient?: never };
 
-export type PromotionCardProps = {
-  ["data-testid"]?: string;
+export type PromotionCardProps = Omit<BaseProps, "children"> & {
   variant?: PromotionCardVariant;
   title: string;
   titleTag?: HeadingTagType;
@@ -58,142 +52,132 @@ export type PromotionCardProps = {
 const cx = c.bind(styles);
 const rootClassName = "purpur-promotion-card";
 
-const PromotionCardComponent = (
-  {
-    ["data-testid"]: dataTestid,
-    variant = "primary",
-    badgeText,
-    badgeIcon,
-    title,
-    titleTag = "h2",
-    titleVariant = "title-300",
-    enableTitleHyphenation = false,
-    className,
-    actions,
-    children,
-    style,
-    alignment = "space-between",
-    additionalText,
-    ...props
-  }: PromotionCardProps & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
-  ref: ForwardedRef<HTMLDivElement>
-) => {
-  let rest = props;
-  let image;
-  let showGradient;
-
-  if ("decorativeImage" in props) {
-    const { hasGradient, decorativeImage, ...spread } = props;
-    image = decorativeImage;
-    showGradient = hasGradient;
-    rest = spread;
-  } else if ("productImage" in props) {
-    const { hasGradient, productImage, ...spread } = props;
-    image = productImage;
-    showGradient = hasGradient;
-    rest = spread;
-  } else if ("hasGradient" in props) {
-    const { hasGradient, ...spread } = props;
-    showGradient = hasGradient;
-    rest = spread;
-  }
-
-  const customProperties = {
-    "--promotion-card-background": backgrounds[variant],
-    "--promotion-card-color": colors[variant],
-    "--promotion-card-background-image": backgroundImages[variant],
-  } as React.CSSProperties;
-
-  return (
-    <Card ref={ref} className={cx(`${rootClassName}__card`)} fullHeight>
-      <div
-        data-testid={dataTestid}
-        style={{
-          ...customProperties,
-          ...style,
-        }}
-        className={cx([
-          className,
-          rootClassName,
-          `${rootClassName}--${variant}`,
-          {
+export const PromotionCard = forwardRef<HTMLDivElement, PromotionCardProps>(
+  (
+    {
+      ["data-testid"]: dataTestid,
+      variant = "primary",
+      badgeText,
+      badgeIcon,
+      title,
+      titleTag = "h2",
+      titleVariant = "title-300",
+      enableTitleHyphenation = false,
+      className,
+      actions,
+      children,
+      style,
+      alignment = "space-between",
+      additionalText,
+      ...props
+    },
+    ref
+  ) => {
+    let rest = props;
+    let image;
+    let showGradient;
+
+    if ("decorativeImage" in props) {
+      const { hasGradient, decorativeImage, ...spread } = props;
+      image = decorativeImage;
+      showGradient = hasGradient;
+      rest = spread;
+    } else if ("productImage" in props) {
+      const { hasGradient, productImage, ...spread } = props;
+      image = productImage;
+      showGradient = hasGradient;
+      rest = spread;
+    } else if ("hasGradient" in props) {
+      const { hasGradient, ...spread } = props;
+      showGradient = hasGradient;
+      rest = spread;
+    }
+
+    const customProperties = {
+      "--promotion-card-background": backgrounds[variant],
+      "--promotion-card-color": colors[variant],
+      "--promotion-card-background-image": backgroundImages[variant],
+    } as React.CSSProperties;
+
+    return (
+      <Card ref={ref} className={cx(`${rootClassName}__card`)} fullHeight>
+        <div
+          data-testid={dataTestid}
+          style={{
+            ...customProperties,
+            ...style,
+          }}
+          className={cx(className, rootClassName, `${rootClassName}--${variant}`, {
             [`${rootClassName}--with-image`]: image,
             [`${rootClassName}--without-image`]: !image,
-          },
-        ])}
-        {...rest}
-      >
-        <div
-          className={cx([
-            `${rootClassName}__content`,
-            {
-              [`${rootClassName}__content--with-image`]: image,
-              [`${rootClassName}__content--without-image`]: !image,
-            },
-          ])}
+          })}
+          {...rest}
         >
-          {badgeText && (
-            <div data-testid="badgeWrapper" className={cx(`${rootClassName}__badge-wrapper`)}>
-              <Badge variant={variant === "primary" ? "special" : "attention"} showIcon={false}>
-                {badgeIcon && badgeIcon}
-                {badgeText}
-              </Badge>
-            </div>
-          )}
-
           <div
-            className={cx(
-              `${rootClassName}__main-content`,
-              `${rootClassName}__main-content--${alignment}`
-            )}
+            className={cx(`${rootClassName}__content`, {
+              [`${rootClassName}__content--with-image`]: image,
+              [`${rootClassName}__content--without-image`]: !image,
+            })}
           >
-            <Heading
-              tag={titleTag}
-              variant={titleVariant}
-              enableHyphenation={enableTitleHyphenation}
-              className={cx(`${rootClassName}__heading`)}
-            >
-              {title}
-            </Heading>
-            <div className={cx(`${rootClassName}__body`)}>
-              <div className={cx(`${rootClassName}__child-content`)}>{children}</div>
-              {actions && <div className={cx(`${rootClassName}__actions`)}>{actions}</div>}
-              {additionalText && (
-                <Paragraph
-                  negative
-                  variant="additional-100"
-                  className={cx(`${rootClassName}__additional-text`)}
-                >
-                  {additionalText}
-                </Paragraph>
+            {badgeText && (
+              <div data-testid="badgeWrapper" className={cx(`${rootClassName}__badge-wrapper`)}>
+                <Badge variant={variant === "primary" ? "special" : "attention"} showIcon={false}>
+                  {badgeIcon && badgeIcon}
+                  {badgeText}
+                </Badge>
+              </div>
+            )}
+
+            <div
+              className={cx(
+                `${rootClassName}__main-content`,
+                `${rootClassName}__main-content--${alignment}`
               )}
+            >
+              <Heading
+                tag={titleTag}
+                variant={titleVariant}
+                enableHyphenation={enableTitleHyphenation}
+                className={cx(`${rootClassName}__heading`)}
+              >
+                {title}
+              </Heading>
+              <div className={cx(`${rootClassName}__body`)}>
+                <div className={cx(`${rootClassName}__child-content`)}>{children}</div>
+                {actions && <div className={cx(`${rootClassName}__actions`)}>{actions}</div>}
+                {additionalText && (
+                  <Paragraph
+                    negative
+                    variant="additional-100"
+                    className={cx(`${rootClassName}__additional-text`)}
+                  >
+                    {additionalText}
+                  </Paragraph>
+                )}
+              </div>
             </div>
           </div>
-        </div>
 
-        {image && (
-          <div
-            className={cx([
-              `${rootClassName}__image-wrapper`,
-              {
+          {image && (
+            <div
+              className={cx(`${rootClassName}__image-wrapper`, {
                 [`${rootClassName}__image-wrapper--product`]: "productImage" in props,
                 [`${rootClassName}__image-wrapper--decorative`]: "decorativeImage" in props,
-              },
-            ])}
-          >
-            {image}
-            {showGradient && (
-              <div
-                className={cx(`${rootClassName}__image-gradient`)}
-                data-testid="promotion-card-gradient"
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </Card>
-  );
-};
+              })}
+            >
+              {image}
+              {showGradient && (
+                <div
+                  className={cx(`${rootClassName}__image-gradient`)}
+                  data-testid="promotion-card-gradient"
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </Card>
+    );
+  }
+);
 
-export const PromotionCard = forwardRef(PromotionCardComponent);
 PromotionCard.displayName = "PromotionCard";