@webitel/ui-sdk 1.0.28 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.28",
+  "version": "1.0.31",
   "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/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/molecules/wt-textarea/wt-textarea.vue

@@ -16,20 +16,24 @@
     <div class="wt-textarea__wrapper">
       <textarea
         :id="name"
+        ref="wt-textarea"
         class="wt-textarea__textarea"
         :value="value"
         :placeholder="placeholder || label"
         :disabled="disabled"
         v-on="listeners"
       ></textarea>
-      <wt-icon-btn
-        class="wt-textarea__reset-icon-btn"
-        :class="{ 'hidden': !value }"
-        icon="close--filled"
-        size="sm"
-        :disabled="disabled"
-        @click="$emit('input', '')"
-      ></wt-icon-btn>
+      <div class="wt-textarea__after-wrapper" ref="after-wrapper">
+        <slot name="after-input"></slot>
+        <wt-icon-btn
+          class="wt-textarea__reset-icon-btn"
+          :class="{ 'hidden': !value }"
+          icon="close--filled"
+          size="sm"
+          :disabled="disabled"
+          @click="$emit('input', '')"
+        ></wt-icon-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -101,6 +105,19 @@
           event.preventDefault();
         }
       },
+
+      updateInputPaddings() {
+        // cant test this thing cause vue test utils doesnt render elements width :/
+        const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
+        const inputEl = this.$refs['wt-textarea'];
+        const defaultInputPadding = getComputedStyle(document.documentElement)
+          .getPropertyValue('--textarea-padding');
+        console.info(defaultInputPadding, afterWrapperWidth);
+        inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
+      },
+    },
+    mounted() {
+      this.updateInputPaddings();
     },
   };
 </script>
@@ -125,17 +142,6 @@
     }
   }
 
-  .wt-textarea__reset-icon-btn {
-    position: absolute;
-    top: var(--input-icon-margin);
-    right: var(--input-icon-margin);
-
-    .wt-textarea:not(:focus-within) & {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
   .wt-textarea__textarea {
     @extend %typo-body-1;
     @include wt-placeholder;
@@ -167,8 +173,18 @@
   }
 
   /* make icons black */
-  .wt-textarea:hover ::v-deep .wt-icon__icon,
-  .wt-textarea:focus-within ::v-deep .wt-icon__icon {
+  .wt-textarea:hover ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon,
+  .wt-textarea:focus-within ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon {
     fill: var(--icon-color--hover);
   }
+
+  .wt-textarea__after-wrapper {
+    display: flex;
+    gap: var(--input-after-wrapper-gap);
+    align-items: center;
+    position: absolute;
+    top: var(--input-icon-margin);
+    right: var(--input-icon-margin);
+    pointer-events: auto; // override --disabled p-events none
+  }
 </style>

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

@@ -1,13 +1,5 @@
 
 :root {
   --textarea-min-height: 100px;
-  --textarea-padding:
-    var(--input-padding)
-    calc(
-      var(--input-padding)
-      + var(--icon-sm-size)
-      + var(--spacing-xs)
-    )
-    var(--input-padding)
-    var(--input-padding); // right reset icon 16px
-}
+  --textarea-padding: var(--input-padding);
+}

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