feat: create data dictionary tooltip component (#317) (#318)

* feat: create data dictionary tooltip component (#317)

* refactor: updated tooltip type (#317)

---------

Co-authored-by: Fran McDade <franmcdade@Frans-MacBook-Pro.local>

src/components/DataDictionary/components/Tooltip/components/Title/constants.ts

@@ -0,0 +1,11 @@
+import { StackProps, TypographyProps } from "@mui/material";
+
+export const STACK_PROPS: StackProps = {
+  spacing: 2,
+  useFlexGap: true,
+};
+
+export const TYPOGRAPHY_PROPS: TypographyProps = {
+  color: "ink.light",
+  component: "div",
+};

src/components/DataDictionary/components/Tooltip/components/Title/title.tsx

@@ -0,0 +1,19 @@
+import { Stack, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../../../../theme/common/typography";
+import { BaseComponentProps } from "../../../../../types";
+import { STACK_PROPS, TYPOGRAPHY_PROPS } from "./constants";
+import { TitleProps } from "./types";
+
+export const Title = ({
+  className,
+  description,
+  title,
+}: BaseComponentProps & Required<TitleProps>): JSX.Element => {
+  return (
+    <Stack {...STACK_PROPS} className={className}>
+      <Typography variant={TEXT_BODY_LARGE_500}>{title}</Typography>
+      <Typography {...TYPOGRAPHY_PROPS}>{description}</Typography>
+    </Stack>
+  );
+};

src/components/DataDictionary/components/Tooltip/components/Title/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export interface TitleProps {
+  description?: ReactNode;
+  title: ReactNode;
+}

src/components/DataDictionary/components/Tooltip/constants.ts

@@ -0,0 +1,26 @@
+import { TooltipProps } from "@mui/material";
+import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../theme/common/typography";
+
+export const TOOLTIP_PROPS: Omit<TooltipProps, "children" | "title"> = {
+  arrow: true,
+  disableInteractive: true,
+  enterNextDelay: 250,
+  slotProps: {
+    arrow: { sx: (theme) => ({ color: theme.palette.common.white }) },
+    popper: {
+      modifiers: [
+        { name: "offset", options: { offset: [0, 2] } },
+        { name: "preventOverflow", options: { padding: 8 } },
+      ],
+    },
+    tooltip: {
+      sx: (theme) => ({
+        ...theme.typography[TEXT_BODY_SMALL_400_2_LINES],
+        backgroundColor: theme.palette.common.white,
+        borderRadius: 2,
+        color: theme.palette.ink.main,
+        padding: 4,
+      }),
+    },
+  },
+};

src/components/DataDictionary/components/Tooltip/tooltip.tsx

@@ -0,0 +1,26 @@
+import { Tooltip as MTooltip } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../../types";
+import { Title } from "./components/Title/title";
+import { TitleProps } from "./components/Title/types";
+import { TOOLTIP_PROPS } from "./constants";
+import { TooltipProps } from "./types";
+
+export const Tooltip = ({
+  children,
+  className,
+  description,
+  title,
+  ...props
+}: BaseComponentProps & TitleProps & TooltipProps): JSX.Element => {
+  return (
+    <MTooltip
+      {...TOOLTIP_PROPS}
+      className={className}
+      title={description && <Title description={description} title={title} />}
+      {...props}
+    >
+      <span>{children}</span>
+    </MTooltip>
+  );
+};

src/components/DataDictionary/components/Tooltip/types.ts

@@ -0,0 +1,10 @@
+import { TooltipProps as MTooltipProps } from "@mui/material";
+import { ReactNode } from "react";
+
+// `children` is defined as a `ReactNode` instead of an `Element`
+// because the Data Dictionary `Tooltip` component wraps its child in a `span` element.
+// This ensures that `children` can hold a ref properly (see https://mui.com/material-ui/api/tooltip/#props).
+
+export type TooltipProps = Omit<MTooltipProps, "children"> & {
+  children: ReactNode;
+};