@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/Tooltip/Tooltip.static.ts

@@ -0,0 +1,213 @@
+import { createPopper, Instance as PopperInstance, Options as PopperOptions } from '@popperjs/core';
+import { transitionHiddenElement } from '@cloudfour/transition-hidden-element';
+
+import { keys } from '../../utils';
+
+export interface TooltipConfig {
+  rootContainerSelector: string;
+  removeDialogOnDestroy: boolean;
+  popperOptions: PopperOptions;
+}
+
+export const defaultConfig: TooltipConfig = {
+  rootContainerSelector: '#root-tooltips',
+  removeDialogOnDestroy: false,
+  popperOptions: {
+    placement: 'bottom',
+    strategy: 'absolute',
+    modifiers: [
+      {
+        name: 'arrow',
+        options: {
+          element: '.tooltip__arrow',
+          padding: 10,
+        },
+      },
+      {
+        name: 'eventListeners',
+        options: {
+          scroll: false,
+          resize: false,
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['right', 'top', 'auto'],
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: ({ placement }: { placement: string }) => {
+            if (placement.includes('start')) {
+              return [-10, 0];
+            } else if (placement.includes('end')) {
+              return [10, 0];
+            }
+            return [0, 0];
+          },
+        },
+      },
+    ],
+  },
+};
+
+export default class Tooltip {
+  public element: HTMLElement;
+  public config: TooltipConfig;
+  public instance!: PopperInstance;
+  public trigger!: HTMLElement;
+  public rootContainer?: HTMLElement | null;
+  public transitioner: any;
+
+  constructor(element: HTMLElement, config?: Partial<TooltipConfig>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    this.config.popperOptions = {
+      ...defaultConfig.popperOptions,
+      ...(config?.popperOptions || {}),
+    };
+    this.config.popperOptions.modifiers = [
+      ...defaultConfig.popperOptions.modifiers!,
+      ...(config?.popperOptions?.modifiers || []),
+    ];
+
+    this.handleVisibility = this.handleVisibility.bind(this);
+    this.onKeydown = this.onKeydown.bind(this);
+
+    (this.element as any).ODS_Tooltip = this;
+
+    this.init();
+
+    return this;
+  }
+
+  static getInstance(el: HTMLElement): Tooltip | null {
+    return el && (el as any).ODS_Tooltip ? (el as any).ODS_Tooltip : null;
+  }
+
+  wrapLastWordAndButton(): void {
+    if (!this.element.hasAttribute('data-tooltip-keep-with-text')) return;
+    const previousSibling = this.trigger.previousSibling;
+    if (!previousSibling || previousSibling.nodeType !== Node.TEXT_NODE) {
+      console.warn('Previous sibling is not a text node.');
+      return;
+    }
+    const textContent = previousSibling.textContent?.trim() || '';
+    const words = textContent.split(' ');
+    const lastWord = words.pop();
+    const updatedTextContent = words.join(' ');
+    previousSibling.textContent = updatedTextContent + ' ';
+    const span = document.createElement('span');
+    span.className = 'text-nowrap';
+    span.innerHTML = `${lastWord} ${this.trigger.outerHTML}`;
+    this.trigger.parentNode?.replaceChild(span, this.trigger);
+    this.trigger = span.querySelector('[data-tooltip-trigger]') as HTMLElement;
+  }
+
+  private init(): void {
+    this.trigger = document.querySelector(
+      `[data-tooltip-trigger][aria-describedby=${this.element.getAttribute('id')}]`
+    ) as HTMLElement;
+    if (!this.trigger) {
+      console.warn(
+        `tooltip trigger element is not defined and the tooltip cannot be attached. Please provide an element with [aria-describedby=${this.element.getAttribute('id')}]`
+      );
+    }
+    if (this.element.hasAttribute('data-tooltip-keep-with-text')) {
+      this.wrapLastWordAndButton();
+    }
+    this.rootContainer = document.querySelector(this.config.rootContainerSelector);
+    if (this.rootContainer) {
+      this.rootContainer.appendChild(this.element);
+    } else {
+      console.warn(
+        'rootContainer element is not defined. Tooltips will be placed inside content which can affect positioning. Please provide rootContainer element (should be placed outside of main content, usually in end of <body /> tag)'
+      );
+    }
+    const customPlacement = this.element.getAttribute('data-tooltip-placement');
+    if (customPlacement) {
+      this.config.popperOptions.placement = customPlacement as any;
+    }
+    this.instance = createPopper(
+      this.trigger,
+      this.element,
+      this.config.popperOptions
+    );
+    this.transitioner = transitionHiddenElement({
+      element: this.element,
+      visibleClass: 'is-visible',
+    });
+    this.trigger.addEventListener('mouseenter', this.handleVisibility);
+    this.trigger.addEventListener('mouseleave', this.handleVisibility);
+    this.trigger.addEventListener('focus', this.handleVisibility);
+    this.trigger.addEventListener('blur', this.handleVisibility);
+  }
+
+  private handleVisibility(e: Event): void {
+    if (e.type === 'mouseenter' || e.type === 'focus') {
+      this.show();
+    }
+    if (e.type === 'blur') {
+      this.hide();
+    }
+    if (e.type === 'mouseleave') {
+      const shouldClose = this.shouldClose(e as MouseEvent);
+      if (shouldClose) {
+        this.hide();
+      }
+    }
+  }
+
+  private shouldClose(e: MouseEvent): boolean {
+    const mouseLeftTo = (e as any).relatedreference || (e as any).toElement || (e as any).relatedTarget;
+    const callback = (e2: MouseEvent) => {
+      const mouseLeftTo2 = (e2 as any).relatedreference || (e2 as any).toElement || (e2 as any).relatedTarget;
+      this.element.removeEventListener('mouseleave', callback);
+      if (!this.trigger.contains(mouseLeftTo2)) {
+        this.hide();
+      }
+    };
+    if (this.element.contains(mouseLeftTo)) {
+      this.element.addEventListener('mouseleave', callback);
+      return false;
+    }
+    return true;
+  }
+
+  private onKeydown(e: KeyboardEvent): void {
+    if (keys.ESC.includes(e.key)) {
+      this.hide();
+    }
+  }
+
+  public show(): void {
+    this.transitioner.show();
+    this.trigger.classList.add('is-active');
+    this.instance.forceUpdate();
+    document.addEventListener('keydown', this.onKeydown);
+  }
+
+  public hide(): void {
+    this.transitioner.hide();
+    this.trigger.classList.remove('is-active');
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+
+  public update(): void {
+    this.instance.forceUpdate();
+  }
+
+  public destroy(): void {
+    this.trigger.removeEventListener('mouseenter', this.handleVisibility);
+    this.trigger.removeEventListener('mouseleave', this.handleVisibility);
+    this.trigger.removeEventListener('focus', this.handleVisibility);
+    this.trigger.removeEventListener('blur', this.handleVisibility);
+    this.instance.destroy();
+    (this.element as any).ODS_Tooltip = null;
+    if (this.config.removeDialogOnDestroy) {
+      this.element.remove();
+    }
+  }
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import cx from "classnames";
+
+import TooltipStatic from "./Tooltip.static";
+import { useHydrationSafeId, useStatic } from "../../utils/hooks";
+
+const CLASS_ROOT = "tooltip";
+
+export type TooltipPlacement =
+  | "auto"
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "right"
+  | "right-start"
+  | "right-end"
+  | "left"
+  | "left-start"
+  | "left-end";
+
+export interface TooltipProps extends React.HTMLAttributes<HTMLElement> {
+  /** Tooltip dialog content */
+  dialog?: React.ReactNode;
+  /** Tooltip ID */
+  id?: string;
+  /** Preferred placement, if there is enough room. Defaults to top. */
+  placement?: TooltipPlacement;
+  /** Custom trigger renderer. Passes required aria attributes and children in an object as argument. */
+  renderTrigger?: (props: {
+    "data-tooltip-trigger": true;
+    "aria-describedby": string;
+    "aria-owns": string;
+    children: React.ReactNode;
+  }) => React.ReactNode;
+  /** Render dialog as */
+  tag?: "span"; // restrict tag to "span" for ref compatibility
+  /** Additional CSS classes */
+  className?: string;
+  children?: React.ReactNode;
+  colorScheme?: "dark" | "light"; // Optional color scheme prop
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  dialog,
+  id,
+  placement,
+  tag = "span", // default and only allowed tag is "span"
+  className,
+  renderTrigger,
+  children,
+  colorScheme,
+  ...other
+}) => {
+  const currentId = useHydrationSafeId(id);
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      "is-dark": colorScheme === "dark",
+      "is-light": colorScheme === "light",
+    },
+    className,
+  );
+  const Tag = tag;
+
+  const [dialogRef] = useStatic(TooltipStatic as any, {
+    removeDialogOnDestroy: true,
+  });
+
+  const triggerProps = {
+    "data-tooltip-trigger": true,
+    "aria-describedby": currentId,
+    "aria-owns": currentId,
+    children,
+  } as const;
+
+  return (
+    <>
+      {renderTrigger ? (
+        renderTrigger(triggerProps)
+      ) : (
+        <button type="button" {...triggerProps}>
+          {children}
+        </button>
+      )}
+      <Tag
+        id={currentId}
+        className={classes}
+        role="tooltip"
+        hidden
+        ref={dialogRef}
+        data-tooltip
+        data-tooltip-placement={placement}
+        {...other}
+      >
+        <Tag className="tooltip__arrow" />
+        <Tag className="tooltip__dialog">{dialog}</Tag>
+      </Tag>
+    </>
+  );
+};
+
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip };

