@yuno-payments/dashboard-design-system 0.0.1

package/src/components/molecules/tooltip/tooltip.stories.tsx

@@ -0,0 +1,363 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Tooltip } from './index'
+import { Button } from '../../atoms/button'
+
+const meta = {
+  title: 'Molecules/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A tooltip component that displays additional information on hover or click.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title content of the tooltip',
+    },
+    description: {
+      control: 'text',
+      description: 'The description content of the tooltip',
+    },
+    showOn: {
+      control: 'select',
+      options: ['hover', 'click'],
+      description: 'How the tooltip is triggered',
+    },
+    side: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'The side where the tooltip appears',
+    },
+    isAvailable: {
+      control: 'boolean',
+      description: 'Whether the tooltip is available/enabled',
+    },
+    isRemovableWithX: {
+      control: 'boolean',
+      description: 'Whether to show a close button',
+    },
+    maxWidth: {
+      control: 'number',
+      description: 'Maximum width of the tooltip in pixels',
+    },
+    zIndex: {
+      control: 'number',
+      description: 'Z-index of the tooltip',
+    },
+    children: {
+      control: 'text',
+      description: 'The trigger element',
+    },
+  },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'This is a tooltip',
+    children: 'Hover me',
+  },
+}
+
+export const WithDescription: Story = {
+  args: {
+    title: 'Tooltip Title',
+    description: 'This is a longer description that provides more context about the element.',
+    children: 'Hover me',
+  },
+}
+
+export const DescriptionOnly: Story = {
+  args: {
+    description: 'This tooltip only has a description without a title.',
+    children: 'Hover me',
+  },
+}
+
+export const ClickTrigger: Story = {
+  args: {
+    title: 'Click Tooltip',
+    description: 'This tooltip appears on click instead of hover.',
+    showOn: 'click',
+    children: 'Click me',
+  },
+}
+
+export const WithCloseButton: Story = {
+  args: {
+    title: 'Removable Tooltip',
+    description: 'This tooltip has a close button.',
+    isRemovableWithX: true,
+    children: 'Hover me',
+  },
+}
+
+export const ClickWithCloseButton: Story = {
+  args: {
+    title: 'Click & Close',
+    description: 'This tooltip appears on click and has a close button.',
+    showOn: 'click',
+    isRemovableWithX: true,
+    children: 'Click me',
+  },
+}
+
+export const Positioning: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-8 p-8">
+      <div></div>
+      <Tooltip title="Top tooltip" side="top">
+        <Button variant="outline">Top</Button>
+      </Tooltip>
+      <div></div>
+      
+      <Tooltip title="Left tooltip" side="left">
+        <Button variant="outline">Left</Button>
+      </Tooltip>
+      <div></div>
+      <Tooltip title="Right tooltip" side="right">
+        <Button variant="outline">Right</Button>
+      </Tooltip>
+      
+      <div></div>
+      <Tooltip title="Bottom tooltip" side="bottom">
+        <Button variant="outline">Bottom</Button>
+      </Tooltip>
+      <div></div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tooltips can be positioned on different sides of the trigger element.',
+      },
+    },
+  },
+}
+
+export const CustomWidth: Story = {
+  args: {
+    title: 'Custom Width Tooltip',
+    description: 'This tooltip has a custom maximum width of 400 pixels, which allows for longer content to be displayed without wrapping too early.',
+    maxWidth: 400,
+    children: 'Hover me',
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    title: 'This is a very long title that will be truncated automatically when it exceeds the maximum length limit of 85 characters',
+    description: 'The title above should be truncated with ellipsis.',
+    children: 'Hover me',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    title: 'This tooltip is disabled',
+    isAvailable: false,
+    children: 'Hover me (disabled)',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When isAvailable is false, the tooltip will not appear.',
+      },
+    },
+  },
+}
+
+export const WithButton: Story = {
+  render: () => (
+    <Tooltip title="Button Tooltip" description="This tooltip is attached to a button component.">
+      <Button>Button with Tooltip</Button>
+    </Tooltip>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip title="Hover Tooltip" description="This appears on hover">
+        <Button variant="outline">Hover</Button>
+      </Tooltip>
+      
+      <Tooltip title="Click Tooltip" description="This appears on click" showOn="click">
+        <Button variant="outline">Click</Button>
+      </Tooltip>
+      
+      <Tooltip 
+        title="Removable Tooltip" 
+        description="This has a close button" 
+        isRemovableWithX
+      >
+        <Button variant="outline">With Close</Button>
+      </Tooltip>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different interaction modes for tooltips.',
+      },
+    },
+  },
+}
+
+export const Docs: Story = {
+  render: () => (
+    <div className="max-w-4xl mx-auto p-6 space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold mb-4">Tooltip Component</h1>
+        <p className="text-lg text-muted-foreground mb-6">
+          The Tooltip component provides contextual information when users hover over or click on elements.
+          It supports various trigger modes, positioning options, and customization features.
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        <section>
+          <h2 className="text-2xl font-semibold mb-3">Basic Usage</h2>
+          <p className="text-muted-foreground mb-4">
+            The simplest tooltip shows on hover with a title.
+          </p>
+          <div className="flex gap-4 p-4 border rounded-lg">
+            <Tooltip title="Basic tooltip">
+              <Button variant="outline">Hover me</Button>
+            </Tooltip>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-3">With Description</h2>
+          <p className="text-muted-foreground mb-4">
+            Tooltips can include both a title and description for more detailed information.
+          </p>
+          <div className="flex gap-4 p-4 border rounded-lg">
+            <Tooltip 
+              title="Detailed Tooltip" 
+              description="This provides additional context and information about the element."
+            >
+              <Button variant="outline">Hover for details</Button>
+            </Tooltip>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-3">Trigger Modes</h2>
+          <p className="text-muted-foreground mb-4">
+            Tooltips can be triggered by hover (default) or click interactions.
+          </p>
+          <div className="flex gap-4 p-4 border rounded-lg">
+            <Tooltip title="Hover Tooltip" description="Appears on hover">
+              <Button variant="outline">Hover</Button>
+            </Tooltip>
+            <Tooltip title="Click Tooltip" description="Appears on click" showOn="click">
+              <Button variant="outline">Click</Button>
+            </Tooltip>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-3">Positioning</h2>
+          <p className="text-muted-foreground mb-4">
+            Tooltips can be positioned on any side of the trigger element.
+          </p>
+          <div className="grid grid-cols-3 gap-4 p-4 border rounded-lg place-items-center">
+            <div></div>
+            <Tooltip title="Top" side="top">
+              <Button variant="outline" size="sm">Top</Button>
+            </Tooltip>
+            <div></div>
+            
+            <Tooltip title="Left" side="left">
+              <Button variant="outline" size="sm">Left</Button>
+            </Tooltip>
+            <div></div>
+            <Tooltip title="Right" side="right">
+              <Button variant="outline" size="sm">Right</Button>
+            </Tooltip>
+            
+            <div></div>
+            <Tooltip title="Bottom" side="bottom">
+              <Button variant="outline" size="sm">Bottom</Button>
+            </Tooltip>
+            <div></div>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-3">Removable Tooltips</h2>
+          <p className="text-muted-foreground mb-4">
+            Tooltips can include a close button for manual dismissal.
+          </p>
+          <div className="flex gap-4 p-4 border rounded-lg">
+            <Tooltip 
+              title="Removable Tooltip" 
+              description="Click the X to close this tooltip"
+              isRemovableWithX
+            >
+              <Button variant="outline">With Close Button</Button>
+            </Tooltip>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-3">Customization</h2>
+          <p className="text-muted-foreground mb-4">
+            Tooltips support custom width, z-index, and can be disabled when needed.
+          </p>
+          <div className="flex gap-4 p-4 border rounded-lg">
+            <Tooltip 
+              title="Wide Tooltip" 
+              description="This tooltip has a custom maximum width of 400 pixels, allowing for longer content without early wrapping."
+              maxWidth={400}
+            >
+              <Button variant="outline">Custom Width</Button>
+            </Tooltip>
+            <Tooltip title="This tooltip is disabled" isAvailable={false}>
+              <Button variant="outline" disabled>Disabled</Button>
+            </Tooltip>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-3">Accessibility</h2>
+          <div className="space-y-3 text-muted-foreground">
+            <p>• Tooltips use proper ARIA attributes (role="tooltip", aria-describedby)</p>
+            <p>• Keyboard navigation is supported (Escape key closes tooltips)</p>
+            <p>• Click-triggered tooltips close on outside clicks</p>
+            <p>• Hover tooltips are pointer-events-none to prevent interference</p>
+            <p>• Close buttons have proper aria-label for screen readers</p>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-3">Best Practices</h2>
+          <div className="space-y-3 text-muted-foreground">
+            <p>• Use hover tooltips for supplementary information</p>
+            <p>• Use click tooltips for more complex or interactive content</p>
+            <p>• Keep tooltip content concise and relevant</p>
+            <p>• Consider positioning to avoid viewport edges</p>
+            <p>• Use removable tooltips sparingly, mainly for persistent information</p>
+            <p>• Ensure tooltips don't interfere with other interactive elements</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comprehensive documentation and examples for the Tooltip component.',
+      },
+    },
+  },
+}