@webitel/ui-sdk 1.0.12 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.12",
+  "version": "1.0.16",
   "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-lib": "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-button/wt-button.vue

@@ -5,6 +5,7 @@
       colorClass,
       `wt-button--size-${size}`,
       {
+        'wt-button--contains-icon': containsIcon,
         'wt-button--outline': outline,
         'wt-button--wide': wide,
         'wt-button--rounded': rounded,
@@ -58,6 +59,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    containsIcon: {
+      type: Boolean,
+      default: false,
+      description: 'https://stackoverflow.com/a/11126701',
+    },
   },
   computed: {
     colorClass() {
@@ -95,6 +101,11 @@ export default {
     border-radius: var(--border-radius--pill);
   }
 
+  // https://stackoverflow.com/a/11126701
+  &--contains-icon {
+    line-height: 0;
+  }
+
   &--size {
     &-sm {
       padding: var(--btn-padding--size-sm);

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/components/molecules/wt-slider/wt-slider.vue

@@ -16,27 +16,27 @@ and swapping height/width of this component in order to have the correct output.
 
 <template>
   <div
-    class="wt-slider"
     :class="{
         'wt-slider--disabled': disabled,
         'wt-slider--vertical': vertical,
       }"
     :style="{ height: verticalHeight }"
+    class="wt-slider"
   >
     <div
-      class="wt-slider__wrapper"
       :style="{ width: verticalHeight }"
+      class="wt-slider__wrapper"
     >
       <!-- The row above is needed in order to set correct component width when slider is vertical -->
       <input
-        type="range"
-        class="wt-slider__slider"
-        :style="{ background: progressStyle }"
-        :min="min"
+        :disabled="disabled"
         :max="max"
+        :min="min"
         :step="step"
+        :style="{ background: progressStyle }"
         :value="value"
-        :disabled="disabled"
+        class="wt-slider__slider"
+        type="range"
         @input="inputHandler"
       />
     </div>
@@ -95,18 +95,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .wt-slider__wrapper {
-  width: var(--wt-slider-width)
+  display: flex;
+  align-items: center;
+  width: var(--wt-slider-width);
+  height: var(--wt-slider-height);
 }
 
 .wt-slider__slider {
-  box-sizing: var(--wt-slider-box-sizing);
+  box-sizing: border-box;
   width: var(--wt-slider-width);
-  height: var(--wt-slider-height);
+  height: var(--wt-slider-input-height);
+  margin: 0;
+  cursor: pointer;
   border: var(--wt-slider-border);
   border-radius: var(--border-radius);
-  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
 
@@ -160,16 +163,12 @@ export default {
 }
 
 .wt-slider--vertical {
-  width: var(--wt-slider-vertical-container-width);
+  width: var(--wt-slider-height);
   transform: var(--wt-slider-vertical-container-translation);
 
   .wt-slider__wrapper {
     transform: var(--wt-slider-vertical-transform);
     transform-origin: var(--wt-slider-vertical-transform-origin);
-
-    .wt-slider__slider {
-      margin: 0;
-    }
   }
 }
 </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/components/molecules/wt-slider/_variables.scss

@@ -1,14 +1,14 @@
 
 :root {
-  --wt-slider-box-sizing: border-box;
+  --wt-slider-pointer-size: 16px;
+  --wt-slider-height: var(--wt-slider-pointer-size);
+
   --wt-slider-width: 100%;
-  --wt-slider-height: 8px;
+  --wt-slider-input-height: 8px;
   --wt-slider-border: 1px solid var(--secondary-color);
 
-  --wt-slider-pointer-size: 16px;
   --wt-slider-pointer-radius: 50%;
 
-  --wt-slider-vertical-container-width: 20px;
   --wt-slider-vertical-container-translation: translate(2px);
   --wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
   --wt-slider-vertical-transform-origin: 100% 0;

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
 }