@webitel/ui-sdk 0.9.50 → 0.9.51

package/package.json

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

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/css/components/molecules/wt-button-select/_variables.scss

@@ -9,7 +9,7 @@
   --button-select-buttons-gap: 1px;
 
   --button-select-icon-color-primary: var(--btn-primary-color);
-  --button-select-icon-color-secondary: var(--btn-dark-font-color);
+  --button-select-icon-color-secondary: var(--btn-secondary-color);
   --button-select-icon-color-dark: var(--btn-dark-font-color);
   --button-select-icon-color-ligth: var(--main-color);
 
@@ -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);
 }