import { storiesOf } from '@storybook/vue';
import tooltip from './directives/tooltip';
import loading from './directives/loading';
import itfApp from './components/app/App.vue';
import './assets/scss/main.scss';

storiesOf('Common', module)
  .add('Typography', () => ({
    directives: {
      tooltip,
    },
    components: { itfApp },
    data() {
      return { date: '2021-01-16', tooltip: 'This button run payroll calculation <br/><a href="/" target="_blank">Read more</a>' }
    },
    template: `<div>
    <itf-app>
    <table class="table">
      <thead>
      <tr>
        <th>Heading</th>
        <th>Example</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>
          <code>&lt;h1&gt;&lt;/h1&gt;</code>
        </td>
        <td><span class="h1">h1. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td>
          <code>&lt;h2&gt;&lt;/h2&gt;</code>
        </td>
        <td><span class="h2">h2. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td>
          <code>&lt;h3&gt;&lt;/h3&gt;</code>
        </td>
        <td><span class="h3">h3. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td>
          <code>&lt;h4&gt;&lt;/h4&gt;</code>
        </td>
        <td><span class="h4">h4. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td>
          <code>&lt;h5&gt;&lt;/h5&gt;</code>
        </td>
        <td><span class="h5">h5. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td>
          <code>&lt;h6&gt;&lt;/h6&gt;</code>
        </td>
        <td><span class="h6">h6. Bootstrap heading</span></td>
      </tr>
      </tbody>
    </table>
    </itf-app>
    </div>`,
  }))
  .add('Inline loader', () => ({
    directives: {
      loading,
    },
    components: { itfApp },
    data() {
      return { date: '2021-01-16', tooltip: 'This button run payroll calculation <br/><a href="/" target="_blank">Read more</a>' }
    },
    template: `<div>
      <h2>Usage</h2>

  <pre>

    &lt;div v-loading="true">Test&lt;/div>
  </pre>

      <h2>Example</h2>

      <div class="itf-spinner"></div>

      <div style="max-height: 400px; overflow: auto">
        <div style="position: relative;">

          <div v-loading="true">

            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />
            Test<br />

          </div>

        </div>
      </div>

    </div>`,
  }))
;
