@webitel/ui-sdk 1.0.46 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.46",
+  "version": "2.0.0",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-tooltip/__tests__/WtTooltip.spec.js

@@ -7,7 +7,8 @@ describe('WtTooltip', () => {
     expect(wrapper.classes('wt-tooltip')).toBe(true);
   });
 
-  it('renders a component text, if passed', () => {
+  // tooltip content is rendered outside of wt-tooltip compoent
+  it.skip('renders a component text, if passed', () => {
     const content = 'Hello there!';
     const wrapper = shallowMount(WtTooltip, {
       slots: {

package/src/components/atoms/wt-tooltip/wt-tooltip.vue

@@ -1,54 +1,41 @@
 <template>
-  <span
-    class="wt-tooltip"
+  <v-tooltip
     :class="{
-      'wt-tooltip--visible': visible,
       'wt-tooltip--contrast': contrast
     }"
+    :placement="placement"
+    :popper-class="[
+      'wt-tooltip__popper',
+       { 'wt-tooltip--contrast__popper': contrast },
+     ]"
+    class="wt-tooltip"
   >
-    <slot></slot>
-  </span>
+    <slot name="activator"></slot>
+    <template #popper>
+      <slot></slot>
+    </template>
+  </v-tooltip>
 </template>
 
 <script>
-  export default {
-    name: 'wt-tooltip',
-    props: {
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-      contrast: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  name: 'wt-tooltip',
+  props: {
+    contrast: {
+      type: Boolean,
+      default: false,
+    },
+    placement: {
+      type: String,
+      default: 'auto',
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-tooltip {
-    @extend %typo-body-1;
-    display: inline-block;
-    min-width: 0;
-    padding: var(--tooltip-padding);
-    color: var(--tooltip-light-text-color);
-    background: var(--tooltip-light-bg-color);
-    border-radius: var(--border-radius);
-    box-shadow: var(--tooltip-elevation);
-    transition: var(--transition);
-    opacity: 0;
-    pointer-events: none;
-    z-index: var(--tooltip-z-index);
-
-    &--contrast {
-      color: var(--tooltip-dark-text-color);
-      background: var(--tooltip-dark-bg-color);
-    }
-
-    &--visible, &:hover {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
+.wt-tooltip {
+  display: inline-block;
+  line-height: 0;
+}
 </style>

package/src/components/index.js

@@ -32,6 +32,7 @@ import WtTextarea from './molecules/wt-textarea/wt-textarea.vue';
 import WtTimepicker from './molecules/wt-timepicker/wt-timepicker.vue';
 import WtLabel from './molecules/wt-label/wt-label.vue';
 import WtButtonSelect from './molecules/wt-button-select/wt-button-select.vue';
+import WtHint from './molecules/wt-hint/wt-hint.vue';
 
 import WtAppHeader from './organisms/wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './organisms/wt-app-header/wt-app-navigator.vue';
@@ -67,6 +68,7 @@ const Components = {
   WtDatetimepicker,
   WtIconBtn,
   WtInput,
+  WtHint,
   WtNotification,
   WtPopup,
   WtProgressBar,

package/src/components/molecules/wt-hint/__tests__/WtHint.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHint from '../wt-hint.vue';
+
+describe('WtHint', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHint);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/molecules/wt-hint/wt-hint.vue

@@ -0,0 +1,21 @@
+<template>
+  <wt-tooltip class="wt-hint">
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="rounded-info"
+        color="outline"
+      ></wt-icon-btn>
+    </template>
+    <slot></slot>
+  </wt-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'wt-hint',
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/molecules/wt-icon-btn/__tests__/WtIconBtn.spec.js

@@ -13,19 +13,4 @@ describe('WtIconBtn', () => {
     });
     expect(wrapper.classes('wt-icon-btn')).toBe(true);
   });
-
-  it('renders tooltip text when passed', () => {
-    const tooltip = 'Hello there';
-    const wrapper = shallowMount(WtIconBtn, {
-      stubs: {
-        WtTooltip,
-        WtIcon: true,
-      },
-      propsData: {
-        tooltip,
-        icon: 'bucket',
-      },
-    });
-    expect(wrapper.find('.wt-tooltip').text()).toBe(tooltip);
-  });
 });

package/src/components/molecules/wt-icon-btn/wt-icon-btn.vue

@@ -1,113 +1,71 @@
 <template>
-  <div class="wt-icon-btn" :class="{ 'wt-icon-btn--disabled': disabled }">
+  <div :class="{ 'wt-icon-btn--disabled': disabled }" class="wt-icon-btn">
     <button class="wt-icon-btn__button" type="button">
       <wt-icon
+        :color="iconColor"
         :icon="icon"
         :icon-prefix="iconPrefix"
         :size="size"
-        :color="iconColor"
         @click.native="$emit('click', $event)"
       ></wt-icon>
     </button>
-    <wt-tooltip
-      v-if="tooltip"
-      class="wt-icon-btn__tooltip"
-      :class="`wt-icon-btn__tooltip--tooltip-${tooltipPosition}`"
-    >{{tooltip}}</wt-tooltip>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'wt-icon-btn',
-    props: {
-      icon: {
-        type: String,
-        required: true,
-      },
-      iconPrefix: {
-        type: String,
-        default: '',
-      },
-      size: {
-        type: String,
-      },
-      tooltip: {
-        type: String,
-      },
-      tooltipPosition: {
-        type: String,
-        default: 'bottom',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      color: {
-        type: String,
-      },
+export default {
+  name: 'wt-icon-btn',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    iconPrefix: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
     },
-    computed: {
-      iconColor() {
-        if (this.disabled) return 'disabled';
-        return this.color;
-      },
+  },
+  computed: {
+    iconColor() {
+      if (this.disabled) return 'disabled';
+      return this.color;
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-icon-btn {
-    position: relative;
-    display: inline-block;
+.wt-icon-btn {
+  position: relative;
+  display: inline-block;
 
-    .wt-icon {
-      display: flex;
-    }
-
-    // add hover style only for "default" icon color cause non-default already may have opacity 1
-    &:hover ::v-deep .wt-icon__icon.wt-icon__icon--color-default {
-      fill: var(--icon-color--hover);
-    }
-
-    // icon "disabled" color is set from iconColor computed
-    &--disabled {
-      pointer-events: none;
-    }
+  .wt-icon {
+    display: flex;
   }
 
-  .wt-icon-btn,
-  .wt-icon-btn__button {
-    line-height: 0;
+  // add hover style only for "default" icon color cause non-default already may have opacity 1
+  &:hover ::v-deep .wt-icon__icon.wt-icon__icon--color-default {
+    fill: var(--icon-color--hover);
   }
 
-  .wt-icon-btn__tooltip {
-    position: absolute;
-
-    &--tooltip-top {
-      bottom: calc(100% + 11px); // icon height + 11px margin
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &--tooltip-bottom {
-      top: calc(100% + 11px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &--tooltip-right {
-      top: 50%;
-      left: calc(100% + 11px);
-      transform: translateY(-50%);
-    }
-    &--tooltip-left {
-      top: 50%;
-      right: calc(100% + 11px);
-      transform: translateY(-50%);
-    }
-
-    .wt-icon-btn:hover & {
-      opacity: 1;
-      pointer-events: auto;
-    }
+  // icon "disabled" color is set from iconColor computed
+  &--disabled {
+    pointer-events: none;
   }
+}
+
+.wt-icon-btn,
+.wt-icon-btn__button {
+  line-height: 0;
+}
 </style>

package/src/components/molecules/wt-label/wt-label.vue

@@ -9,14 +9,10 @@
     :for="this.for"
   >
     <slot></slot>
-    <wt-icon-btn
+    <wt-hint
       v-if="hint"
-      class="wt-label__hint"
-      icon="rounded-info"
-      color="outline"
-      :tooltip="hint"
-      :tooltip-position="hintPosition"
-    ></wt-icon-btn>
+    >{{ hint }}
+    </wt-hint>
   </label>
 </template>
 
@@ -43,10 +39,6 @@ export default {
       type: String,
       description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
     },
-    hintPosition: {
-      type: String,
-      description: 'See wt-icon-btn tooltip-position prop',
-    },
   },
 };
 </script>
@@ -74,17 +66,7 @@ export default {
   }
 }
 
-.wt-label__hint {
-  cursor: pointer;
+.wt-hint {
   margin-left: var(--spacing-xs);
-
-  ::v-deep {
-    .wt-tooltip {
-      width: max-content; // experimental css property
-      width: -moz-max-content; // experimental css property
-      min-width: 120px;
-      max-width: 280px;
-    }
-  }
 }
 </style>

package/src/components/organisms/wt-app-header/wt-app-navigator.vue

@@ -1,12 +1,17 @@
 <template>
   <div v-clickaway="close" class="wt-app-navigator">
-    <wt-icon-btn
-      :class="{'active': isOpened}"
-      :tooltip="$t('webitelUI.appNavigator.title')"
-      class="wt-app-navigator__btn"
-      icon="app-navigator"
-      @click="isOpened = !isOpened"
-    ></wt-icon-btn>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          :class="{'active': isOpened}"
+          class="wt-app-navigator__btn"
+          icon="app-navigator"
+          @click="isOpened = !isOpened"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.appNavigator.title') }}
+    </wt-tooltip>
+
     <transition name="fade">
       <nav
         v-show="isOpened"
@@ -183,11 +188,6 @@ export default {
   z-index: var(--wt-app-header-content-z-index);
   display: flex;
   align-items: center;
-
-  ::v-deep .wt-icon-btn__tooltip {
-    left: 50%;
-    transform: translateX(-100%);
-  }
 }
 
 // dropdown part

package/src/components/organisms/wt-app-header/wt-header-actions.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="wt-header-actions">
-    <wt-icon-btn
-      v-clickaway="close"
-      :class="{'active': isOpened}"
-      :tooltip="$t('webitelUI.headerActions.account')"
-      class="wt-header-actions__btn"
-      icon="account"
-      @click="isOpened = !isOpened"
-    ></wt-icon-btn>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-clickaway="close"
+          :class="{'active': isOpened}"
+          class="wt-header-actions__btn"
+          icon="account"
+          @click="isOpened = !isOpened"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.headerActions.account') }}
+    </wt-tooltip>
+
     <transition name="fade">
       <section v-show="isOpened" class="wt-header-actions__panel-wrapper">
         <header v-if="isHeader" class="wt-header-actions__header">
@@ -117,11 +122,6 @@ export default {
   z-index: var(--wt-app-header-content-z-index);
   display: flex;
   align-items: center;
-
-  ::v-deep .wt-icon-btn__tooltip {
-    left: 50%;
-    transform: translateX(-100%);
-  }
 }
 
 .wt-header-actions__panel-wrapper {

package/src/components/organisms/wt-pagination/__tests__/WtPagination.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtPagination from '../wt-pagination.vue';
 
 describe('WtPagination', () => {
@@ -25,7 +25,7 @@ describe('WtPagination', () => {
   });
 
   it('changes pages at icon btn click', async () => {
-    const wrapper = shallowMount(WtPagination, {
+    const wrapper = mount(WtPagination, {
       props: { isNext: true, page: 2 },
     });
     const pageControls = wrapper.findAll('.wt-pagination__page-control');

package/src/components/organisms/wt-pagination/wt-pagination.vue

@@ -12,22 +12,28 @@
       ></wt-input>
     </div>
     <div class="wt-pagination__page-controls">
-      <wt-icon-btn
-        :disabled="!prev"
-        :tooltip="$t('webitelUI.pagination.prev')"
-        class="wt-pagination__page-control"
-        icon="arrow-left"
-        tooltip-position="left"
-        @click="goPrev"
-      ></wt-icon-btn>
-      <wt-icon-btn
-        :disabled="!next"
-        :tooltip="$t('webitelUI.pagination.next')"
-        class="wt-pagination__page-control"
-        icon="arrow-right"
-        tooltip-position="left"
-        @click="goNext"
-      ></wt-icon-btn>
+      <wt-tooltip>
+        <template v-slot:activator>
+          <wt-icon-btn
+            :disabled="!prev"
+            class="wt-pagination__page-control"
+            icon="arrow-left"
+            @click="goPrev"
+          ></wt-icon-btn>
+        </template>
+        {{ $t('webitelUI.pagination.prev') }}
+      </wt-tooltip>
+      <wt-tooltip>
+        <template v-slot:activator>
+          <wt-icon-btn
+            :disabled="!next"
+            class="wt-pagination__page-control"
+            icon="arrow-right"
+            @click="goNext"
+          ></wt-icon-btn>
+        </template>
+        {{ $t('webitelUI.pagination.next') }}
+      </wt-tooltip>
     </div>
   </footer>
 </template>

package/src/components/organisms/wt-table/table-cells/wt-table-delete-action.vue

@@ -1,10 +1,13 @@
 <template>
-  <wt-icon-btn
-    icon="bucket"
-    :tooltip="$t('webitelUI.table.tableCells.deleteActionHint')"
-    tooltip-position="left"
-    @click="$emit('click')"
-  ></wt-icon-btn>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="bucket"
+        @click="$emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.table.tableCells.deleteActionHint') }}
+  </wt-tooltip>
 </template>
 
 <script>

package/src/components/organisms/wt-table/table-cells/wt-table-edit-action.vue

@@ -1,11 +1,14 @@
 <template>
-  <wt-icon-btn
-    class="table-action"
-    icon="edit"
-    :tooltip="$t('webitelUI.table.tableCells.editActionHint')"
-    tooltip-position="left"
-    @click="$emit('click')"
-  ></wt-icon-btn>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        class="table-action"
+        icon="edit"
+        @click="$emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.table.tableCells.editActionHint') }}
+  </wt-tooltip>
 </template>
 
 <script>