Tooltip docs + preview (#175)

* Tooltip docs + preview * Trigger PR preview
stellar · Sep 29, 2023 · f49c4dd · f49c4dd
1 parent cacfe67
commit f49c4dd
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 3 deletions.
diff --git a/@stellar/design-system-website/docs/components/accents/tooltip.mdx b/@stellar/design-system-website/docs/components/accents/tooltip.mdx
@@ -0,0 +1,21 @@
+---
+slug: /tooltip
+---
+
+# Tooltip
+
+<ComponentDescription componentName="Tooltip" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Tooltip">
+  <Tooltip isVisible isContrast triggerEl={<>Tooltip trigger</>}>
+    Lorem ipsum dolor sit
+  </Tooltip>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Tooltip" />
diff --git a/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx b/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx
@@ -0,0 +1,94 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const tooltipPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "placement",
+      options: [
+        {
+          value: "",
+          label: "Placement",
+        },
+        {
+          value: "bottom",
+          label: "Bottom",
+        },
+        {
+          value: "bottom-start",
+          label: "Bottom start",
+        },
+        {
+          value: "bottom-end",
+          label: "Bottom end",
+        },
+        {
+          value: "left",
+          label: "Left",
+        },
+        {
+          value: "left-start",
+          label: "Left start",
+        },
+        {
+          value: "left-end",
+          label: "Left end",
+        },
+        {
+          value: "right",
+          label: "Right",
+        },
+        {
+          value: "right-start",
+          label: "Right start",
+        },
+        {
+          value: "right-end",
+          label: "Right end",
+        },
+        {
+          value: "top",
+          label: "Top",
+        },
+        {
+          value: "top-start",
+          label: "Top start",
+        },
+        {
+          value: "top-end",
+          label: "Top end",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "isVisible",
+      customValue: false,
+      options: [
+        {
+          value: "",
+          label: "Visible",
+        },
+        {
+          value: "hidden",
+          label: "Hidden",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "isContrast",
+      customValue: false,
+      options: [
+        {
+          value: "",
+          label: "Contrast",
+        },
+        {
+          value: "noContrast",
+          label: "No contrast",
+        },
+      ],
+    },
+  ],
+};
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
@@ -20,6 +20,7 @@ import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
+import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview";
 
 // =============================================================================
 // Component previews
@@ -39,6 +40,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Profile: profilePreview,
   ProjectLogo: projectLogoPreview,
   Title: titlePreview,
+  Tooltip: tooltipPreview,
 };
 
 type Theme = "sds-theme-light" | "sds-theme-dark";

diff --git a/@stellar/design-system/src/components/Tooltip/index.tsx b/@stellar/design-system/src/components/Tooltip/index.tsx
@@ -1,14 +1,35 @@
-import { Floater, FloaterPlacement } from "../Floater";
+import { Floater } from "../Floater";
 import "./styles.scss";
 
-interface TooltipProps {
+/** */
+export interface TooltipProps {
+  /** Element that shows/hides tooltip */
   triggerEl: JSX.Element;
+  /** Content of the tooltip */
   children: React.ReactNode;
-  placement?: FloaterPlacement;
+  /** Placement of tooltip relative to the trigger element @defaultValue `right` */
+  placement?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "right-start"
+    | "right-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end";
+  /** Manually show/hide tooltip */
   isVisible?: boolean;
+  /** Use contrast theme color @defaultValue `true` */
   isContrast?: boolean;
 }
 
+/**
+ * Tooltip is used to display info in a bubble. We are using [Floating UI](https://floating-ui.com/) for tooltip positioning.
+ */
 export const Tooltip: React.FC<TooltipProps> = ({
   triggerEl,
   children,