@purpurds/tooltip 3.5.1 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tooltip",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/tooltip.cjs.js",
   "types": "./dist/tooltip.d.ts",
@@ -17,10 +17,10 @@
   "dependencies": {
     "@radix-ui/react-tooltip": "~1.0.7",
     "classnames": "~2.5.0",
-    "@purpurds/button": "3.5.1",
-    "@purpurds/icon": "3.5.1",
-    "@purpurds/paragraph": "3.5.1",
-    "@purpurds/tokens": "3.5.1"
+    "@purpurds/button": "3.6.0",
+    "@purpurds/icon": "3.6.0",
+    "@purpurds/tokens": "3.6.0",
+    "@purpurds/paragraph": "3.6.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.7.0",
@@ -42,8 +42,8 @@
     "prettier": "~2.8.8",
     "react-dom": "~18.2.0",
     "react": "~18.2.0",
-    "typescript": "~5.2.2",
-    "vite": "~5.1.0",
+    "typescript": "~5.4.2",
+    "vite": "~5.2.2",
     "vitest": "~1.4.0",
     "@purpurds/component-rig": "1.0.0"
   },

package/readme.mdx

@@ -21,24 +21,12 @@ import packageInfo from "./package.json";
 
 #### Via NPM
 
-Add the dependency to your consumer app like `"@purpurds/tooltip": "x.y.z"`
-
-#### From outside the monorepo (build-time)
-
-To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
-
----
+Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
 
 In MyApp.tsx
 
 ```tsx
-import "@purpurds/tokens/index.css";
-```
-
-and
-
-```tsx
-import "@purpurds/tooltip/styles";
+import "@purpurds/purpur/styles";
 ```
 
 In MyComponent.tsx
@@ -46,7 +34,7 @@ In MyComponent.tsx
 Standard usage:
 
 ```tsx
-import { Tooltip } from "@purpurds/tooltip";
+import { Tooltip } from "@purpurds/purpur";
 
 export const MyComponent = () => {
   return <Tooltip triggerAriaLabel="extra information about something">Some content</Tooltip>;
@@ -56,15 +44,15 @@ export const MyComponent = () => {
 Setting negative variant with position and alignment:
 
 ```tsx
-import { Tooltip, TOOLTIP_VARIANT, TOOLTIP_POSITION, TOOLTIP_ALIGN } from "@purpurds/tooltip";
+import { Tooltip } from "@purpurds/purpur";
 
 export const MyComponent = () => {
   return (
     <Tooltip
       triggerAriaLabel="extra information about something"
-      variant={TOOLTIP_VARIANT.PRIMARY_NEGATIVE}
-      position={TOOLTIP_POSITION.TOP}
-      align={TOOLTIP_ALIGN.CENTER}
+      variant="primary-negative"
+      position="top"
+      align="center"
     >
       Some content
     </Tooltip>
@@ -75,14 +63,12 @@ export const MyComponent = () => {
 Using custom trigger element:
 
 ```tsx
-import { Tooltip } from "@purpurds/tooltip";
-import { Button, BUTTON_VARIANT } from "@purpurds/button";
-import { IconPetDog } from "@purpurds/icon";
+import { Button, IconPetDog, Tooltip } from "@purpurds/purpur";
 
 export const MyComponent = () => {
   const customTooltipTrigger: ReactNode = (
-    <Button variant={BUTTON_VARIANT.PRIMARY}>
-      <IconPetDog size="md" />
+    <Button variant="primary">
+      <IconPetDog />
       This is a custom trigger
     </Button>
   );
@@ -94,7 +80,7 @@ export const MyComponent = () => {
 Using jsx in content:
 
 ```tsx
-import { Tooltip } from "@purpurds/tooltip";
+import { Tooltip } from "@purpurds/purpur";
 
 export const MyComponent = () => {
   return (

package/src/tooltip.module.scss

@@ -10,6 +10,7 @@
     animation-duration: var(--purpur-motion-duration-400);
     animation-timing-function: var(--purpur-motion-easing-ease-out);
     will-change: transform, opacity;
+
     &--primary {
       background-color: var(--purpur-color-background-tone-on-tone-primary);
     }

package/src/tooltip.tsx

@@ -40,6 +40,7 @@ export type TooltipProps = {
   triggerAriaLabel?: string;
   triggerElement?: ReactNode;
   className?: string;
+  contentClassName?: string;
 };
 
 const ButtonVariants = {
@@ -55,6 +56,7 @@ export const Tooltip = forwardRef(
       ["data-testid"]: dataTestId,
       children,
       className,
+      contentClassName,
       variant = TOOLTIP_VARIANT.PRIMARY,
       position = TOOLTIP_POSITION.TOP,
       align = TOOLTIP_ALIGN.CENTER,
@@ -102,6 +104,7 @@ export const Tooltip = forwardRef(
                 side={position}
                 align={align}
                 className={cx([
+                  contentClassName,
                   styles[`${rootClassName}__content`],
                   styles[`${rootClassName}__content--${variant}`],
                 ])}