@purpurds/tooltip 4.6.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tooltip",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/tooltip.cjs.js",
   "types": "./dist/tooltip.d.ts",
@@ -16,11 +16,11 @@
   "dependencies": {
     "@radix-ui/react-tooltip": "~1.0.7",
     "classnames": "~2.5.0",
-    "@purpurds/icon": "4.6.0",
-    "@purpurds/button": "4.6.0",
-    "@purpurds/paragraph": "4.6.0",
-    "@purpurds/action": "4.6.0",
-    "@purpurds/tokens": "4.6.0"
+    "@purpurds/button": "5.0.0",
+    "@purpurds/action": "5.0.0",
+    "@purpurds/tokens": "5.0.0",
+    "@purpurds/icon": "5.0.0",
+    "@purpurds/paragraph": "5.0.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/tooltip.stories.tsx

@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import "@purpurds/button/styles";
 import "@purpurds/icon/styles";
 import "@purpurds/paragraph/styles";
-import { Tooltip, TOOLTIP_ALIGN, TOOLTIP_POSITION, TOOLTIP_VARIANT } from "./tooltip";
+import { Tooltip, TOOLTIP_ALIGN, TOOLTIP_POSITION } from "./tooltip";
 
 const meta: Meta<typeof Tooltip> = {
   title: "Components/Tooltip",
@@ -19,14 +19,13 @@ const meta: Meta<typeof Tooltip> = {
     ),
   ],
   args: {
-    variant: "primary",
-    children: "Some tooltip content",
-    triggerAriaLabel: "Tooltip button",
     align: "center",
+    children: "Some tooltip content",
+    negative: false,
     position: "top",
+    triggerAriaLabel: "Tooltip button",
   },
   argTypes: {
-    variant: { options: Object.values(TOOLTIP_VARIANT), control: { type: "select" } },
     position: { options: Object.values(TOOLTIP_POSITION), control: { type: "select" } },
     align: { options: Object.values(TOOLTIP_ALIGN), control: { type: "select" } },
   },
@@ -60,7 +59,7 @@ export default meta;
 type Story = StoryObj<typeof Tooltip>;
 
 export const Showcase: Story = {
-  name: "Primary",
+  name: "Default",
   args: {
     children:
       "This is a longer tooltip text to display that there is a max-width on the tooltip container.",
@@ -69,9 +68,9 @@ export const Showcase: Story = {
 };
 
 export const TooltipNegative: Story = {
-  name: "Primary negative",
+  name: "Negative",
   args: {
-    variant: "primary-negative",
+    negative: true,
   },
   parameters: {
     backgrounds: {

package/src/tooltip.test.tsx

@@ -102,7 +102,7 @@ function renderTooltip({
   ["data-testid"]: dataTestId = "tooltip",
   children = "Some text content",
   className,
-  variant,
+  negative,
   position,
   align,
   triggerAriaLabel,
@@ -112,7 +112,7 @@ function renderTooltip({
   render(
     <Tooltip
       className={className}
-      variant={variant}
+      negative={negative}
       position={position}
       align={align}
       data-testid={dataTestId}

package/src/tooltip.tsx

@@ -11,12 +11,6 @@ import styles from "./tooltip.module.scss";
 
 const cx = c.bind(styles);
 
-export const TOOLTIP_VARIANT = {
-  PRIMARY: "primary",
-  PRIMARY_NEGATIVE: "primary-negative",
-} as const;
-export type TooltipVariant = (typeof TOOLTIP_VARIANT)[keyof typeof TOOLTIP_VARIANT];
-
 export const TOOLTIP_POSITION = {
   TOP: "top",
   BOTTOM: "bottom",
@@ -36,7 +30,7 @@ export type TooltipProps = {
   align?: TooltipAlign;
   buttonSize?: Size;
   children: ReactNode;
-  variant?: TooltipVariant;
+  negative?: boolean;
   position?: TooltipPosition;
   ["data-testid"]?: string;
   triggerAriaLabel?: string;
@@ -45,11 +39,6 @@ export type TooltipProps = {
   contentClassName?: string;
 };
 
-const ButtonVariants = {
-  primary: BUTTON_VARIANT.TERTIARY_PURPLE,
-  ["primary-negative"]: BUTTON_VARIANT.TERTIARY_PURPLE_NEGATVIE,
-};
-
 const rootClassName = "purpur-tooltip";
 
 export const Tooltip = forwardRef(
@@ -60,7 +49,7 @@ export const Tooltip = forwardRef(
       children,
       className,
       contentClassName,
-      variant = TOOLTIP_VARIANT.PRIMARY,
+      negative = false,
       position = TOOLTIP_POSITION.TOP,
       align = TOOLTIP_ALIGN.CENTER,
       triggerAriaLabel = "",
@@ -73,15 +62,14 @@ export const Tooltip = forwardRef(
     const classes = cx([
       className,
       rootClassName,
-      {
-        [`${rootClassName}--${variant}`]: variant,
-      },
+      `${rootClassName}--primary${negative ? "-negative" : ""}`,
     ]);
     const tooltipButton = (
       <Button
         ref={ref}
         aria-label={triggerAriaLabel}
-        variant={ButtonVariants[variant]}
+        variant={BUTTON_VARIANT.TERTIARY_PURPLE}
+        negative={negative}
         iconOnly
         data-testid={`${dataTestId}-trigger-button`}
         size={buttonSize}
@@ -110,7 +98,7 @@ export const Tooltip = forwardRef(
                 className={cx([
                   contentClassName,
                   styles[`${rootClassName}__content`],
-                  styles[`${rootClassName}__content--${variant}`],
+                  styles[`${rootClassName}__content--primary${negative ? "-negative" : ""}`],
                 ])}
                 sideOffset={-5}
                 data-testid={`${dataTestId}-content`}
@@ -119,7 +107,7 @@ export const Tooltip = forwardRef(
                   <Paragraph
                     className={cx([
                       styles[`${rootClassName}__paragraph`],
-                      styles[`${rootClassName}__paragraph--${variant}`],
+                      styles[`${rootClassName}__paragraph--primary${negative ? "-negative" : ""}`],
                     ])}
                     variant={ParagraphVariant.PARAGRAPH100}
                     data-testid={`${dataTestId}-paragraph`}
@@ -132,7 +120,7 @@ export const Tooltip = forwardRef(
                 <RadixTooltip.Arrow
                   className={cx([
                     styles[`${rootClassName}__arrow`],
-                    styles[`${rootClassName}__arrow--${variant}`],
+                    styles[`${rootClassName}__arrow--primary${negative ? "-negative" : ""}`],
                   ])}
                 />
               </RadixTooltip.Content>