@purpurds/tooltip 5.10.1 → 5.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tooltip",
-  "version": "5.10.1",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/tooltip.cjs.js",
   "types": "./dist/tooltip.d.ts",
@@ -16,16 +16,16 @@
   "dependencies": {
     "@radix-ui/react-tooltip": "~1.0.7",
     "classnames": "~2.5.0",
-    "@purpurds/button": "5.10.1",
-    "@purpurds/action": "5.10.1",
-    "@purpurds/icon": "5.10.1",
-    "@purpurds/paragraph": "5.10.1",
-    "@purpurds/tokens": "5.10.1"
+    "@purpurds/button": "5.11.1",
+    "@purpurds/action": "5.11.1",
+    "@purpurds/icon": "5.11.1",
+    "@purpurds/tokens": "5.11.1",
+    "@purpurds/paragraph": "5.11.1"
   },
   "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",
@@ -33,17 +33,17 @@
     "@testing-library/react": "~14.3.0",
     "@testing-library/user-event": "~14.5.1",
     "@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/tooltip.stories.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import { SIZE } from "@purpurds/action";
 import { Button, BUTTON_VARIANT } from "@purpurds/button";
 import { IconPetDog } from "@purpurds/icon";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -8,7 +9,7 @@ import "@purpurds/icon/styles";
 import "@purpurds/paragraph/styles";
 import { Tooltip, TOOLTIP_ALIGN, TOOLTIP_POSITION } from "./tooltip";
 
-const meta: Meta<typeof Tooltip> = {
+const meta = {
   title: "Components/Tooltip",
   component: Tooltip,
   decorators: [
@@ -20,14 +21,45 @@ const meta: Meta<typeof Tooltip> = {
   ],
   args: {
     align: "center",
-    children: "Some tooltip content",
-    negative: false,
     position: "top",
     triggerAriaLabel: "Tooltip button",
+    negative: false,
+    children: "Some tooltip content",
   },
   argTypes: {
-    position: { options: Object.values(TOOLTIP_POSITION), control: { type: "select" } },
-    align: { options: Object.values(TOOLTIP_ALIGN), control: { type: "select" } },
+    position: {
+      control: { type: "select" },
+      options: Object.values(TOOLTIP_POSITION),
+      table: {
+        type: {
+          summary: Object.values(TOOLTIP_POSITION)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
+    align: {
+      control: { type: "select" },
+      options: Object.values(TOOLTIP_ALIGN),
+      table: {
+        type: {
+          summary: Object.values(TOOLTIP_ALIGN)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
+    buttonSize: {
+      control: { type: "select" },
+      options: Object.values(SIZE),
+      table: {
+        type: {
+          summary: Object.values(SIZE)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
   },
   parameters: {
     design: [
@@ -38,7 +70,8 @@ const meta: Meta<typeof Tooltip> = {
       },
     ],
   },
-};
+} satisfies Meta<typeof Tooltip>;
+
 const customTooltipTrigger: ReactNode = (
   <Button aria-label="toggleButton" variant={BUTTON_VARIANT.PRIMARY}>
     <IconPetDog size="md" />
@@ -67,18 +100,6 @@ export const Showcase: Story = {
   },
 };
 
-export const TooltipNegative: Story = {
-  name: "Negative",
-  args: {
-    negative: true,
-  },
-  parameters: {
-    backgrounds: {
-      default: "Primary tone-on-tone",
-    },
-  },
-};
-
 export const TooltipWithCustomTrigger: Story = {
   name: "With custom trigger",
   args: {

package/src/tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { Children, ForwardedRef, forwardRef, ReactNode, useState } from "react";
-import { SIZE, Size } from "@purpurds/action";
+import { Size } from "@purpurds/action";
 import { Button, BUTTON_VARIANT } from "@purpurds/button";
 import { IconInfo } from "@purpurds/icon";
 import { Paragraph, ParagraphVariant } from "@purpurds/paragraph";
@@ -45,7 +45,7 @@ export const Tooltip = forwardRef(
   (
     {
       ["data-testid"]: dataTestId,
-      buttonSize = SIZE.MD,
+      buttonSize = "md",
       children,
       className,
       contentClassName,

package/readme.mdx

@@ -1,93 +0,0 @@
-import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as TooltipStories from "./src/tooltip.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/Tooltip" of={TooltipStories} />
-
-# Tooltip
-
-<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
-
-Standard usage:
-
-```tsx
-import { Tooltip } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return <Tooltip triggerAriaLabel="extra information about something">Some content</Tooltip>;
-};
-```
-
-Setting negative variant with position and alignment:
-
-```tsx
-import { Tooltip } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <Tooltip
-      triggerAriaLabel="extra information about something"
-      variant="primary"
-      negative
-      position="top"
-      align="center"
-    >
-      Some content
-    </Tooltip>
-  );
-};
-```
-
-Using custom trigger element:
-
-```tsx
-import { Button, IconPetDog, Tooltip } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  const customTooltipTrigger: ReactNode = (
-    <Button variant="primary">
-      <IconPetDog />
-      This is a custom trigger
-    </Button>
-  );
-
-  return <Tooltip triggerElement={customTooltipTrigger}>Some content</Tooltip>;
-};
-```
-
-Using jsx in content:
-
-```tsx
-import { Tooltip } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <Tooltip triggerAriaLabel="extra information about something">
-      <div>Hello world! This is the content</div>
-    </Tooltip>
-  );
-};
-```