@webitel/ui-sdk 1.0.14 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.14",
+  "version": "1.0.18",
   "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/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-button/_variables.scss

@@ -28,7 +28,7 @@
   --btn-secondary--hover-color: hsla(var(--_secondary-color), var(--_opacity--hover));
 
   --btn-disabled-font-color: var(--secondary-color-50);
-  --btn-disabled-color: hsla(var(--_secondary-color-hue), 15%, 80%, var(--_opacity--active));
+  --btn-disabled-color: hsla(var(--_secondary-color-hue), 15%, 75%, var(--_opacity--active));
 
   --btn-true-color: var(--true-color);
   --btn-true--hover-color: var(--true--hover-color);

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/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
 }