<file_sep>export { default as Button } from "./Button/index.vue";
export { default as H1 } from "./H1/index.vue";<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Views|Toolbar with list', module)
  .add('Base', () => (`
    <div class="panel pa-0">
      <div class="toolbar toolbar--border py-3">
        <div class="toolbar__section toolbar__section--fill">
          <h3 class="h3 mb-0">Toolbar</h5>
        </div>
        <div class="toolbar__section">
          <a class="button primary">Button</a>
        </div>
      </div>

      <ul class="list list--divider">
        <li class="list__item">
          <a href="#" class="list__anchor">
            <div class="list__column">
              <h4 class="h5">Title 1</h4>
              <p class="paragraph mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </a>
        </li>
        <li class="list__item">
          <a href="#" class="list__anchor">
            <div class="list__column">
            <h4 class="h5">Title 2</h4>
              <p class="paragraph mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  `))<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Components|Toolbar', module)
  .add('Base', () => (`
    <div class="toolbar toolbar--box-shadow py-3">
      <h5 class="h5 mb-0">Toolbar</h5>
    </div>
  `))
  .add('Center', () => (`
    <div class="toolbar toolbar--box-shadow py-3">
      <div class="toolbar__section toolbar__section--centered">
        <h5 class="h5 mb-0">Toolbar</h5>
      </div>
    </div>
  `))
  // .add('Sections', () => (`
  //   <div class="toolbar toolbar--box-shadow py-3">
  //   <div class="toolbar__left-section">
  //     <a class="button primary mx-3">Button</a>
  //   </div>
  //     <div class="toolbar__left-section">
  //       <strong class="mx-3">Toolbar</strong>
  //     </div>
  //     <div class="toolbar__right-section">
  //       <a class="button primary mx-3">Button</a>
  //     </div>
  //   </div>
  // `))

  .add('Sections', () => (`
    <div class="toolbar toolbar--box-shadow py-3">
      <div class="toolbar__section toolbar__section--fill">
        <h5 class="h5 mb-0">Toolbar</h5>
      </div>
      <div class="toolbar__section">
        <a class="button primary">Button</a>
      </div>
    </div>
  `))
  .add('Orientation', () => (`
    <div class="panel pa-0 mb-5">
      <div class="toolbar toolbar--border py-3">
        <h5 class="h5 mb-0">Top</h5>
      </div>
      <div class="pa-3">
        Hello World
      </div>
    </div>

    <div class="panel pa-0">
      <div class="pa-3">
        Hello World
      </div>
      <div class="toolbar toolbar--border toolbar--bottom py-3">
        <h5 class="h5 mb-0">Bottom</h5>
      </div>
    </div>
  `))<file_sep>import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import { Button } from "@components/vue";

Vue.component("v-button", Button);

