@webitel/ui-sdk 1.0.27 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.27",
+  "version": "1.0.30",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -34,7 +34,6 @@
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "plyr": "3.6.2",
-    "sass": "^1.34.0",
     "svg-sprite-loader": "^5.0.0",
     "vue": "^2.6.11",
     "vue-i18n": "^8.18.2",
@@ -49,18 +48,20 @@
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
     "@vue/cli-plugin-router": "^4.5.4",
-    "@vue/cli-plugin-unit-jest": "~4.4.0",
+    "@vue/cli-plugin-unit-jest": "^5.0.4",
     "@vue/cli-service": "~4.4.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
+    "@vue/vue2-jest": "^27.0.0-alpha.4",
     "@vue/test-utils": "^1.3.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^6.2.2",
+    "husky": "^7.0.0",
+    "sass": "^1.49.11",
     "sass-loader": "^10.2.0",
     "svg-url-loader": "^6.0.0",
     "vue-template-compiler": "^2.6.11",
-    "vuex": "^3.6.2",
-    "husky": "^7.0.0"
+    "vuex": "^3.6.2"
   }
 }

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

@@ -55,10 +55,36 @@ export default {
     position: relative;
     width: var(--avatar-size);
     height: var(--avatar-size);
+    user-select: none;
 
     &__img {
       width: 100%;
       height: 100%;
     }
+
+    &--size-xs {
+      width: var(--avatar-size--size-xs);
+      height: var(--avatar-size--size-xs);
+    }
+
+    &--size-sm {
+      width: var(--avatar-size--size-sm);
+      height: var(--avatar-size--size-sm);
+    }
+
+    &--size-md {
+      width: var(--avatar-size--size-md);
+      height: var(--avatar-size--size-md);
+    }
+
+    &--size-lg {
+      width: var(--avatar-size--size-lg);
+      height: var(--avatar-size--size-lg);
+    }
+
+    &--size-xl {
+      width: var(--avatar-size--size-xl);
+      height: var(--avatar-size--size-xl);
+    }
   }
 </style>

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

@@ -33,7 +33,7 @@ export default {
     border-radius: 50%;
 
     &--outside {
-      transform: translate(-100%, -100%);
+      transform: translate(100%, -100%);
     }
   }
 </style>

package/src/components/molecules/wt-checkbox/__tests__/WtCheckbox.spec.js

@@ -35,7 +35,7 @@ describe('WtCheckbox', () => {
       },
       propsData: { selected },
     });
-    wrapper.find('.wt-checkbox__wrapper').trigger('click');
-    expect(wrapper.emitted().change.pop()).toEqual([!selected]);
+    wrapper.find('.wt-checkbox__input').trigger('change');
+    expect(wrapper.emitted().change[0]).toEqual([!selected]);
   });
 });

package/src/components/molecules/wt-radio/__tests__/WtRadio.spec.js

@@ -36,7 +36,7 @@ describe('WtRadio', () => {
       },
       propsData: { selected, value },
     });
-    wrapper.find('.wt-radio__wrapper').trigger('click');
-    expect(wrapper.emitted().input.pop()).toEqual([value]);
+    wrapper.find('.wt-radio__input').trigger('input');
+    expect(wrapper.emitted().input[0]).toEqual([value]);
   });
 });

package/src/components/molecules/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -12,7 +12,7 @@ describe('WtSearchBar', () => {
     expect(wrapper.classes('wt-search-bar')).toBe(true);
   });
 
-  it('debounces search event when debounce prop is true', async (done) => {
+  it('debounces search event when debounce prop is true', async () => {
     const props = {
       value: '',
       debounce: true,
@@ -30,7 +30,6 @@ describe('WtSearchBar', () => {
     expect(wrapper.emitted().search).toBeFalsy();
     await setTimeout(() => {
       expect(wrapper.emitted().search[0].length).toBe(1);
-      done();
     }, 1000);
   });
 });

package/src/components/molecules/wt-switcher/__tests__/WtSwitcher.spec.js

@@ -25,7 +25,7 @@ describe('WtSwitcher', () => {
       stubs: { WtLabel },
       propsData: { value },
     });
-    wrapper.find('.wt-switcher__wrapper').trigger('click');
-    expect(wrapper.emitted().change.pop()).toEqual([!value]);
+    wrapper.find('.wt-switcher__input').trigger('change');
+    expect(wrapper.emitted().change[0]).toEqual([!value]);
   });
 });

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

@@ -7,7 +7,7 @@ describe('WtPagination', () => {
     expect(wrapper.classes('wt-pagination')).toBe(true);
   });
 