package/src/components/Tooltip/index.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+
+export { Tooltip } from "./Tooltip";
+export { InfoTooltip } from "./InfoTooltip";

package/src/components/Tooltip/styles/config.scss

@@ -0,0 +1,59 @@
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$layout: (
+  z-index: 1000,
+  display: block,
+);
+
+$border: 2px solid var(--color-border-contrast);
+$icon-active-color: var(--color-icon-brand);
+
+$dialog: (
+  display: inline-block,
+  max-width: convert.to-rem(300px),
+  padding: space.get("medium"),
+  background-color: var(--color-surface-primary),
+  border: $border,
+  border-radius: convert.to-rem(5px),
+);
+
+/*
+ * Add space between trigger and tooltip.
+*/
+$offset: space.get("medium");
+
+$arrow-color: var(--color-surface-primary);
+
+/*
+ * Arrow size MUST be a rem-based value. It's used in Pythagoras theorem
+ * to find the hypotenuse size and sass math exponential functions do not handle units.
+ * Therefore, the rem unit is added manually at the end of the calculation.
+*/
+$arrow-size: convert.to-rem(14px);
+
+$direction-opposites: (
+  "top": "bottom",
+  "right": "left",
+  "bottom": "top",
+  "left": "right",
+);
+
+$direction-border-color-reset: (
+  "top": (
+    "top",
+    "left",
+  ),
+  "bottom": (
+    "bottom",
+    "right",
+  ),
+  "left": (
+    "bottom",
+    "left",
+  ),
+  "right": (
+    "top",
+    "right",
+  ),
+);

