mitlist/fe/src/components/valerie/VTooltip.stories.ts

import VTooltip from './VTooltip.vue';
import VButton from './VButton.vue'; // Example trigger
import type { Meta, StoryObj } from '@storybook/vue3';

const meta: Meta<typeof VTooltip> = {
  title: 'Valerie/VTooltip',
  component: VTooltip,
  tags: ['autodocs'],
  argTypes: {
    text: { control: 'text', description: 'Tooltip text content.' },
    position: {
      control: 'select',
      options: ['top', 'bottom', 'left', 'right'],
      description: 'Tooltip position relative to the trigger.',
    },
    id: { control: 'text', description: 'Optional ID for the tooltip text element (ARIA).' },
    // Slot
    default: { description: 'The trigger element for the tooltip.', table: { disable: true } },
  },
  parameters: {
    docs: {
      description: {
        component: 'A tooltip component that displays informational text when a trigger element is hovered or focused. Uses CSS for positioning and visibility.',
      },
    },
    // Adding some layout to center stories and provide space for tooltips
    layout: 'centered',
  },
  // Decorator to add some margin around stories so tooltips don't get cut off by viewport
  decorators: [() => ({ template: '<div style="padding: 50px;"><story/></div>' })],
};

export default meta;
type Story = StoryObj<typeof VTooltip>;

export const Top: Story = {
  render: (args) => ({
    components: { VTooltip, VButton },
    setup() { return { args }; },
    template: `
      <VTooltip :text="args.text" :position="args.position" :id="args.id">
        <VButton>Hover or Focus Me (Top)</VButton>
      </VTooltip>
    `,
  }),
  args: {
    text: 'This is a tooltip displayed on top.',
    position: 'top',
    id: 'tooltip-top-example',
  },
};

export const Bottom: Story = {
  ...Top, // Reuses render function from Top story
  args: {
    text: 'Tooltip shown at the bottom.',
    position: 'bottom',
    id: 'tooltip-bottom-example',
  },
};

export const Left: Story = {
  ...Top,
  args: {
    text: 'This appears to the left.',
    position: 'left',
    id: 'tooltip-left-example',
  },
};

export const Right: Story = {
  ...Top,
  args: {
    text: 'And this one to the right!',
    position: 'right',
    id: 'tooltip-right-example',
  },
};

export const OnPlainText: Story = {
   render: (args) => ({
    components: { VTooltip },
    setup() { return { args }; },
    template: `
      <p>
        Some text here, and
        <VTooltip :text="args.text" :position="args.position">
          <span style="text-decoration: underline; color: blue;">this part has a tooltip</span>
        </VTooltip>
        which shows up on hover or focus.
      </p>
    `,
  }),
  args: {
    text: 'Tooltip on a span of text!',
    position: 'top',
  },
};

export const LongTextTooltip: Story = {
  ...Top,
  args: {
    text: 'This is a much longer tooltip text to see how it behaves. It should remain on a single line by default due to white-space: nowrap. If multi-line is needed, CSS for .tooltip-text would need adjustment (e.g., white-space: normal, width/max-width).',
    position: 'bottom',
  },
  parameters: {
    docs: {
      description: { story: 'Demonstrates a tooltip with a longer text content. Default styling keeps it on one line.'}
    }
  }
};

export const WithSpecificId: Story = {
  ...Top,
  args: {
    text: 'This tooltip has a specific ID for its text element.',
    position: 'top',
    id: 'my-custom-tooltip-id-123',
  },
};