@webitel/ui-sdk 1.0.26 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.26",
+  "version": "1.0.29",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -25,6 +25,7 @@
   ],
   "dependencies": {
     "@johmun/vue-tags-input": "^2.1.0",
+    "@vue/vue2-jest": "^27.0.0-alpha.4",
     "bamboo-jest-reporter": "^1.0.3",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.1",
@@ -34,7 +35,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,7 +49,7 @@
     "@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/test-utils": "^1.3.0",
@@ -57,10 +57,11 @@
     "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-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/wt-player.vue

@@ -52,6 +52,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    // plyr is caching volume settings so we should reset them at init
+    resetVolume: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     player: null,
@@ -102,9 +107,17 @@ export default {
           active: this.loop,
         },
       });
+
+      if (this.resetVolume) this.makeVolumeReset();
+      if (this.download) this.setupDownload();
+
       this.appendCloseIcon();
       this.$emit('initialized', this.player);
     },
+    makeVolumeReset() {
+      this.player.volume = 1;
+      this.player.muted = false;
+    },
     setupDownload() {
       if (!this.download) this.setupPlayer();
       else if (typeof this.download === 'string') {

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