@webitel/ui-sdk 1.0.11 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.11",
+  "version": "1.0.15",
   "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": [
@@ -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/atoms/wt-icon/wt-icon.vue

@@ -29,7 +29,7 @@ export default {
     color: {
       type: String,
       default: 'default',
-      options: ['default', 'contrast', 'active', 'disabled', 'success', 'danger', 'transfer', 'hold'],
+      options: ['default', 'contrast', 'active', 'accent', 'disabled', 'success', 'danger', 'transfer', 'hold', 'secondary-50'],
     },
     iconPrefix: {
       type: String,

package/src/components/atoms/wt-rounded-action/wt-rounded-action.vue

@@ -1,16 +1,18 @@
 <template>
   <wt-button
-    class="wt-rounded-action"
+    v-bind="{ ...$attrs, ...$props }"
     :class="[
+      `wt-rounded-action--color-${color}`,
+      { 'wt-rounded-action--active': active },
       { 'wt-rounded-action--disabled': disabled },
     ]"
-    v-bind="{ ...$attrs, ...$props }"
+    class="wt-rounded-action"
     color="secondary"
     @click="$emit('click', $event)"
   >
     <wt-icon
-      :icon="icon"
       :color="iColor"
+      :icon="icon"
       :size="size"
     ></wt-icon>
   </wt-button>
@@ -25,7 +27,8 @@ export default {
     },
     color: {
       type: String,
-      default: '',
+      default: 'secondary',
+      options: ['secondary', 'accent', 'success', 'danger', 'hold', 'transfer'],
     },
     iconColor: {
       type: String,
@@ -36,6 +39,10 @@ export default {
       default: 'md',
       options: ['sm', 'md'],
     },
+    active: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -45,16 +52,7 @@ export default {
     iColor() {
       if (this.iconColor) return this.iconColor;
       if (this.disabled) return 'secondary-50';
-      switch (this.color) {
-        case 'success':
-          return 'success';
-        case 'accent':
-          return 'accent';
-        case 'danger':
-          return 'danger';
-        default:
-          return 'default';
-      }
+      return this.color;
     },
   },
 };
@@ -64,12 +62,50 @@ export default {
 <style lang="scss" scoped>
 .wt-button.wt-rounded-action {
   min-width: auto;
-  line-height: 0;
+  min-height: 0;
   padding: var(--rounded-action-padding);
+  line-height: 0;
+  border: var(--btn-border);
+  border-color: transparent;
+  background: var(--rounded-action-bg-color);
+  box-shadow: var(--elevation-1);
+
+  &:hover {
+    background: inherit;
+    box-shadow: var(--elevation-2);
+  }
+
+  &--active {
+    border-color: var(--icon-color);
+
+    &.wt-rounded-action--color-secondary {
+      border-color: var(--icon-color);
+    }
+
+    &.wt-rounded-action--color-accent {
+      border-color: var(--btn-accent--hover-color);
+    }
+
+    &.wt-rounded-action--color-success {
+      border-color: var(--btn-true--hover-color);
+    }
+
+    &.wt-rounded-action--color-danger {
+      border-color: var(--btn-false--hover-color);
+    }
+
+    &.wt-rounded-action--color-hold {
+      border-color: var(--btn-hold--hover-color);
+    }
+
+    &.wt-rounded-action--color-transfer {
+      border-color: var(--btn-transfer--hover-color);
+    }
+  }
 
-  &:not(.wt-rounded-action--disabled) {
-    background: var(--rounded-action-bg-color);
-    box-shadow: var(--elevation-1);
+  &.wt-rounded-action--disabled {
+    border-color: transparent;
+    box-shadow: none;
   }
 }
 </style>

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

@@ -1,6 +1,6 @@
 
 :root {
-  --chip-padding: var(--spacing-2xs) var(--spacing-xs);
+  --chip-padding: var(--spacing-3xs) var(--spacing-xs);
   --chip-border-radius: var(--spacing-lg);
   --chip-bg-color: var(--accent-secondary-color);
   --chip-bg-color--outline: var(--secondary-color);

package/src/css/components/atoms/wt-chip/wt-chip.scss

@@ -1,5 +1,5 @@
 .wt-chip {
-  @extend %typo-caption;
+  @extend %typo-body-2;
 
   display: inline-block;
   padding: var(--chip-padding);

package/src/css/components/atoms/wt-rounded-action/_variables.scss

@@ -1,5 +1,5 @@
 :root {
-  --rounded-action-padding: var(--spacing-xs);
+  --rounded-action-padding: calc(var(--spacing-xs) - var(--btn-border-size));
 
   --rounded-action-padding--outline: calc(var(--spacing-xs) - var(--btn-border-size));
 

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
 }