@purpurds/promotion-card 5.11.0 → 5.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/promotion-card",
-  "version": "5.11.0",
+  "version": "5.11.2",
   "license": "AGPL-3.0-only",
   "main": "./dist/promotion-card.cjs.js",
   "types": "./dist/promotion-card.d.ts",
@@ -16,39 +16,39 @@
   "source": "src/promotion-card.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/badge": "5.11.0",
-    "@purpurds/icon": "5.11.0",
-    "@purpurds/tokens": "5.11.0",
-    "@purpurds/card": "5.11.0",
-    "@purpurds/heading": "5.11.0"
+    "@purpurds/badge": "5.11.2",
+    "@purpurds/card": "5.11.2",
+    "@purpurds/heading": "5.11.2",
+    "@purpurds/tokens": "5.11.2",
+    "@purpurds/icon": "5.11.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/react": "^8.2.6",
+    "storybook": "^8.2.6",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~14.3.0",
     "@types/node": "20.12.12",
-    "@types/react-dom": "~18.3.0",
-    "@types/react": "~18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
     "eslint-plugin-testing-library": "~6.2.0",
-    "eslint": "~8.57.0",
+    "eslint": "^8.57.0",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
-    "react-dom": "~18.3.0",
-    "react": "~18.3.0",
-    "typescript": "~5.4.2",
-    "vite": "~5.2.2",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
     "vitest": "~1.5.0",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/cta-link": "5.11.0",
-    "@purpurds/text-spacing": "5.11.0",
-    "@purpurds/paragraph": "5.11.0",
-    "@purpurds/grid": "5.11.0"
+    "@purpurds/cta-link": "5.11.2",
+    "@purpurds/paragraph": "5.11.2",
+    "@purpurds/text-spacing": "5.11.2",
+    "@purpurds/grid": "5.11.2"
   },
   "scripts": {
     "build:dev": "vite",

package/src/promotion-card.module.scss

@@ -136,7 +136,6 @@
 
     &--decorative,
     &--product {
-
       picture,
       img {
         display: block;
@@ -179,4 +178,4 @@
       width: auto;
     }
   }
-}
+}

package/src/promotion-card.stories.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import { CtaLink } from "@purpurds/cta-link";
 import { Grid } from "@purpurds/grid";
+import { HeadingTag, TitleVariant } from "@purpurds/heading";
 import { IconCheckmark, IconOffering } from "@purpurds/icon";
 import { Paragraph } from "@purpurds/paragraph";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -15,7 +16,7 @@ import "@purpurds/icon/styles";
 import "@purpurds/paragraph/styles";
 import { PromotionCard, PromotionCardVariant, promotionCardVariants } from "./promotion-card";
 
-const meta: Meta<typeof PromotionCard> = {
+const meta = {
   title: "Components/PromotionCard",
   component: PromotionCard,
   parameters: {
@@ -28,9 +29,35 @@ const meta: Meta<typeof PromotionCard> = {
     ],
   },
   argTypes: {
-    variant: { control: "select", options: promotionCardVariants },
+    variant: {
+      control: "select",
+      options: promotionCardVariants,
+      table: { type: { summary: promotionCardVariants.map((x) => `"${x}"`).join(" | ") } },
+    },
+    titleTag: {
+      control: "select",
+      options: Object.values(HeadingTag),
+      table: {
+        type: {
+          summary: Object.values(HeadingTag)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
+    titleVariant: {
+      control: "select",
+      options: Object.values(TitleVariant),
+      table: {
+        type: {
+          summary: Object.values(TitleVariant)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
   },
-};
+} satisfies Meta<typeof PromotionCard>;
 
 export default meta;
 type Story = StoryObj<typeof PromotionCard>;

package/readme.mdx

@@ -1,60 +0,0 @@
-import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as PromotionCardStories from "./src/promotion-card.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/PromotionCard" of={PromotionCardStories} />
-
-# PromotionCard
-
-<Subtitle>Version {packageInfo.version}</Subtitle>
-
-### Showcase
-
-<Primary />
-
-### Properties
-
-<ArgTypes />
-
-### Installation
-
-#### Via NPM
-
-Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
-
-In MyApp.tsx
-
-```tsx
-import "@purpurds/purpur/styles";
-```
-
-In MyComponent.tsx
-
-```tsx
-import { PromotionCard } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <PromotionCard
-      variant="primary"
-      badgeText="Buy now"
-      badgeIcon={<IconOffering size="sm" />}
-      title="Promotion title"
-      hasGradient
-      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="Lorem ipsum dolor sit amet consectetur adipisicing elit"
-        />
-      }
-    >
-      <Paragraph>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi corporis amet
-        exercitationem atque consequuntur.
-      </Paragraph>
-      <Button variant="primary">Ask us</Button>
-    </PromotionCard>
-  );
-};
-```