@orangesk/orange-design-system 2.0.0-beta.9 → 2.0.0

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

@@ -1,78 +1,91 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/convert";
-@use "./config";
 
 @mixin tile-base {
   display: flex;
   position: relative;
   overflow: hidden;
   width: 100%;
-  border-radius: convert.to-rem(10px);
-}
-
-@mixin tile-image-aspect {
-  aspect-ratio: 310 / 466 !important;
+  border-radius: convert.to-rem(5px);
+  border: 1px solid var(--color-border-subtle);
+  background-color: var(--color-fill-primary);
+  color: var(--color-text-default);
+  word-break: break-word;
 }
 
 @mixin tile-body {
   flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
+  gap: space.get("medium");
+  padding: space.get("medium");
   z-index: 1;
+
   *:last-child {
     margin-bottom: 0;
   }
-  @each $breakpoint, $space in config.$spacing {
-    @include breakpoint.get($breakpoint) {
-      padding: $space;
-    }
+
+  > .icon,
+  > svg {
+    width: convert.to-rem(24px);
+    height: convert.to-rem(24px);
   }
-}
 
-@mixin tile-body-space-small {
-  padding: space.get("medium");
-}
+  @include breakpoint.get("md") {
+    flex-direction: column;
+    padding: space.get("large");
 
-@mixin tile-bg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  object-fit: cover;
-  object-position: center center;
-  height: 100%;
-  margin-bottom: 0 !important;
+    > .icon,
+    > svg {
+      width: convert.to-rem(32px);
+      height: convert.to-rem(32px);
+    }
+  }
 }
 
-@mixin tile-image-gradient {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(0, 0, 0, 0.75) 40%,
-    rgba(0, 0, 0, 0) 70%
-  );
-  color: #fff;
-}
+@mixin tile-body-compact {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: space.get("xsmall");
+  padding: convert.to-rem(15px);
+  flex-shrink: 0;
+  text-wrap: nowrap;
 
-@mixin tile-image-gradient-end {
-  background: linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(0, 0, 0, 0.75) 40%,
-    rgba(0, 0, 0, 0) 70%
-  );
+  @include breakpoint.get("md") {
+    flex-direction: column;
+    padding: space.get("medium");
+  }
 }
 
 @mixin tile-action {
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  order: 1;
+  justify-content: space-between;
+  gap: convert.to-rem(15px);
+  padding: space.get("large") space.get("medium");
+
+  @include breakpoint.get("sm") {
+    gap: space.get("medium");
+    padding: space.get("large");
+  }
+}
+
+@mixin tile-action-shell {
+  background-color: transparent;
+  color: var(--color-text-inverse);
+  border-color: var(--color-border-strong);
 }
 
 @mixin tile-action-icon {
-  order: 2;
-  margin-left: space.get("small");
+  flex-shrink: 0;
+  width: convert.to-rem(24px);
+  height: convert.to-rem(24px);
+
+  @include breakpoint.get("sm") {
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
+  }
 }

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