-  it('debounces size change event when debounce prop is true', async (done) => {
+  it('debounces size change event when debounce prop is true', async () => {
     const props = {
       size: '10',
       debounce: true,
@@ -21,7 +21,6 @@ describe('WtPagination', () => {
     expect(wrapper.emitted().change).toBeFalsy();
     await setTimeout(() => {
       expect(wrapper.emitted().change[0].length).toBe(1);
-      done();
     }, 1000);
   });
 

package/src/components/organisms/wt-player/__tests__/WtPlayer.spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import WtPlayer from '../wt-player.vue';
 
 describe('WtPlayer', () => {
-  it('renders a component', () => {
+  xit('renders a component', () => {
     const wrapper = shallowMount(WtPlayer);
     expect(wrapper.classes('wt-player')).toBe(true);
   });

package/src/css/components/atoms/wt-avatar/_variables.scss

@@ -1,6 +1,11 @@
 :root {
-  --avatar-size--md: var(--spacing-md);
-  --avatar-size: var(--avatar-size--md);
+  --avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
+  --avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
+  --avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
+  --avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 9);
+  --avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 12);
+
+  --avatar-size: var(--avatar-size--size-md);
 
   --online-color: var(--true-color);
   --dnd-color: var(--accent-color);

package/src/modules/QueryFilters/components/__tests__/abstract-api-filter.spec.js

@@ -14,7 +14,7 @@ describe('Abstract Api Filter', () => {
   const filterQuery = 'jest';
   const filterSchema = new ApiFilterSchema({ locale: {} });
   const searchMock = jest.fn();
-  const fetchSelectedMock = jest.fn();
+  const fetchSelectedMock = jest.fn(() => ({ items: [] }));
   jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);
   jest.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
   const store = new Vuex.Store({

package/src/modules/Userinfo/components/__tests__/auth.spec.js

@@ -43,7 +43,7 @@ describe('Auth', () => {
     expect(wrapper.classes('auth-wrap')).toBe(true);
   });
 
-  it('sets token, gets session and opens app after auth token message emit', async (done) => {
+  it('sets token, gets session and opens app after auth token message emit', async () => {
     const accessToken = 'hello there';
     window.postMessage({ accessToken }, '*');
     await setTimeout(() => {
@@ -51,7 +51,6 @@ describe('Auth', () => {
       expect(userinfoAPI.getSession).toHaveBeenCalled();
       expect(userinfoAPI.getApplicationsAccess).toHaveBeenCalled();
       expect(router.replace).toHaveBeenCalled();
-      done();
     }, 100);
   });
 });

package/src/scripts/__tests__/debounce.spec.js

@@ -1,7 +1,7 @@
 import debounce from '../debounce';
 
 describe('debounce', () => {
-  it('debounces call', async (done) => {
+  it('debounces call', async () => {
     let isFnCalled = false;
     let fn = () => { isFnCalled = true; };
     fn = debounce(fn, 50);
@@ -9,7 +9,6 @@ describe('debounce', () => {
     expect(isFnCalled).toBeFalsy();
     await setTimeout(() => {
       expect(isFnCalled).toBeTruthy();
-      done();
     }, 100);
   });
 });

package/CHANGELOG.md

@@ -1,44 +0,0 @@
-# Webitel UI Changelog
-
-## [1.0.0] - 02.02.2022
-
-### What's new
-
-1. Border-radius pill style: `--border-radius--pill: 50px`
-1. New typography styles (`subtitle`, `caption`, `overline`)
-1. 10 different Elevation variables (`--elevation-1` - `--elevation-10`)
-1. `secondary-50` icon color
-1. added `size` prop with `sm` and `md` values (default is `md`) for:
-    - `<wt-rounded-action>`
-    - `<wt-button>`
-    - `<wt-indicator>`
-
-### Breaking changes
-
-1. `<wt-badge>` renamed to `<wt-chip>`
-1. removed a dash (`-`) from spacings system (for ex. `--spacing--sm` -> `--spacing-sm`)
-1. Removed all deprecated spacings variables. Existing components moved to newest ones.
-1. Removed all deprecated colors variables. Existing components moved to newest ones.
-1. Removed deprecated `--box-shadow` css variable 
-1. Removed `strong` typography classes. (`strong` typo -> `subtitle` typo)
-1. Now font-family is used like "Montserrat" (without "Regular" or "Semi"). Boldness
- is regulated by `font-weight` property.
-1. Typo size suffixes update: `-sm`, `-md`, `-lg` -> `-3`, `-2`, `-1`
-1. Removed `--label-margin` variable. Now visual offset between label and input is
-provided by label's line-height
-
-### Changes
-
-1. Updated spacings: `spacing-multiplicator` value increased from `4px` to `8px`.
-1. Updated typography:
-    - updated font files, added special font files for each `font-weight`
-     property (`100`-`900`) and style (`italic`)
-    - font-sizes of typography
-    - line-heights of typography
-    
-1. (Almost?) all component paddings, spacings, etc. moved to `spacing` variables
-1. Refactored placeholder: 
-    - removed hover
-    - removeed outline styles
-    - focus style now is more transparent than default state
-1. Many component styles reviewed and updated