import { Meta, Story } from "@storybook/addon-docs";
import Tooltip from "./Tooltip"
import ExpandableHint from "./ExpandableHint"
import { List, LongText, ShortList } from "./Tooltip.examples";

<Meta title="Tooltip"/>

Here will be some documentation for the Tooltip component.

<Story name="Default">
  <Tooltip message="I am a tooltip!">
    <button>Hover me</button>
  </Tooltip>
</Story>

<Story name="With Styling">
  <Tooltip message="I am a tooltip!" className="has-text-warning">
    <button>Hover me</button>
  </Tooltip>
</Story>

<Story name="Long Text">
  <Tooltip
    message={LongText}>
    <button>Hover me</button>
  </Tooltip>
</Story>

<Story name="List">
  <Tooltip message={List}>
    <button>Hover me</button>
  </Tooltip>
</Story>

<Story name="Short List">
  <Tooltip message={ShortList}>
    <button>Hover me</button>
  </Tooltip>
</Story>

<Story name="With Link">
  <Tooltip message={<p>
    For more information look up the documentation on the <a href="https://scm-manager.org">SCM-Manager</a> Website.
  </p>}>
    <button>Hover me</button>
  </Tooltip>
</Story>

<Story name="Adjust Position">
  <Tooltip message="I should show where there is space" side="left">
    <button>Hover me</button>
  </Tooltip>
</Story>

<Story name="Accessibility Friendly Tooltip">
  <ExpandableHint summary="Lorem Checksum Checksum Checksum Checksum" message="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."></ExpandableHint>
</Story>
