@webitel/ui-sdk 0.9.47 → 0.9.51

package/package.json

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

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

@@ -106,7 +106,7 @@
 
         &:hover,
         &:active {
-          color: var(--btn-secondary--hover-color);
+          color: var(--btn-dark-font-color);
           border-color: var(--btn-secondary--hover-color);
           background: var(--btn-secondary-color);
         }

package/src/components/atoms/wt-context-menu/__tests__/WtContextMenu.spec.js

@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils';
+import WtContextMenu from '../wt-context-menu.vue';
+
+describe('WtContextMenu', () => {
+  const options = ['1', '2'];
+
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtContextMenu);
+    expect(wrapper.classes('wt-context-menu')).toBe(true);
+  });
+
+  it('component is visible by default', () => {
+    const wrapper = shallowMount(WtContextMenu);
+    expect(wrapper.classes()).not.toContain('wt-context-menu--hidden');
+  });
+
+  it('component is invisible, if "visible" prop = false', () => {
+    const wrapper = shallowMount(WtContextMenu, {
+      propsData: { visible: false },
+    });
+    // Here we don't use "isVsisble()" because we hide our elements with "opacity: 0"
+    expect(wrapper.classes('wt-context-menu--hidden')).toBe(true);
+  });
+
+  it('correctly display the options length', () => {
+    const wrapper = shallowMount(WtContextMenu, {
+      propsData: { options },
+    });
+    expect(wrapper.findAll('.wt-context-menu__option').length).toBe(options.length);
+  });
+
+  it('should raise click event, and emit { option, index } when clicked', () => {
+    const emittingArgs = { option: '1', index: 0 };
+    const wrapper = shallowMount(WtContextMenu, {
+      propsData: { options },
+    });
+
+    wrapper.find('.wt-context-menu__option').trigger('click');
+    expect(wrapper.emitted().click).toBeTruthy();
+
+    expect(wrapper.emitted('click')[0][0]).toEqual(emittingArgs);
+  });
+});

package/src/components/molecules/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSelectButton from '../wt-button-select.vue';
+import WtContextMenu from '../../../atoms/wt-context-menu/wt-context-menu.vue';
+
+describe('WtSelectButton', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSelectButton);
+    expect(wrapper.classes('wt-button-select')).toBe(true);
+  });
+
+  it('renders a button content via default slot', () => {
+    const content = 'button content';
+    const wrapper = shallowMount(WtSelectButton, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-button-select__button').text()).toBe(content);
+  });
+
+  it('context-menu is invisible at start', () => {
+    const wrapper = shallowMount(WtSelectButton, {
+      stubs: { WtContextMenu },
+    });
+    expect(wrapper.findComponent(WtContextMenu).classes('wt-context-menu--hidden')).toBe(true);
+  });
+
+  it('toggles isOpened, if select-btn is clicked', async () => {
+    const wrapper = shallowMount(WtSelectButton, {
+      stubs: { WtContextMenu },
+    });
+    wrapper.find('.wt-button-select__select-btn').vm.$emit('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent(WtContextMenu).element.classList[1]).toBe(undefined);
+
+    wrapper.find('.wt-button-select__select-btn').vm.$emit('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent(WtContextMenu).element.classList[1]).toBe('wt-context-menu--hidden');
+  });
+
+  it('hides context-menu on its click event', async () => {
+    const isOpened = true;
+    const options = ['1', '2'];
+    const wrapper = shallowMount(WtSelectButton, {
+      stubs: { WtContextMenu },
+      data: () => ({ isOpened }),
+      propsData: { options },
+    });
+    wrapper.findComponent({ name: 'WtContextMenu' }).vm.$emit('click', { option: '1' });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent({ name: 'WtContextMenu' }).classes()).toContain('wt-context-menu--hidden');
+  });
+
+  it('should rotate the arrow', () => {
+    const wrapper = shallowMount(WtSelectButton, {
+      data: () => ({
+        isOpened: true,
+      }),
+    });
+    const wtIcon = wrapper.find('.wt-button-select__select-arrow');
+    expect(wtIcon.classes()).toContain('wt-button-select__select-arrow--active');
+  });
+});

package/src/components/molecules/wt-button-select/wt-button-select.vue

@@ -6,6 +6,7 @@
     <wt-button
       class="wt-button-select__button"
       v-bind="$attrs"
+      :disabled="disabled"
       @click="$emit('click', $event)"
     >
       <slot></slot>
@@ -14,20 +15,21 @@
     <wt-button
       class="wt-button-select__select-btn"
       v-bind="$attrs"
+      :disabled="disabled"
       :loading="false"
       @click="isOpened = !isOpened"
     >
       <wt-icon
         class="wt-button-select__select-arrow"
         :class="{'wt-button-select__select-arrow--active': isOpened}"
-        v-bind="$attrs"
         icon="arrow-down"
+        :disabled="disabled"
       ></wt-icon>
     </wt-button>
 
     <wt-context-menu
-      v-bind="$attrs"
       :visible="isOpened"
+      :options="options"
       @click="selectOption"
     ></wt-context-menu>
   </div>
