Added missing files

Author: alotropico

src/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,40 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import TooltipComponent from ".";
+import { TooltipProps } from "./types";
+
+export default {
+  title: "User Interface/Tooltip",
+  component: TooltipComponent,
+} as ComponentMeta<typeof TooltipComponent>;
+
+export const Tooltip: any = (args: TooltipProps<"span">) => {
+  return <TooltipComponent {...args} />;
+};
+
+Tooltip.args = {
+  children: "Tooltip",
+  title: "Title text",
+};
+
+export const TwoLines: any = (args: TooltipProps<"span">) => {
+  return <TooltipComponent {...args} />;
+};
+
+TwoLines.args = {
+  children: "Tooltip",
+  title: (
+    <div>
+      <span>Lorem ipsum dolor sit amet, consectetur.</span> <span>Ut ornare nunc tortor.</span>
+    </div>
+  ),
+};
+
+export const LongText: any = (args: TooltipProps<"span">) => {
+  return <TooltipComponent {...args} />;
+};
+
+LongText.args = {
+  children: "Tooltip",
+  title:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare nunc tortor, id eleifend metus elementum in. Cras eget dui at ligula bibendum convallis et id est. Donec consequat mauris quis orci hendrerit interdum. Cras nec varius orci. Nunc mollis quam ac varius vulputate. Morbi cursus consectetur nulla, eget varius augue lacinia at. Mauris varius fermentum mauris ut dictum. In iaculis efficitur congue. Quisque enim diam, aliquam vitae nibh ut, euismod luctus est. Aenean rutrum est pulvinar ligula dapibus lacinia. Sed et lacus augue. Curabitur non ultrices mi.",
+};

src/Tooltip/index.tsx

@@ -0,0 +1,26 @@
+import classes from "../utils/classes";
+import getStringLengthOfChildren from "../utils/getStringLengthOfChildren";
+import { AsMap, TooltipProps } from "./types";
+import style from "./style/Tooltip.module.scss";
+import Icon from "../Icon";
+
+export default function Tooltip<T extends keyof AsMap>({ as, className, title, children, ...props }: TooltipProps<T>) {
+  const Tag: any = as || "span";
+
+  console.log(title);
+
+  const length = getStringLengthOfChildren(title);
+
+  console.log(length);
+  const wrapperClasses = classes([style.tooltip, className, length > 30 && style.multiline]);
+
+  return (
+    <Tag {...props} className={wrapperClasses}>
+      {children}
+      <span className={style.icon}>
+        <Icon icon="info" />
+        <span className={style.message}>{title}</span>
+      </span>
+    </Tag>
+  );
+}

src/Tooltip/style/Tooltip.module.scss

@@ -0,0 +1,64 @@
+$side: var(--m-xxxs);
+$height: calc($side * 1.732);
+
+.tooltip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--m-xs);
+
+  .icon {
+    position: relative;
+
+    svg {
+      display: block;
+      cursor: pointer;
+    }
+
+    &:hover,
+    &:active {
+      .message {
+        display: block;
+      }
+    }
+  }
+
+  .message {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--color-background-modal);
+    z-index: 2;
+    padding: var(--m-xxs) var(--m-xs);
+    border-radius: var(--border-radius);
+    display: none;
+    margin-top: var(--m-xs);
+    box-shadow: 0 0 0 1px var(--color-border), 0 5px 15px rgba(0, 0, 0, 0.2);
+    white-space: nowrap;
+
+    &::after,
+    &::before {
+      position: absolute;
+      top: calc($height * -1);
+      left: 50%;
+      border-left: $side solid transparent;
+      border-right: $side solid transparent;
+      border-bottom: $height solid var(--color-border);
+      content: "";
+      font-size: 0;
+      line-height: 0;
+      width: 0;
+      transform: translateX(-50%);
+    }
+
+    &::after {
+      top: calc($height * -1 + 2px);
+      border-bottom: $height solid var(--color-background-modal);
+    }
+  }
+
+  &.multiline .message {
+    width: 260px;
+    white-space: normal;
+  }
+}

src/Tooltip/types/index.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export type AsMap = {
+  div: React.HTMLProps<HTMLDivElement>;
+  span: React.HTMLProps<HTMLSpanElement>;
+  p: React.HTMLProps<HTMLParagraphElement>;
+};
+
+export type TooltipProps<T extends keyof AsMap = "span"> = {
+  as?: T;
+  title?: string | ReactNode;
+} & AsMap[T];

src/assets/icons/info.svg

@@ -0,0 +1,13 @@
+import { isValidElement } from "react";
+
+export default function getStringLengthOfChildren(children: React.ReactNode): number {
+  if (typeof children === "string") return children.length;
+
+  if (Array.isArray(children)) return children.reduce((sum, child) => sum + getStringLengthOfChildren(child), 0);
+
+  // If child is a React element, process its children recursively
+  if (isValidElement(children)) return getStringLengthOfChildren(children.props.children);
+
+  // If none of the above, return 0
+  return 0;
+}