package/src/components/Tooltip/styles/mixins.scss

@@ -0,0 +1,94 @@
+@use 'sass:math' as math;
+@use '../../../styles/tokens/base';
+@use '../../../styles/tools/generate';
+@use '../../../styles/tools/convert';
+@use '../../../styles/tools/layout';
+@use './config';
+
+@mixin tooltip($config: config.$layout, $offset: config.$offset) {
+  position: absolute;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+  transform: translate3d(0, 0, 0);
+
+  @include generate.css-map($config);
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  @each $direction, $opposite in config.$direction-opposites {
+    &[data-popper-placement^='#{$direction}'] {
+      padding-#{$opposite}: $offset;
+    }
+  }
+}
+
+@mixin tooltip-visible {
+  opacity: 1;
+}
+
+@mixin dialog($config: config.$dialog) {
+  @include generate.css-map($config);
+  @include layout.reset-last-child-margin-bottom;
+}
+
+@mixin arrow(
+  $size: config.$arrow-size,
+  $color: config.$arrow-color,
+  $border: config.$border,
+  $offset: config.$offset
+) {
+  $size-unitless: convert.strip-units($size);
+  $hypotenuse: math.sqrt(
+      math.pow($size-unitless, 2) + math.pow($size-unitless, 2)
+    ) * 1rem;
+  $arrow-position: $offset - math.div($hypotenuse, 4);
+
+  display: block;
+
+  &::before {
+    content: '';
+    display: block;
+    width: $size;
+    height: $size;
+    background-color: $color;
+    background-clip: padding-box;
+    border: $border;
+    transform: rotate(45deg);
+  }
+
+  @each $direction, $opposite in config.$direction-opposites {
+    [data-popper-placement^='#{$direction}'] & {
+      #{$opposite}: $arrow-position;
+    }
+  }
+
+  @each $direction, $reset-directions in config.$direction-border-color-reset {
+    [data-popper-placement^='#{$direction}'] &:before {
+      @each $reset-direction in $reset-directions {
+        border-#{$reset-direction}-color: transparent;
+      }
+    }
+  }
+}
+
+@mixin info-tooltip {
+  position: relative;
+  display: inline-flex;
+  vertical-align: -0.1em;
+  @include base.focusring-round;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: convert.to-rem(-10px);
+    left: convert.to-rem(-10px);
+    width: calc(100% + #{convert.to-rem(20px)});
+    height: calc(100% + #{convert.to-rem(20px)});
+  }
+}
+
+@mixin info-tooltip-active-icon {
+  color: config.$icon-active-color;
+}

package/src/components/Tooltip/styles/style.scss

@@ -0,0 +1,30 @@
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .tooltip {
+    @include mixins.tooltip;
+
+    &.is-visible {
+      @include mixins.tooltip-visible;
+    }
+
+    &__dialog {
+      @include mixins.dialog;
+    }
+
+    &__arrow {
+      @include mixins.arrow;
+    }
+  }
+
+  .info-tooltip {
+    @include mixins.info-tooltip;
+
+    &.is-active &__icon,
+    &:focus &__icon {
+      @include mixins.info-tooltip-active-icon;
+    }
+  }
+}

