import { storiesOf } from '@storybook/vue';
import itfApp from '../app/App.vue';
import itfButton from '../button/Button.vue';
import itfIcon from '../icon/Icon.vue';
import itfTooltip from './Tooltip.vue';
import tooltip from '../../directives/tooltip';

storiesOf('Common', module)
  .add('Tooltip', () => ({
    components: {
      itfApp,
      itfIcon,
      itfTooltip,
      itfButton
    },
    directives: {
      tooltip
    },
    data() {
      return {
        tooltip: 'Test tooltip'
      }
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

      <pre>
          &lt;button v-tooltip="'Test tooltip'">Test&lt;/button>
          &lt;button v-tooltip.delay="'Test tooltip with delay'">Test&lt;/button>
      </pre>

      <h3>Example</h3>

      <itf-app>

        <button v-tooltip="tooltip">Tooltip test</button>

        <button v-tooltip.delay="tooltip">Tooltip test with delay</button>

        <itf-tooltip>
          <template #activator="{ on }">
            <a href="" v-on="on">Test</a>
          </template>

          <span>Test</span>
        </itf-tooltip>

      </itf-app>
    </div>`,
  }));
