@webitel/ui-sdk 0.9.65 → 1.0.2

package/src/components/molecules/wt-select/wt-select.vue

@@ -79,8 +79,7 @@
           class="wt-select__clear"
           :class="{ 'hidden': !isValue }"
           :disabled="disabled"
-          icon="close--filled"
-          size="sm"
+          icon="close"
           @click="clearValue"
         ></wt-icon-btn>
       </template>
@@ -276,7 +275,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~vue-multiselect/dist/vue-multiselect.min.css';
-@import '../../../css/components/atoms/wt-badge/wt-badge';
+@import '../../../css/components/atoms/wt-chip/wt-chip';
 
 .wt-select {
   width: 100%;
@@ -284,9 +283,6 @@ export default {
 }
 
 .wt-label {
-  margin-bottom: var(--label-margin);
-  cursor: text;
-
   .wt-select:hover &,
   .wt-select:focus-within & {
     color: var(--form-label--hover-color);
@@ -328,25 +324,30 @@ export default {
 
       .multiselect__input,
       .multiselect__single {
-        @extend %typo-body-lg;
+        @extend %typo-body-1;
+        @include wt-placeholder;
         min-height: var(--select-input-min-height); // reset original 20px style
         padding: 0;
         margin: 0;
         background: transparent;
       }
 
+      .multiselect__input:focus {
+        @include wt-placeholder('focus');
+      }
+
       .multiselect__strong {
-        @extend %typo-body-lg;
-        @extend .wt-badge;
+        @extend %typo-body-1;
+        @extend .wt-chip;
         position: absolute;
-        right: var(--select-badge-right-pos);
+        right: var(--select-chip-right-pos);
         min-height: var(--select-input-min-height); // reset original 20px style
         margin: 0;
         font-weight: normal;
-        z-index: var(--select-badge-z-index);
+        z-index: var(--select-chip-z-index);
 
-        /* these before-after elements are fixing issue when badge is visually overflown by
-        selected option name (yep, badge has z-index, but its background has 0.3 opacity)*/
+        /* these before-after elements are fixing issue when chip is visually overflown by
+        selected option name (yep, chip has z-index, but its background has 0.3 opacity)*/
         &:before {
           content: '';
           position: absolute;
@@ -354,19 +355,19 @@ export default {
           right: 0;
           bottom: 0;
           left: 0;
-          z-index: -2; // below badge itself
+          z-index: -2; // below chip itself
           background: var(--main-color);
         }
 
         &:after {
-          @extend .wt-badge;
+          @extend .wt-chip;
           content: '';
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
-          z-index: -1; // below badge itself
+          z-index: -1; // below chip itself
 
         }
       }
@@ -376,7 +377,7 @@ export default {
       }
 
       .multiselect__custom-tag, .multiselect__single-label {
-        @extend %typo-body-lg;
+        @extend %typo-body-1;
         color: var(--form-input-color);
 
         // text overflow 3 dots
@@ -387,9 +388,9 @@ export default {
       }
 
       .multiselect__placeholder {
+        @extend %wt-placeholder;
         padding: 0;
         margin: 0;
-        color: var(--form-placeholder-color);
 
         // text overflow 3 dots
         white-space: nowrap;
@@ -406,11 +407,11 @@ export default {
       transition: var(--transition);
 
       .multiselect__option {
-        @extend %typo-body-lg;
+        @extend %typo-body-1;
         padding: var(--select-options-padding);
 
         & > span {
-          color: var(--form-placeholder-color);
+          @extend %wt-placeholder;
         }
 
         &:after {
@@ -418,7 +419,7 @@ export default {
         }
 
         &--highlight {
-          background: var(--select-option--hover-color);
+          background: var(--т, еselect-option--hover-color);
 
           & > span {
             color: var(--form-input-color);
@@ -459,10 +460,6 @@ export default {
       .multiselect__tags {
         border-color: var(--form-border--hover-color);
       }
-
-      .multiselect__placeholder {
-        color: var(--form-placeholder--hover-color);
-      }
     }
   }
 
@@ -485,7 +482,7 @@ export default {
         }
 
         .multiselect__placeholder {
-          color: var(--form-placeholder--active-color);
+          @extend %wt-placeholder--focus;
         }
       }
     }
@@ -532,7 +529,8 @@ export default {
         border-color: var(--form-border--disabled-color);
 
         .multiselect__placeholder {
-          color: var(--form-placeholder--disabled-color);
+          @extend %wt-placeholder--disabled;
+          //color: var(--form-placeholder--disabled-color);
         }
       }
     }
@@ -546,7 +544,7 @@ export default {
     }
 
     .multiselect__strong {
-      right: var(--select-badge-right-pos--clearable);
+      right: var(--select-chip-right-pos--clearable);
     }
   }
 }

package/src/components/molecules/wt-tabs/wt-tabs.vue

@@ -12,7 +12,7 @@
       @click="open(tab)"
     >
       <slot :name="tab.value" v-bind="{ tab, current }">
-        {{tab.text}}
+        <span style="display: block;">{{ tab.text }}</span>
       </slot>
     </button>
 
@@ -75,10 +75,10 @@
   }
 
   .wt-tab {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
     position: relative;
     display: inline-block;
-    padding: var(--tab-padding);
+    padding-bottom: var(--tab-padding);
     margin: var(--tab-margin);
     color: var(--tab-color);
     background: transparent;
@@ -92,36 +92,24 @@
 
     &:hover,
     &:focus, {
-      @extend %typo-strong-lg;
       color: var(--tab--hover-color);
+      border-bottom-color: var(--tab--active-border-color);
     }
 
     &.wt-tab--highlight {
-      @extend %typo-strong-lg;
       color: var(--tab--active-color);
       border-bottom-color: var(--tab--active-border-color);
     }
 
-    // disables bold font resize on hover
+    //// disables bold font resize on hover
     &:after {
       display: block;
       content: attr(value);
-      font-family: 'Montserrat Semi', monospace;
+      font-weight: bold;
       height: 0;
       overflow: hidden;
       visibility: hidden;
     }
   }
 
-  // all tabs underline
-  .wt-tabs__underline {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: var(--tabs-underiline-height);
-    background: var(--tabs-underiline-color);
-    z-index: 0;
-  }
-
 </style>

package/src/components/molecules/wt-tags-input/wt-tags-input.vue

@@ -147,20 +147,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../css/components/atoms/wt-chip/wt-chip';
+
 .wt-tags-input {
   width: 100%;
 }
 
-.wt-label {
-  margin-bottom: var(--label-margin);
-  cursor: text;
-
-  .wt-tags-input:hover &,
-  .wt-tags-input:focus-within & {
-    color: var(--form-label--hover-color);
-  }
-}
-
 // increase specificity
 .wt-tags-input .wt-tags-input__tags-input {
   width: 100%;
@@ -179,6 +171,7 @@ export default {
       .ti-tags {
         display: flex;
         align-items: center;
+        gap: var(--tags-input-tags-gap);
         padding: var(--tags-input-padding);
         margin: 0; // reset default
         word-break: break-word; //break long word
@@ -190,23 +183,17 @@ export default {
       }
 
       .ti-new-tag-input {
-        @extend %typo-body-lg;
-        border-radius: var(--border-radius);
+        @extend %typo-body-1;
+        @include wt-placeholder;
 
-        &::placeholder {
-          @extend %typo-body-lg;
-          color: var(--form-placeholder-color);
-        }
+        border-radius: var(--border-radius);
       }
 
       .ti-tag {
-        @extend %typo-body-lg;
+        @extend .wt-chip;
+        display: flex;
         height: fit-content;
-        padding: var(--tags-input-padding);
-        margin: 0 var(--tags-input-tag-spacing-margin) var(--tags-input-tag-spacing-margin) 0;  // reset default
-        color: var(--tags-input-tag-text-color);
-        background: var(--tags-input-tag-bg-color);
-        border-radius: var(--tags-input-tag-border-radius);
+        margin: 0;  // reset default
         transition: var(--transition);
 
         .ti-actions {
@@ -237,7 +224,7 @@ export default {
         background: transparent; // reset default
 
         & > div {
-          @extend %typo-body-lg;
+          @extend %typo-body-1;
           padding: var(--tags-input-autocomplete-option-padding);
           color: var(--tags-input-autocomplete-option--text-color);
           transition: var(--transition);
@@ -252,6 +239,27 @@ export default {
   }
 }
 
+.wt-tags-input:hover,
+.wt-tags-input:focus-within {
+  .wt-label {
+    color: var(--form-label--hover-color);
+  }
+
+  .wt-tags-input__tags-input ::v-deep {
+    .ti-new-tag-input {
+      border-color: var(--form-border--hover-color);
+    }
+  }
+}
+
+.wt-tags-input:focus-within {
+  .wt-tags-input__tags-input ::v-deep {
+    .ti-new-tag-input {
+      @include wt-placeholder('focus');
+    }
+  }
+}
+
 .wt-tags-input--invalid,
 .wt-tags-input--invalid:hover,
 .wt-tags-input--invalid:focus-within, {
@@ -269,8 +277,6 @@ export default {
 }
 
 .wt-tags-input--disabled {
-  pointer-events: none;
-
   .wt-tags-input__tags-input {
     width: 100%;
     max-width: 100%; // reset default

package/src/components/molecules/wt-textarea/wt-textarea.vue

@@ -119,9 +119,6 @@
   }
 
   .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
     .wt-textarea:hover &,
     .wt-textarea:focus-within & {
       color: var(--form-label--hover-color);
@@ -140,7 +137,8 @@
   }
 
   .wt-textarea__textarea {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
+    @include wt-placeholder;
 
     display: block;
     width: 100%;
@@ -154,26 +152,17 @@
     transition: var(--transition);
     resize: none;
 
-    &::placeholder {
-      color: var(--form-placeholder-color)
-    }
-
-    .wt-textarea:hover &,
     &:focus {
-      border-color: var(--form-border--hover-color);
+      @include wt-placeholder('focus');
 
-      &::placeholder {
-        color: var(--form-placeholder--hover-color)
-      }
+      border-color: var(--form-border--hover-color);
     }
 
     .wt-textarea--disabled & {
+      @include wt-placeholder('disabled');
+
       background: var(--form-border--disabled-color);
       border-color: var(--form-border--disabled-color);
-
-      &::placeholder {
-        color: var(--form-placeholder--disabled-color);
-      }
     }
   }
 

package/src/components/molecules/wt-time-input/wt-time-input.vue

@@ -137,8 +137,6 @@ import validationMixin from '../../../mixins/validationMixin/validationMixin';
 
   .wt-label {
     text-align: center;
-    margin-bottom: var(--label-margin);
-    cursor: text;
 
     .wt-time-input:hover &,
     .wt-time-input:focus-within & {
@@ -152,7 +150,7 @@ import validationMixin from '../../../mixins/validationMixin/validationMixin';
   }
 
   .wt-time-input__input {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
 
     display: block;
     width: 100%;

package/src/components/molecules/wt-timepicker/wt-timepicker.vue

@@ -146,9 +146,6 @@ export default {
 }
 
 .wt-label {
-  margin-bottom: var(--label-margin);
-  cursor: text;
-
   .wt-timepicker:hover &,
   .wt-timepicker:focus-within & {
     color: var(--form-label--hover-color);

package/src/components/organisms/wt-app-header/wt-app-header.vue

@@ -15,6 +15,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    gap: var(--wt-app-header-content-gap);
     min-height: var(--wt-app-header-min-height); // fixed height because anything can be put inside slot, so padding won't work properly
     padding: var(--wt-app-header-padding);
     box-sizing: border-box;

package/src/components/organisms/wt-app-header/wt-app-navigator.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="wt-app-navigator" v-clickaway="close">
+  <div v-clickaway="close" class="wt-app-navigator">
     <wt-icon-btn
-      class="wt-app-navigator__btn"
       :class="{'active': isOpened}"
       :tooltip="$t('webitelUI.appNavigator.title')"
+      class="wt-app-navigator__btn"
       icon="app-navigator"
       @click="isOpened = !isOpened"
     ></wt-icon-btn>
     <transition name="fade">
       <nav
-        class="wt-app-navigator__nav-wrapper"
         v-show="isOpened"
+        class="wt-app-navigator__nav-wrapper"
       >
         <h3 class="wt-app-navigator__nav-title">
           {{ $t('webitelUI.appNavigator.title') }}
@@ -19,114 +19,114 @@
 
           <li
             v-if="formattedApps[WebitelApplications.AGENT]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.AGENT].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.AGENT].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AGENT]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.AGENT]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
-                :alt="`${[WebitelApplications.AGENT]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="formattedApps[WebitelApplications.SUPERVISOR]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.SUPERVISOR].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.SUPERVISOR].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.SUPERVISOR]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
-                :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="formattedApps[WebitelApplications.HISTORY]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.HISTORY].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.HISTORY].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.HISTORY]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.HISTORY]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
-                :alt="`${[WebitelApplications.HISTORY]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="false && formattedApps[WebitelApplications.AUDIT]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.AUDIT].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.AUDIT].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AUDIT]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.AUDIT]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
-                :alt="`${[WebitelApplications.AUDIT]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="formattedApps[WebitelApplications.ADMIN]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.ADMIN].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.ADMIN].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ADMIN]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.ADMIN]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
-                :alt="`${[WebitelApplications.ADMIN]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="formattedApps[WebitelApplications.ANALYTICS]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.ANALYTICS].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.ANALYTICS].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ANALYTICS]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
-                :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
               >
             </a>
           </li>
@@ -180,10 +180,9 @@ export default {
 <style lang="scss" scoped>
 .wt-app-navigator {
   position: relative;
+  z-index: var(--wt-app-header-content-z-index);
   display: flex;
   align-items: center;
-  margin-left: var(--wt-app-header-content-gap);
-  z-index: var(--wt-app-header-content-z-index);
 }
 
 // dropdown part
@@ -192,38 +191,38 @@ export default {
   position: absolute;
   top: 100%; // icon
   right: 0;
+  overflow: auto;
   max-height: var(--wt-app-navigator-max-height);
-  padding: var(--wt-app-header-content-gap);
   margin-top: var(--wt-app-header-content-panel-margin);
-  background: var(--wt-app-header-content-bg-color);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
+  padding: var(--wt-app-header-content-gap);
   transition: var(--transition);
-  overflow: auto;
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--elevation-1);
 }
 
 .wt-app-navigator__nav-title {
-  @extend %typo-strong-lg;
+  @extend %typo-subtitle-1;
+  margin-bottom: var(--wt-app-header-content-gap);
   text-align: center;
   text-transform: uppercase;
-  margin-bottom: var(--wt-app-header-content-gap);
 }
 
 // ul with li apps
 .wt-app-navigator__nav {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: var(--wt-app-header-content-gap);
+  grid-gap: var(--wt-app-navigator-item-gap);
 }
 
 .wt-app-navigator__card {
+  box-sizing: border-box;
   width: var(--wt-app-navigator-item-size);
   height: var(--wt-app-navigator-item-size);
-  box-sizing: border-box;
+  transition: var(--transition);
   border: var(--wt-app-navigator-item-border);
   border-color: var(--wt-app-navigator-item-border-color);
   border-radius: var(--border-radius);
-  transition: var(--transition);
 
   &.active, &:hover {
     border-color: var(--wt-app-navigator-item-border-color--hover);