package/src/components/Tooltip/tests/BaseWrapper.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+const Base = (props: React.HTMLAttributes<HTMLDivElement>) => (
+  <>
+    <div id="root" {...props} />
+    <div id="root-tooltips" />
+  </>
+);
+
+export default Base;

package/src/components/Tooltip/tests/InfoTooltip.unit.test.js

@@ -0,0 +1,98 @@
+import { render } from "@testing-library/react";
+
+import { InfoTooltip } from "../InfoTooltip";
+
+import Base from "./BaseWrapper";
+
+describe("rendering InfoTooltip", () => {
+  describe("initial state", () => {
+    let infoTooltip;
+
+    beforeEach(() => {
+      infoTooltip = render(
+        <Base>
+          <InfoTooltip />
+        </Base>,
+      );
+    });
+
+    it("renders button with class info-tooltip", () => {
+      const { container } = infoTooltip;
+
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button")).toHaveClass("info-tooltip");
+    });
+    it("renders button with type button", () => {
+      const { container } = infoTooltip;
+
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button").type).toBe("button");
+    });
+    it("renders button with generated aria-describeby", () => {
+      const { container } = infoTooltip;
+      const pattern = /id-\d+/;
+      expect(container.querySelector("button")).toBeInTheDocument();
+
+      expect(
+        pattern.test(
+          container.querySelector("button").getAttribute("aria-describedby"),
+        ),
+      ).toBeTruthy();
+    });
+    it("renders button with generated aria-owns", () => {
+      const { container } = infoTooltip;
+      const pattern = /id-\d+/;
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(
+        pattern.test(
+          container.querySelector("button").getAttribute("aria-owns"),
+        ),
+      ).toBeTruthy();
+    });
+    it("renders button with data-tooltip-trigger set to true", () => {
+      const { container } = infoTooltip;
+
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(
+        container.querySelector("button").getAttribute("data-tooltip-trigger"),
+      ).toBe("true");
+    });
+    it("renders text Info inside span with class sr-only", () => {
+      const { getByText } = infoTooltip;
+      expect(getByText("Info")).toBeInTheDocument();
+      expect(getByText("Info").tagName).toBe("SPAN");
+      expect(getByText("Info")).toHaveClass("sr-only");
+    });
+    it("svg element has classes info-tooltip__icon", () => {
+      const { container } = infoTooltip;
+      expect(container.querySelector("svg")).toHaveClass("info-tooltip__icon");
+    });
+    it("use element inside svg has /sprite.svg#assistance xlinkhref", () => {
+      const { container } = infoTooltip;
+      expect(
+        container
+          .querySelector("svg")
+          .querySelector("use")
+          .getAttribute("xlink:href"),
+      ).toBe("/sprite.svg#assistance");
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(
+        <Base>
+          <InfoTooltip>test</InfoTooltip>
+        </Base>,
+      );
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("passes other props", () => {
+      const { getByTestId } = render(
+        <Base>
+          <InfoTooltip data-testid="test-id" />
+        </Base>,
+      );
+      expect(getByTestId("test-id")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Tooltip/tests/Tooltip.conformance.test.js

@@ -0,0 +1,44 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Button } from "../../Button";
+import { Tooltip } from "../";
+
+const example = (
+  <>
+    <div id="root">
+      <Tooltip
+        id="tooltip-example"
+        dialog="But I do provide further explanation"
+      >
+        This is not clear enough
+      </Tooltip>
+
+      <Tooltip tag="div" dialog={<p>Love is on my left side</p>}>
+        This is not clear enough
+      </Tooltip>
+
+      <Tooltip
+        dialog="This explains a lot"
+        renderTrigger={(props) => <Button {...props} />}
+      >
+        You might not know what does this button do
+      </Tooltip>
+
+      {/* <InfoTooltip>Look here for more information</InfoTooltip> */}
+    </div>
+    <div id="root-tooltips" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: { "no-inline-style": "off", "attribute-boolean-style": "off" },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});