@@ -39,6 +41,17 @@ export default {
   data: () => ({
     isOpened: false,
   }),
+  props: {
+    // all buttons props are passed as "$attrs"
+    options: {
+      type: Array,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
   methods: {
     selectOption({ option, index }) {
       this.$emit('click:option', option, index);
@@ -75,33 +88,22 @@ export default {
 
   // NORMAL MODE
   &:not(.wt-button--outline)::v-deep {
-    & .wt-icon--color-default .wt-icon__icon {
-      fill: var(--button-select-icon-color-dark);
-    }
-
-    //For danger, success, transfer icon fill-colors.
-    //In another case we will need to write three additional strings
     & .wt-icon__icon {
-      fill: var(--button-select-icon-color-ligth);
-    }
-
-    &.secondary .wt-icon--color-secondary .wt-icon__icon {
-      fill: var(--button-select-icon-color-secondary);
+      fill: var(--button-select-icon-color-dark);
     }
 
-    &.secondary {
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-secondary--hover);
-        }
+    &.danger,
+    &.success,
+    &.transfer {
+      .wt-icon__icon {
+        fill: var(--button-select-icon-color-ligth);
       }
     }
   }
 
   //OUTLINE MODE
   &.wt-button--outline::v-deep {
-    & .wt-icon--color-default .wt-icon__icon {
+    & .wt-icon__icon {
       fill: var(--button-select-icon-color-primary);
     }
 
@@ -112,11 +114,11 @@ export default {
       }
     }
 
-    .wt-icon--color-secondary .wt-icon__icon {
-      fill: var(--button-select-icon-color-secondary);
-    }
-
     &.danger {
+      & .wt-icon__icon {
+        fill: var(--icon-color-danger)
+      }
+
       &:hover,
       &:active {
         .wt-icon__icon {
@@ -126,6 +128,10 @@ export default {
     }
 
     &.success {
+      & .wt-icon__icon {
+        fill: var(--icon-color-success)
+      }
+
       &:hover,
       &:active {
         .wt-icon__icon {
@@ -135,6 +141,10 @@ export default {
     }
 
     &.transfer {
+      & .wt-icon__icon {
+        fill: var(--icon-color-transfer)
+      }
+
       &:hover,
       &:active {
         .wt-icon__icon {
@@ -142,13 +152,18 @@ export default {
         }
       }
     }
+  }
 
-    &.secondary {
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-secondary--hover);
-        }
+  // SECONDARY MODE (is same for outline and normal modes)
+  &.secondary::v-deep {
+    .wt-icon__icon {
+      fill: var(--button-select-icon-color-secondary);
+    }
+
+    &:hover,
+    &:active {
+      .wt-icon__icon {
+        fill: var(--button-select-icon-color-secondary--hover);
       }
     }
   }

package/src/components/organisms/wt-table-column-select/wt-table-column-select.vue

@@ -100,6 +100,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.wt-table-column-select {
+  line-height: 0; // prevent 24x28 icon heght :/
+}
+
 .wt-table-column-select__popup__list {
   @extend %wt-scrollbar;
   max-height: 35vh; // fixme popup fixed sizes

package/src/css/components/molecules/wt-button-select/_variables.scss

@@ -17,5 +17,5 @@
   --button-select-icon-color-danger--hover: var(--btn-false--hover-color);
   --button-select-icon-color-success--hover: var(--btn-true--hover-color);
   --button-select-icon-color-transfer--hover: var(--btn-transfer--hover-color);
-  --button-select-icon-color-secondary--hover: var(--btn-dark-font-color);
+  --button-select-icon-color-secondary--hover: var(--btn-secondary--hover-color);
 }

package/src/mixins/validationMixin/validationMixin.js

@@ -17,24 +17,25 @@ export default {
       return this.isValidation && this.v.$error;
     },
     validationText() {
+      let validationText = '';
       if (this.isValidation && this.invalid) {
-        if (this.v.required === false) return this.$t('validation.required');
-        if (this.v.numeric === false) return this.$t('validation.numeric');
-        if (this.v.email === false) return this.$t('validation.email');
-        if (this.v.gatewayHostValidator === false) return this.$t('validation.gatewayHostValidator');
-        if (this.v.ipValidator === false) return this.$t('validation.ipValidator');
-        if (this.v.macValidator === false) return this.$t('validation.macValidator');
-        if (this.v.minValue === false) return `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
-        if (this.v.maxValue === false) return `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
-        if (this.v.sipAccountValidator === false) return this.$t('validation.sipAccountValidator');
-        if (this.v.minLength === false) return `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
-        if (this.v.url === false) return `${this.$t('validation.url')}`;
+        if (this.v.required === false) validationText = this.$t('validation.required');
+        else if (this.v.numeric === false) validationText = this.$t('validation.numeric');
+        else if (this.v.email === false) validationText = this.$t('validation.email');
+        else if (this.v.gatewayHostValidator === false) validationText = this.$t('validation.gatewayHostValidator');
+        else if (this.v.ipValidator === false) validationText = this.$t('validation.ipValidator');
+        else if (this.v.macValidator === false) validationText = this.$t('validation.macValidator');
+        else if (this.v.minValue === false) validationText = `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
+        else if (this.v.maxValue === false) validationText = `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
+        else if (this.v.sipAccountValidator === false) validationText = this.$t('validation.sipAccountValidator');
+        else if (this.v.minLength === false) validationText = `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
+        else if (this.v.url === false) validationText = `${this.$t('validation.url')}`;
       }
       // eslint-disable-next-line no-restricted-syntax
       for (const { name, text } of this.customValidators) {
-        if (this.v[name] === false) return text;
+        if (this.v[name] === false) validationText = text;
       }
-      return '';
+      return validationText;
     },
   },
 };