@webitel/ui-sdk 1.0.9 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.9",
+  "version": "1.0.13",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -8,7 +8,8 @@
     "build:app": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint --fix",
-    "publish": "npm run test:unit && npm run build && npm publish --access public"
+    "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
+    "prepare": "husky install"
   },
   "main": "./dist/@webitel/ui-sdk.common.js",
   "files": [
@@ -44,14 +45,14 @@
     "webitel-sdk": "^0.1.91"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/jest-dom": "^5.16.2",
     "@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-service": "~4.4.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/test-utils": "^1.0.3",
+    "@vue/test-utils": "^1.3.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
@@ -59,6 +60,7 @@
     "sass-loader": "^10.2.0",
     "svg-url-loader": "^6.0.0",
     "vue-template-compiler": "^2.6.11",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "husky": "^7.0.0"
   }
 }

package/src/components/molecules/wt-datetimepicker/__tests__/WtDatetimepicker.spec.js

@@ -33,17 +33,17 @@ describe('WtDatetimepicker', () => {
 
   it('opens form at preview click', async () => {
     const wrapper = shallowMount(WtDatetimepicker, {
-      stubs: {
-        WtLabel,
-        WtIcon,
-        WtButton,
-        WtTimepicker: true,
-      },
+      // stubs: {
+      //   WtLabel,
+      //   WtIcon,
+      //   WtButton,
+      //   WtTimepicker: true,
+      // },
     });
     expect(wrapper.find('.wt-datetimepicker__form').element).not.toBeVisible();
     wrapper.find('.wt-datetimepicker__preview').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('.wt-datetimepicker__form').element).toBeVisible();
+    expect(wrapper.find('.wt-datetimepicker__form').isVisible()).toBe(true);
   });
 
   it('Triggers change event after button "add" click', async () => {

package/src/components/organisms/wt-pagination/wt-pagination.vue

@@ -3,27 +3,29 @@
     <div class="wt-pagination__size">
       <div class="wt-pagination__size-text">{{ $t('webitelUI.pagination.sizeText') }}</div>
       <wt-input
-        class="wt-pagination__size-input"
+        :number-max="1000"
+        :number-min="1"
         :value="size"
+        class="wt-pagination__size-input"
         type="number"
-        :number-min="1"
-        :number-max="1000"
         @input="inputHandler"
       ></wt-input>
     </div>
     <div class="wt-pagination__page-controls">
       <wt-icon-btn
+        :disabled="!prev"
+        :tooltip="$t('webitelUI.pagination.prev')"
         class="wt-pagination__page-control"
         icon="arrow-left"
-        :tooltip="$t('webitelUI.pagination.prev')"
-        :disabled="!prev"
+        tooltip-position="left"
         @click="goPrev"
       ></wt-icon-btn>
       <wt-icon-btn
+        :disabled="!next"
+        :tooltip="$t('webitelUI.pagination.next')"
         class="wt-pagination__page-control"
         icon="arrow-right"
-        :tooltip="$t('webitelUI.pagination.next')"
-        :disabled="!next"
+        tooltip-position="left"
         @click="goNext"
       ></wt-icon-btn>
     </div>

package/src/components/organisms/wt-player/wt-player.vue

@@ -116,8 +116,8 @@ export default {
   }
 
   &__close-icon {
-    transform: translate(var(--player-close-icon-transform-translate-x),
-      var(--player-close-icon-transform-translate-y));
+    //transform: translate(var(--player-close-icon-transform-translate-x),
+    //  var(--player-close-icon-transform-translate-y));
   }
 
   .plyr__control:hover, {

package/src/css/components/molecules/wt-popup/_variables.scss

@@ -2,7 +2,7 @@
 :root {
   --popup-wrapper-z-index: 11;
 
-  --popup-shadow-opacity: 0.5;
+  --popup-shadow-opacity: 0.8;
   --popup-shadow-color: hsla(var(--_contrast-color), var(--popup-shadow-opacity));
 
   --popup-max-height: 80%;

package/src/css/components/organisms/wt-player/_variables.scss

@@ -2,7 +2,7 @@
   --plyr-color-main: var(--accent-color);
   --plyr-audio-control-color: var(--icon-primary-color);
   // --plyr-control-toggle-checked-background: var(--main-color);
-  --player-close-icon-transform-translate-x: var(--spacing-xs);
+  --player-close-icon-transform-translate-x: var(--spacing-md);
   // "-1 * var" for use the negative value of a variable
   --player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));
 }

package/src/css/styleguide/colors/_colors.scss

@@ -22,7 +22,7 @@
   --_main-color: var(--_accent-color-hue), 20%, 99%;
   --_contrast-color: var(--_accent-color-hue), 20%, 1%;
   --_secondary-color: var(--_secondary-color-hue), 20%, 90%;
-  --_secondary-color-50: var(--_secondary-color-hue), 22%, 95%;
+  --_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
   --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
   --_header-color: var(--_page-bg-color-hue), 20%, 90%;
   --_positive-color: var(--_positive-color-hue), 60%, 40%;

package/src/css/styleguide/typography/_typography.scss

@@ -6,7 +6,7 @@
     weight: 600;
   }
   line-height: 48px;
-  letter-spacing: 0.28px; // 0.02em
+  //letter-spacing: 0.28px; // 0.02em
 }
 
 %typo-heading-2 {
@@ -16,7 +16,7 @@
     weight: 600;
   }
   line-height: 40px;
-  letter-spacing: 0.28px; // 0.02em
+  //letter-spacing: 0.28px; // 0.02em
 }
 
 %typo-heading-3 {
@@ -26,7 +26,7 @@
     weight: 600;
   }
   line-height: 32px;
-  letter-spacing: 0.28px; // 0.02em
+  //letter-spacing: 0.28px; // 0.02em
 }
 
 %typo-subtitle-1 {
@@ -36,7 +36,7 @@
     weight: 500;
   }
   line-height: 24px;
-  letter-spacing: 0.28px; // 0.02em
+  //letter-spacing: 0.28px; // 0.02em
 }
 
 %typo-subtitle-2 {
@@ -46,7 +46,7 @@
     weight: 500;
   }
   line-height: 20px;
-  letter-spacing: 0.28px; // 0.02em
+  //letter-spacing: 0.28px; // 0.02em
 }
 
 %typo-body-1 {
@@ -56,7 +56,7 @@
     weight: 400;
   }
   line-height: 24px;
-  letter-spacing: 0.56px; // 0.04em
+  //letter-spacing: 0.56px; // 0.04em
 }
 
 %typo-body-2 {
@@ -66,18 +66,18 @@
     weight: 400;
   }
   line-height: 20px;
-  letter-spacing: 0.16px; // 0.01em
+  //letter-spacing: 0.16px; // 0.01em
 }
 
 %typo-button {
   font: {
     family: 'Montserrat', monospace;
     size: 12px;
-    weight: 500;
+    weight: 600;
   }
   text-transform: uppercase;
   line-height: 24px;
-  letter-spacing: 0.96px; // 0.06em
+  //letter-spacing: 0.96px; // 0.06em
 }
 
 %typo-caption {
@@ -87,7 +87,7 @@
     weight: 400;
   }
   line-height: 16px;
-  letter-spacing: 0.48px; // 0.03em
+  //letter-spacing: 0.48px; // 0.03em
 }
 
 %typo-overline {
@@ -98,5 +98,5 @@
   }
   line-height: 20px;
   text-transform: uppercase;
-  letter-spacing: 2.56px; // 0.16em
+  //letter-spacing: 2.56px; // 0.16em
 }