storiesOf('Button', module)
  .add('Base', () => ({
    template: `<v-button>Button</v-button>`
  }))
  .add('Variant', () => ({
    template: `
      <div>
        <v-button variant="primary">Primary</v-button>
        <v-button variant="secondary">Secondary</v-button>
        <v-button variant="success">Success</v-button>
        <v-button variant="danger">Danger</v-button>
      </div>
    `
  }))
  .add('Size', () => ({
    template: `
      <div>
        <v-button size="small">Small</v-button>
        <v-button>Regular</v-button>
        <v-button size="large">Large</v-button>
      </div>
    `
  }))<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Base|Font-size', module)
  .add('All', () => (`
    <p class="fs-1 my-1">Hello World</p>
    <p class="fs-2 my-1">Hello World</p>
    <p class="fs-3 my-1">Hello World</p>
    <p class="fs-4 my-1">Hello World</p>
    <p class="fs-5 my-1">Hello World</p>
    <p class="fs-6 my-1">Hello World</p>
    <p class="fs-7 my-1">Hello World</p>
    <p class="fs-8 my-1">Hello World</p>
    <p class="fs-9 my-1">Hello World</p>
    <p class="fs-10 my-1">Hello World</p>
    <p class="fs-11 my-1">Hello World</p>
    <p class="fs-12 my-1">Hello World</p>
    <p class="fs-13 my-1">Hello World</p>
    <p class="fs-14 my-1">Hello World</p>
    <p class="fs-15 my-1">Hello World</p>
    <p class="fs-16 my-1">Hello World</p>
  `))<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Components|Heading', module)
  .add('All', () => (`
    <h1 class="h1">Hello World</h1>
    <p class="paragraph mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <h2 class="h2">Hello World</h2>
    <p class="paragraph mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <h3 class="h3">Hello World</h3>
    <p class="paragraph mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <h4 class="h4">Hello World</h4>
    <p class="paragraph mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <h5 class="h5">Hello World</h5>
    <p class="paragraph mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <h6 class="h6">Hello World</h6>
    <p class="paragraph mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  `))<file_sep>module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: "ts-loader"
  });
  config.resolve.extensions.push(".ts", ".tsx");

  config.module.rules.push({
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  });

  return config;
};


      // {
      //   loader: 'css-loader',
      //   options: {
      //     modules: {
      //       mode: 'local',
      //       localIdentName: '[local]-[hash:base64:5]',
      //     },
      //     importLoaders: 1
      //   },
      // },<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Components|Button', module)
  .add('Base', () => (`
    <a class="button">Button</a>
  `))
  .add('Variant', () => (`
    <a class="button button--primary">Primary</a>
    <a class="button button--secondary">Secondary</a>
    <a class="button button--success">Success</a>
    <a class="button button--danger">Danger</a>
  `))
  .add('Size', () => (`
    <a class="button button--small">Small</a>
    <a class="button">Regular</a>
    <a class="button button--large">Large</a>
  `))<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Components|List', module)
  .add('Base', () => (`
    <ul class="list">
      <li class="list__item">Hello</li>
      <li class="list__item">World</li>
    </ul>
  `))
  .add('Divider', () => (`
    <ul class="list list--divider">
      <li class="list__item">Hello</li>
      <li class="list__item">World</li>
    </ul>
  `))
  .add('Anchor', () => (`
    <ul class="callout list list--divider">
      <li class="list__item">
        <a href="#" class="list__anchor">Hello</a>
      </li>
      <li class="list__item">
        <a href="#" class="list__anchor">World</a>
      </li>
    </ul>
  `))

  .add('Columns', () => (`
    <ul class="callout list list--divider">
      <li class="list__item">
        <div class="list__column list__column--fill">
          <h4 class="h4">Title 1</h4>
          <p class="paragraph mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="list__column">
          <a class="button primary mx-3">Button</a>
        </div>
      </li>
      <li class="list__item">
        <a href="#" class="list__anchor">
          <div class="list__column">
            <h4 class="h4">Title 2</h4>
            <p class="paragraph mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </a>
      </li>
    </ul>
  `))<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Components|Callout', module)
  .add('Base', () => (`
    <div class="callout">Hello World</div>
  `))<file_sep>import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import { H1 } from "@components/vue";

Vue.component("v-h1", H1);

storiesOf('H1', module)
  .add('Base', () => ({
    template: `<v-h1>H1</v-h1>`
  }))<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Components|Panel', module)
  .add('Base', () => (`
    <div class="panel">Hello World</div>
  `))<file_sep>module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: "ts-loader",
    options: { appendTsSuffixTo: [/\.vue$/] }
  });
  config.resolve.extensions.push(".ts", ".tsx");

  config.module.rules.push({
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'sass-loader'
    ]
  });

  return config;
};<file_sep>import { storiesOf } from '@storybook/html';

storiesOf('Components|UL', module)
  .add('Base', () => (`
    <ul class="ul">
      <li>Hello</li>
      <li>World</li>
    </ul>
  `))
  .add('Compact', () => (`
    <ul class="ul ul--compact">
      <li>Hello</li>
      <li>World</li>
    </ul>
  `))