@webitel/ui-sdk 1.0.13 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.13",
+  "version": "1.0.17",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

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,7 +1,7 @@
 
 :root {
-  --chip-padding: var(--spacing-2xs) var(--spacing-xs);
+  --chip-padding: var(--spacing-3xs) var(--spacing-sm);
   --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

@@ -65,7 +65,7 @@
     size: 12px;
     weight: 400;
   }
-  line-height: 20px;
+  line-height: 16px;
   //letter-spacing: 0.16px; // 0.01em
 }