@kit-data-manager/pid-component/dist/collection/components/pid-tooltip/pid-tooltip.stories.js

The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.

/*!
 *
 * Copyright 2024 Karlsruhe Institute of Technology.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import { html } from "lit";
const meta = {
    title: 'Internal/Tooltip',
    component: 'pid-tooltip',
    argTypes: {
        text: {
            description: 'The text to display in the tooltip',
            control: {
                type: 'text',
            },
        },
        position: {
            description: 'The position of the tooltip',
            control: {
                type: 'select',
                options: ['top', 'bottom', 'left', 'right'],
            },
            table: {
                defaultValue: {
                    summary: 'top',
                },
                type: {
                    summary: 'string',
                },
            },
        },
        maxWidth: {
            description: 'The maximum width of the tooltip',
            control: {
                type: 'text',
            },
            table: {
                defaultValue: {
                    summary: '250px',
                },
                type: {
                    summary: 'string',
                },
            },
        },
        maxHeight: {
            description: 'The maximum height of the tooltip',
            control: {
                type: 'text',
            },
            table: {
                defaultValue: {
                    summary: '150px',
                },
                type: {
                    summary: 'string',
                },
            },
        },
    },
    args: {
        text: 'This is a tooltip',
        position: 'top',
        maxWidth: '250px',
        maxHeight: '150px',
    },
};
export default meta;
export const Default = {
    args: {
        text: 'This is a tooltip',
        position: 'top',
    },
    render: args => html `
    <div class="p-10">
      <pid-tooltip text=${args.text} position=${args.position} maxWidth=${args.maxWidth} maxHeight=${args.maxHeight}>
        <span slot="trigger">Hover me</span>
      </pid-tooltip>
    </div>
  `,
    parameters: {
        docs: {
            source: {
                code: `
<pid-tooltip text="This is a tooltip" position="top">
  <span slot="trigger">Hover me</span>
</pid-tooltip>
        `,
            },
        },
    },
};
export const BottomPosition = {
    args: {
        text: 'This tooltip appears at the bottom',
        position: 'bottom',
    },
    render: args => html `
    <div class="p-10">
      <pid-tooltip text=${args.text} position=${args.position} maxWidth=${args.maxWidth} maxHeight=${args.maxHeight}>
        <span slot="trigger">Hover me (bottom)</span>
      </pid-tooltip>
    </div>
  `,
    parameters: {
        docs: {
            source: {
                code: `
<pid-tooltip text="This tooltip appears at the bottom" position="bottom">
  <span slot="trigger">Hover me (bottom)</span>
</pid-tooltip>
        `,
            },
        },
    },
};
export const LeftPosition = {
    args: {
        text: 'This tooltip appears on the left',
        position: 'left',
    },
    render: args => html `
    <div class="p-10">
      <pid-tooltip text=${args.text} position=${args.position} maxWidth=${args.maxWidth} maxHeight=${args.maxHeight}>
        <span slot="trigger">Hover me (left)</span>
      </pid-tooltip>
    </div>
  `,
    parameters: {
        docs: {
            source: {
                code: `
<pid-tooltip text="This tooltip appears on the left" position="left">
  <span slot="trigger">Hover me (left)</span>
</pid-tooltip>
        `,
            },
        },
    },
};
export const RightPosition = {
    args: {
        text: 'This tooltip appears on the right',
        position: 'right',
    },
    render: args => html `
    <div class="p-10">
      <pid-tooltip text=${args.text} position=${args.position} maxWidth=${args.maxWidth} maxHeight=${args.maxHeight}>
        <span slot="trigger">Hover me (right)</span>
      </pid-tooltip>
    </div>
  `,
    parameters: {
        docs: {
            source: {
                code: `
<pid-tooltip text="This tooltip appears on the right" position="right">
  <span slot="trigger">Hover me (right)</span>
</pid-tooltip>
        `,
            },
        },
    },
};
export const LongText = {
    args: {
        text: 'This is a tooltip with a very long text. It should wrap and be limited by the maxWidth and maxHeight properties. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl.',
        position: 'top',
    },
    render: args => html `
    <div class="p-10">
      <pid-tooltip text=${args.text} position=${args.position} maxWidth=${args.maxWidth} maxHeight=${args.maxHeight}>
        <span slot="trigger">Hover me (long text)</span>
      </pid-tooltip>
    </div>
  `,
    parameters: {
        docs: {
            source: {
                code: `
<pid-tooltip text="This is a tooltip with a very long text..." position="top">
  <span slot="trigger">Hover me (long text)</span>
</pid-tooltip>
        `,
            },
        },
    },
};
export const CustomSizes = {
    args: {
        text: 'This tooltip has custom maxWidth and maxHeight',
        position: 'top',
        maxWidth: '300px',
        maxHeight: '100px',
    },
    render: args => html `
    <div class="p-10">
      <pid-tooltip text=${args.text} position=${args.position} maxWidth=${args.maxWidth} maxHeight=${args.maxHeight}>
        <span slot="trigger">Hover me (custom sizes)</span>
      </pid-tooltip>
    </div>
  `,
    parameters: {
        docs: {
            source: {
                code: `
<pid-tooltip
  text="This tooltip has custom maxWidth and maxHeight"
  position="top"
  maxWidth="300px"
  maxHeight="100px"
>
  <span slot="trigger">Hover me (custom sizes)</span>
</pid-tooltip>
        `,
            },
        },
    },
};
//# sourceMappingURL=pid-tooltip.stories.js.map