@@ -1,52 +1,24 @@
-@use "../../../styles/tools/generate";
-@use "./config";
 @use "./mixins";
 
 @layer components {
   .tile {
     @include mixins.tile-base;
 
-    &--image {
-      @include mixins.tile-image-aspect;
-    }
-
-    @include generate.variants(config.$colors);
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border: 1px solid var(--color-border-subtle);
-      border-radius: inherit;
-      pointer-events: none;
-    }
-
     &__body {
       @include mixins.tile-body;
     }
 
-    &__body--space-small {
-      @include mixins.tile-body-space-small;
-    }
-
-    &__bg {
-      @include mixins.tile-bg;
-    }
-
-    &--image .tile__body {
-      @include mixins.tile-image-gradient;
-      &.justify-content-end {
-        @include mixins.tile-image-gradient-end;
-      }
+    &--compact .tile__body {
+      @include mixins.tile-body-compact;
     }
 
     &--action {
+      @include mixins.tile-action-shell;
+
       .tile__body {
         @include mixins.tile-action;
       }
+
       .icon {
         @include mixins.tile-action-icon;
       }

package/src/components/Tile/tests/{Tile.conformance.test.js → Tile.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { Tile } from "../";
 

package/src/components/Tile/tests/Tile.unit.test.jsx

@@ -0,0 +1,64 @@
+import { render } from "@testing-library/react";
+
+import { Tile } from "../Tile";
+
+describe("rendering Tile", () => {
+  describe("initial state", () => {
+    it("renders div with class tile", () => {
+      const { getByTestId } = render(<Tile data-testid="test-id" />);
+      expect(getByTestId("test-id").tagName).toBe("DIV");
+      expect(getByTestId("test-id")).toHaveClass("tile");
+      expect(getByTestId("test-id")).not.toHaveClass("surface-primary");
+    });
+    it("renders child div with class tile__body", () => {
+      const { getByTestId } = render(<Tile data-testid="test-id" />);
+      expect(getByTestId("test-id").children.length).toBe(1);
+      expect(getByTestId("test-id").children[0].tagName).toBe("DIV");
+      expect(getByTestId("test-id").children[0]).toHaveClass("tile__body");
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<Tile>test</Tile>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Tile data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("tile");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("applies hAlign and vAlign classes to body", () => {
+      const { getByTestId } = render(
+        <Tile data-testid="test-id" hAlign="center" vAlign="space-between" />,
+      );
+      const body = getByTestId("test-id").querySelector(".tile__body");
+      expect(body).toHaveClass("align-items-center");
+      expect(body).toHaveClass("justify-content-space-between");
+    });
+    it("applies compact wrapper class when variant is compact", () => {
+      const { getByTestId } = render(
+        <Tile data-testid="test-id" variant="compact" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("tile--compact");
+      const body = getByTestId("test-id").querySelector(".tile__body");
+      expect(body).not.toHaveClass("tile__body--compact");
+    });
+    it("applies variant class to wrapper when variant is set", () => {
+      const { getByTestId } = render(
+        <Tile data-testid="test-id" variant="action" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("tile--action");
+    });
+    it("renders Icon when variant is 'action'", () => {
+      const { getByTestId } = render(
+        <Tile data-testid="test-id" variant="action" />,
+      );
+      const body = getByTestId("test-id").querySelector(".tile__body");
+      expect(body.querySelector("svg")).toBeInTheDocument();
+      expect(body.lastElementChild.tagName).toBe("svg");
+      expect(body).not.toHaveClass("tile__body--action");
+    });
+  });
+});

package/src/components/Tooltip/InfoTooltip.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Icon } from "../Icon";
 import { Tooltip, TooltipProps } from "./Tooltip";
@@ -26,11 +26,7 @@ const InfoTooltip: React.FC<InfoTooltipProps> = ({
     )}
     {...other}
   >
-    <Icon
-      name="assistance"
-      color="info"
-      className={cx(`${CLASS_ROOT}__icon`, className)}
-    />
+    <Icon name="assistance" className={cx(`${CLASS_ROOT}__icon`, className)} />
     <span className="sr-only">Info</span>
   </Tooltip>
 );

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

@@ -1,7 +1,11 @@
-import { createPopper, Instance as PopperInstance, Options as PopperOptions } from '@popperjs/core';
-import { transitionHiddenElement } from '@cloudfour/transition-hidden-element';
+import { transitionHiddenElement } from "@cloudfour/transition-hidden-element";
+import {
+  createPopper,
+  Instance as PopperInstance,
+  Options as PopperOptions,
+} from "@popperjs/core";
 
-import { keys } from '../../utils';
+import { keys } from "../../utils";
 
 export interface TooltipConfig {
   rootContainerSelector: string;
@@ -10,39 +14,39 @@ export interface TooltipConfig {
 }
 
 export const defaultConfig: TooltipConfig = {
-  rootContainerSelector: '#root-tooltips',
+  rootContainerSelector: "#root-tooltips",
   removeDialogOnDestroy: false,
   popperOptions: {
-    placement: 'bottom',
-    strategy: 'absolute',
+    placement: "bottom",
+    strategy: "absolute",
     modifiers: [
       {
-        name: 'arrow',
+        name: "arrow",
         options: {
-          element: '.tooltip__arrow',
+          element: ".tooltip__arrow",
           padding: 10,
         },
       },
       {
-        name: 'eventListeners',
+        name: "eventListeners",
         options: {
           scroll: false,
           resize: false,
         },
       },
       {
-        name: 'flip',
+        name: "flip",
         options: {
-          fallbackPlacements: ['right', 'top', 'auto'],
+          fallbackPlacements: ["right", "top", "auto"],
         },
       },
       {
-        name: 'offset',
+        name: "offset",
         options: {
           offset: ({ placement }: { placement: string }) => {
-            if (placement.includes('start')) {
+            if (placement.includes("start")) {
               return [-10, 0];
-            } else if (placement.includes('end')) {
+            } else if (placement.includes("end")) {
               return [10, 0];
             }
             return [0, 0];
@@ -60,6 +64,8 @@ export default class Tooltip {
   public trigger!: HTMLElement;
   public rootContainer?: HTMLElement | null;
   public transitioner: any;
+  private isOpen = false;
+  private ignoreNextBlur = false;
 
   constructor(element: HTMLElement, config?: Partial<TooltipConfig>) {
     this.element = element;
@@ -75,6 +81,8 @@ export default class Tooltip {
 
     this.handleVisibility = this.handleVisibility.bind(this);
     this.onKeydown = this.onKeydown.bind(this);
+    this.onDialogMouseDown = this.onDialogMouseDown.bind(this);
+    this.onDocumentClick = this.onDocumentClick.bind(this);
 
     (this.element as any).ODS_Tooltip = this;
 
@@ -88,111 +96,136 @@ export default class Tooltip {
   }
 
   wrapLastWordAndButton(): void {
-    if (!this.element.hasAttribute('data-tooltip-keep-with-text')) return;
+    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.');
+      console.warn("Previous sibling is not a text node.");
       return;
     }
-    const textContent = previousSibling.textContent?.trim() || '';
-    const words = textContent.split(' ');
+    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';
+    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;
+    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')}]`
+      `[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')}]`
+        `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')) {
+    if (this.element.hasAttribute("data-tooltip-keep-with-text")) {
       this.wrapLastWordAndButton();
     }
-    this.rootContainer = document.querySelector(this.config.rootContainerSelector);
+    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)'
+        "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');
+    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.config.popperOptions,
     );
     this.transitioner = transitionHiddenElement({
       element: this.element,
-      visibleClass: 'is-visible',
+      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);
+    this.element.addEventListener("mousedown", this.onDialogMouseDown);
+    this.trigger.addEventListener("click", this.handleVisibility);
+    this.trigger.addEventListener("keydown", 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();
+  private onDialogMouseDown(): void {
+    this.ignoreNextBlur = true;
+  }
+
+  private onDocumentClick(e: MouseEvent): void {
+    const target = e.target as Node | null;
+
+    if (!target) {
+      return;
     }
-    if (e.type === 'mouseleave') {
-      const shouldClose = this.shouldClose(e as MouseEvent);
-      if (shouldClose) {
-        this.hide();
-      }
+
+    if (this.trigger.contains(target) || this.element.contains(target)) {
+      return;
     }
+
+    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();
+  private handleVisibility(e: Event): void {
+    if (e.type === "click") {
+      this.toggle();
+      return;
+    }
+    if (e.type === "keydown") {
+      this.onKeydown(e as KeyboardEvent);
+      return;
+    }
+    if (e.type === "blur") {
+      if (this.ignoreNextBlur) {
+        this.ignoreNextBlur = false;
+        return;
       }
-    };
-    if (this.element.contains(mouseLeftTo)) {
-      this.element.addEventListener('mouseleave', callback);
-      return false;
+      this.hide();
     }
-    return true;
   }
 
   private onKeydown(e: KeyboardEvent): void {
+    if (
+      (e.key === "Enter" || e.key === " ") &&
+      this.trigger.tagName !== "BUTTON"
+    ) {
+      e.preventDefault();
+      this.toggle();
+      return;
+    }
     if (keys.ESC.includes(e.key)) {
       this.hide();
     }
   }
 
+  private toggle(): void {
+    if (this.isOpen) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
   public show(): void {
     this.transitioner.show();
-    this.trigger.classList.add('is-active');
+    this.trigger.classList.add("is-active");
+    this.isOpen = true;
     this.instance.forceUpdate();
-    document.addEventListener('keydown', this.onKeydown);
+    document.addEventListener("click", this.onDocumentClick);
   }
 
   public hide(): void {
     this.transitioner.hide();
-    this.trigger.classList.remove('is-active');
-    document.removeEventListener('keydown', this.onKeydown);
+    this.trigger.classList.remove("is-active");
+    this.isOpen = false;
+    document.removeEventListener("click", this.onDocumentClick);
   }
 
   public update(): void {
@@ -200,10 +233,11 @@ export default class Tooltip {
   }
 
   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.element.removeEventListener("mousedown", this.onDialogMouseDown);
+    this.trigger.removeEventListener("click", this.handleVisibility);
+    this.trigger.removeEventListener("keydown", this.handleVisibility);
+    this.trigger.removeEventListener("blur", this.handleVisibility);
+    document.removeEventListener("click", this.onDocumentClick);
     this.instance.destroy();
     (this.element as any).ODS_Tooltip = null;
     if (this.config.removeDialogOnDestroy) {

package/src/components/Tooltip/Tooltip.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
-
-import TooltipStatic from "./Tooltip.static";
+import React from "react";
 import { useHydrationSafeId, useStatic } from "../../utils/hooks";
+import TooltipStatic from "./Tooltip.static";
 
 const CLASS_ROOT = "tooltip";
 
@@ -42,7 +41,6 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLElement> {
   /** Additional CSS classes */
   className?: string;
   children?: React.ReactNode;
-  colorScheme?: "dark" | "light"; // Optional color scheme prop
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
@@ -53,18 +51,10 @@ const Tooltip: React.FC<TooltipProps> = ({
   className,
   renderTrigger,
   children,
-  colorScheme,
   ...other
 }) => {
   const currentId = useHydrationSafeId(id);
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
   const Tag = tag;
 
   const [dialogRef] = useStatic(TooltipStatic as any, {

package/src/components/Tooltip/index.ts

@@ -1,2 +1,2 @@
-export { Tooltip } from "./Tooltip";
 export { InfoTooltip } from "./InfoTooltip";
+export { Tooltip } from "./Tooltip";