@purpurds/notification 5.10.1 → 5.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/notification",
-  "version": "5.10.1",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/notification.cjs.js",
   "types": "./dist/notification.d.ts",
@@ -15,34 +15,34 @@
   "source": "src/notification.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/button": "5.10.1",
-    "@purpurds/icon": "5.10.1",
-    "@purpurds/tokens": "5.10.1",
-    "@purpurds/heading": "5.10.1",
-    "@purpurds/paragraph": "5.10.1"
+    "@purpurds/button": "5.11.1",
+    "@purpurds/heading": "5.11.1",
+    "@purpurds/paragraph": "5.11.1",
+    "@purpurds/tokens": "5.11.1",
+    "@purpurds/icon": "5.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/client-api": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/preview-api": "^8.2.6",
+    "@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"
   },

package/src/notification.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Button } from "@purpurds/button";
-import { useArgs } from "@storybook/client-api";
+import { HeadingTag } from "@purpurds/heading";
+import { useArgs } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/icon/styles";
@@ -14,16 +15,9 @@ import {
   notificationStatuses,
 } from "./notification";
 
-const meta: Meta<typeof Notification> = {
+const meta = {
   title: "Components/Notification",
   component: Notification,
-};
-
-export default meta;
-type Story = StoryObj<typeof Notification>;
-
-export const NotificationWithoutCloseButton: Story = {
-  name: "Notification without close button",
   parameters: {
     design: [
       {
@@ -35,15 +29,44 @@ export const NotificationWithoutCloseButton: Story = {
   },
   argTypes: {
     status: {
-      options: [undefined, ...notificationStatuses],
+      table: { type: { summary: notificationStatuses.map((x) => `"${x}"`).join(" | ") } },
+    },
+    ["aria-live"]: {
+      table: { type: { summary: notificationAriaLiveValues.map((x) => `"${x}"`).join(" | ") } },
+    },
+    role: {
+      table: { type: { summary: notificationRoles.map((x) => `"${x}"`).join(" | ") } },
+    },
+    headingTag: {
+      control: "select",
+      options: Object.values(HeadingTag),
+      table: {
+        type: {
+          summary: Object.values(HeadingTag)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof Notification>;
+
+export default meta;
+type Story = StoryObj<typeof Notification>;
+
+export const NotificationWithoutCloseButton: Story = {
+  name: "Notification without close button",
+  argTypes: {
+    status: {
+      options: notificationStatuses,
       control: "select",
     },
     ["aria-live"]: {
-      options: [undefined, ...notificationAriaLiveValues],
+      options: notificationAriaLiveValues,
       control: "select",
     },
     role: {
-      options: [undefined, ...notificationRoles],
+      options: notificationRoles,
       control: "select",
     },
   },

package/readme.mdx

@@ -1,44 +0,0 @@
-import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as NotificationStories from "./src/notification.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/Notification" of={NotificationStories} />
-
-# Notification
-
-<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 { Notification } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <div>
-      <Notification {...someProps}>Some content</Notification>
-    </div>
-  );
-};
-```