Add Tooltip + Add optional Table/cell title (TF-125)

Author: alotropico

src/Icon/index.tsx

@@ -25,6 +25,7 @@ import { ReactComponent as EyeOpen } from "../assets/icons/eye-open.svg";
 import { ReactComponent as File } from "../assets/icons/file.svg";
 import { ReactComponent as Gear } from "../assets/icons/gear.svg";
 import { ReactComponent as Help } from "../assets/icons/help.svg";
+import { ReactComponent as Info } from "../assets/icons/info.svg";
 import { ReactComponent as Insert } from "../assets/icons/insert.svg";
 import { ReactComponent as Link } from "../assets/icons/link.svg";
 import { ReactComponent as LogOut } from "../assets/icons/logOut.svg";
@@ -81,6 +82,7 @@ const iconMap: IconMap = {
     link: Link,
     copy: Copy,
     file: File,
+    info: Info,
 };
 
 export default function Icon({ icon, className, size, ...props }: IconProps) {

src/Icon/types/index.ts

@@ -37,7 +37,8 @@ export type IconType =
     | "update"
     | "delete"
     | "copy"
-    | "file";
+    | "file"
+    | "info";
 
 export type IconProps = React.SVGProps<SVGSVGElement> & {
     icon?: IconType;
@@ -88,6 +89,7 @@ const iconsArray = [
     "delete",
     "copy",
     "file",
+    "info",
 ].sort() as IconType[];
 
 export { iconsArray };

src/Table/index.tsx

@@ -89,6 +89,7 @@ const Row = ({ datum }: RowProps) => {
                     // If it is an object with the 'content' property, use that as content (can be JSX or a primitive)
                     // Another 'raw' property with a primitive value is used to sort and search
                     const content = (datum[k] as any)?.content || datum[k];
+                    const tooltip = (datum[k] as any)?.tooltip;
 
                     const wrappedContent = content && typeof content === "string" ? <span>{content}</span> : content;
 
@@ -101,7 +102,7 @@ const Row = ({ datum }: RowProps) => {
                     const cellStyle = { width: columnWidths?.[i] || "auto", textAlign: columnAlignments?.[i] || "left" };
 
                     return (
-                        <Cell key={k} cellClass={cellClass} cellStyle={cellStyle}>
+                        <Cell key={k} cellClass={cellClass} cellStyle={cellStyle} tooltip={tooltip || ""}>
                             {wrappedContent}
                         </Cell>
                     );
@@ -110,12 +111,13 @@ const Row = ({ datum }: RowProps) => {
     );
 };
 
-const Cell = ({ children, cellClass, cellStyle }: CellProps) => {
+const Cell = ({ children, cellClass, cellStyle, tooltip }: CellProps) => {
     const { style } = useContext(TableContext);
     const cellProps = {
         className: classes([style?.td, cellClass, !children && style?.empty]),
         role: "cell",
         style: cellStyle,
+        ...(tooltip ? { title: tooltip } : {}),
     };
     return <div {...cellProps}>{children}</div>;
 };

src/Table/storyData.ts

@@ -7,7 +7,13 @@ const storyData = [
     },
     {
         id: 2,
-        Name: "Jane Smith",
+        Name: {
+            raw: "Huge line",
+            content:
+                "Huge line with overflow. Lorem ipsum dolor sit amet. Aequam memento rebus in arduis servare mentem. Ubi fini saeculi fortunae comutatione supersunt in elipse est.",
+            tooltip:
+                "Huge line with overflow. Lorem ipsum dolor sit amet. Aequam memento rebus in arduis servare mentem. Ubi fini saeculi fortunae comutatione supersunt in elipse est.",
+        },
         Age: 30,
         Email: "jane.smith@example.com",
     },

src/Table/types/index.ts

@@ -7,6 +7,7 @@ type Primitive = string | number | boolean | null | undefined;
 export type TableComposite = {
     raw: Primitive;
     content: Primitive | React.ReactElement;
+    tooltip?: string;
 };
 
 export type TableValue = Primitive | TableComposite;
@@ -40,4 +41,5 @@ export type RowProps = {
 export type CellProps = PropsWithChildren<{
     cellClass?: string;
     cellStyle: Style;
+    tooltip?: string;
 }>;