feat(tooltip): initial implementation (#101)

__tests__/Vuent.test.js

@@ -18,6 +18,7 @@ import {
   VntSelect,
   VntSlider,
   VntToggle,
+  VntTooltip,
 } from '@/components';
 
 import Vuent from '@/';
@@ -53,8 +54,9 @@ describe('Vuent', () => {
       expect(isInstalled(localVue, VntSelect)).toBe(true);
       expect(isInstalled(localVue, VntSlider)).toBe(true);
       expect(isInstalled(localVue, VntToggle)).toBe(true);
+      expect(isInstalled(localVue, VntTooltip)).toBe(true);
 
-      expect(countInstalledPlugins(localVue)).toBe(16);
+      expect(countInstalledPlugins(localVue)).toBe(17);
     });
 
     test('has $vuent instance object', () => {

__tests__/__snapshots__/tooltip.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip by default renders correctly 1`] = `<div role="tooltip" class="vnt-tooltip" style="position: absolute; left: 0px; top: 0px; margin: 0px;">Tooltip text</div>`;

__tests__/tooltip.test.js

@@ -0,0 +1,38 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { VntTooltip } from '@/components';
+import { isInstalled } from './utils';
+
+describe('Tooltip', () => {
+  let localVue, wrapper;
+
+  beforeAll(() => {
+    localVue = createLocalVue();
+    localVue.use(VntTooltip);
+  });
+
+  test('can be installed separately', () => {
+    expect(isInstalled(localVue, VntTooltip)).toBe(true);
+  });
+
+  describe('by default', () => {
+
+    beforeAll(() => {
+      wrapper = shallowMount(VntTooltip, {
+        localVue,
+        slots: {
+          default: 'Tooltip text'
+        }
+      });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('doesn\'t break when destroyed', () => {
+      wrapper.destroy();
+    });
+
+  });
+
+});

commitlint.config.js

@@ -19,6 +19,7 @@ module.exports = {
         'select',
         'slider',
         'toggle',
+        'tooltip',
         'website'
       ]
     ]

docs/.vuepress/components/tooltip-basic.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="playground">
+    <vnt-button>
+      Hover me
+      <vnt-tooltip>Tooltip text</vnt-tooltip>
+    </vnt-button>
+  </div>
+</template>
+
+<script>
+import { VntTooltip, VntButton } from '../../../src/components';
+
+export default {
+  name: 'TooltipBasic',
+  components: {
+    VntButton,
+    VntTooltip
+  }
+}
+</script>

docs/.vuepress/config.js

@@ -45,6 +45,7 @@ module.exports = {
           '/components/select',
           '/components/slider',
           '/components/toggle',
+          '/components/tooltip',
         ]
       },
       {

docs/components/tooltip.md

@@ -0,0 +1,14 @@
+# Tooltip
+
+[[toc]]
+
+## Basic
+
+<tooltip-basic />
+
+```html
+<vnt-button>
+  Hover me
+  <vnt-tooltip>Tooltip text</vnt-tooltip>
+</vnt-button>
+```

package.json

@@ -49,6 +49,7 @@
     "@babel/preset-env": "~7.1.0",
     "@commitlint/cli": "6.0.2",
     "@commitlint/config-conventional": "6.0.2",
+    "@popperjs/core": "~2.0.6",
     "@storybook/addon-a11y": "~5.2.3",
     "@storybook/addon-actions": "~5.2.4",
     "@storybook/addon-links": "~5.2.4",

src/components/index.js

@@ -15,3 +15,4 @@ export { default as VntRating } from './rating';
 export { default as VntSelect } from './select';
 export { default as VntSlider } from './slider';
 export { default as VntToggle } from './toggle';
+export { default as VntTooltip } from './tooltip';

src/components/tooltip/README.md

@@ -0,0 +1,12 @@
+# Tooltip
+
+## How to use
+
+```html
+<div>
+  Hover me to see a tooltip.
+  <vnt-tooltip>
+    Tooltip text
+  </vnt-tooltip>
+</div>
+```

src/components/tooltip/Tooltip.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="vnt-tooltip"
+       role="tooltip">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { createPopper } from '@popperjs/core';
+const showEvents = ['mouseenter', 'focus'];
+const hideEvents = ['mouseleave', 'blur'];
+
+export default {
+  name: 'VntTooltip',
+
+  mounted() {
+    const parent = this.$parent.$el;
+    const tooltip = createPopper(parent, this.$el, {
+      placement: 'top',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [8, 8]
+          }
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['top-start', 'top-end', 'right', 'left', 'bottom']
+          }
+        }
+      ]
+    });
+
+    showEvents.forEach(event => {
+      parent.addEventListener(event, () => this.$el.setAttribute('data-show', ''));
+    });
+
+    hideEvents.forEach(event => {
+      parent.addEventListener(event, () => this.$el.removeAttribute('data-show'));
+    });
+
+    this.$tooltip = tooltip;
+  },
+
+  destroyed() {
+    this.$tooltip.destroy();
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../scss/mixins/component';
+
+.vnt-tooltip {
+  @include component-base;
+
+  display: none;
+  border: 1px solid #ccc;
+  background: #f2f2f2;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 1.33;
+}
+
+.vnt-tooltip[data-show] {
+  display: block;
+}
+</style>

src/components/tooltip/index.js

@@ -0,0 +1,7 @@
+import Tooltip from './Tooltip.vue';
+
+Tooltip.install = function (Vue) {
+  Vue.component(Tooltip.name, Tooltip);
+};
+
+export default Tooltip;

stories/components/tooltip.stories.js

@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue';
+
+/* eslint no-undef: 0 */
+storiesOf('Tooltip', module)
+  .add('button', () => ({
+    template: `
+    <vnt-button style="margin: 80px">
+      Hover me
+      <vnt-tooltip>Tooltip text</vnt-tooltip>
+    </vnt-button>
+    `
+  }))
+  .add('text', () => ({
+    template: `
+    <p style="margin: 80px; width: 300px; padding: 4px;">
+      Lorem ipsum dolor sit amet
+      <vnt-tooltip>Tooltip text</vnt-tooltip>
+    </p>
+    `
+  }))
+  .add('image', () => ({
+    template: `
+    <figure style="width: 200px; height: 150px; margin: 50px">
+      <img src="https://dummyimage.com/200x150/000/fff.jpg&text=Test+image" width="200" height="150" />
+      <vnt-tooltip>Tooltip text</vnt-tooltip>
+    </picture>
+    `
+  }));

yarn.lock

@@ -2427,6 +2427,11 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@popperjs/core@~2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.0.6.tgz#5a39ac118811ca844155b0ad5190b8c24f35e533"
+  integrity sha512-zj7Gw8QC4jmR92eKUvtrZUEpl2ypRbq+qlE4pwf9n2hnUO9BOAcWUs4/Ht+gNIbFt98xtqhLvccdCfD469MzpQ==
+
 "@reach/router@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"