@purpurds/tooltip 3.0.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@purpurds/tooltip",
+  "version": "3.0.0",
+  "main": "./dist/tooltip.cjs.js",
+  "types": "./dist/tooltip.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/tooltip.cjs.js",
+      "systemjs": "./dist/tooltip.system.js",
+      "types": "./dist/tooltip.d.ts",
+      "default": "./dist/tooltip.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/tooltip.tsx",
+  "dependencies": {
+    "@radix-ui/react-tooltip": "~1.0.7",
+    "classnames": "~2.5.0",
+    "@purpurds/button": "3.0.1",
+    "@purpurds/paragraph": "3.0.1",
+    "@purpurds/icon": "3.0.1",
+    "@purpurds/tokens": "3.0.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@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.2.0",
+    "@testing-library/user-event": "~14.5.1",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.1.0",
+    "vitest": "~1.3.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,106 @@
+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/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).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/tooltip/styles";
+```
+
+In MyComponent.tsx
+
+Standard usage:
+
+```tsx
+import { Tooltip } from "@purpurds/tooltip";
+
+export const MyComponent = () => {
+  return <Tooltip triggerAriaLabel="extra information about something">Some content</Tooltip>;
+};
+```
+
+Setting negative variant with position and alignment:
+
+```tsx
+import { Tooltip, TOOLTIP_VARIANT, TOOLTIP_POSITION, TOOLTIP_ALIGN } from "@purpurds/tooltip";
+
+export const MyComponent = () => {
+  return (
+    <Tooltip
+      triggerAriaLabel="extra information about something"
+      variant={TOOLTIP_VARIANT.PRIMARY_NEGATIVE}
+      position={TOOLTIP_POSITION.TOP}
+      align={TOOLTIP_ALIGN.CENTER}
+    >
+      Some content
+    </Tooltip>
+  );
+};
+```
+
+Using custom trigger element:
+
+```tsx
+import { Tooltip } from "@purpurds/tooltip";
+import { Button, BUTTON_VARIANT } from "@purpurds/button";
+import { IconPetDog } from "@purpurds/icon";
+
+export const MyComponent = () => {
+  const customTooltipTrigger: ReactNode = (
+    <Button variant={BUTTON_VARIANT.PRIMARY}>
+      <IconPetDog size="md" />
+      This is a custom trigger
+    </Button>
+  );
+
+  return <Tooltip triggerElement={customTooltipTrigger}>Some content</Tooltip>;
+};
+```
+
+Using jsx in content:
+
+```tsx
+import { Tooltip } from "@purpurds/tooltip";
+
+export const MyComponent = () => {
+  return (
+    <Tooltip triggerAriaLabel="extra information about something">
+      <div>Hello world! This is the content</div>
+    </Tooltip>
+  );
+};
+```

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/tooltip.module.scss

@@ -0,0 +1,94 @@
+.purpur-tooltip {
+  display: inline-block;
+
+  &__content {
+    box-sizing: border-box;
+    max-width: calc(17rem * var(--purpur-rescale));
+    border-radius: var(--purpur-border-radius-md);
+    padding: var(--purpur-spacing-150);
+    user-select: none;
+    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);
+    }
+    &--primary-negative {
+      background-color: var(--purpur-color-background-tone-on-tone-secondary);
+    }
+  }
+  &__content[data-state="delayed-open"][data-side="top"] {
+    animation-name: slideDownAndFade;
+  }
+  &__content[data-state="delayed-open"][data-side="right"] {
+    animation-name: slideLeftAndFade;
+  }
+  &__content[data-state="delayed-open"][data-side="bottom"] {
+    animation-name: slideUpAndFade;
+  }
+  &__content[data-state="delayed-open"][data-side="left"] {
+    animation-name: slideRightAndFade;
+  }
+
+  &__arrow {
+    &--primary {
+      fill: var(--purpur-color-background-tone-on-tone-primary);
+    }
+    &--primary-negative {
+      fill: var(--purpur-color-background-tone-on-tone-secondary);
+    }
+  }
+
+  &__paragraph {
+    &--primary {
+      color: var(--purpur-color-text-tone-on-tone-primary);
+    }
+    &--primary-negative {
+      color: var(--purpur-color-text-tone-on-tone-secondary);
+    }
+  }
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/src/tooltip.stories.tsx

@@ -0,0 +1,95 @@
+import React, { ReactNode } from "react";
+import { Button, BUTTON_VARIANT } from "@purpurds/button";
+import { IconPetDog } from "@purpurds/icon";
+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";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "3rem 0 3rem 10rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    variant: "primary",
+    children: "Some tooltip content",
+    triggerAriaLabel: "Tooltip button",
+    align: "center",
+    position: "top",
+  },
+  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" } },
+  },
+  parameters: {
+    design: [
+      {
+        name: "Tooltip",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=33655%3A8134&mode=design&t=XME73YbhUMJE1LLn-1",
+      },
+    ],
+  },
+};
+const customTooltipTrigger: ReactNode = (
+  <Button aria-label="toggleButton" variant={BUTTON_VARIANT.PRIMARY}>
+    <IconPetDog size="md" />
+    This is a custom trigger
+  </Button>
+);
+
+const jsxContent: ReactNode = (
+  <div style={{ color: "white" }}>
+    Some content in a div{" "}
+    <a href="https://www.telia.se" style={{ color: "white" }} target="_blank" rel="noreferrer">
+      Telia.se
+    </a>
+  </div>
+);
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Showcase: Story = {
+  name: "Primary",
+  args: {
+    children:
+      "This is a longer tooltip text to display that there is a max-width on the tooltip container.",
+    position: "bottom",
+  },
+};
+
+export const TooltipNegative: Story = {
+  name: "Primary negative",
+  args: {
+    variant: "primary-negative",
+  },
+  parameters: {
+    backgrounds: {
+      default: "Primary tone-on-tone",
+    },
+  },
+};
+
+export const TooltipWithCustomTrigger: Story = {
+  name: "With custom trigger",
+  args: {
+    triggerElement: customTooltipTrigger,
+  },
+};
+
+export const TooltipWithJSXContent: Story = {
+  name: "With JSX content",
+  args: {
+    children: jsxContent,
+  },
+};

package/src/tooltip.test.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import {
+  cleanup,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Tooltip, TooltipProps } from "./tooltip";
+
+class ResizeObserver {
+  observe() {
+    // do nothing
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    // do nothing
+  }
+}
+
+window.ResizeObserver = ResizeObserver;
+expect.extend(matchers);
+
+describe("Tooltip", () => {
+  afterEach(cleanup);
+
+  it("should open on hover", async () => {
+    renderTooltip();
+    await userEvent.hover(screen.getByTestId("tooltip-trigger-button"));
+    await waitFor(() => expect(screen.getByTestId("tooltip-content")).toBeDefined());
+  });
+
+  it("should open on click", async () => {
+    renderTooltip();
+    await userEvent.click(screen.getByTestId("tooltip-trigger-button"));
+    await waitFor(() => expect(screen.getByTestId("tooltip-content")).toBeDefined());
+  });
+
+  it("should close on escape key", async () => {
+    renderTooltip();
+    await userEvent.click(screen.getByTestId("tooltip-trigger-button"));
+    await waitFor(() => expect(screen.getByTestId("tooltip-content")).toBeDefined());
+    userEvent.keyboard("{Escape}");
+    await waitForElementToBeRemoved(() => screen.queryByTestId("tooltip-content"));
+  });
+
+  it("aria label should be passed to button", () => {
+    renderTooltip({ triggerAriaLabel: "tooltipButtonLabel" });
+    expect(screen.getByTestId("tooltip-trigger-button")).toHaveAttribute(
+      "aria-label",
+      "tooltipButtonLabel"
+    );
+  });
+
+  it("should render tooltip button", () => {
+    renderTooltip();
+    expect(screen.getByTestId("tooltip-trigger-button")).toBeDefined();
+  });
+
+  it("should render custom tooltip trigger", () => {
+    renderTooltip({ triggerElement: <span data-testid="tooltip-custom-trigger" /> });
+    expect(screen.getByTestId("tooltip-custom-trigger")).toBeDefined();
+  });
+
+  it("should render text content inside paragraph", async () => {
+    renderTooltip({ children: "This is the tooltip content" });
+    await userEvent.click(screen.getByTestId("tooltip-trigger-button"));
+    await waitFor(() => expect(screen.getByTestId("tooltip-content")).toBeDefined());
+    expect(screen.getAllByTestId("tooltip-paragraph")[0].textContent).toContain(
+      "This is the tooltip content"
+    );
+  });
+
+  it("should not render default paragraph when custom content provided", async () => {
+    renderTooltip({
+      children: <span data-testid="tooltip-custom-content">Some content in a div</span>,
+    });
+    await userEvent.click(screen.getByTestId("tooltip-trigger-button"));
+    await waitFor(() => expect(screen.getByTestId("tooltip-content")).toBeDefined());
+    expect(screen.queryByTestId("tooltip-paragraph")).toBe(null);
+  });
+
+  it("should render custom content", async () => {
+    renderTooltip({
+      children: <span data-testid="tooltip-custom-content">Some content in a div</span>,
+    });
+    await userEvent.click(screen.getByTestId("tooltip-trigger-button"));
+    await waitFor(() => expect(screen.getByTestId("tooltip-content")).toBeDefined());
+    expect(screen.getAllByTestId("tooltip-custom-content")[0].textContent).toContain(
+      "Some content in a div"
+    );
+  });
+});
+
+function renderTooltip({
+  ["data-testid"]: dataTestId = "tooltip",
+  children = "Some text content",
+  className,
+  variant,
+  position,
+  align,
+  triggerAriaLabel,
+  triggerElement,
+  ...props
+}: Partial<TooltipProps> = {}) {
+  render(
+    <Tooltip
+      className={className}
+      variant={variant}
+      position={position}
+      align={align}
+      data-testid={dataTestId}
+      triggerAriaLabel={triggerAriaLabel}
+      triggerElement={triggerElement}
+      {...props}
+    >
+      {children}
+    </Tooltip>
+  );
+}

package/src/tooltip.tsx

@@ -0,0 +1,140 @@
+import React, { Children, ForwardedRef, forwardRef, ReactNode, useState } from "react";
+import { Button, BUTTON_VARIANT } from "@purpurds/button";
+import { IconInfo } from "@purpurds/icon";
+import { Paragraph, ParagraphVariant } from "@purpurds/paragraph";
+import { purpurMotionDuration400 } from "@purpurds/tokens";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import c from "classnames/bind";
+
+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",
+  LEFT: "left",
+  RIGHT: "right",
+} as const;
+export type TooltipPosition = (typeof TOOLTIP_POSITION)[keyof typeof TOOLTIP_POSITION];
+
+export const TOOLTIP_ALIGN = {
+  START: "start",
+  CENTER: "center",
+  END: "end",
+} as const;
+export type TooltipAlign = (typeof TOOLTIP_ALIGN)[keyof typeof TOOLTIP_ALIGN];
+
+export type TooltipProps = {
+  align?: TooltipAlign;
+  children: ReactNode;
+  variant?: TooltipVariant;
+  position?: TooltipPosition;
+  ["data-testid"]?: string;
+  triggerAriaLabel?: string;
+  triggerElement?: ReactNode;
+  className?: string;
+};
+
+const ButtonVariants = {
+  primary: BUTTON_VARIANT.TERTIARY_PURPLE,
+  ["primary-negative"]: BUTTON_VARIANT.TERTIARY_PURPLE_NEGATVIE,
+};
+
+const rootClassName = "purpur-tooltip";
+
+export const Tooltip = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId,
+      children,
+      className,
+      variant = TOOLTIP_VARIANT.PRIMARY,
+      position = TOOLTIP_POSITION.TOP,
+      align = TOOLTIP_ALIGN.CENTER,
+      triggerAriaLabel = "",
+      triggerElement,
+      ...props
+    }: TooltipProps,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const classes = cx([
+      className,
+      rootClassName,
+      {
+        [`${rootClassName}--${variant}`]: variant,
+      },
+    ]);
+    const tooltipButton = (
+      <Button
+        ref={ref}
+        aria-label={triggerAriaLabel}
+        variant={ButtonVariants[variant]}
+        iconOnly
+        data-testid={`${dataTestId}-trigger-button`}
+      >
+        <IconInfo size="md" />
+      </Button>
+    );
+
+    return (
+      <div data-testid={dataTestId} className={classes}>
+        <RadixTooltip.Provider delayDuration={parseInt(purpurMotionDuration400)}>
+          <RadixTooltip.Root open={isOpen} onOpenChange={setIsOpen} {...props}>
+            <RadixTooltip.Trigger
+              asChild
+              onClick={(e) => {
+                e.preventDefault();
+                setIsOpen(true);
+              }}
+            >
+              {Children.count(triggerElement) === 0 ? tooltipButton : triggerElement}
+            </RadixTooltip.Trigger>
+            <RadixTooltip.Portal>
+              <RadixTooltip.Content
+                side={position}
+                align={align}
+                className={cx([
+                  styles[`${rootClassName}__content`],
+                  styles[`${rootClassName}__content--${variant}`],
+                ])}
+                sideOffset={-5}
+                data-testid={`${dataTestId}-content`}
+              >
+                {typeof children === "string" ? (
+                  <Paragraph
+                    className={cx([
+                      styles[`${rootClassName}__paragraph`],
+                      styles[`${rootClassName}__paragraph--${variant}`],
+                    ])}
+                    variant={ParagraphVariant.PARAGRAPH100}
+                    data-testid={`${dataTestId}-paragraph`}
+                  >
+                    {children}
+                  </Paragraph>
+                ) : (
+                  children
+                )}
+                <RadixTooltip.Arrow
+                  className={cx([
+                    styles[`${rootClassName}__arrow`],
+                    styles[`${rootClassName}__arrow--${variant}`],
+                  ])}
+                />
+              </RadixTooltip.Content>
+            </RadixTooltip.Portal>
+          </RadixTooltip.Root>
+        </RadixTooltip.Provider>
+      </div>
+    );
+  }
+);
+
+Tooltip.displayName = "Tooltip";

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@purpurds/component-rig",
+  "compilerOptions": {
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@purpurds/component-rig/tsconfig.types.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.*", "**/*.stories.*"]
+}

package/vite.config.mts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+import { getConfig } from "@purpurds/component-rig/vite.config";
+import pkg from "./package.json";
+
+export default defineConfig(({ mode }) => getConfig(pkg, mode));