Implement Alert and Tooltip components

2026-02-02 09:24:03 -07:00
parent a94df9be37
commit abe4bff09e
17 changed files with 889 additions and 0 deletions
@@ -0,0 +1,85 @@
+import React from "react";
+import Tooltip from "../app/components/Tooltip";
+import Button from "../app/components/Button";
+
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: ["top", "bottom"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    text: {
+      control: { type: "text" },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div className="p-16 flex items-center justify-center min-h-[200px]">
+    <Tooltip {...args}>
+      <Button variant="default" size="medium">
+        Hover me
+      </Button>
+    </Tooltip>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "Tooltip text goes here",
+  position: "top",
+  disabled: false,
+};
+
+export const Top = Template.bind({});
+Top.args = {
+  text: "Tooltip positioned at top",
+  position: "top",
+};
+
+export const Bottom = Template.bind({});
+Bottom.args = {
+  text: "Tooltip positioned at bottom",
+  position: "bottom",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  text: "This tooltip is disabled",
+  disabled: true,
+};
+
+export const LongText = Template.bind({});
+LongText.args = {
+  text: "This is a longer tooltip text that demonstrates how the component handles multiple words and extended content",
+  position: "top",
+};
+
+export const WithIcon = () => (
+  <div className="p-16 flex items-center justify-center min-h-[200px]">
+    <Tooltip text="Tooltip with icon button" position="top">
+      <button className="p-2 rounded-full hover:bg-[var(--color-surface-default-tertiary)] transition-colors">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 9V11M10 15H10.01M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </Tooltip>
+  </div>
+);