@reliability-design/web 1.0.2 → 1.0.3

package/dist/components/rel-tooltip/rel-tooltip.stories.ts

@@ -1,364 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-tooltip';
-
-/**
- * The Tooltip component displays helpful text when hovering over an element.
- * Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **2 Positions**: above, below
- * - **Optional Tail**: Arrow pointer to target element
- * - **Hover Activation**: Shows on mouse hover
- * - **Centered Alignment**: Auto-centers above/below target
- * - **Smooth Animation**: Fade-in transition
- */
-const meta: Meta = {
-  title: 'Components/Tooltip',
-  tags: ['autodocs'],
-  component: 'rel-tooltip',
-  argTypes: {
-    text: {
-      control: 'text',
-      description: 'Tooltip text to display',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    position: {
-      control: { type: 'select' },
-      options: ['above', 'below'],
-      description: 'Position relative to the target element',
-      table: {
-        defaultValue: { summary: 'above' },
-        type: { summary: 'string' },
-      },
-    },
-    showTail: {
-      control: 'boolean',
-      description: 'Show arrow/tail pointing to target',
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default tooltip - appears above with no tail
- */
-export const Default: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="This is a tooltip">
-        <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          Hover me
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * Tooltip above - displays above the element
- */
-export const TooltipAbove: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="Tooltip above" position="above">
-        <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          Hover for tooltip above
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * Tooltip below - displays below the element
- */
-export const TooltipBelow: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="Tooltip below" position="below">
-        <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          Hover for tooltip below
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * With tail above - tooltip with arrow pointing down
- */
-export const WithTailAbove: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="Tooltip with tail" position="above" showTail>
-        <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          Hover me
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * With tail below - tooltip with arrow pointing up
- */
-export const WithTailBelow: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="Tooltip with tail" position="below" showTail>
-        <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          Hover me
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * Without tail - simple tooltip with no arrow
- */
-export const WithoutTail: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="Simple tooltip" showTail="false">
-        <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          Hover me
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * On icon - tooltip on icon element
- */
-export const OnIcon: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="Settings" position="above" showTail>
-        <span style="font-size: 24px; cursor: pointer;">⚙️</span>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * On button - tooltip on button element
- */
-export const OnButton: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="Click to save changes" position="above" showTail>
-        <button style="padding: 12px 24px; background: #0edb90; color: #111; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
-          Save
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * On text - tooltip on inline text
- */
-export const OnText: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center; font-size: 16px;">
-      This is a sentence with a
-      <rel-tooltip text="Additional information here" position="above" showTail>
-        <span style="text-decoration: underline; cursor: help; color: #0066cc;">
-          tooltip on this text
-        </span>
-      </rel-tooltip>
-      inline.
-    </div>
-  `,
-};
-
-/**
- * Long text - tooltip with longer message
- */
-export const LongText: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="This is a longer tooltip message with more detailed information" position="above" showTail>
-        <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          Hover for long tooltip
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * Short text - tooltip with brief message
- */
-export const ShortText: Story = {
-  render: () => html`
-    <div style="padding: 80px; text-align: center;">
-      <rel-tooltip text="Help" position="above" showTail>
-        <span style="font-size: 24px; cursor: pointer;">❓</span>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * Multiple tooltips - several tooltips on one page
- */
-export const MultipleTooltips: Story = {
-  render: () => html`
-    <div style="padding: 80px; display: flex; gap: 24px; justify-content: center; align-items: center;">
-      <rel-tooltip text="Edit" position="above" showTail>
-        <button style="padding: 8px 16px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          ✏️
-        </button>
-      </rel-tooltip>
-
-      <rel-tooltip text="Delete" position="above" showTail>
-        <button style="padding: 8px 16px; background: #d50000; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          🗑️
-        </button>
-      </rel-tooltip>
-
-      <rel-tooltip text="Download" position="above" showTail>
-        <button style="padding: 8px 16px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          ⬇️
-        </button>
-      </rel-tooltip>
-
-      <rel-tooltip text="Share" position="above" showTail>
-        <button style="padding: 8px 16px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-          📤
-        </button>
-      </rel-tooltip>
-    </div>
-  `,
-};
-
-/**
- * All positions - comparison of above and below
- */
-export const AllPositions: Story = {
-  render: () => html`
-    <div style="padding: 80px; display: flex; flex-direction: column; gap: 120px; align-items: center;">
-      <div>
-        <h4 style="margin-bottom: 16px; text-align: center;">Position: Above</h4>
-        <rel-tooltip text="Appears above" position="above" showTail>
-          <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-            Hover me
-          </button>
-        </rel-tooltip>
-      </div>
-
-      <div>
-        <h4 style="margin-bottom: 16px; text-align: center;">Position: Below</h4>
-        <rel-tooltip text="Appears below" position="below" showTail>
-          <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-            Hover me
-          </button>
-        </rel-tooltip>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Tail variations - with and without tail
- */
-export const TailVariations: Story = {
-  render: () => html`
-    <div style="padding: 80px; display: flex; gap: 48px; justify-content: center;">
-      <div style="text-align: center;">
-        <h4 style="margin-bottom: 16px;">Without Tail</h4>
-        <rel-tooltip text="No arrow" position="above">
-          <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-            Hover me
-          </button>
-        </rel-tooltip>
-      </div>
-
-      <div style="text-align: center;">
-        <h4 style="margin-bottom: 16px;">With Tail</h4>
-        <rel-tooltip text="With arrow" position="above" showTail>
-          <button style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
-            Hover me
-          </button>
-        </rel-tooltip>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Icon toolbar - realistic toolbar with tooltips
- */
-export const IconToolbar: Story = {
-  render: () => html`
-    <div style="padding: 80px;">
-      <div style="display: inline-flex; gap: 4px; background: #f5f5f5; padding: 8px; border-radius: 8px;">
-        <rel-tooltip text="Bold (Ctrl+B)" position="below" showTail>
-          <button style="padding: 8px 12px; background: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-weight: bold;">
-            B
-          </button>
-        </rel-tooltip>
-
-        <rel-tooltip text="Italic (Ctrl+I)" position="below" showTail>
-          <button style="padding: 8px 12px; background: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-style: italic;">
-            I
-          </button>
-        </rel-tooltip>
-
-        <rel-tooltip text="Underline (Ctrl+U)" position="below" showTail>
-          <button style="padding: 8px 12px; background: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; text-decoration: underline;">
-            U
-          </button>
-        </rel-tooltip>
-
-        <rel-tooltip text="Strikethrough" position="below" showTail>
-          <button style="padding: 8px 12px; background: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; text-decoration: line-through;">
-            S
-          </button>
-        </rel-tooltip>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Help icons - tooltips on help icons
- */
-export const HelpIcons: Story = {
-  render: () => html`
-    <div style="padding: 80px; display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-      <div style="display: flex; align-items: center; gap: 8px;">
-        <label style="font-weight: 500;">Username</label>
-        <rel-tooltip text="Your unique identifier for login" position="above" showTail>
-          <span style="cursor: help; color: #666;">ℹ️</span>
-        </rel-tooltip>
-      </div>
-
-      <div style="display: flex; align-items: center; gap: 8px;">
-        <label style="font-weight: 500;">Password</label>
-        <rel-tooltip text="Must be at least 8 characters with letters and numbers" position="above" showTail>
-          <span style="cursor: help; color: #666;">ℹ️</span>
-        </rel-tooltip>
-      </div>
-
-      <div style="display: flex; align-items: center; gap: 8px;">
-        <label style="font-weight: 500;">Two-Factor Auth</label>
-        <rel-tooltip text="Adds an extra layer of security to your account" position="above" showTail>
-          <span style="cursor: help; color: #666;">ℹ️</span>
-        </rel-tooltip>
-      </div>
-    </div>
-  `,
-};